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 6 tools:

  • list_designs — Get the catalog index. Returns all 300 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 a target format: Tailwind v4, CSS custom properties, DTCG, or Figma. Reference →
  • install_design — Write a brand’s DESIGN.md into the agent’s working directory. Reference →

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: install the npm package, add one MCP config entry pointing at the binary, restart your editor. The tools appear in your agent’s tool list.

npm install -g @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

GoalTool
”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
”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

  • Client Setup — Claude Code / Cursor / Codex / Cline config snippets
  • list_designs — catalog index, filtering, categories
  • get_design — the workhorse for “make this look like X”
  • diff_designs — token-level comparison for design-system audits