Das Problem: KI-generierte UIs sehen alle gleich aus
Frag irgendeinen Coding-Agenten nach einer "Landingpage" und du bekommst das Gleiche: einen Tailwind gray-950 Hero-Bereich, einen violetten Gradienten, Inter als Schriftart und drei Feature-Cards. Es ist kompetent, aber völlig generisch, weil das Modell zwischen den Prompts kein Gedächtnis für deine Marke hat. Fügst du eine zweite Seite hinzu, weicht das Styling ab: anderes Spacing, ein leicht anderes Blau, eine neue Button-Form. Es gibt keine Single Source of Truth für das Aussehen, also fehlt die Konsistenz.
Ein Design-System löst dieses Problem. Wenn der Agent einen Satz semantischer Tokens, ein festes Typografie-Paar und geschriebene Regeln hat, bezieht jeder generierte Screen auf dieselben Variablen, anstatt sie neu zu raten. Das ist der Unterschied zwischen einer Demo und einem echten Produkt.
Ein echtes Design-Kit in der Vorschau
Ein Kit ist ein ganzes System, keine bloße Palette. Unten findest du eine Live-Vorschau des kostenlosen ambient-sage Kits: dieselben Tokens, Schriftarten und Styles, die ein Agent erhält, wenn er es anwendet. Alles auf dieser Seite könnte durch das Austauschen des Kits neu gestaltet werden.
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
Anleitungen pro Tool
Die Mechanik unterscheidet sich je nach Tool: Coding-Agents nutzen einen lokalen MCP-Server, Web-Builder verwenden die shadcn-Registry oder die exportierte DESIGN.md. Wähle dein Tool:
- Gib Claude Code ein Design-System: MCP via
.mcp.jsonoderidentityforge apply. - Gib Cursor ein Design-System: MCP via
.cursor/mcp.json. - Gib Windsurf ein Design-System: manuelle MCP-Konfiguration für Cascade, plus der CLI-Weg.
- Gib v0 ein Design-System: die shadcn-Registry + DESIGN.md als Briefing.
- Gib Lovable ein Design-System: Project Knowledge +
shadcn addim Repo. - Gib Bolt ein Design-System: führe
shadcn adddirekt im Terminal von Bolt aus.
Was der Agent tatsächlich erhält
Egal wie du es installierst, die Payload besteht aus denselben drei Dingen:
- Eine DESIGN.md: das geschriebene Briefing: die Design-Intention, das Typografie-System, Spacing- und Layout-Regeln, Component-Styles, markante Motive sowie Do's & Don'ts. Das verhindert, dass der Agent auf generische Standards zurückgreift. Was eine DESIGN.md ist und wie man sie generiert.
- Semantische Farb-Tokens: 28 Rollen (background, foreground, primary, muted, card, border, chart-1 bis 5 und mehr) sowohl für Light als auch Dark Mode. Der Agent stylt basierend auf Rollennamen, nicht auf rohen Hex-Werten, sodass Themes kohärent bleiben. Semantische Farb-Tokens erklärt.
- Framework-Exporte: dasselbe System als CSS-Variablen, Tailwind v3/v4
@theme, ein shadcn-Registry-Eintrag oder DTCG/W3C JSON. Der Agent verknüpft das, was zu deinem Stack passt.
Ein Kit auswählen
Durchsuche Kits nach visuellem Stil, um komplette Systeme im Kontext zu sehen: Typografie, Farbe, Oberflächen und Build-Regeln. Jedes Kit hat einen stabilen Slug; sobald du ihn kennst, kann der Agent die Suche überspringen und es direkt anwenden. Wenn du bereits Markenfarben hast, findet das match_palette MCP-Tool die am besten passenden Kits auf visueller Ebene.
Lass den Agenten wählen
Wenn der MCP-Server verbunden ist, musst du dir keinen Slug selbst aussuchen. Sag dem Agenten einfach dein Produkt, deine Zielgruppe und die gewünschte Stimmung. Er kann search_themes zur Vorauswahl, get_design_md zum Lesen des Briefings und apply_theme zur Installation des gewählten Kits nutzen.
FAQ
Was ist ein Design-System für einen KI-Coding-Agenten?
Es ist ein fester Satz von Design-Entscheidungen: semantische Farb-Tokens für Light und Dark Mode, ein Typografie-Paar, Spacing- und Layout-Regeln sowie eine geschriebene DESIGN.md. Der Agent bezieht sich auf diese Entscheidungen, anstatt für jeden Screen das Styling neu zu erfinden.
Benötige ich ein Konto oder einen API-Key, um Identity Forge mit meinem Agenten zu nutzen?
Nein. Kostenlose Kits und die shadcn-Registry funktionieren ohne Konto. Ein API-Key (unter /account/api-keys) wird nur für eigene Daten, ein höheres API-Kontingent und Pro-Kits benötigt.
Mit welchen Tools funktioniert das?
Coding-Agents: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, VS Code/Copilot, opencode: starte den lokalen MCP-Server. Web-Builder: v0, Lovable, Bolt: nutzen den shadcn-Registry-Eintrag oder die exportierte DESIGN.md und die Tokens.
Ist das anders, als den Agenten einfach nach einer Farbpalette zu fragen?
Ja. Eine Palette ist eine Handvoll Farben. Ein Kit ist ein vollständiges, kohärentes System: 28 semantische Tokens in Light und Dark, echte Schriftarten, Layout- und Component-Regeln, Motive sowie Do's & Don'ts, serialisiert in einer DESIGN.md und exportierbar als shadcn/Tailwind/DTCG-Tokens.