Was ist Design.md und wie man es verwendet (mit Beispielen)

Was ist Design.md?

Design MD ist eine Markdown-Datei, die alle visuellen Regeln festhält, an die sich KI-Coding-Agents oder KI-Builder halten müssen, um konsistente Benutzeroberflächen zu erstellen – inklusive Farben, Typografie, Abständen und Komponenten-Mustern.

Statt einem Agenten wie Claude oder Cursor vage Anweisungen wie "mach es modern und clean" zu geben, legst du einfach eine design.md-Datei in das Root-Verzeichnis deines Projekts. Die Agents greifen darauf zu und wenden deine exakten Styles automatisch auf alles an, was sie designen.

Top KI-App-Builder von 2026 >

Wer hat Design.md erfunden?

Ähnlich wie bei agents.md begann die Vibe-Coding-Community damit, stilistische Vorlieben in eine eigene MD-Instruktionsdatei auszulagern.

Im März 2026 integrierte Google dies als Teil seines neuen KI-Design-Tools, Google Stitch. Stitch nutzt die Datei, um sicherzustellen, dass jeder generierte Screen und jede Komponente einer konsistenten visuellen Sprache folgt.

Google ist zwar nicht der Schöpfer, hat aber den ersten Vorschlag zur "Standardisierung" gemacht, was in welcher Reihenfolge enthalten sein sollte.

Ist Google Stitch 2026 wirklich kostenlos? >

Struktur einer Design.md: Beispiel

Es gibt keine festen Regeln für die Struktur einer design.md, aber normalerweise ist die Datei in klare Abschnitte unterteilt, die die visuellen Grundbausteine eines Projekts definieren.

• Farben: Primärpaletten, neutrale Skalen und semantische Farben (Erfolg, Warnung, Fehler) mit exakten Hex-Codes und Nutzungsrichtlinien.

• Typografie: Schriftfamilien, Schriftgrößenskalen, Schriftschnitte und Zeilenhöhen für Überschriften und Fließtext.

• Abstände: Die Basiseinheit (meist 4px oder 8px) und die Skalenwerte für Padding, Margins und Gaps.

• Komponenten: Spezifische Styling-Regeln für gängige Elemente wie Buttons, Inputs und Cards, inklusive Eckenradien und Rahmenstilen.

• Ebenen (Elevation): Schattenwerte und Tiefeneffekte für mehrschichtige Interfaces.

Hier ist ein minimales Praxisbeispiel für die Datei:

## Farben
- **Primär** (#1A73E8): Hauptmarkenfarbe für Buttons und Links
- **Hintergrund** (#FFFFFF): Seitenhintergrund
- **Oberfläche** (#F8F9FA): Karten und hervorgehobene Elemente
- **Text Primär** (#202124): Haupttextfarbe
  
## Typografie  
- **Überschrift 1**: Inter, 32px, 700er Gewicht- **Fließtext**: Inter, 16px, 400er Gewicht
  
## Komponenten
- **Buttons**: Primär gefüllt (Hintergrund #1A73E8, weißer Text, 8px Radius)
- **Karten**: Weißer Hintergrund, 1px durchgängiger #E8EAED Rand, 12px Radius

Wie erstellt man eine Design.md-Datei?

Du musst eine DESIGN.md-Datei nicht von Grund auf neu schreiben. Die Community hat bereits umfangreiche Bibliotheken mit einsatzbereiten Design-Systemen aufgebaut.

Awesome-design-md (GitHub-Repo)

Die beliebteste Ressource ist das GitHub-Repository awesome-design-md von VoltAgent. Es enthält eine kuratierte Sammlung von Design.md-Dateien, inspiriert von bekannten entwicklerfokussierten Websites und Tech-Marken.

Du findest dort Dateien, die die exakten Design-Systeme von Brands nachbilden wie:

• Claude: Warme Terrakotta-Akzente mit einem cleanen, redaktionellen Layout

• Vercel: Schwarz-Weiß-Präzision mit der Geist-Schriftart

• Stripe: Markante lila Farbverläufe und elegante Typografie

• Linear: Ultra-minimalistisch, präzise, mit lila Akzenten

• Airbnb: Warme Koralltöne und abgerundete UI-Elemente

DESIGNmd.ai

Eine weitere hervorragende Ressource ist designmd.ai, eine Community-Plattform mit über 100 kostenlosen Design-Systemen. Du kannst nach Tags wie "dark", "saas", "minimal" oder "fintech" filtern und die passende Markdown-Datei direkt herunterladen.

DESIGN.md Generator (Figma-Plugin)

Wenn du in Figma arbeitest, scannt das Plugin DESIGN.md Generator deine Datei und extrahiert Farben, Typografie, Abstände und Komponenten automatisch in eine einsatzbereite Markdown-Datei. Kopiere sie einfach in Claude Code, Cursor oder ein anderes KI-App-Builder-Tool für ein sofortiges Design-System-Hand-off.

Teste einen Design-System-Generator, kostenlos >

Wie verwendet man Design.md?

Die Integration einer DESIGN.md-Datei in deinen Workflow mit KI-Agents ist denkbar einfach.

Die manuelle Methode

1. Lade eine Design.md-Datei aus den oben genannten Quellen herunter oder erstelle deine eigene.

2. Lege die Datei im Root-Verzeichnis deines Projekts ab – direkt neben deinen Dateien agents.md oder claude.md.

3. Wenn du deinen KI-Coding-Agenten (wie Claude Code, Cursor oder Lovable) promptest, weise ihn explizit darauf hin. Zum Beispiel: "Baue eine Pricing-Hand-off-Seite und nutze die Datei @DESIGN.md für alle Design-Entscheidungen".

Die KI-UI-Tool-Methode

Moderne KI-UI-Design-Tools wie Banani AI generieren und aktualisieren design.md-Dateien automatisch im Hintergrund, während du Designs erstellst.

Banani klärt die Design-Styles direkt während des Erstellungsprozesses und nimmt dir die manuelle Arbeit ab. Ändern sich die visuellen Vorlieben des Projekts, wird die Datei on-the-fly aktualisiert, damit du immer eine aktuelle .md-Datei hast.

Zudem kannst du den MCP-Server des Tools nutzen, damit deine Coding-Agents stets Zugriff auf die neueste Version haben.

UI designen mit Banani AI, kostenlos >

Sollte ich design.md nutzen?

Wenn du Benutzeroberflächen mit KI-Agents generierst, ist die Integration einer design.md-Datei einer der effektivsten Hebel überhaupt. Damit löst du auf Schlag ein großes Problem von Vibe Coding und Vibe Designing: den generischen, unordentlichen Einheits-Look, den KI-Agents standardmäßig auswerfen.

Es dauert kaum eine Minute, eine Datei aus dem github-Repo oder per Figma-Plugin herunterzuladen und in dein Projekt einzufügen. Die sofortige Steigerung der UI-Konsistenz ist verblüffend.

Willst du direkt loslegen und nebenbei eine design.md-Datei erstellen, starte mit dem Banani AI UI Generator. Er erstellt ein Design-System direkt auf dem Canvas (als Proxy der Design-MD-Datei), das sich in Echtzeit an deine neueste Version anpasst, editierbar ist und im gesamten App-Design-Projekt referenziert werden kann.

FAQs zur Design.md-Datei

Wie schreibt man eine design.md?

Starte mit einer Markenübersicht, dokumentiere dann Farben (Hex-Codes und Einsatzzweck), Typografie (Fonts, Größen, Gewichte), Abstandsregeln (Basiseinheit) und Komponenten-Styles. Nutze klare Markdown-Überschriften und konkrete Beispiele wie "Primary Button: #1A73E8 Background, weißer Text, 8px Radius".
Das gibt KI-Agents klare Leitlinien statt vager Vorgaben.

Du kannst den Banani AI UI Designer nutzen, um ein Design-System wie eine design.md-Datei zu erstellen.

Wofür steht das MD in design.md?

MD steht für Markdown. Es ist ein einfaches, reines Textformat (.md-Dateiendung), das sich extrem leicht lesen und schreiben lässt. Markdown nutzt einfache Zeichen (wie # für Überschriften, - für Listen), um Inhalte zu strukturieren – perfekt für Dokumente, die KI-Agents schnell parsen und verstehen müssen.

Wie nutzt man design.md in Google Stitch?

Wenn du bereits eine design.md-Datei hast, lade sie idealerweise direkt hoch, wenn du ein neues Projekt in Google Stitch startest. Weise das Tool einfach per Prompt an, die Datei als Referenz zu nutzen. Zum Beispiel: "Generiere Onboarding-UIs für eine HR-App und nutze die Datei @design.md für alle Styling-Entscheidungen."

Stitch liest die Datei aus und wendet deine Regeln für Farben, Schriften und Komponenten automatisch an – für ein konsistentes Design über alle Screens hinweg.