Give Claude Code a design system

Claude Code is stateless about design. Each prompt starts fresh, so it reaches for the same safe defaults: Inter, a slate-950 background, a violet accent, generic cards. Build a few screens and they drift apart because nothing pins the look down. A design system is that pin: one set of semantic tokens and one written DESIGN.md the agent consults on every task, so page five matches page one.

Claude Code is also a natural fit for MCP. Once the server is connected, the agent doesn't just receive static files: it can browse the catalog, read a kit's full brief, and apply it, all from inside your session without you leaving the terminal.

Here is the free atmospheric-botanical kit rendered from its real tokens, the same shape of system the agent writes into your repo when it applies any kit slug (the commands here use ambient-sage):

1. 1

   Write the MCP config

   Run this in your project root. It merges an identityforge server into .mcp.json (it won't clobber existing servers).

   Copy

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

2. 2

   Approve the server

   Restart so it picks up the new server, then confirm the tools are available by typing /mcp yourself: the panel lists connected servers with their tool counts.

3. 3

   Sign in (optional for free kits)

   Only needed for owned data, higher API quota, or Pro kits. Uses a browser PKCE flow.

   Copy

   npx --yes identityforge@latest login

4. 4

   Ask for a look and let the agent apply it

   Give it product, audience, and mood. It shortlists with search_themes, reads the brief with get_design_md, and writes DESIGN.md + tokens with 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 can run shell commands, so you don't strictly need the MCP server. Either of these gives it the same tokens and DESIGN.md:

1. 1

   CLI apply

   Writes DESIGN.md plus a tokens file into the current directory. Tell Claude to read DESIGN.md and wire the tokens into your styling layer.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn registry

   If you're on shadcn/ui, this installs the kit's CSS variables straight into your project's theme.

   Copy

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

With the server connected, ask: Use Identity Forge to theme this app for a wellness product, calm and minimal. Claude can call search_themes({ description: "wellness product, calm and minimal" }), choose ambient-sage, read its DESIGN.md, and run apply_theme. It then refactors components to use semantic tokens such as bg-background, text-foreground, and bg-primary, while following the kit's rules for cards, shadows, and display type. Later screens inherit the same files and rules.

Next: do the same in Cursor, read what a DESIGN.md is, or browse kits by visual style for a slug that fits your product.

• Model Context Protocol - Claude Code Docs: Project-scoped MCP servers live in .mcp.json at the project root, and Claude Code prompts for approval before using them; the /mcp panel lists connected servers and tool counts.