DESIGN.md Generator
KI-fähige DESIGN.md-Dateien für Google Stitch, Claude Code, Cursor und Copilot erstellen — Farben, Typografie, Abstände und Komponenten für KI-Tools definieren.
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
Project Basics
Name your project and describe its overall visual intent.
Describe the intended visual feel. AI agents use this to set the tone.
So funktioniert's
9 Schritte im Assistenten, fertige Datei in wenigen Minuten
1. Projekt und Farbpalette festlegen
Name, Tagline, visuelle Stimmung in natürlicher Sprache sowie Farben nach semantischer Rolle (primary, error, success) für Hell- und Dunkelmodus.
2. Typografie, Layout und Komponenten einstellen
Schriftarten, modulare Schriftgrößen-Skala, Abstände, Rundungen, Schatten und Button-Varianten — jeweils mit sinnvollen Voreinstellungen.
3. Herunterladen und ins Repo legen
Die fertige DESIGN.md kopieren oder herunterladen und im Projekt-Root ablegen, damit Claude Code, Cursor oder Copilot sie als Kontext lesen.
Was der Generator kann
Alle 9 Abschnitte der offiziellen Spezifikation, ohne den Aufbau auswendig zu lernen
Geführter Schritt-für-Schritt-Assistent
Füllt die 9 Abschnitte der Apache-2.0-Spezifikation mit Feldern und Presets aus, ganz ohne Markdown von Hand zu schreiben.
Farben nach semantischer Rolle
Primary, surface, error, success für Hell- und Dunkelmodus — keine lose Liste aus Hex-Codes ohne Kontext.
Modulare Schriftgrößen-Skala
Minor Third, Perfect Fourth, Golden Ratio: Schriftgrößen werden nach einem mathematischen Verhältnis berechnet, nicht nach Bauchgefühl.
Barrierefreiheit von Anfang an dabei
Ziel-WCAG-Stufe, Mindestkontraste, Fokus-Farbe und Mindestgröße für Touch-Ziele landen direkt in der Datei, statt später nachgereicht zu werden.
Live-Vorschau
Ein Dashboard mit Navigation, Karten, Buttons, Formular und Hinweismeldungen wird mit den echten Farben und Schriften gerendert, bevor du exportierst.
Mehrere Themes und Farb-Presets
Lege eigene benannte Paletten an, benenne sie um oder wechsle zwischen ihnen, und lade Presets wie Ocean oder Forest in jedes davon.
Die 9 Abschnitte der Datei
Wann sich das Tool lohnt
Die häufigsten Situationen bei Teams, die mit KI-Agenten arbeiten
Neues Projekt mit KI starten
Die DESIGN.md vor der ersten Komponente ins Root legen — dann folgt jede generierte Oberfläche von Anfang an deinen Regeln.
Nicht mehr dieselbe Spezifikation in jedem Prompt wiederholen
Primärfarbe, Schriftart und Border-Radius einmal festhalten, statt sie bei jeder neuen Anfrage erneut zu tippen.
Workflows mit Google Stitch
Tokens aus Figma in die DESIGN.md exportieren, damit jede Stitch-Generierung zum bestehenden System passt.
Zwischen KI-Tools wechseln, ohne Konsistenz zu verlieren
Die DESIGN.md wandert mit dem Projekt mit, egal ob gerade Cursor, GitHub Copilot oder Claude Code zum Einsatz kommt.
Kontrast vor der Übergabe prüfen
Der eingebaute Lint-Tab berechnet den WCAG-Kontrastwert jedes Farbpaares und verlinkt direkt zu dem Schritt, der korrigiert werden muss.
Mehrere Marken oder Themes parallel pflegen
Eigenständige, benannte Themes (z. B. Light und eine Markenvariante) in derselben Datei verwalten, ohne den Assistenten doppelt durchzugehen.
Häufige Fehler
Denken, es ersetzt Figma
Beide ergänzen sich: Die DESIGN.md liefert Spezifikation und KI-Kontext, Figma bleibt der Ort für visuelle Zusammenarbeit im Team.
Den Abschnitt Barrierefreiheit überspringen
Ohne festgelegten Mindestkontrast und WCAG-Zielwert hat der KI-Agent keinerlei Vorgabe, um zugängliche Oberflächen zu erzeugen.
Es mit Design Tokens verwechseln
Die DESIGN.md geht über Tokens hinaus — sie enthält visuelle Absicht in natürlicher Sprache und Komponenten-Muster, nicht nur benannte Werte.
Hinweise im Lint-Tab ignorieren
Der Lint berechnet den echten Kontrast nach WCAG AA und markiert durchfallende Farbpaare — ein ignoriertes ERR bedeutet, dass die KI Tokens bekommt, die sie später falsch einsetzt.
Themes mit Dark Mode verwechseln
Benannte Themes sind eigenständige Paletten (z. B. Light oder eine Markenvariante); Dark Mode ist ein separater Block aus Overrides — beides ersetzt sich nicht gegenseitig.
Warum dieser Generator
Der Assistent führt durch alle 9 Abschnitte der offiziellen Spezifikation mit sinnvollen Standardwerten, statt dass du das Markdown von Grund auf selbst schreibst.
Er ist nativ mit Google Stitch kompatibel und funktioniert als Kontextdatei für Claude Code, Cursor und GitHub Copilot — alle lesen Dateien im Projekt-Root automatisch ein.
Ohne eine solche Datei entscheidet jeder neue KI-Prompt willkürlich neu über Farbe, Schrift und Abstand. Mit fertiger DESIGN.md behandelt der Agent die Spezifikation als feste Vorgabe und wendet dieselben Regeln bei jeder folgenden Generierung an — nicht nur beim ersten Mal.
DESIGN.md vs. README.md vs. Design Tokens
Sich ergänzende Formate mit unterschiedlichem Zweck
Häufig gestellte Fragen
Eine Markdown-Datei, die die visuellen Regeln eines Projekts — Farben, Typografie, Abstände und Komponenten — in strukturierter Form speichert, damit KI-Agenten sie lesen und befolgen können. Entstanden bei Google Labs für Stitch, veröffentlicht als Open Source unter Apache 2.0.
Weiterführende Links
Offizielle Dokumentation der DESIGN.md-Spezifikation, gepflegt von Google Labs.
Die Open-Source-Lizenz, unter der die DESIGN.md-Spezifikation veröffentlicht ist.
Deutsches Gesetz zur digitalen Barrierefreiheit, das WCAG-Konformität für viele Produkte und Websites verbindlich macht.
Verwandter Artikel
Como documentar projetos no GitHub: o README que importa
Verwandte Tools
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
