# How to make Cursor and Claude Code follow your design system with MCP > To make Cursor or Claude Code follow a design system, give the editor the real tokens as context it can query: extract them with `npx designlang `, register `npx designlang mcp` as an MCP server, and run `designlang check` on the code it writes. Updated 2026-11-03. Page: https://designlang.app/guides/cursor-claude-design-system-mcp ## Steps 1. **Extract the design system.** Run npx designlang yoursite.com --emit-agent-rules in your project. This writes the tokens and rules files for Cursor and Claude Code. 2. **Register the MCP server.** For Claude Code run claude mcp add designlang -- npx designlang mcp. For Cursor add a stdio server that runs npx designlang mcp to .cursor/mcp.json. 3. **Ask the editor to use the tools.** Prompt with the job and tell it to look up tokens with the designlang tools instead of writing raw hex values. 4. **Lint what it wrote.** Run npx designlang check src --tokens design-extract-output/yoursite-com-design-tokens.json to catch off-palette colours, off-scale spacing and wrong fonts. The fix is context. The editor needs your real colours, type and spacing in a form it can look up while it writes, plus a check afterwards that catches what it got wrong. designlang gives you three layers: rules files, an MCP server and a linter. ## 1. Extract the system and write rules files Run this in your project root, pointing at the site whose design you want the editor to follow (your own production site, usually): ``` npx designlang stripe.com --emit-agent-rules ``` Alongside the tokens, `--emit-agent-rules` writes `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, a `CLAUDE.md.fragment` and an `agents.md`. Cursor loads the `.mdc` file on every request. The start of the real file for stripe.com: ``` --- description: Design system extracted from https://stripe.com — use these tokens, do not invent new ones. globs: **/*.{ts,tsx,jsx,js,css,scss,html,vue,svelte,swift,kt,dart,php} alwaysApply: true --- # Design system reference Source: https://stripe.com ## Semantic tokens (use these) - color.action.primary: #533afd - color.surface.default: #ffffff - color.text.body: #061b31 - radius.control: 1px - typography.body.fontFamily: sohne-var ## How to use - Prefer `semantic.*` tokens over `primitive.*`. - Never invent new tokens or hex values; reuse the ones above. - When a value is missing, pick the closest existing semantic token and flag the gap. ``` Paste `CLAUDE.md.fragment` into your `CLAUDE.md` for Claude Code. Rules files are cheap and always on, but they only hold a summary. For the full system, use MCP. ## 2. Connect the MCP server The Model Context Protocol lets an editor call tools on a local server. `designlang mcp` serves your latest extraction over stdio. It reads `./design-extract-output`, or the folder you pass with `--output-dir`. ### Claude Code ``` claude mcp add designlang -- npx designlang mcp ``` ### Cursor Add the server to `.cursor/mcp.json` in the project: ``` { "mcpServers": { "designlang": { "command": "npx", "args": ["designlang", "mcp", "--output-dir", "./design-extract-output"] } } } ``` Any other MCP client works the same way: a stdio entry that runs `npx designlang mcp`. ### What the editor can call | Tool or resource | Use | |---|---| | `search_tokens` | Find tokens by name or value. | | `find_nearest_color` | The closest palette colour to a hex the model was about to use. | | `get_component` | The extracted styles for a component cluster, such as the primary button. | | `list_failing_contrast_pairs` | Colour pairs that fail WCAG, so the model avoids them. | | `designlang://tokens/semantic` | The semantic tokens as a resource. | | `designlang://components` | Every component cluster with its variants. | The server also has `extract_design`, so the editor can read a new URL itself and then query it with `get_tokens`, `get_colors` and `get_typography`. ## 3. Prompt for it Editors do not always reach for a tool unprompted. Say so in the request: ## 4. Check what it wrote Trust, then verify. `designlang check` lints source files against the tokens and suggests the nearest token for each miss. Here is a real run on a small React button written the way models usually write it, checked against the stripe.com tokens: ``` $ npx designlang check src --tokens design-extract-output/stripe-com-design-tokens.json src/Button.tsx 3:35 info #5340ff is the value of primitive.color.brand.primary. Use the token. color/hardcoded-token 3:73 warn 13px is not on the spacing scale. Nearest is 1px (1px). spacing/off-scale 3:78 warn 22px is not on the spacing scale. Nearest is 28px (28px). spacing/off-scale 3:99 warn 6 is not on the radius scale. Nearest is 4px (4px). radius/off-scale 3:115 error "Inter" is not a font in this system. Nearest is "sohne-var". font-family/off-system 1 errors, 3 warnings, 1 info in 1 file(s). 33% on-brand. 2 fixable. ``` Captured with designlang 13.3.2 on 3 November 2026. The colour was a near miss of the brand primary, close enough to count as the token. The font was simply wrong. Add `--fix` to write the safe fixes, `--diff` to see them first, and `--format github` in CI so each finding shows up as an annotation on the pull request. ## Keep the rules current A rules file goes stale the day the brand changes. Rerun the extraction when it does, or put `designlang drift` in CI so you notice. If several people or repos share one brand, serve it from one place instead of copying files around. ## Questions ### Do I need MCP if I already have a rules file? Not for small systems. A rules file holds a summary; MCP lets the editor look up any token, component or contrast pair on demand, which matters once the system has more than a handful of values. ### Does the MCP server send my code anywhere? No. The local server runs on your machine over stdio and reads files from your extraction folder. Nothing is uploaded. ### Does this work with Windsurf or other editors? Any editor that supports stdio MCP servers can run `npx designlang mcp`. The `agents.md` file covers agents that read that convention. ## Related - [MCP setup docs](https://designlang.app/docs/mcp) - [Run a design system audit](https://designlang.app/guides/design-system-audit) - [Extract design tokens from any website](https://designlang.app/guides/extract-design-tokens-from-website) - [Linear design system](https://designlang.app/design-system/linear)