Was eine DESIGN.md ist
Eine DESIGN.md liegt neben dem Code und beschreibt das beabsichtigte Design in Begriffen, nach denen ein Agent handeln kann. Coding-Agenten implementieren UIs gut, aber ohne Art Direction neigen sie dazu, auf einen neutralen Standard-Stil zurückzufallen. Google Labs veröffentlicht nun eine Alpha-Version der DESIGN.md-Spezifikation und eines Validators. Das Format ist aktiv und nützlich, obwohl die Spezifikation noch warnt, dass sie sich ändern kann.
Eine DESIGN.md benötigt mehr als nur eine Farbliste. Agenten brauchen auch Anweisungen zu Layout, Abständen, Component-Styling und den Details, die ein Design vom anderen unterscheiden. Ein nützliches Briefing widmet den meisten Worten genau diesen Entscheidungen.
Was in eine DESIGN.md gehört
Ein vollständiges Briefing deckt das gesamte System ab, nicht nur die Tokens. Die von Identity Forge generierte DESIGN.md ist in diese Abschnitte unterteilt:
- Overview: Was das Design ist, für wen es gedacht ist und das beabsichtigte Gefühl in ein oder zwei Sätzen.
- Colors: Die semantischen Tokens als CSS-Variablen, bereit zum Einfügen in
globals.css, in Light und Dark Mode. Semantische Farb-Tokens erklärt. - Typography: Die Schriftkombination, Skalierung, Laufweite und Schriftschnitte sowie ein fertiges Next.js Font-Setup.
- Layout: Basis-Abstände, Container-Breite und Kompositionsregeln.
- Elevation & Depth: Das Schatten-System (oder das bewusste Fehlen eines solchen).
- Shapes: Eckradien pro Element (Buttons, Cards, Inputs, Badges) und Border-Styling.
- Components: Wie Kern-Komponenten behandelt werden sollten, inklusive eines Beispiels.
- Page Structure & Layout: Wie ganze Seiten zusammengesetzt werden; hier wird verhindert, dass die KI generische Ergebnisse liefert.
- Personality & References: Die Stimme und die Referenzpunkte hinter dem Design.
- Distinctive Motifs: Die charakteristischen Merkmale, die reproduziert werden sollen; "sie definieren das Design genauso sehr wie die Tokens."
- Do's & Don'ts: Die Regeln, die sicherstellen, dass die generierte UI innerhalb der Design-Welt bleibt.
- Agent Rules: Explizite Anweisungen für den Coding-Agenten selbst.
Die Motive und Don'ts sind der entscheidende Punkt
Jeder kann fünf Hex-Codes auflisten. Was ein echtes Design-System von einer umgefärbten Vorlage unterscheidet, ist die schriftliche Absicht: die Motive, die reproduziert werden sollen, und die Fehler, die vermieden werden müssen. Diese Abschnitte sind der Grund, warum eine DESIGN.md das Ergebnis eines Agenten verändert, während eine Farbpalette allein das nicht schafft.
An einem echten System sehen
Eine DESIGN.md ist nur so gut wie das System dahinter. Unten findest du das kostenlose ambient-sage Kit: die Tokens, Fonts und Styles, die seine DESIGN.md beschreibt, live gerendert:
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Eine erstellen (drei Wege)
- 1
CLI: DESIGN.md + Tokens in dein Repo schreiben
Der schnellste Weg. Wähle einen Kit-Slug aus der Gallery und wende ihn an; du erhältst eine committete DESIGN.md plus eine passende Tokens-Datei.
identityforge apply ambient-sage - 2
MCP: Den Agenten die Datei abrufen lassen
Wenn der MCP-Server installiert ist, ruft der Agent
get_design_md(slug)auf, um das vollständige Briefing zu lesen, undapply_theme, um es zu schreiben. Installiere es für dein Tool:npx --yes identityforge@latest install --client claude-code - 3
shadcn: Die von der DESIGN.md referenzierten Tokens installieren
Wenn du nur die Werte möchtest, installiert das Registry-Item die CSS-Variablen des Kits direkt.
npx shadcn add https://identityforge.io/r/ambient-sage.json
Identity Forge generiert die DESIGN.md und die Tokens aus demselben Kit, sodass der Text die Werte im Stylesheet beschreibt. Um zu erfahren, wie sich dies von der manuellen Anpassung eines DESIGN.md-Katalogeintrags unterscheidet, lies Identity Forge vs getdesign.md.
FAQ
Was ist eine DESIGN.md?
Eine DESIGN.md ist eine Markdown-Datei in deinem Repo, die einem KI-Coding-Agenten sagt, wie das Produkt aussehen soll: seine Absicht, Farb- und Typografie-Systeme, Layout- und Abstandsregeln, Component-Styling, markante Motive sowie Do's & Don'ts. Der Agent liest sie vor dem Bau der UI, damit sein Output markenkonform und konsistent bleibt.
Wie generiere ich eine DESIGN.md?
Wende ein Identity Forge Kit an: `identityforge apply <slug>` schreibt eine vollständige DESIGN.md plus die passenden Tokens in dein Projekt. Wenn der MCP-Server installiert ist, kann der Agent sie auch selbst über das Tool `get_design_md` abrufen.
Ist eine DESIGN.md nur eine Liste von Farben?
Nein. Farben sind der einfache Teil. Eine nützliche DESIGN.md widmet die meisten Worte dem Layout, den Abständen, dem Component-Styling, markanten Motiven und den Do's & Don'ts: genau dort, wo KI-generierte UIs tatsächlich generisch werden.
Gibt es eine offizielle DESIGN.md-Spezifikation?
Google Labs veröffentlicht eine Alpha-Version der DESIGN.md-Spezifikation und eines Validators. Identity Forge generiert sein Briefing und seine Tokens aus demselben Design-Kit, wodurch die schriftlichen Regeln fest an die exportierten Werte gebunden bleiben.