MCP for agents

The catalog as a callable tool inside Claude Code, Cursor, Codex, and Cline.

What MCP is

The Model Context Protocol is an open standard for connecting AI agents to external tools. An MCP server exposes a set of named tools with input schemas, and any MCP-compliant agent — Claude Code, Cursor, Cline, Codex — can call those tools mid-generation.

It is not an API surface for humans. It is a protocol for agents.

The spec is at modelcontextprotocol.io.

Why MCP for design tokens

When an agent generates UI, it needs tokens during generation, not after.

The typical AI-UI workflow without MCP:

  1. You say “make this card look like Linear”
  2. The agent generates code from vague training-data memory of Linear — often wrong colors, wrong type scale
  3. You correct it after, line by line

With MCP:

  1. You say “make this card look like Linear”
  2. The agent calls get_design('linear') and gets Linear’s actual #5e6ad2 / Inter / 6px radius back
  3. The agent generates code using real tokens

The difference is the agent has the tokens before the output, not after.

What the server exposes

The @webdesignhot/design-md-mcp server exposes the catalog tools plus v0.2 resolution helpers:

  • list_designs — Get the catalog index. Returns all 470 brands with name, tagline, and categories. Reference →
  • get_design — Get one brand’s full DESIGN.md (frontmatter + body). Reference →
  • search_designs — Search by category, tag, or keyword. Reference →
  • diff_designs — Compare two brands token-by-token. Returns deltas. Reference →
  • export_design — Export one brand to Tailwind v4, CSS custom properties, DTCG, Figma, or portable Google Alpha. Reference →
  • install_design — Write a brand’s DESIGN.md into the agent’s working directory. Reference →
  • get_component — Resolve one component variant, state, and size cell. Reference →
  • evaluate_token — Evaluate a safe v0.2 color expression. Reference →

get_design keeps its raw Markdown response by default. Pass include_resolved: true to receive a structured resolved token block too.

Each tool page has the input schema, output shape, and example agent dialogue.

Setup in 5 minutes

Step-by-step installation for each client (Claude Code, Cursor, Codex, Cline) is in Client Setup.

Short version: run the package through npx -y, add one MCP config entry pointing at it, and restart your editor. The tools appear in your agent’s tool list. Node 20+ is required.

npx -y @webdesignhot/design-md-mcp
# then add to your client's MCP config — see Client Setup

The server runs as a local stdio process. There is no hosted endpoint to configure, no API key to manage.

Which tool to use when

| Goal | Tool | |------|------| | “What brands are in the catalog?” | list_designs | | “Make this look like Stripe” | get_design('stripe') | | “Find fintech brands with dark mode” | search_designs | | “How different is Linear from Notion?” | diff_designs | | “Export Stripe to Tailwind for me” | export_design | | “Give me the primary button hover styles” | get_component | | “What does the brand hover token resolve to?” | evaluate_token | | “Drop the file into the project” | install_design |

get_design is the most-called tool by far — it’s the one that goes into “make this look like X” prompts.

What it isn’t

  • Not a hosted API. It runs locally as a stdio MCP server.
  • Not an Anthropic-specific thing. Any MCP-compliant client works — Cursor, Cline, Codex, and others.
  • Not a replacement for the CLI. The CLI is for human terminal use; MCP is for agent generation loops. They wrap the same catalog data.

Next