Claude Code ist in Bezug auf Design zustandslos. Jeder Prompt beginnt bei Null, weshalb der Agent immer zu denselben sicheren Standardwerten greift: Inter als Schriftart, ein slate-950 Hintergrund, eine violette Akzentfarbe und generische Cards. Wenn du ein paar Screens baust, driften diese auseinander, weil nichts das Aussehen fixiert. Ein Design System ist genau dieser Fixpunkt: Ein Satz semantischer Tokens und eine geschriebene DESIGN.md, die der Agent bei jeder Aufgabe konsultiert, damit Seite fünf exakt zu Seite eins passt.

Claude Code eignet sich zudem hervorragend für MCP. Sobald der Server verbunden ist, erhält der Agent nicht nur statische Dateien: Er kann den Katalog durchsuchen, das vollständige Briefing eines Kits lesen und es anwenden - alles direkt innerhalb deiner Session, ohne dass du das Terminal verlassen musst.

Hier ist das kostenlose ambient-sage Kit, gerendert aus seinen echten Tokens: Das exakte System, das der Agent in dein Repo schreibt, wenn er diesen Slug anwendet:

1. 1

   Schreibe die MCP-Konfiguration

   Führe dies in deinem Projektverzeichnis aus. Es fügt einen identityforge Server zur .mcp.json hinzu (bestehende Server werden dabei nicht überschrieben).

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Claude Code neu starten

   Starte den Prozess neu, damit der neue Server erkannt wird. Bestätige anschließend die Verfügbarkeit der Tools, indem du Claude fragst, /mcp aufzurufen oder seine Identity Forge Tools aufzulisten.

3. 3

   Anmelden (optional für kostenlose Kits)

   Nur erforderlich für eigene Daten, ein höheres API-Kontingent oder Pro-Kits. Nutzt einen Browser-PKCE-Flow.

   Copy

   npx --yes identityforge@latest login

4. 4

   Design anfordern und anwenden lassen

   Gib Produkt, Zielgruppe und Stimmung vor. Der Agent erstellt eine Vorauswahl mit search_themes, liest das Briefing mit get_design_md und schreibt DESIGN.md + Tokens mit apply_theme.

   Copy

   Use Identity Forge to pick a calm, trustworthy theme for a
   fintech dashboard, apply it, and follow the DESIGN.md.

{
  "mcpServers": {
    "identityforge": {
      "command": "npx",
      "args": ["-y", "identityforge@latest", "mcp"]
    }
  }
}

Da Claude Code Shell-Befehle ausführen kann, benötigst du den MCP-Server nicht zwingend. Beides liefert dem Agenten dieselben Tokens und dieselbe DESIGN.md:

1. 1

   CLI Apply

   Schreibt DESIGN.md plus eine Token-Datei in das aktuelle Verzeichnis. Sage Claude, dass er die DESIGN.md lesen und die Tokens in deine Styling-Ebene einbinden soll.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn Registry

   Wenn du shadcn/ui nutzt, installiert dies die CSS-Variablen des Kits direkt in das Theme deines Projekts.

   Copy

   npx shadcn add https://identityforge.io/r/ambient-sage.json

Wenn der Server verbunden ist, frage: Nutze Identity Forge, um diese App für ein Wellness-Produkt zu stylen, ruhig und minimalistisch. Claude kann search_themes({ description: "wellness product, calm and minimal" }) aufrufen, ambient-sage wählen, dessen DESIGN.md lesen und apply_theme ausführen. Danach refaktoriert er Komponenten, um semantische Tokens wie bg-background, text-foreground und bg-primary zu verwenden, während er die Regeln des Kits für Cards, Schatten und Typografie befolgt. Spätere Screens erben dieselben Dateien und Regeln.

Als Nächstes: Mache dasselbe in Cursor, lies was eine DESIGN.md ist oder stöbere nach Kits nach visuellem Stil, um einen passenden Slug für dein Produkt zu finden.