DESIGN.md: So definieren Sie Designsysteme für KI-Agenten

KI-Codeassistenten generieren oft generische Benutzeroberflächen – es sei denn, Sie geben ihnen klare Anweisungen. DESIGN.md von Google Labs ist ein offenes Format, das Entwicklern ermöglicht, ihre Designsysteme in einer für KI-Agenten lesbaren Form zu dokumentieren. Es kombiniert maschinenlesbare Design-Tokens mit menschenlesbaren Erklärungen, sodass KI-Tools Benutzeroberflächen erstellen, die Ihrer Markenidentität entsprechen – und nicht auf Standardlösungen zurückgreifen.

Warum DESIGN.md für KI-Agenten unverzichtbar ist

Ohne klare Vorgaben greifen KI-Agenten auf die häufigsten Muster aus ihrem Trainingsmaterial zurück: Standardfarben, Default-Schriftarten und willkürliche Abstände. Die Folge sind Oberflächen, die zwar technisch funktionieren, aber nicht Ihre Marke widerspiegeln. DESIGN.md eliminiert diesen manuellen Aufwand. Statt jedes Mal aufs Neue Ihre Designrichtlinien zu erklären, definieren Sie diese einmalig in einer Datei, die der Agent vor der Codegenerierung ausliest.

Einfache Integration ohne technischen Aufwand

Die Datei DESIGN.md wird direkt im Root-Verzeichnis Ihres Projekts platziert. Da es sich um eine gewöhnliche Markdown-Datei mit YAML-Frontmatter handelt, sind keine zusätzlichen Tools oder Build-Prozesse nötig. Der Agent liest die Datei unverändert und verwendet die enthaltenen Informationen für jede Interaktion – ein Ansatz, der sich nahtlos in bestehende Workflows einfügt.

Die zwei Kernkomponenten des Formats

DESIGN.md besteht aus zwei Teilen:

• YAML-Frontmatter: Enthält präzise Design-Tokens wie Farbcodes, Schriftarten und Größenangaben. Diese Daten werden direkt von der KI verarbeitet, um konsistente visuelle Elemente zu erzeugen.
• Markdown-Beschreibung: Erklärt die Regeln und Hintergründe hinter den Tokens. Beispielsweise, wann bestimmte Farben oder Schriftarten einzusetzen sind.

Ein typischer Ausschnitt aus der Frontmatter könnte so aussehen:

---
name: MyBrand
design:
  colors:
    primary: "#1A1C1E"
    tertiary: "#B8422E"
  typography:
    h1:
      fontFamily: "Public Sans"
      fontSize: "3rem"
---

Die dazugehörige Markdown-Beschreibung definiert dann, wie diese Tokens anzuwenden sind:

Farben

Eine Kombination aus hochkontrastigen Neutraltönen mit einem warmen Akzent. Der Akzent (tertiär) sollte ausschließlich für primäre Handlungsaufforderungen verwendet werden – niemals dekorativ.

Verwandte Formate: CLAUDE.md und AGENTS.md

Wer bereits CLAUDE.md oder AGENTS.md nutzt, wird DESIGN.md als logische Erweiterung erkennen. Während diese Formate Entwicklerkonventionen dokumentieren, konzentriert sich DESIGN.md auf visuelle Systeme. Beide ergänzen sich, ohne sich zu überschneiden, und bieten persistente Kontexte für KI-Agenten.

Häufig gestellte Fragen

• Ist DESIGN.md kostenlos? Ja, das Format und die zugehörigen CLI-Tools sind frei verfügbar.
• Wird eine Build-Pipeline benötigt? Nein. Die Datei wird direkt vom Agenten gelesen.
• Welche KI-Tools unterstützen DESIGN.md? Aktuell funktioniert es mit Agenten, die persistente Kontexte nutzen, etwa Claude Code, Cursor, Kiro und Windsurf.

Ein kleiner Aufwand mit großer Wirkung

DESIGN.md erfordert nur eine einmalige Investition: Sie definieren Ihr Designsystem in einer einzigen Datei. Jede von einem KI-Agenten generierte Benutzeroberfläche basiert dann auf Ihrer Markenidentität – statt auf generischen Lösungen. Besonders für Teams, die bereits mit Designsystemen arbeiten, ist dies ein natürlicher nächster Schritt, um KI-gestützte Entwicklung zu optimieren.

Für den Einstieg: Ein kostenloses Cheat Sheet mit einer vollständigen Beispiel-Datei und grundlegenden Erklärungen steht auf der PromptMaster Store-Seite zum Download bereit.

Für Fortgeschrittene: Das vollständige Handbuch vertieft alle Aspekte des Formats – von der Token-Struktur über CLI-Integration bis hin zu Barrierefreiheit und Exportmöglichkeiten für Tools wie Tailwind oder DTCG. Verfügbar auf der PromptMaster Store-Seite.

Nutzen Sie DESIGN.md bereits? Oder gehören Sie noch zu denjenigen, die ihren KI-Agenten in jeder Session aufs Neue erklären müssen, wie Ihre Marke aussieht? Teilen Sie Ihre Erfahrungen in den Kommentaren.