[{"data":1,"prerenderedAt":2121},["ShallowReactive",2],{"api-blog-figma-mcp-setup-and-alternatives":3,"api-blog-related-figma-mcp-setup-and-alternatives":428},{"id":4,"title":5,"author":6,"body":7,"category":387,"date":388,"dateModified":388,"description":389,"extension":390,"faqs":391,"image":407,"meta":408,"navigation":409,"path":410,"readingTime":411,"relatedSlugs":412,"seo":416,"seoTitle":417,"stem":418,"tags":419,"__hash__":427},"apiBlog/api-blog/figma-mcp-setup-and-alternatives.md","Figma MCP: How to Set It Up, What It Gives Your AI, and What to Use Without a Figma File","Soraia",{"type":8,"value":9,"toc":377},"minimark",[10,14,52,55,60,76,82,100,109,123,127,130,158,161,165,168,194,197,201,213,216,239,242,253,261,265,328,331,335,361,365,373],[11,12,13],"p",{},"The Figma MCP server lets your coding agent read a Figma file directly - the selected frame's structure, variables and components - so it writes code that matches the design instead of guessing from a screenshot. Add it to Claude Code with one command:",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","claude mcp add --transport http figma https://mcp.figma.com/mcp\n","bash","",[22,23,24],"code",{"__ignoreMap":20},[25,26,29,33,37,40,43,46,49],"span",{"class":27,"line":28},"line",1,[25,30,32],{"class":31},"sBMFI","claude",[25,34,36],{"class":35},"sfazB"," mcp",[25,38,39],{"class":35}," add",[25,41,42],{"class":35}," --transport",[25,44,45],{"class":35}," http",[25,47,48],{"class":35}," figma",[25,50,51],{"class":35}," https://mcp.figma.com/mcp\n",[11,53,54],{},"Start Claude Code, sign in to Figma when prompted, and it's connected. The rest of this post covers the other clients, what the server actually gives your agent, and the case it doesn't cover: when the design you want to match isn't in Figma at all.",[56,57,59],"h2",{"id":58},"set-it-up-in-your-client","Set it up in your client",[11,61,62,63,67,68,71,72,75],{},"Figma recommends the ",[64,65,66],"strong",{},"remote server"," (",[22,69,70],{},"https://mcp.figma.com/mcp","). There's also a ",[64,73,74],{},"desktop server"," that runs through the Figma desktop app; it needs a Dev or Full seat on a paid plan.",[11,77,78,81],{},[64,79,80],{},"Claude Code"," - the command above, or Figma's plugin, which bundles the server with ready-made skills:",[15,83,85],{"className":17,"code":84,"language":19,"meta":20,"style":20},"claude plugin install figma@claude-plugins-official\n",[22,86,87],{"__ignoreMap":20},[25,88,89,91,94,97],{"class":27,"line":28},[25,90,32],{"class":31},[25,92,93],{"class":35}," plugin",[25,95,96],{"class":35}," install",[25,98,99],{"class":35}," figma@claude-plugins-official\n",[11,101,102,105,106,108],{},[64,103,104],{},"Cursor, VS Code, Windsurf and other clients"," - add a remote MCP server with the URL ",[22,107,70],{}," in the client's MCP settings, then complete the Figma sign-in.",[11,110,111,114,115,122],{},[64,112,113],{},"Seats:"," the remote server is available on all seats and plans, but seats other than Dev or Full may hit usage limits. Check ",[116,117,121],"a",{"href":118,"rel":119},"https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server",[120],"nofollow","Figma's guide"," for the current limits on your plan.",[56,124,126],{"id":125},"what-it-gives-your-agent","What it gives your agent",[11,128,129],{},"With a Figma Design, Make or FigJam file you can view, you select a frame (or paste its link) and ask the agent to build it. The server hands over:",[131,132,133,140,146,152],"ul",{},[134,135,136,139],"li",{},[64,137,138],{},"Structure"," - the frame's layers and layout, so the agent knows what's nested in what.",[134,141,142,145],{},[64,143,144],{},"Variables and styles"," - your real color, spacing and type tokens instead of eyeballed hex values.",[134,147,148,151],{},[64,149,150],{},"Components"," - which design-system pieces are in use, so the agent can reach for the matching code components.",[134,153,154,157],{},[64,155,156],{},"A screenshot"," - for visual reference alongside the data.",[11,159,160],{},"The result is much closer to the design than \"here's a screenshot, make this\". The quality depends on the file: frames built with auto layout, named layers and real variables translate cleanly; a flat pile of absolutely-positioned rectangles doesn't.",[56,162,164],{"id":163},"the-case-it-doesnt-cover-no-figma-file","The case it doesn't cover: no Figma file",[11,166,167],{},"The Figma MCP reads Figma files. A lot of real work starts somewhere else:",[131,169,170,176,182,188],{},[134,171,172,175],{},[64,173,174],{},"The reference is a live website"," - \"make our pricing page feel like Linear's\".",[134,177,178,181],{},[64,179,180],{},"You're migrating an old site"," whose design file was lost years ago, or never existed.",[134,183,184,187],{},[64,185,186],{},"The source of truth is production"," - the shipped site has drifted from the Figma file, and you need what users actually see.",[134,189,190,193],{},[64,191,192],{},"You're building from a template or theme"," that only exists as HTML.",[11,195,196],{},"In all of these, there's nothing for the Figma MCP to read. Teams fall back to screenshots, and the agent goes back to guessing fonts, spacing and colors from pixels.",[56,198,200],{"id":199},"for-live-websites-a-website-extraction-mcp","For live websites: a website-extraction MCP",[11,202,203,204,208,209,212],{},"This is the gap ",[116,205,207],{"href":206},"/api/mcp","MiroMiro"," fills. It's an MCP server that reads a ",[64,210,211],{},"live URL"," instead of a file, and gives your agent nine tools: component code from any section (Tailwind, React, Vue or HTML), design tokens, brand colors and logo, fonts, SVGs, images, videos, audio and Lottie animations.",[11,214,215],{},"Add it the same way - it's also a remote server:",[15,217,219],{"className":17,"code":218,"language":19,"meta":20,"style":20},"claude mcp add --transport http miromiro https://miromiro.app/mcp\n",[22,220,221],{"__ignoreMap":20},[25,222,223,225,227,229,231,233,236],{"class":27,"line":28},[25,224,32],{"class":31},[25,226,36],{"class":35},[25,228,39],{"class":35},[25,230,42],{"class":35},[25,232,45],{"class":35},[25,234,235],{"class":35}," miromiro",[25,237,238],{"class":35}," https://miromiro.app/mcp\n",[11,240,241],{},"Then prompt with a URL instead of a frame:",[243,244,245],"blockquote",{},[11,246,247,248,252],{},"Use miromiro to extract the pricing section from ",[116,249,250],{"href":250,"rel":251},"https://linear.app/pricing",[120]," as React + Tailwind, then adapt it to our plans.",[11,254,255,256,260],{},"The agent gets the page's real rendered CSS, not a guess. Setup for Cursor, ChatGPT, Claude web and Codex is in ",[116,257,259],{"href":258},"/api/blog/connect-miromiro-mcp-claude-cursor-chatgpt","how to connect the MiroMiro MCP",".",[56,262,264],{"id":263},"which-one-to-use","Which one to use",[266,267,268,284],"table",{},[269,270,271],"thead",{},[272,273,274,278,281],"tr",{},[275,276,277],"th",{},"Your design lives in...",[275,279,280],{},"Use",[275,282,283],{},"What the agent gets",[285,286,287,301,315],"tbody",{},[272,288,289,293,298],{},[290,291,292],"td",{},"A Figma file your team owns",[290,294,295],{},[64,296,297],{},"Figma MCP",[290,299,300],{},"Frames, variables, components from the file",[272,302,303,306,312],{},[290,304,305],{},"A live website (yours or someone else's)",[290,307,308,311],{},[64,309,310],{},"Website MCP"," (MiroMiro)",[290,313,314],{},"Rendered code, tokens, fonts and assets from the URL",[272,316,317,320,325],{},[290,318,319],{},"Both - designing new screens to match a live site",[290,321,322],{},[64,323,324],{},"Both",[290,326,327],{},"Figma for the new screens, the live site for the reference",[11,329,330],{},"My recommendation: if you design in Figma, install the Figma MCP - it's the best way to get your own designs into code. Add a website MCP when your reference is the web rather than a file. They don't overlap, and agents pick the right tool from the prompt.",[56,332,334],{"id":333},"common-problems","Common problems",[131,336,337,343,349,355],{},[134,338,339,342],{},[64,340,341],{},"\"No design context returned\""," - you need at least view access to the file, and a frame selected (desktop server) or a frame link in the prompt (remote server).",[134,344,345,348],{},[64,346,347],{},"Output ignores your design tokens"," - the file probably uses raw values instead of variables. Variables come through as tokens; hard-coded hex values come through as hex.",[134,350,351,354],{},[64,352,353],{},"Usage limits on the remote server"," - if you're on a View or Collab seat, you may hit limits. A Dev or Full seat lifts them.",[134,356,357,360],{},[64,358,359],{},"The live site doesn't match the Figma file"," - production drifted. Extract from the URL to get what's actually shipped, then decide which one is right.",[56,362,364],{"id":363},"or-use-one-api-call","Or use one API call",[11,366,367,368,372],{},"If you're not working inside an agent - a script, a CI job, an internal tool - the same extraction is a plain HTTP API: one GET request returns a section as code, plus its tokens. You can start for free: ",[116,369,371],{"href":370},"/api/onboarding","get a free API key",", 300 credits a month, no card.",[374,375,376],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":20,"searchDepth":378,"depth":378,"links":379},2,[380,381,382,383,384,385,386],{"id":58,"depth":378,"text":59},{"id":125,"depth":378,"text":126},{"id":163,"depth":378,"text":164},{"id":199,"depth":378,"text":200},{"id":263,"depth":378,"text":264},{"id":333,"depth":378,"text":334},{"id":363,"depth":378,"text":364},"AI Engineering","2026-10-03","Set up the Figma MCP server in Claude Code, Cursor and VS Code in one command, see what design context it actually gives your agent, and what to use when the design only exists as a live website.","md",[392,395,398,401,404],{"question":393,"answer":394},"How do I add the Figma MCP to Claude Code?","Run claude mcp add --transport http figma https://mcp.figma.com/mcp in your terminal, then start Claude Code and sign in to Figma when prompted. Figma also ships a Claude Code plugin (claude plugin install figma@claude-plugins-official) that adds the same server plus ready-made skills.",{"question":396,"answer":397},"Is the Figma MCP server free?","Figma's remote MCP server is available on all seats and plans, but seats other than Dev or Full may have usage limits. The desktop MCP server, which runs through the Figma desktop app, needs a Dev or Full seat on a paid plan.",{"question":399,"answer":400},"What does the Figma MCP give my AI agent?","Design context from a Figma file you can view: the structure of a selected frame, its variables and styles, component information and a screenshot. The agent uses that to write code that matches the design instead of guessing from an image.",{"question":402,"answer":403},"Can I use an MCP to get design context from a website instead of a Figma file?","Yes. A website-extraction MCP such as MiroMiro reads a live URL and returns the rendered page's real code, design tokens, brand colors, fonts and assets. Use it when the reference is a live site, a competitor, or an old site whose Figma file no longer exists.",{"question":405,"answer":406},"Can I use the Figma MCP and a website MCP together?","Yes, and it's a common setup: Figma MCP for the screens your team designed, a website MCP for the live sites you're referencing or migrating from. Both are remote URLs, so you add each once and the agent picks the right tool from the prompt.",null,{},true,"/api-blog/figma-mcp-setup-and-alternatives",7,[413,414,415],"connect-miromiro-mcp-claude-cursor-chatgpt","add-design-extraction-to-claude-code-mcp","best-design-to-code-apis-2026",{"title":5,"description":389},"Figma MCP: Setup + What to Use Without a Figma File","api-blog/figma-mcp-setup-and-alternatives",[420,421,422,423,424,425,426],"figma mcp","mcp","figma","claude code","cursor","design to code","ai agents","2qWWWhWRUhTg5T098ol9uRFjOtx5VuBnbFS-UbeX1kM",[429,1193,1730],{"id":430,"title":431,"author":6,"body":432,"category":387,"date":1166,"dateModified":1167,"description":1168,"extension":390,"faqs":1169,"image":407,"meta":1181,"navigation":409,"path":1182,"readingTime":653,"relatedSlugs":1183,"seo":1186,"seoTitle":1187,"stem":1188,"tags":1189,"__hash__":1192},"apiBlog/api-blog/connect-miromiro-mcp-claude-cursor-chatgpt.md","How to Connect the MiroMiro MCP to Claude, Cursor, ChatGPT and Codex",{"type":8,"value":433,"toc":1148},[434,441,448,452,455,509,516,522,531,534,547,668,674,678,681,754,760,763,766,774,778,784,801,807,810,813,833,840,897,905,909,912,981,984,988,991,1005,1007,1046,1050,1057,1061,1064,1098,1105,1109,1114,1117,1121,1124,1128,1131,1135,1145],[11,435,436,437,440],{},"Every client that speaks MCP can connect to MiroMiro with one URL. Paste ",[22,438,439],{},"https://miromiro.app/mcp"," into the client's connector settings and seven design-extraction tools appear in your chats: section-to-code, brand, design tokens, images, SVGs, fonts, and Lottie.",[11,442,443,444,447],{},"You do not need to paste a key. The bare URL triggers a one-click sign in with your MiroMiro account - ",[116,445,446],{"href":370},"free",", 300 credits a month, no card. Client-by-client steps below.",[56,449,451],{"id":450},"claude-web-and-desktop","Claude - web and desktop",[11,453,454],{},"Claude calls these custom connectors. Two ways in:",[456,457,458,476,496,499],"ol",{},[134,459,460,461,464,465,468,469,468,472,475],{},"In any chat, click the ",[64,462,463],{},"+"," button in the input, then ",[64,466,467],{},"Connectors"," → ",[64,470,471],{},"Add connector",[64,473,474],{},"Add custom connector",". (Settings → Connectors gets you to the same dialog.)",[134,477,478,479],{},"In the dialog, fill in:\n",[131,480,481,489],{},[134,482,483,486,487],{},[64,484,485],{},"Name:"," ",[22,488,207],{},[134,490,491,486,494],{},[64,492,493],{},"URL:",[22,495,439],{},[134,497,498],{},"Leave the OAuth Client ID and Secret fields under Advanced settings empty - Claude discovers them from the server.",[134,500,501,502,505,506,260],{},"Click ",[64,503,504],{},"Add",". Claude opens the MiroMiro sign-in page; approve it and the tools are live in every chat - ask \"get the brand colors and fonts of stripe.com\" and watch it call ",[22,507,508],{},"extract_brand",[11,510,511],{},[512,513],"img",{"alt":514,"src":515},"Claude's + menu: Connectors, then Add connector, then Add custom connector","/api-blog/connector1.png",[11,517,518],{},[512,519],{"alt":520,"src":521},"Claude's Add custom connector dialog with the MiroMiro name and URL filled in","/api-blog/connector2.png",[11,523,524,525,530],{},"One click faster: ",[116,526,529],{"href":527,"rel":528},"https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=MiroMiro&connectorUrl=https%3A%2F%2Fmiromiro.app%2Fmcp",[120],"Add MiroMiro to Claude"," opens this dialog with the name and URL pre-filled - you just click Add and sign in.",[56,532,533],{"id":424},"Cursor",[11,535,536,537,542,543,546],{},"Cursor supports install deeplinks, so ",[116,538,541],{"href":539,"rel":540},"https://cursor.com/install-mcp?name=miromiro&config=eyJ1cmwiOiJodHRwczovL21pcm9taXJvLmFwcC9tY3AifQ%3D%3D",[120],"Add MiroMiro to Cursor"," does the whole thing in one click - it opens Cursor with the server config pre-filled. Manual version, in ",[22,544,545],{},"~/.cursor/mcp.json",":",[15,548,552],{"className":549,"code":550,"language":551,"meta":20,"style":20},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"mcpServers\": {\n    \"miromiro\": {\n      \"url\": \"https://miromiro.app/mcp\",\n      \"headers\": { \"Authorization\": \"Bearer mm_live_your_key\" }\n    }\n  }\n}\n","json",[22,553,554,560,577,592,616,651,657,662],{"__ignoreMap":20},[25,555,556],{"class":27,"line":28},[25,557,559],{"class":558},"sMK4o","{\n",[25,561,562,565,569,572,574],{"class":27,"line":378},[25,563,564],{"class":558},"  \"",[25,566,568],{"class":567},"spNyl","mcpServers",[25,570,571],{"class":558},"\"",[25,573,546],{"class":558},[25,575,576],{"class":558}," {\n",[25,578,580,583,586,588,590],{"class":27,"line":579},3,[25,581,582],{"class":558},"    \"",[25,584,585],{"class":31},"miromiro",[25,587,571],{"class":558},[25,589,546],{"class":558},[25,591,576],{"class":558},[25,593,595,598,602,604,606,609,611,613],{"class":27,"line":594},4,[25,596,597],{"class":558},"      \"",[25,599,601],{"class":600},"sbssI","url",[25,603,571],{"class":558},[25,605,546],{"class":558},[25,607,608],{"class":558}," \"",[25,610,439],{"class":35},[25,612,571],{"class":558},[25,614,615],{"class":558},",\n",[25,617,619,621,624,626,628,631,633,637,639,641,643,646,648],{"class":27,"line":618},5,[25,620,597],{"class":558},[25,622,623],{"class":600},"headers",[25,625,571],{"class":558},[25,627,546],{"class":558},[25,629,630],{"class":558}," {",[25,632,608],{"class":558},[25,634,636],{"class":635},"swJcz","Authorization",[25,638,571],{"class":558},[25,640,546],{"class":558},[25,642,608],{"class":558},[25,644,645],{"class":35},"Bearer mm_live_your_key",[25,647,571],{"class":558},[25,649,650],{"class":558}," }\n",[25,652,654],{"class":27,"line":653},6,[25,655,656],{"class":558},"    }\n",[25,658,659],{"class":27,"line":411},[25,660,661],{"class":558},"  }\n",[25,663,665],{"class":27,"line":664},8,[25,666,667],{"class":558},"}\n",[11,669,670,671,673],{},"Drop the ",[22,672,623],{}," line and Cursor prompts you to sign in instead - either works. If you do use a key, the header keeps it out of logs. Restart Cursor and check the MCP panel for the seven tools.",[56,675,677],{"id":676},"chatgpt","ChatGPT",[11,679,680],{},"ChatGPT only takes remote servers, which is exactly what this is:",[456,682,683,695,741],{},[134,684,685,468,688,691,692],{},[64,686,687],{},"Settings",[64,689,690],{},"Security and login"," → enable ",[64,693,694],{},"Developer mode",[134,696,697,468,699,702,703,708,709,712,713],{},[64,698,687],{},[64,700,701],{},"Plugins"," (or go straight to ",[116,704,707],{"href":705,"rel":706},"https://chatgpt.com/plugins",[120],"chatgpt.com/plugins",") → ",[64,710,711],{},"New Plugin",":\n",[131,714,715,721,729,735],{},[134,716,717,486,719],{},[64,718,485],{},[22,720,207],{},[134,722,723,726,727],{},[64,724,725],{},"Connection:"," Server URL, ",[22,728,439],{},[134,730,731,734],{},[64,732,733],{},"Authentication:"," OAuth - ChatGPT reads the sign-in settings from the server, so there is nothing to configure",[134,736,737,738],{},"Tick the custom-server acknowledgment and click ",[64,739,740],{},"Create",[134,742,743,744,747,748,750,751,260],{},"ChatGPT shows a consent card. Click ",[64,745,746],{},"Sign in with MiroMiro",", approve, and the tools appear in any chat via the ",[64,749,463],{}," menu → ",[64,752,753],{},"More",[11,755,756],{},[512,757],{"alt":758,"src":759},"ChatGPT's Add MiroMiro to ChatGPT consent screen with the Sign in with MiroMiro button","/api-blog/chatgpt-consent.png",[11,761,762],{},"OpenAI has renamed this area twice recently - if your build still says Apps & Connectors, the Developer mode toggle lives under Advanced there instead.",[11,764,765],{},"Prefer to delegate? Paste this prompt into the assistant and let it do the guiding - ChatGPT walks you through its own settings, and Codex installs the server for real:",[15,767,772],{"className":768,"code":770,"language":771,"meta":20},[769],"language-text","Add the MiroMiro MCP server to this client.\n\nServer name: miromiro\nServer URL:  https://miromiro.app/mcp\nTransport:   Streamable HTTP (stateless JSON responses)\nAuth:        OAuth (auto-discovered). On first connect you'll be asked to sign in to MiroMiro - a free account includes 300 credits/month, no card. API keys also work: append ?access_key=mm_live_YOUR_KEY or send \"Authorization: Bearer\".\n\nIf you are ChatGPT: Settings → Security and login → enable Developer mode, then Settings → Plugins (chatgpt.com/plugins) → New Plugin with the URL above (authentication: OAuth).\nIf you are Codex CLI: add to ~/.codex/config.toml:\n[mcp_servers.miromiro]\nurl = \"https://miromiro.app/mcp\"\n\nThen list the tools - you should see extract_code, extract_brand, extract_design_tokens, extract_assets, extract_svgs, extract_fonts and extract_lottie.\n","text",[22,773,770],{"__ignoreMap":20},[56,775,777],{"id":776},"codex-cli","Codex CLI",[11,779,780,781,546],{},"Add to ",[22,782,783],{},"~/.codex/config.toml",[15,785,789],{"className":786,"code":787,"language":788,"meta":20,"style":20},"language-toml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[mcp_servers.miromiro]\nurl = \"https://miromiro.app/mcp\"\n","toml",[22,790,791,796],{"__ignoreMap":20},[25,792,793],{"class":27,"line":28},[25,794,795],{},"[mcp_servers.miromiro]\n",[25,797,798],{"class":27,"line":378},[25,799,800],{},"url = \"https://miromiro.app/mcp\"\n",[11,802,803,804,260],{},"Codex prompts you to sign in on first use. To pin a key instead, use ",[22,805,806],{},"url = \"https://miromiro.app/mcp?access_key=mm_live_your_key\"",[56,808,80],{"id":809},"claude-code",[11,811,812],{},"One command in your terminal, not inside a session:",[15,814,815],{"className":17,"code":218,"language":19,"meta":20,"style":20},[22,816,817],{"__ignoreMap":20},[25,818,819,821,823,825,827,829,831],{"class":27,"line":28},[25,820,32],{"class":31},[25,822,36],{"class":35},[25,824,39],{"class":35},[25,826,42],{"class":35},[25,828,45],{"class":35},[25,830,235],{"class":35},[25,832,238],{"class":35},[11,834,835,836,839],{},"Then run ",[22,837,838],{},"/mcp"," inside a session to sign in - Claude Code opens the browser consent page once and stores the token. If you'd rather skip the browser, pass the key directly:",[15,841,843],{"className":17,"code":842,"language":19,"meta":20,"style":20},"claude mcp add --transport http miromiro https://miromiro.app/mcp \\\n  --header \"Authorization: Bearer mm_live_your_key\"\n\nclaude mcp list   # look for \"✓ Connected\"\n",[22,844,845,866,879,884],{"__ignoreMap":20},[25,846,847,849,851,853,855,857,859,862],{"class":27,"line":28},[25,848,32],{"class":31},[25,850,36],{"class":35},[25,852,39],{"class":35},[25,854,42],{"class":35},[25,856,45],{"class":35},[25,858,235],{"class":35},[25,860,861],{"class":35}," https://miromiro.app/mcp",[25,863,865],{"class":864},"sTEyZ"," \\\n",[25,867,868,871,873,876],{"class":27,"line":378},[25,869,870],{"class":35},"  --header",[25,872,608],{"class":558},[25,874,875],{"class":35},"Authorization: Bearer mm_live_your_key",[25,877,878],{"class":558},"\"\n",[25,880,881],{"class":27,"line":579},[25,882,883],{"emptyLinePlaceholder":409},"\n",[25,885,886,888,890,893],{"class":27,"line":594},[25,887,32],{"class":31},[25,889,36],{"class":35},[25,891,892],{"class":35}," list",[25,894,896],{"class":895},"sHwdD","   # look for \"✓ Connected\"\n",[11,898,899,900,904],{},"Claude Code also runs the ",[116,901,903],{"href":902},"/api/blog/add-design-extraction-to-claude-code-mcp","local npm package"," if you prefer the key in an env var instead of a header.",[56,906,908],{"id":907},"sign-in-vs-pasting-a-key","Sign-in vs pasting a key",[11,910,911],{},"Both end up in the same place: signing in links your account and provisions a free API key behind the scenes, so the tiers are identical either way.",[266,913,914,926],{},[269,915,916],{},[272,917,918,920,923],{},[275,919],{},[275,921,922],{},"Free account",[275,924,925],{},"Paid plans",[285,927,928,938,949,960,970],{},[272,929,930,933,936],{},[290,931,932],{},"Results",[290,934,935],{},"Full",[290,937,935],{},[272,939,940,943,946],{},[290,941,942],{},"Rate limit",[290,944,945],{},"30/min",[290,947,948],{},"60 to 300/min",[272,950,951,954,957],{},[290,952,953],{},"Credits",[290,955,956],{},"300/month",[290,958,959],{},"5,000 to 200,000/month",[272,961,962,965,968],{},[290,963,964],{},"Usage and logs",[290,966,967],{},"Dashboard",[290,969,967],{},[272,971,972,975,978],{},[290,973,974],{},"Price",[290,976,977],{},"Free, no card",[290,979,980],{},"From €19/month",[11,982,983],{},"Sign-in is the better default: no key to store, tokens expire and refresh on their own, and revoking the connector kills access without touching your other keys. Paste a key only where a client cannot run the sign-in flow.",[56,985,987],{"id":986},"what-to-ask-once-connected","What to ask once connected",[11,989,990],{},"You never name tools in prompts - ask design-shaped questions and the agent picks the right one:",[131,992,993,996,999,1002],{},[134,994,995],{},"\"Rebuild stripe.com's pricing section in React\"",[134,997,998],{},"\"Extract linear.app's design tokens and restyle our Button component to match\"",[134,1000,1001],{},"\"What fonts does vercel.com actually load?\"",[134,1003,1004],{},"\"Pull the brand palette from ourcustomer.com and generate a theme file\"",[56,1006,334],{"id":333},[131,1008,1009,1020,1026,1036],{},[134,1010,1011,1014,1015,1019],{},[64,1012,1013],{},"\"Invalid or revoked API key\" in the tool result."," The key in your URL or header is wrong or was rotated. Grab the current one from ",[116,1016,1018],{"href":1017},"/api/dashboard/keys","API Keys"," - keys are shown once at creation, so rotate if you lost it.",[134,1021,1022,1025],{},[64,1023,1024],{},"The client keeps asking you to sign in."," Remove the connector and add it again - a stale token from a revoked link is the usual cause. Tokens normally refresh on their own for 180 days.",[134,1027,1028,1031,1032,1035],{},[64,1029,1030],{},"Thin results on an app-like site."," The engine reads static HTML and CSS by default, so a fully client-rendered app returns little - and the tools say so instead of inventing values. The fix is one argument: ",[22,1033,1034],{},"render: true"," loads the page in a real browser and runs its JavaScript before extracting (+5 credits). The thin response includes a hint telling the agent exactly that.",[134,1037,1038,1041,1042,1045],{},[64,1039,1040],{},"Claude web has no header field."," Correct - claude.ai custom connectors cannot send custom headers. You do not need one: the sign-in flow handles auth, and ",[22,1043,1044],{},"?access_key="," still works if you prefer a pinned key.",[56,1047,1049],{"id":1048},"already-using-the-figma-mcp","Already using the Figma MCP?",[11,1051,1052,1053,260],{},"Keep it. Figma's server reads your own design files; MiroMiro reads live websites. They are both remote URLs and work side by side in the same client - the comparison and the Figma setup steps are in ",[116,1054,1056],{"href":1055},"/api/blog/figma-mcp-setup-and-alternatives","Figma MCP: setup and what to use without a Figma file",[56,1058,1060],{"id":1059},"or-skip-mcp-entirely","Or skip MCP entirely",[11,1062,1063],{},"The same engine is a plain REST API:",[15,1065,1067],{"className":17,"code":1066,"language":19,"meta":20,"style":20},"curl \"https://miromiro.app/api/v1/brand?url=stripe.com\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[22,1068,1069,1083],{"__ignoreMap":20},[25,1070,1071,1074,1076,1079,1081],{"class":27,"line":28},[25,1072,1073],{"class":31},"curl",[25,1075,608],{"class":558},[25,1077,1078],{"class":35},"https://miromiro.app/api/v1/brand?url=stripe.com",[25,1080,571],{"class":558},[25,1082,865],{"class":864},[25,1084,1085,1088,1090,1093,1096],{"class":27,"line":378},[25,1086,1087],{"class":35},"  -H",[25,1089,608],{"class":558},[25,1091,1092],{"class":35},"Authorization: Bearer ",[25,1094,1095],{"class":864},"$MIROMIRO_API_KEY",[25,1097,878],{"class":558},[11,1099,1100,1101,1104],{},"Full reference at ",[116,1102,1103],{"href":1103},"/api/docs",". You can start for free.",[56,1106,1108],{"id":1107},"frequently-asked-questions","Frequently asked questions",[1110,1111,1113],"h3",{"id":1112},"how-do-i-add-a-custom-mcp-connector-to-claude-web","How do I add a custom MCP connector to Claude web?",[11,1115,1116],{},"The + button in the chat input → Connectors → Add connector → Add custom connector. Name it, paste the URL, click Add, then approve the MiroMiro sign-in page it opens.",[1110,1118,1120],{"id":1119},"do-i-need-a-key-to-try-it","Do I need a key to try it?",[11,1122,1123],{},"No. Paste the bare URL and sign in with a MiroMiro account when prompted - free, 300 credits a month, no card. Keys are the fallback for clients that cannot run the sign-in flow.",[1110,1125,1127],{"id":1126},"which-clients-does-the-remote-server-work-with","Which clients does the remote server work with?",[11,1129,1130],{},"Claude web and desktop, Cursor, ChatGPT developer mode, Codex, Claude Code, Windsurf, and any MCP SDK. If it takes a server URL, it works.",[1110,1132,1134],{"id":1133},"where-does-my-key-go-safest","Where does my key go safest?",[11,1136,1137,1138,1141,1142,1144],{},"Header (",[22,1139,1140],{},"Authorization: Bearer",") where the client supports it - Cursor, Claude Code, SDKs. URL (",[22,1143,1044],{},") only where headers are not an option - claude.ai, ChatGPT. Rotate keys anytime in the dashboard.",[374,1146,1147],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":20,"searchDepth":378,"depth":378,"links":1149},[1150,1151,1152,1153,1154,1155,1156,1157,1158,1159,1160],{"id":450,"depth":378,"text":451},{"id":424,"depth":378,"text":533},{"id":676,"depth":378,"text":677},{"id":776,"depth":378,"text":777},{"id":809,"depth":378,"text":80},{"id":907,"depth":378,"text":908},{"id":986,"depth":378,"text":987},{"id":333,"depth":378,"text":334},{"id":1048,"depth":378,"text":1049},{"id":1059,"depth":378,"text":1060},{"id":1107,"depth":378,"text":1108,"children":1161},[1162,1163,1164,1165],{"id":1112,"depth":579,"text":1113},{"id":1119,"depth":579,"text":1120},{"id":1126,"depth":579,"text":1127},{"id":1133,"depth":579,"text":1134},"2026-07-20","2026-07-23","Step-by-step connector setup for every client: paste one URL into Claude web, one-click install in Cursor, developer mode in ChatGPT, one command in Claude Code. Sign in with your MiroMiro account, no key pasting.",[1170,1172,1175,1178],{"question":1113,"answer":1171},"Click the + button in the chat input, choose Connectors, then Add connector and Add custom connector. Name it, paste the server URL (for MiroMiro: https://miromiro.app/mcp), and click Add. Claude then opens a MiroMiro sign-in page; approve it and the tools are live. Leave the OAuth Client ID and Secret fields empty - discovery fills them in.",{"question":1173,"answer":1174},"Do I need an API key to use the MiroMiro MCP?","No. Paste the bare URL https://miromiro.app/mcp and the client prompts you to sign in with a MiroMiro account (free, 300 credits a month, no card). Pasting a key still works: send it as an Authorization: Bearer header, or append ?access_key=mm_live_your_key in clients without header support.",{"question":1176,"answer":1177},"How do I connect an MCP server to ChatGPT?","Settings, then Security and login, then enable Developer mode. Open Settings, then Plugins (chatgpt.com/plugins), create a New Plugin with the MCP server URL and Authentication set to OAuth, and sign in when prompted. ChatGPT requires remote (URL-based) servers - it cannot run local stdio packages.",{"question":1179,"answer":1180},"What is the difference between the remote MCP server and the npm package?","Same seven tools. The remote server (https://miromiro.app/mcp) is a hosted URL - nothing to install, works in browser clients like claude.ai and ChatGPT. The npm package (npx miromiro-mcp) runs locally and reads the key from an env var, which keeps it out of any URL.",{},"/api-blog/connect-miromiro-mcp-claude-cursor-chatgpt",[1184,414,1185,415],"figma-mcp-setup-and-alternatives","how-to-extract-design-tokens-from-any-website-in-python",{"title":431,"description":1168},"Connect the MiroMiro MCP to Claude, Cursor, ChatGPT & Codex","api-blog/connect-miromiro-mcp-claude-cursor-chatgpt",[421,32,424,676,1190,1191,426],"codex","connectors","AtuyTvtJh1fM4flBCykb5ImQ5h-rfx4Nqm7JdBN8qyM",{"id":1194,"title":1195,"author":6,"body":1196,"category":387,"date":1707,"dateModified":407,"description":1708,"extension":390,"faqs":1709,"image":407,"meta":1721,"navigation":409,"path":1722,"readingTime":618,"relatedSlugs":1723,"seo":1725,"seoTitle":407,"stem":1726,"tags":1727,"__hash__":1729},"apiBlog/api-blog/add-design-extraction-to-claude-code-mcp.md","Add Design Extraction to Claude Code with MCP",{"type":8,"value":1197,"toc":1691},[1198,1201,1262,1265,1273,1277,1280,1287,1291,1301,1305,1316,1355,1365,1369,1405,1408,1417,1421,1427,1556,1562,1566,1599,1603,1608,1610,1613,1643,1649,1651,1655,1664,1668,1671,1675,1678,1682,1688],[11,1199,1200],{},"Two commands and Claude Code can read any website's design system instead of guessing it from a screenshot. Here is the whole setup:",[15,1202,1204],{"className":17,"code":1203,"language":19,"meta":20,"style":20},"claude mcp add miromiro -s user \\\n  --env MIROMIRO_API_KEY=mm_live_your_key \\\n  -- npx -y miromiro-mcp\n\nclaude mcp list   # look for \"✓ Connected\"\n",[22,1205,1206,1224,1234,1248,1252],{"__ignoreMap":20},[25,1207,1208,1210,1212,1214,1216,1219,1222],{"class":27,"line":28},[25,1209,32],{"class":31},[25,1211,36],{"class":35},[25,1213,39],{"class":35},[25,1215,235],{"class":35},[25,1217,1218],{"class":35}," -s",[25,1220,1221],{"class":35}," user",[25,1223,865],{"class":864},[25,1225,1226,1229,1232],{"class":27,"line":378},[25,1227,1228],{"class":35},"  --env",[25,1230,1231],{"class":35}," MIROMIRO_API_KEY=mm_live_your_key",[25,1233,865],{"class":864},[25,1235,1236,1239,1242,1245],{"class":27,"line":579},[25,1237,1238],{"class":35},"  --",[25,1240,1241],{"class":35}," npx",[25,1243,1244],{"class":35}," -y",[25,1246,1247],{"class":35}," miromiro-mcp\n",[25,1249,1250],{"class":27,"line":594},[25,1251,883],{"emptyLinePlaceholder":409},[25,1253,1254,1256,1258,1260],{"class":27,"line":618},[25,1255,32],{"class":31},[25,1257,36],{"class":35},[25,1259,892],{"class":35},[25,1261,896],{"class":895},[11,1263,1264],{},"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.",[11,1266,1267,1268,1270,1271,260],{},"No terminal, or you use Claude in the browser? There is also a hosted server - paste ",[22,1269,439],{}," into any client that takes a URL. Full walkthrough for Claude web, Cursor, ChatGPT and Codex in ",[116,1272,259],{"href":258},[56,1274,1276],{"id":1275},"why-bother","Why bother",[11,1278,1279],{},"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.",[11,1281,1282,1283,260],{},"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 ",[116,1284,1286],{"href":1285},"/api/use-cases/ai-agent-ground-truth","ground truth for AI agents",[56,1288,1290],{"id":1289},"step-1-get-a-key","Step 1: get a key",[11,1292,1293,1294,1297,1298,260],{},"Sign in and mint one at ",[116,1295,1296],{"href":1017},"miromiro.app/api/dashboard/keys",". 300 free credits a month, no card. Keys look like ",[22,1299,1300],{},"mm_live_...",[56,1302,1304],{"id":1303},"step-2-add-the-server","Step 2: add the server",[11,1306,1307,1308,1311,1312,1315],{},"The server is a local stdio process (",[22,1309,1310],{},"npx miromiro-mcp",") that reads your key from ",[22,1313,1314],{},"MIROMIRO_API_KEY",". Run this in your terminal - not inside a Claude session; you are configuring the server before the conversation starts:",[15,1317,1319],{"className":17,"code":1318,"language":19,"meta":20,"style":20},"claude mcp add miromiro -s user \\\n  --env MIROMIRO_API_KEY=mm_live_your_key \\\n  -- npx -y miromiro-mcp\n",[22,1320,1321,1337,1345],{"__ignoreMap":20},[25,1322,1323,1325,1327,1329,1331,1333,1335],{"class":27,"line":28},[25,1324,32],{"class":31},[25,1326,36],{"class":35},[25,1328,39],{"class":35},[25,1330,235],{"class":35},[25,1332,1218],{"class":35},[25,1334,1221],{"class":35},[25,1336,865],{"class":864},[25,1338,1339,1341,1343],{"class":27,"line":378},[25,1340,1228],{"class":35},[25,1342,1231],{"class":35},[25,1344,865],{"class":864},[25,1346,1347,1349,1351,1353],{"class":27,"line":579},[25,1348,1238],{"class":35},[25,1350,1241],{"class":35},[25,1352,1244],{"class":35},[25,1354,1247],{"class":35},[11,1356,1357,1360,1361,1364],{},[22,1358,1359],{},"-s user"," registers it for every project; drop it to scope to the current one. The ",[22,1362,1363],{},"-y"," matters: it lets npx start the package unattended, so the editor can spawn the server without an install prompt.",[56,1366,1368],{"id":1367},"step-3-verify-and-use-it","Step 3: verify and use it",[15,1370,1372],{"className":17,"code":1371,"language":19,"meta":20,"style":20},"claude mcp list\n# miromiro ... ✓ Connected\n\nclaude\n> Use the miromiro server to get the brand colors and fonts of stripe.com\n",[22,1373,1374,1383,1388,1392,1397],{"__ignoreMap":20},[25,1375,1376,1378,1380],{"class":27,"line":28},[25,1377,32],{"class":31},[25,1379,36],{"class":35},[25,1381,1382],{"class":35}," list\n",[25,1384,1385],{"class":27,"line":378},[25,1386,1387],{"class":895},"# miromiro ... ✓ Connected\n",[25,1389,1390],{"class":27,"line":579},[25,1391,883],{"emptyLinePlaceholder":409},[25,1393,1394],{"class":27,"line":594},[25,1395,1396],{"class":31},"claude\n",[25,1398,1399,1402],{"class":27,"line":618},[25,1400,1401],{"class":558},">",[25,1403,1404],{"class":864}," Use the miromiro server to get the brand colors and fonts of stripe.com\n",[11,1406,1407],{},"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:",[131,1409,1410,1412,1415],{},[134,1411,998],{},[134,1413,1414],{},"\"Get vercel.com's hero section as Tailwind and adapt it for our landing page\"",[134,1416,1004],{},[56,1418,1420],{"id":1419},"cursor-and-windsurf","Cursor and Windsurf",[11,1422,1423,1424,1426],{},"Both take the standard ",[22,1425,568],{}," JSON block:",[15,1428,1430],{"className":549,"code":1429,"language":551,"meta":20,"style":20},"{\n  \"mcpServers\": {\n    \"miromiro\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"miromiro-mcp\"],\n      \"env\": { \"MIROMIRO_API_KEY\": \"mm_live_your_key\" }\n    }\n  }\n}\n",[22,1431,1432,1436,1448,1460,1480,1513,1543,1547,1551],{"__ignoreMap":20},[25,1433,1434],{"class":27,"line":28},[25,1435,559],{"class":558},[25,1437,1438,1440,1442,1444,1446],{"class":27,"line":378},[25,1439,564],{"class":558},[25,1441,568],{"class":567},[25,1443,571],{"class":558},[25,1445,546],{"class":558},[25,1447,576],{"class":558},[25,1449,1450,1452,1454,1456,1458],{"class":27,"line":579},[25,1451,582],{"class":558},[25,1453,585],{"class":31},[25,1455,571],{"class":558},[25,1457,546],{"class":558},[25,1459,576],{"class":558},[25,1461,1462,1464,1467,1469,1471,1473,1476,1478],{"class":27,"line":594},[25,1463,597],{"class":558},[25,1465,1466],{"class":600},"command",[25,1468,571],{"class":558},[25,1470,546],{"class":558},[25,1472,608],{"class":558},[25,1474,1475],{"class":35},"npx",[25,1477,571],{"class":558},[25,1479,615],{"class":558},[25,1481,1482,1484,1487,1489,1491,1494,1496,1498,1500,1503,1505,1508,1510],{"class":27,"line":618},[25,1483,597],{"class":558},[25,1485,1486],{"class":600},"args",[25,1488,571],{"class":558},[25,1490,546],{"class":558},[25,1492,1493],{"class":558}," [",[25,1495,571],{"class":558},[25,1497,1363],{"class":35},[25,1499,571],{"class":558},[25,1501,1502],{"class":558},",",[25,1504,608],{"class":558},[25,1506,1507],{"class":35},"miromiro-mcp",[25,1509,571],{"class":558},[25,1511,1512],{"class":558},"],\n",[25,1514,1515,1517,1520,1522,1524,1526,1528,1530,1532,1534,1536,1539,1541],{"class":27,"line":653},[25,1516,597],{"class":558},[25,1518,1519],{"class":600},"env",[25,1521,571],{"class":558},[25,1523,546],{"class":558},[25,1525,630],{"class":558},[25,1527,608],{"class":558},[25,1529,1314],{"class":635},[25,1531,571],{"class":558},[25,1533,546],{"class":558},[25,1535,608],{"class":558},[25,1537,1538],{"class":35},"mm_live_your_key",[25,1540,571],{"class":558},[25,1542,650],{"class":558},[25,1544,1545],{"class":27,"line":411},[25,1546,656],{"class":558},[25,1548,1549],{"class":27,"line":664},[25,1550,661],{"class":558},[25,1552,1554],{"class":27,"line":1553},9,[25,1555,667],{"class":558},[11,1557,1558,1559,1561],{},"Cursor: ",[22,1560,545],{},". Windsurf: Settings → MCP. Restart the editor after saving; both show the server's tools in their MCP panel when connected.",[56,1563,1565],{"id":1564},"things-worth-knowing","Things worth knowing",[131,1567,1568,1577,1583],{},[134,1569,1570,1573,1574,1576],{},[64,1571,1572],{},"It reads static HTML + CSS by default."," A fully client-rendered app can return little that way - and the tools say so rather than inventing a result, which is the behavior you want in an agent pipeline. When that happens, pass ",[22,1575,1034],{}," on any tool: the page loads in a real browser and its JavaScript runs before extraction (+5 credits). The response even includes a hint telling the agent to do exactly that.",[134,1578,1579,1582],{},[64,1580,1581],{},"Credits:"," a token extraction is 10 credits, brand 15, section-to-code 25. The free 300/month covers real experimentation; the agent sees remaining quota in each response's usage object.",[134,1584,1585,1588,1589,1592,1593,1596,1597,260],{},[64,1586,1587],{},"Server not connecting?"," It is almost always the key: check ",[22,1590,1591],{},"claude mcp list",", and confirm the env var made it in (",[22,1594,1595],{},"claude mcp get miromiro","). Node 18+ is required for ",[22,1598,1475],{},[56,1600,1602],{"id":1601},"using-it-alongside-the-figma-mcp","Using it alongside the Figma MCP",[11,1604,1605,1606,260],{},"If your team also designs in Figma, run both: Figma's server for the screens you designed, this one for the live sites you reference or migrate from. Claude Code picks the right tool from the prompt. Setup for the Figma side is in ",[116,1607,1056],{"href":1055},[56,1609,1060],{"id":1059},[11,1611,1612],{},"The same engine is a plain REST API if your agent framework speaks HTTP instead:",[15,1614,1616],{"className":17,"code":1615,"language":19,"meta":20,"style":20},"curl \"https://miromiro.app/api/v1/extract?url=stripe.com\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[22,1617,1618,1631],{"__ignoreMap":20},[25,1619,1620,1622,1624,1627,1629],{"class":27,"line":28},[25,1621,1073],{"class":31},[25,1623,608],{"class":558},[25,1625,1626],{"class":35},"https://miromiro.app/api/v1/extract?url=stripe.com",[25,1628,571],{"class":558},[25,1630,865],{"class":864},[25,1632,1633,1635,1637,1639,1641],{"class":27,"line":378},[25,1634,1087],{"class":35},[25,1636,608],{"class":558},[25,1638,1092],{"class":35},[25,1640,1095],{"class":864},[25,1642,878],{"class":558},[11,1644,1645,1646,260],{},"Full setup docs, including the agent quickstart, live at ",[116,1647,1648],{"href":1648},"/api/docs/install-mcp",[56,1650,1108],{"id":1107},[1110,1652,1654],{"id":1653},"how-do-i-add-an-mcp-server-to-claude-code","How do I add an MCP server to Claude Code?",[11,1656,1657,1660,1661,1663],{},[22,1658,1659],{},"claude mcp add \u003Cname> ... -- \u003Ccommand>"," in your terminal, then ",[22,1662,1591],{}," to confirm it connected. Exact MiroMiro command at the top of this post.",[1110,1665,1667],{"id":1666},"what-tools-does-the-server-expose","What tools does the server expose?",[11,1669,1670],{},"Seven: design tokens, brand, images, SVGs, fonts, Lottie, and section-to-code. They register automatically; the agent picks per task.",[1110,1672,1674],{"id":1673},"why-tokens-instead-of-a-screenshot","Why tokens instead of a screenshot?",[11,1676,1677],{},"Screenshots make the model guess every value. Tokens are the site's real CSS - the difference between imitation and ground truth.",[1110,1679,1681],{"id":1680},"does-it-work-with-cursor-and-windsurf","Does it work with Cursor and Windsurf?",[11,1683,1684,1685,1687],{},"Yes - standard ",[22,1686,568],{}," JSON (above), restart, done.",[374,1689,1690],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":20,"searchDepth":378,"depth":378,"links":1692},[1693,1694,1695,1696,1697,1698,1699,1700,1701],{"id":1275,"depth":378,"text":1276},{"id":1289,"depth":378,"text":1290},{"id":1303,"depth":378,"text":1304},{"id":1367,"depth":378,"text":1368},{"id":1419,"depth":378,"text":1420},{"id":1564,"depth":378,"text":1565},{"id":1601,"depth":378,"text":1602},{"id":1059,"depth":378,"text":1060},{"id":1107,"depth":378,"text":1108,"children":1702},[1703,1704,1705,1706],{"id":1653,"depth":579,"text":1654},{"id":1666,"depth":579,"text":1667},{"id":1673,"depth":579,"text":1674},{"id":1680,"depth":579,"text":1681},"2026-07-18","Install the MiroMiro MCP server in two commands and Claude Code can pull any website's tokens, brand, fonts, and section code instead of guessing.",[1710,1712,1715,1718],{"question":1654,"answer":1711},"Run claude mcp add \u003Cname> with the command that starts the server, in your terminal before starting a session. For MiroMiro: claude mcp add miromiro -s user --env MIROMIRO_API_KEY=your_key -- npx -y miromiro-mcp. Verify with claude mcp list - you want to see Connected.",{"question":1713,"answer":1714},"What does the MiroMiro MCP server let Claude do?","Seven extraction tools appear in Claude's toolbox automatically: design tokens, brand data (logo, palette, fonts), images, SVGs, fonts, Lottie animations, and section-to-code. Claude calls them by itself when you ask design questions about a URL - no manual API calls in your prompts.",{"question":1716,"answer":1717},"Why give a coding agent design tokens instead of a screenshot?","Screenshots make the model guess values - it eyeballs colors, approximates spacing, and invents font names. Tokens are the site's real CSS values, so 'build it like stripe.com' produces the actual palette and type scale instead of a plausible imitation.",{"question":1719,"answer":1720},"Does the MiroMiro MCP server work with Cursor and Windsurf?","Yes. Both take the standard mcpServers JSON block: command npx, args ['-y', 'miromiro-mcp'], and your key in the env. In Cursor it goes in ~/.cursor/mcp.json; in Windsurf under Settings, MCP.",{},"/api-blog/add-design-extraction-to-claude-code-mcp",[413,1185,1724],"design-token-types-reference",{"title":1195,"description":1708},"api-blog/add-design-extraction-to-claude-code-mcp",[421,423,426,1728,424],"design tokens","Z_o8VSSbSY2kaMw0EsT75oNDzWxqTy4wwPp0WSNMzxQ",{"id":1731,"title":1732,"author":6,"body":1733,"category":2097,"date":1707,"dateModified":407,"description":2098,"extension":390,"faqs":2099,"image":407,"meta":2110,"navigation":409,"path":2111,"readingTime":411,"relatedSlugs":2112,"seo":2114,"seoTitle":407,"stem":2115,"tags":2116,"__hash__":2120},"apiBlog/api-blog/best-design-to-code-apis-2026.md","Best Design-to-Code APIs and Tools in 2026",{"type":8,"value":1734,"toc":2083},[1735,1738,1741,1745,1771,1791,1797,1801,1811,1828,1832,1842,1859,1863,1871,1901,1908,1929,1933,2035,2039,2050,2052,2056,2059,2063,2066,2070,2073,2077,2080],[11,1736,1737],{},"\"Design to code\" means four different products depending on what goes in: a Figma file, a screenshot, a prompt, or a live URL. Most listicles mix them together and compare a Figma plugin against an AI app builder, which helps nobody. Here is the landscape sorted by input, with an honest read on each.",[11,1739,1740],{},"Disclosure up front: we build the URL-to-code entry. The others are genuinely good at their own input type, and I will say so.",[56,1742,1744],{"id":1743},"input-a-figma-file","Input: a Figma file",[11,1746,1747,1754,1755,1762,1763,1770],{},[64,1748,1749],{},[116,1750,1753],{"href":1751,"rel":1752},"https://www.animaapp.com",[120],"Anima"," and ",[64,1756,1757],{},[116,1758,1761],{"href":1759,"rel":1760},"https://www.locofy.ai",[120],"Locofy"," are the established Figma-to-code plugins - React/HTML output, component mapping, years of production use. ",[64,1764,1765],{},[116,1766,1769],{"href":1767,"rel":1768},"https://www.builder.io",[120],"Builder.io's Visual Copilot"," is the newer AI take on the same job.",[131,1772,1773,1779,1785],{},[134,1774,1775,1778],{},[64,1776,1777],{},"Good:"," if your designs live in Figma with proper auto-layout, these produce real component code and preserve design intent.",[134,1780,1781,1784],{},[64,1782,1783],{},"Bad:"," they need a Figma file. Messy layers produce messy code, and there is no path from \"site I saw\" to code - someone has to design it first.",[134,1786,1787,1790],{},[64,1788,1789],{},"Use when:"," your team designs in Figma and wants the handoff automated.",[11,1792,1793,1794,260],{},"Coding with an agent rather than a plugin? Figma's own MCP server gives Claude Code or Cursor the selected frame directly - see ",[116,1795,1796],{"href":1055},"Figma MCP setup, and what to use without a Figma file",[56,1798,1800],{"id":1799},"input-a-screenshot","Input: a screenshot",[11,1802,1803,1810],{},[64,1804,1805],{},[116,1806,1809],{"href":1807,"rel":1808},"https://github.com/abi/screenshot-to-code",[120],"screenshot-to-code"," (open source, very popular) and the screenshot modes of various AI tools take a picture and ask a vision model to write matching HTML/Tailwind.",[131,1812,1813,1818,1823],{},[134,1814,1815,1817],{},[64,1816,1777],{}," works on anything you can see. Zero setup for the OSS version. Genuinely impressive first drafts.",[134,1819,1820,1822],{},[64,1821,1783],{}," every value is a guess. The model approximates colors from pixels, eyeballs spacing, and invents font stacks. Two runs give two different answers. Fine for a prototype, dangerous as a source of truth.",[134,1824,1825,1827],{},[64,1826,1789],{}," speed matters more than fidelity.",[56,1829,1831],{"id":1830},"input-a-prompt","Input: a prompt",[11,1833,1834,1841],{},[64,1835,1836],{},[116,1837,1840],{"href":1838,"rel":1839},"https://v0.dev",[120],"v0"," (Vercel) and its peers generate UI from a text description. Strictly speaking that is prompt-to-code, not design-to-code, but it is where much of the category's attention went.",[131,1843,1844,1849,1854],{},[134,1845,1846,1848],{},[64,1847,1777],{}," the fastest way to get a decent generic component that never existed before.",[134,1850,1851,1853],{},[64,1852,1783],{}," the output looks like v0 output. If the goal is \"match this existing brand\", a prompt cannot carry a design system's worth of values.",[134,1855,1856,1858],{},[64,1857,1789],{}," greenfield UI with no reference to match.",[56,1860,1862],{"id":1861},"input-a-live-url","Input: a live URL",[11,1864,1865,1866,1870],{},"This is the gap. When the reference already exists as a website - a client's current site, a competitor's pricing page, a section your PM screenshotted - none of the above reads the real CSS. Our ",[116,1867,1869],{"href":1868},"/api/docs/code","/v1/code"," endpoint does:",[15,1872,1874],{"className":17,"code":1873,"language":19,"meta":20,"style":20},"curl \"https://miromiro.app/api/v1/code?url=stripe.com&format=tailwind\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[22,1875,1876,1889],{"__ignoreMap":20},[25,1877,1878,1880,1882,1885,1887],{"class":27,"line":28},[25,1879,1073],{"class":31},[25,1881,608],{"class":558},[25,1883,1884],{"class":35},"https://miromiro.app/api/v1/code?url=stripe.com&format=tailwind",[25,1886,571],{"class":558},[25,1888,865],{"class":864},[25,1890,1891,1893,1895,1897,1899],{"class":27,"line":378},[25,1892,1087],{"class":35},[25,1894,608],{"class":558},[25,1896,1092],{"class":35},[25,1898,1095],{"class":864},[25,1900,878],{"class":558},[11,1902,1903,1904,1907],{},"It parses the live page's actual cascade - specificity, media queries, nested ",[22,1905,1906],{},"var()"," chains - and returns the section as Tailwind, JSX, Vue, or plain HTML, with the extracted token set alongside. Auto-detects the hero if you do not pass a selector; 25 credits a call.",[131,1909,1910,1915,1924],{},[134,1911,1912,1914],{},[64,1913,1777],{}," the values are real, not guessed - the exact colors, spacing, and fonts the site ships. It is an API, so it runs inside agents and products, which almost nothing else in this category does.",[134,1916,1917,1919,1920,1923],{},[64,1918,1783],{}," section-level, not whole-app cloning - it will not produce a working multi-page app from a URL. Static HTML + CSS by default; add ",[22,1921,1922],{},"render=true"," (+5 credits) for fully client-rendered apps - it loads the page in a real browser and runs its JavaScript first.",[134,1925,1926,1928],{},[64,1927,1789],{}," an agent or product needs faithful code from a page that already exists.",[56,1930,1932],{"id":1931},"the-whole-landscape-in-one-table","The whole landscape in one table",[266,1934,1935,1954],{},[269,1936,1937],{},[272,1938,1939,1942,1945,1948,1951],{},[275,1940,1941],{},"Tool",[275,1943,1944],{},"Input",[275,1946,1947],{},"Output",[275,1949,1950],{},"API available",[275,1952,1953],{},"Values real or guessed?",[285,1955,1956,1973,1987,2003,2019],{},[272,1957,1958,1961,1964,1967,1970],{},[290,1959,1960],{},"Anima / Locofy",[290,1962,1963],{},"Figma file",[290,1965,1966],{},"React/HTML components",[290,1968,1969],{},"Limited",[290,1971,1972],{},"Real (from Figma)",[272,1974,1975,1978,1980,1982,1985],{},[290,1976,1977],{},"Builder.io Visual Copilot",[290,1979,1963],{},[290,1981,150],{},[290,1983,1984],{},"Yes (Builder ecosystem)",[290,1986,1972],{},[272,1988,1989,1991,1994,1997,2000],{},[290,1990,1809],{},[290,1992,1993],{},"Image",[290,1995,1996],{},"HTML/Tailwind draft",[290,1998,1999],{},"Self-host",[290,2001,2002],{},"Guessed",[272,2004,2005,2007,2010,2013,2016],{},[290,2006,1840],{},[290,2008,2009],{},"Prompt",[290,2011,2012],{},"React/Tailwind",[290,2014,2015],{},"Yes",[290,2017,2018],{},"Invented",[272,2020,2021,2024,2027,2030,2032],{},[290,2022,2023],{},"MiroMiro /v1/code",[290,2025,2026],{},"Live URL",[290,2028,2029],{},"Tailwind/JSX/Vue + tokens",[290,2031,2015],{},[290,2033,2034],{},"Real (from the site's CSS)",[56,2036,2038],{"id":2037},"the-verdict","The verdict",[11,2040,2041,2042,2045,2046,260],{},"Match the tool to the input you actually have. Figma file: Anima or Locofy. Nothing yet: v0. A picture and low stakes: screenshot-to-code. A live site that must be matched faithfully, inside a pipeline: that is URL-to-code, and it is the lane we picked precisely because the others do not drive in it. ",[116,2043,2044],{"href":370},"Free key"," (300 credits a month, no card) or try a URL in the ",[116,2047,2049],{"href":2048},"/api/demo","playground",[56,2051,1108],{"id":1107},[1110,2053,2055],{"id":2054},"what-is-the-best-way-to-turn-an-existing-website-into-code","What is the best way to turn an existing website into code?",[11,2057,2058],{},"If fidelity matters, read the live CSS (URL-to-code). If speed matters more, screenshot-to-code gives a fast approximation.",[1110,2060,2062],{"id":2061},"can-ai-convert-a-screenshot-to-code-accurately","Can AI convert a screenshot to code accurately?",[11,2064,2065],{},"Plausibly, not accurately. Every color, spacing, and font value is a model's guess from pixels.",[1110,2067,2069],{"id":2068},"figma-to-code-vs-url-to-code","Figma-to-code vs URL-to-code?",[11,2071,2072],{},"Input: a design file you own vs any live website. The first automates handoff; the second works when no design file exists.",[1110,2074,2076],{"id":2075},"which-of-these-have-real-apis","Which of these have real APIs?",[11,2078,2079],{},"v0 and Builder.io within their platforms, and MiroMiro as a plain REST endpoint. The Figma plugins are primarily apps - a hard filter if you are building a pipeline.",[374,2081,2082],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":20,"searchDepth":378,"depth":378,"links":2084},[2085,2086,2087,2088,2089,2090,2091],{"id":1743,"depth":378,"text":1744},{"id":1799,"depth":378,"text":1800},{"id":1830,"depth":378,"text":1831},{"id":1861,"depth":378,"text":1862},{"id":1931,"depth":378,"text":1932},{"id":2037,"depth":378,"text":2038},{"id":1107,"depth":378,"text":1108,"children":2092},[2093,2094,2095,2096],{"id":2054,"depth":579,"text":2055},{"id":2061,"depth":579,"text":2062},{"id":2068,"depth":579,"text":2069},{"id":2075,"depth":579,"text":2076},"Comparisons","The design-to-code landscape in 2026 sorted by input - Figma files, screenshots, prompts, or live URLs - and which tool honestly wins for each job.",[2100,2102,2104,2107],{"question":2055,"answer":2101},"Depends on fidelity needs. For a quick approximation, screenshot-to-code tools work from a picture. For code that uses the site's real CSS values - exact colors, spacing, fonts - you need something that reads the live page's stylesheets, which is what a URL-to-code API does.",{"question":2062,"answer":2103},"It produces plausible code fast, but the model guesses every value: colors approximated from pixels, spacing eyeballed, fonts inferred. Great for prototypes; risky when the output must match a real design system.",{"question":2105,"answer":2106},"What is the difference between Figma-to-code and URL-to-code?","Input. Figma-to-code tools (Anima, Locofy, Builder.io) need a Figma file and turn design layers into components. URL-to-code starts from any live website - no design file required - and derives the code from the real rendered CSS.",{"question":2108,"answer":2109},"Which design-to-code tools have an actual API?","Fewer than the category suggests. Most are plugins or apps. If you need code generation inside your own product or agent pipeline, check for a documented REST endpoint first - that requirement alone eliminates most of the list.",{},"/api-blog/best-design-to-code-apis-2026",[2113,1185],"best-design-token-extraction-tools-2026",{"title":1732,"description":2098},"api-blog/best-design-to-code-apis-2026",[425,2117,2118,2119],"tailwind","code generation","comparison","-4EJX91M1I-B-as9PjvxqwKIN6n1Iwp44ktl9vT1WtE",1791830862541]