Add Design Extraction to Claude Code with MCP

Two commands and Claude Code can read any website's design system instead of guessing it from a screenshot. Here is the whole setup:

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

claude mcp list   # look for "✓ Connected"

That is genuinely it. The rest of this post is what those commands do, the Cursor/Windsurf versions, and how to actually use it in a session.

No terminal, or you use Claude in the browser? There is also a hosted server - paste https://miromiro.app/mcp into any client that takes a URL. Full walkthrough for Claude web, Cursor, ChatGPT and Codex in how to connect the MiroMiro MCP.

Why bother

Ask a coding agent to "make it look like stripe.com" and it works from a screenshot at best, memory at worst. Either way it guesses: colors eyeballed from pixels, spacing approximated, fonts invented. The output is a plausible imitation with none of the real values.

With the MCP server connected, the agent stops guessing. It calls the extraction tools itself, gets the site's actual ranked palette, type scale, spacing, and shadows as data, and builds with those. Same prompt, real values. We wrote more about this gap in ground truth for AI agents.

Step 1: get a key

Sign in and mint one at miromiro.app/api/dashboard/keys. 100 free credits a month, no card. Keys look like mm_live_....

Step 2: add the server

The server is a local stdio process (npx miromiro-mcp) that reads your key from MIROMIRO_API_KEY. Run this in your terminal - not inside a Claude session; you are configuring the server before the conversation starts:

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

-s user registers it for every project; drop it to scope to the current one. The -y matters: it lets npx start the package unattended, so the editor can spawn the server without an install prompt.

Step 3: verify and use it

claude mcp list
# miromiro ... ✓ Connected

claude
> Use the miromiro server to get the brand colors and fonts of stripe.com

All seven extraction tools appear in Claude's toolbox automatically: design tokens, brand, images, SVGs, fonts, Lottie, and section-to-code. You do not name tools in prompts - ask design-shaped questions and the agent picks the right one. Prompts that work well:

• "Extract linear.app's design tokens and restyle our Button component to match"
• "Get vercel.com's hero section as Tailwind and adapt it for our landing page"
• "Pull the brand palette from ourcustomer.com and generate a theme file"

Cursor and Windsurf

Both take the standard mcpServers JSON block:

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Cursor: ~/.cursor/mcp.json. Windsurf: Settings → MCP. Restart the editor after saving; both show the server's tools in their MCP panel when connected.

Things worth knowing

• It reads static HTML + CSS. No JavaScript execution, so a fully client-rendered app can return little. The tools say so rather than inventing a result, which is the behavior you want in an agent pipeline.
• Credits: a token extraction is 10 credits, brand 15, section-to-code 25. The free 100/month covers real experimentation; the agent sees remaining quota in each response's usage object.
• Server not connecting? It is almost always the key: check claude mcp list, and confirm the env var made it in (claude mcp get miromiro). Node 18+ is required for npx.

Or skip MCP entirely

The same engine is a plain REST API if your agent framework speaks HTTP instead:

curl "https://miromiro.app/api/v1/extract?url=stripe.com" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

Full setup docs, including the agent quickstart, live at /api/docs/install-mcp.

Frequently asked questions

How do I add an MCP server to Claude Code?

claude mcp add <name> ... -- <command> in your terminal, then claude mcp list to confirm it connected. Exact MiroMiro command at the top of this post.

What tools does the server expose?

Seven: design tokens, brand, images, SVGs, fonts, Lottie, and section-to-code. They register automatically; the agent picks per task.

Why tokens instead of a screenshot?

Screenshots make the model guess every value. Tokens are the site's real CSS - the difference between imitation and ground truth.

Does it work with Cursor and Windsurf?

Yes - standard mcpServers JSON (above), restart, done.