Give Cursor a design system

Cursor's Agent generates whole features fast, but each generation can make fresh styling decisions. Without a fixed system, spacing, colors, and component shapes drift across files. A design system gives the Agent one set of semantic tokens and a written DESIGN.md, so later components follow the same rules as the first.

Cursor supports MCP natively. The Agent can use tools to search, fetch, and apply a kit while it works, in addition to reading the files the kit installs.

Below is the free teal-rose-institute-grid kit rendered from its real tokens. The commands in this guide use ambient-sage; both are free and install the same way:

1. 1

   Write the MCP config

   Run this in your project root to merge the server into .cursor/mcp.json.

   Copy

   npx --yes identityforge@latest install --client cursor

2. 2

   Enable the server in Cursor

   Open Customize in the sidebar, find the identityforge server, and toggle it on. Restart Cursor if the tools don't appear.

3. 3

   Sign in (optional for free kits)

   Copy

   npx --yes identityforge@latest login

4. 4

   Prompt the Agent to theme your app

   Give product, audience, and mood; it shortlists with search_themes, reads the brief with get_design_md, applies with apply_theme.

   Copy

   Use Identity Forge to pick a minimal, warm theme for a
   wellness app, apply it, and follow the DESIGN.md.

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

To make the Agent consistent even outside a kit-apply turn, add a project rule in .cursor/rules/ telling it to style only against the semantic tokens and to follow DESIGN.md. This pairs well with the kit: the tokens define the values, the rule enforces that generated code always uses them.

---
description: Keep generated UI on the design system
alwaysApply: true
---

Always style against the semantic design tokens defined in the
project (bg-background, text-foreground, bg-primary, bg-muted,
border-border, …) and follow the rules and motifs in DESIGN.md.
Never hardcode raw hex colors or introduce new fonts.

1. 1

   CLI apply

   Writes DESIGN.md + a tokens file into the current directory; ask Cursor to wire them in.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn registry

   Installs the kit's CSS variables directly if you use shadcn/ui.

   Copy

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

See the same setup for Claude Code and Windsurf, or start from the pillar guide.

• Model Context Protocol - Cursor Docs: Cursor reads project MCP servers from .cursor/mcp.json and toggles them from Customize in the sidebar.
• Rules - Cursor Docs: Project rules live in .cursor/rules as .mdc files with frontmatter; a plain markdown file there is ignored by the rules system.