The problem: AI-built UIs all look the same
Ask any coding agent to "build a landing page" and you get the same thing: a Tailwind gray-950 hero, a violet gradient, Inter, three feature cards. It is competent and completely generic, because the model has no memory of your brand between prompts. Add a second page and the styling drifts: different spacing, a slightly different blue, a new button shape. There is no source of truth for the look, so there is no consistency.
A design system fixes this. When the agent has one set of semantic tokens, a fixed type pairing, and written rules to follow, every screen it generates references the same variables instead of re-guessing. That is the difference between a demo and a product.
A real design kit, previewed
A kit is a whole system, not a palette. Below is a live preview of the free ambient-sage kit: the same tokens, fonts, and treatments an agent receives when it applies it. Everything on this page could be repainted by swapping the kit.
After Work Chill
Double tap on a widget to edit settings
Plus Jakarta Sans · 28 semantic tokens · light + dark
Per-tool guides
The mechanics differ by tool: coding agents run a local MCP server, web builders take the shadcn registry or the exported DESIGN.md. Pick your tool:
- Give Claude Code a design system: MCP via
.mcp.json, oridentityforge apply. - Give Cursor a design system: MCP via
.cursor/mcp.json. - Give Windsurf a design system: manual MCP config for Cascade, plus the CLI path.
- Give v0 a design system: the shadcn registry + DESIGN.md as the brief.
- Give Lovable a design system: project knowledge + shadcn add in the repo.
- Give Bolt a design system: run
shadcn addright in Bolt's terminal.
What the agent actually receives
However you install it, the payload is the same three things:
- A DESIGN.md: the written brief: the design's intent, the type system, spacing and layout rules, component treatments, distinctive motifs, and do's & don'ts. This is what stops the agent defaulting to generic. What a DESIGN.md is, and how to generate one.
- Semantic color tokens: 28 roles (background, foreground, primary, muted, card, border, chart-1…5, and more) in both light and dark. The agent styles against role names, not raw hex, so themes stay coherent. Semantic color tokens explained.
- Framework exports: the same system as CSS variables, Tailwind v3/v4
@theme, a shadcn registry item, or DTCG/W3C JSON. The agent wires whichever matches your stack.
Choosing a kit
Browse kits by visual style to see complete systems in context: type, color, surfaces, and build rules. Every kit has a stable slug; once you know it, the agent can skip search and apply it directly. If you have brand colors already, the match_palette MCP tool finds the closest-fitting kits perceptually.
Let the agent pick
With the MCP server connected, you do not have to choose a slug yourself. Tell the agent your product, audience, and desired mood. It can use search_themes to shortlist, get_design_md to read the brief, and apply_theme to install the chosen kit.
FAQ
What is a design system for an AI coding agent?
It is a fixed set of design decisions: semantic color tokens for light and dark, a type pairing, spacing and layout rules, and a written DESIGN.md. The agent references those decisions instead of inventing styling again for each screen.
Do I need an account or API key to use Identity Forge with my agent?
No. Free kits and the shadcn registry work without an account. An API key (from /account/api-keys) is only needed for owned data, higher API quota, and Pro kits.
Which tools does this work with?
Coding agents: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, VS Code/Copilot, opencode: run the local MCP server. Web builders: v0, Lovable, Bolt: consume the shadcn registry item or the exported DESIGN.md and tokens.
Is this different from just asking the agent for a color palette?
Yes. A palette is a handful of colors. A kit is a complete, coherent system: 28 semantic tokens in light and dark, real fonts, layout and component rules, motifs, and do's & don'ts, serialized into a DESIGN.md and exportable as shadcn/Tailwind/DTCG tokens.