Was ist DESIGN.md? Die Design-Datei, die KI-Coding-Agenten lesen (mit kostenlosen Beispielen für mobile Apps)

DESIGN.md ist eine Markdown-Datei, die die visuelle Identität eines Produkts für KI-Coding-Agenten beschreibt. Das Format von Google Labs kombiniert optionale YAML-Design-Tokens mit schriftlichen Anleitungen zu deren Verwendung. Es gibt einem Agenten konkrete Regeln für Farben, Typografie, Abstände und Komponenten an die Hand, die dieser vor dem Generieren eines Interfaces liest.

Für Entwickler mobiler Apps besteht der Hauptvorteil darin, diese Gestaltungsentscheidungen auf den nächsten Screen zu übertragen. Starten Sie mit einer Datei aus unserer kostenlosen DESIGN.md-Bibliothek für mobile Apps, prüfen Sie die dazugehörigen Screens und passen Sie die Regeln an Ihre App an.

Wer hat DESIGN.md entwickelt?

Google Labs veröffentlicht das von Stitch verwendete DESIGN.md-Format. Google führte den Import und Export von DESIGN.md in seiner Ankündigung zu Stitch im März 2026 ein und stellte den Spezifikationsentwurf im April als Open Source zur Verfügung. Das offizielle Repository bezeichnet das Format nach wie vor als Alpha-Version. Prüfen Sie daher die aktuelle Spezifikation, wenn Sie eine Integration entwickeln.

Eine Datei namens DESIGN.md kann auch ein ganz gewöhnliches Projektdokument sein. Wenn Sie eine solche Datei teilen, geben Sie an, welches Format sie nutzt, und halten Sie den Rohtext zur Einsicht bereit.

Was gehört in eine DESIGN.md-Datei?

Die Spezifikation von Google Labs beschreibt einen Markdown-Body mit optionalem YAML-Frontmatter. Token-Gruppen decken Farben, Typografie, abgerundete Ecken, Abstände und Komponenten ab. Der Body erläutert Entscheidungen wie die Platzierung von Akzentfarben oder die Unterscheidung zwischen Buttons und Cards. Exakte Werte und schriftliche Anleitungen erfüllen dabei unterschiedliche Aufgaben.

Die Spezifikation akzeptiert CSS-Farbstrings einschließlich Hex-Werten. Setzen Sie Hex-Farben in YAML in Anführungszeichen: Ein Rautezeichen ohne Anführungszeichen startet einen Kommentar. Eine Referenz wie {colors.primary} verweist auf ein anderes Token in der Datei. Die Bibliothek von Sleek zeigt Hex-Farbfelder neben dem Originaltext an, sodass Sie die Palette vor dem Herunterladen überprüfen können.

Wie sieht ein minimales DESIGN.md-Beispiel aus?

Ein Einsteiger-DESIGN.md kann ein kleines visuelles System beschreiben: eine Palette, einen Fließtextstil, einen Abstandswert und einen Button. Das folgende Beispiel wurde für diesen Leitfaden erstellt. Speichern Sie es als DESIGN.md und ergänzen Sie Regeln, sobald Ihre mobile App diese benötigt. Es ist ein Ausgangspunkt, keine fertige Komponentenbibliothek.

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

Überprüfen Sie Ihre eigenen Ergänzungen mit dem Lint-Befehl des Repositorys. Dessen Ergebnisse helfen Ihnen dabei, fehlerhafte Referenzen und Kontrastprobleme bei Farbpaaren aufzudecken. Prüfen Sie dennoch den gerenderten Screen: Eine Textdatei kann Ihnen weder abgeschnittenen Text noch ein verwirrendes Bedienelement oder eine Tastatur anzeigen, die ein Formular verdeckt.

npx @google/design.md lint DESIGN.md

Wie verwendet man DESIGN.md mit Claude Code?

Legen Sie DESIGN.md in Ihrem Projekt ab und bitten Sie Claude Code, die Datei für UI-Aufgaben zu lesen. Die Dokumentation zur Memory-Funktion von Anthropic erklärt, dass CLAUDE.md-Importe beim Sitzungsstart geladen werden. Verwenden Sie für das Lesen bei Bedarf einen einfachen Pfadverweis oder eine Regel in .claude/rules/ mit paths-Mustern, die zu Ihren UI-Dateien passen.

Fügen Sie beispielsweise diese Anweisung ohne @-Import in CLAUDE.md ein:

For UI tasks, read DESIGN.md before creating or changing app screens.

Fordern Sie anschließend einen spezifischen Screen und dessen Zustände an. Bitten Sie beispielsweise um eine Aufgabenliste mit einer Ansicht ohne Einträge und einer Fehlermeldung bei gescheiterter Synchronisation. Überprüfen Sie, ob die generierte Benutzeroberfläche den Werten der Datei folgt, und aktualisieren Sie die Datei, wenn Sie das Design gezielt ändern. Unser Leitfaden zum Designen mit Claude behandelt den gesamten Workflow ausführlicher.

Wie verwendet man DESIGN.md mit Cursor oder Stitch?

Hängen Sie DESIGN.md in Cursor explizit an Ihren Task an oder verweisen Sie darauf in einer Projektregel. Nutzen Sie in Stitch den Import- und Export-Workflow für DESIGN.md, um Designregeln zwischen Projekten zu übertragen. Dieser Unterschied ist wichtig: Ein Coding-Agent benötigt die Datei in seinem Kontext, während Stitch einen um das Format herum aufgebauten Workflow bietet.

Für Cursor erklärt die Dokumentation zu Rules Projektregeln und Dateireferenzen. Eine Regel kann den Agenten anweisen, DESIGN.md bei UI-Änderungen zu lesen. Legen Sie fest, wann die Regel gilt, damit unbeteiligte Backend-Tasks nicht unnötig ein langes Design-Dokument mitführen.

Für Stitch bestätigt die DESIGN.md-Ankündigung von Google, dass Sie Designregeln zwischen Projekten importieren und exportieren können. Vergleichen Sie nach dem Importieren einen generierten Screen mit der Vorlage und passen Sie die Regeln bei Bedarf an.

Wie nutzt Sleek DESIGN.md für Stile mobiler Apps?

Sleek hinterlegt zu jeder anpassbaren Referenz eine eigene Design-Datei. Wenn Sie „Diesen Stil nutzen“ wählen und Ihre App beschreiben, übergibt Sleek diese Datei zusammen mit Ihrem Briefing an den Generierungsprozess. Die Datei beschreibt die Ästhetik; Ihr Briefing bestimmt Zweck und Inhalt der App. Sie können vorab sowohl die Screens als auch die Datei überprüfen.

Die Referenz-Galerie und die DESIGN.md-Bibliothek greifen auf dieselben ausgewählten Projekte zurück. Sleek nutzt die Struktur von Google Labs und ergänzt Komponenteneigenschaften wie Rahmen und Schatten, die der Linter als Warnungen meldet. Dazu kommen Anleitungen für Icon-Design, Illustrationen, Hierarchie und markante visuelle Details. Die Stil-Datei hält visuelle Entscheidungen für die Generierung einer neuen App fest.

Öffnen Sie einen Stil in der Bibliothek, um dessen DESIGN.md-Datei zu kopieren oder herunterzuladen, oder wählen Sie Use this style in Sleek, um Ihre App-Idee einzugeben. Wenn Sie Sleek direkt aus Ihrer Coding-Umgebung heraus steuern möchten, erklärt der Leitfaden zur Agenten-Einrichtung diese separate Integration.

Häufige Fragen zu DESIGN.md