post · 2026-05-15

Extract once, ground every prompt.

How to wire designlang into Claude Code, Cursor and Windsurf with one command — so your AI editor stops hallucinating colours, fonts and component shapes.

The problem

You ask Claude Code to “build a pricing page in our brand.” Claude doesn’t know your brand. It guesses. The result looks like AI. You spend the next hour pasting hex codes and font names into the prompt.

The fix

Run designlang mcponce. designlang exposes your design system — every extracted token, every component anatomy, every WCAG remediation suggestion — as a Model Context Protocol resource. Claude Code reads it like a native tool. Cursor reads it. Windsurf reads it. The same payload, three editors.

Wire it up — Claude Code

# .claude/mcp.json
{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["designlang", "mcp", "--url", "https://yourbrand.com"]
    }
  }
}

Wire it up — Cursor

# ~/.cursor/mcp.json
{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["designlang", "mcp", "--url", "https://yourbrand.com"]
    }
  }
}

Wire it up — Windsurf

# ~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["designlang", "mcp", "--url", "https://yourbrand.com"]
    }
  }
}

What the editor sees

The MCP server exposes 5 resources and 4 tools:

  • tokens://current — the full DTCG token tree
  • regions://current — semantic regions detected on the live page
  • components://current — clustered components and their slots
  • a11y://current — WCAG findings + remediation suggestions
  • css-health://current — specificity graph, dead rules, dup count

Plus tools to re-extract from a new URL, refresh the cache, query a single token by path and write the agent rule files (\`AGENTS.md\`, \`.cursorrules\`, Claude skills) into the active workspace.

Why this beats “just paste tokens into the prompt”

  • The token set updates the moment you re-extract; the prompt does not.
  • Components, anatomy and accessibility findings are too large to fit in a system prompt.
  • Claude Code can call the resource on demand instead of carrying it in every turn.

Try it

# 1. Wire MCP into your editor (snippet above)
# 2. Restart the editor
# 3. Ask: "extract designlang.app and summarise the palette"
# 4. Watch the editor fetch from the MCP resource — no copy-paste

Full source: src/mcp. CLI flags: features page. Questions: GitHub issues.