How to make Cursor and Claude Code follow your design system with MCP

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

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.