Claude Code ein Designsystem geben

Claude Code ist in Bezug auf Design zustandslos. Jeder Prompt beginnt von vorn, sodass der Agent immer wieder auf dieselben sicheren Standardwerte zurückgreift: Inter, ein slate-950 Hintergrund, ein violetter Akzent, generische Cards. Erstellt man einige Screens, entsteht Drift, da nichts das Erscheinungsbild fixiert. Ein Designsystem ist diese Fixierung: ein Satz semantischer Tokens und eine schriftliche DESIGN.md, die der Agent bei jeder Aufgabe konsultiert, damit Seite fünf wie Seite eins aussieht.

Claude Code ist zudem prädestiniert 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 dieses anwenden – alles innerhalb Ihrer Session, ohne dass Sie das Terminal verlassen müssen.

Hier ist das kostenlose atmospheric-botanical Kit, gerendert aus seinen echten Tokens. Dies ist die gleiche Systemstruktur, die der Agent in Ihr Repo schreibt, wenn er einen Kit-Slug anwendet (die hier verwendeten Befehle nutzen ambient-sage):

1. 1

   MCP-Konfiguration schreiben

   Führen Sie dies im Projekt-Root aus. Es fügt einen identityforge Server in die .mcp.json ein (bestehende Server werden nicht überschrieben).

   Copy

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

2. 2

   Server bestätigen

   Starten Sie neu, damit der neue Server erkannt wird. Überprüfen Sie anschließend durch die Eingabe von /mcp, ob die Tools verfügbar sind: Das Panel listet die verbundenen Server und die Anzahl ihrer Tools auf.

3. 3

   Anmelden (optional für kostenlose Kits)

   Nur erforderlich für eigene Daten, höhere API-Kontingente oder Pro-Kits. Verwendet einen Browser-PKCE-Flow.

   Copy

   npx --yes identityforge@latest login

4. 4

   Look anfragen und den Agenten anwenden lassen

   Geben Sie Produkt, Zielgruppe und Stimmung an. Der Agent erstellt eine Shortlist mit search_themes, liest das Briefing mit get_design_md und schreibt die DESIGN.md sowie die 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"]
    }
  }
}

Claude Code kann Shell-Befehle ausführen, daher ist der MCP-Server nicht zwingend erforderlich. Beide folgenden Optionen liefern dieselben Tokens und die gleiche DESIGN.md:

1. 1

   CLI apply

   Schreibt die DESIGN.md sowie eine Tokens-Datei in das aktuelle Verzeichnis. Weisen Sie Claude an, die DESIGN.md zu lesen und die Tokens in Ihre Styling-Layer einzubinden.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn registry

   Wenn Sie shadcn/ui verwenden, werden die CSS-Variablen des Kits direkt in das Theme Ihres Projekts installiert.

   Copy

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

Fragen Sie bei verbundenem Server: Use Identity Forge to theme this app for a wellness product, calm and minimal. Claude kann search_themes({ description: "wellness product, calm and minimal" }) aufrufen, ambient-sage wählen, dessen DESIGN.md lesen und apply_theme ausführen. Anschließend refactored er die 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 Display-Typen befolgt. Spätere Screens erben dieselben Dateien und Regeln.

Als Nächstes: Das Gleiche in Cursor, lesen Sie, was eine DESIGN.md ist, oder durchsuchen Sie Kits nach visuellem Stil nach einem Slug, der zu Ihrem Produkt passt.

• Model Context Protocol - Claude Code Docs: Projektbezogene MCP-Server befinden sich in der .mcp.json im Projektstammverzeichnis. Claude Code fragt vor der Nutzung um Genehmigung; das /mcp-Panel listet die verbundenen Server und die Anzahl der Tools auf.

• Model Context Protocol - Claude Code Docs: Projektbezogene MCP-Server befinden sich in der .mcp.json im Projektstammverzeichnis. Claude Code fragt vor der Nutzung um Genehmigung; das /mcp-Panel listet die verbundenen Server und die Anzahl der Tools auf.