npx miromiro-mcpFree to installDesign MCP Server
One config gives Cursor, Claude Code, or Windsurf seven native tools to pull any website’s design — code, tokens, brand, and assets — straight from a URL.
One config, 7 tools
Drop this block into your agent’s MCP settings with your API key - the design tools appear automatically.
miromiro-mcp$
⠿ installing miromiro-mcp…
✓ miromiro registered · 7 tools
> agent calls a tool
extract_brand({ url: "stripe.com" })
{
"primary": "#0a2540", "accent": "#635bff",
"fonts": ["Sohne"]
}
connected · 7 design tools live in your agent
7 tools in your agent
extract_codeextract_brandextract_design_tokensextract_assetsextract_svgsextract_fontsextract_lottieextract_brand → Stripe
A hosted design-extraction MCP with a real product behind it - not a screenshot tool or a bare open-source CLI.
Any MCP-compatible agent
Give your AI coding agent a website’s design system
The MiroMiro Design MCP Server connects your extraction API to any Model Context Protocol client - Cursor, Claude Code, Windsurf. Once installed, your agent gets seven native tools and can turn a live URL into component code, or pull a website’s design tokens, brand, fonts, SVGs, images, or Lottie animations from any URL on its own, mid-task, without you copy-pasting anything.
Point at a URL
One GET request with any live URL - e.g. stripe.com.
Get structured data
The tool returns clean, typed JSON to your agent.
Your agent uses it
MCP or a prompt wires it into your build - no glue code.
What you can build
Rebuild a section in-editor
Ask the agent to “rebuild stripe.com’s pricing section” and it calls extract_code for the real component - Tailwind, React, or Vue - not a screenshot to guess at.
Brand-match on demand
Ask the agent to “match stripe.com’s brand” and it calls extract_brand for the real palette, fonts, and logo.
Asset recovery in-editor
Grab SVGs, images, or fonts from any URL without leaving your coding agent.
Questions
What is the MiroMiro MCP server?
It’s a Model Context Protocol server that exposes MiroMiro’s design-extraction endpoints as native tools your AI coding agent can call. Install it once and Cursor, Claude Code, or Windsurf can turn a live URL into code or extract its design system on their own during a task.
Which agents does it work with?
Any MCP-compatible client - Cursor, Claude Code, Windsurf, and others. Drop the config block into the agent’s MCP settings with your API key and the seven tools appear automatically.
What tools does my agent get?
Seven: extract_code (turn a URL into a component), extract_brand, extract_design_tokens, extract_assets, extract_svgs, extract_fonts, and extract_lottie - each callable on any URL.
How do I install it?
It ships as an npm package. Run npx -y miromiro-mcp in your agent’s MCP config (or claude mcp add for Claude Code) with your API key set as MIROMIRO_API_KEY - nothing to build or clone.
Does it cost credits?
The MCP server is free to install. Each tool call spends the same credits as the equivalent API endpoint, billed to the key in your config. Cached and failed calls are free.
Get your free API key
100 free credits every month, no credit card. One key unlocks every endpoint - brand, tokens, images, SVGs, fonts, and Lottie. Upgrade only when you outgrow the free tier.