[{"data":1,"prerenderedAt":2391},["ShallowReactive",2],{"api-blog-best-mcp-servers-for-frontend-design":3,"api-blog-related-best-mcp-servers-for-frontend-design":648},{"id":4,"title":5,"author":6,"body":7,"category":606,"date":607,"dateModified":607,"description":608,"extension":609,"faqs":610,"image":626,"meta":627,"navigation":628,"path":629,"readingTime":630,"relatedSlugs":631,"seo":635,"seoTitle":636,"stem":637,"tags":638,"__hash__":647},"apiBlog/api-blog/best-mcp-servers-for-frontend-design.md","Best MCP Servers for Frontend and Design Work in Cursor and Claude Code (2026)","Soraia",{"type":8,"value":9,"toc":585},"minimark",[10,14,17,22,29,86,89,125,135,281,288,292,297,310,314,317,359,382,402,405,409,413,419,423,434,438,442,449,453,457,463,467,471,482,486,564,567,581],[11,12,13],"p",{},"Out of the box, Cursor and Claude Code write UI from whatever you type and whatever is in your repo. MCP servers give them the rest: the actual design, a browser to look at the result, the right components and current docs. The difference shows most in frontend work, where \"make it look like this\" is the whole task.",[11,15,16],{},"These are the servers worth adding for UI and design work, grouped by the job they do. Commands and URLs are taken from each project's docs at the time of writing; check the linked README before you rely on a flag.",[18,19,21],"h2",{"id":20},"how-to-add-any-of-them","How to add any of them",[11,23,24,28],{},[25,26,27],"strong",{},"Claude Code",", remote server:",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","claude mcp add --transport http \u003Cname> \u003Curl>\n","bash","",[37,38,39],"code",{"__ignoreMap":35},[40,41,44,48,52,55,58,61,65,68,72,75,77,80,83],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sBMFI","claude",[40,49,51],{"class":50},"sfazB"," mcp",[40,53,54],{"class":50}," add",[40,56,57],{"class":50}," --transport",[40,59,60],{"class":50}," http",[40,62,64],{"class":63},"sMK4o"," \u003C",[40,66,67],{"class":50},"nam",[40,69,71],{"class":70},"sTEyZ","e",[40,73,74],{"class":63},">",[40,76,64],{"class":63},[40,78,79],{"class":50},"ur",[40,81,82],{"class":70},"l",[40,84,85],{"class":63},">\n",[11,87,88],{},"Local package:",[30,90,92],{"className":32,"code":91,"language":34,"meta":35,"style":35},"claude mcp add \u003Cname> -- npx \u003Cpackage>\n",[37,93,94],{"__ignoreMap":35},[40,95,96,98,100,102,104,106,108,110,113,116,118,121,123],{"class":42,"line":43},[40,97,47],{"class":46},[40,99,51],{"class":50},[40,101,54],{"class":50},[40,103,64],{"class":63},[40,105,67],{"class":50},[40,107,71],{"class":70},[40,109,74],{"class":63},[40,111,112],{"class":50}," --",[40,114,115],{"class":50}," npx",[40,117,64],{"class":63},[40,119,120],{"class":50},"packag",[40,122,71],{"class":70},[40,124,85],{"class":63},[11,126,127,130,131,134],{},[25,128,129],{},"Cursor",", in ",[37,132,133],{},"~/.cursor/mcp.json",":",[30,136,140],{"className":137,"code":138,"language":139,"meta":35,"style":35},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"mcpServers\": {\n    \"remote-example\": { \"url\": \"https://example.com/mcp\" },\n    \"local-example\": { \"command\": \"npx\", \"args\": [\"-y\", \"some-mcp-package\"] }\n  }\n}\n","json",[37,141,142,147,165,202,269,275],{"__ignoreMap":35},[40,143,144],{"class":42,"line":43},[40,145,146],{"class":63},"{\n",[40,148,150,153,157,160,162],{"class":42,"line":149},2,[40,151,152],{"class":63},"  \"",[40,154,156],{"class":155},"spNyl","mcpServers",[40,158,159],{"class":63},"\"",[40,161,134],{"class":63},[40,163,164],{"class":63}," {\n",[40,166,168,171,174,176,178,181,184,188,190,192,194,197,199],{"class":42,"line":167},3,[40,169,170],{"class":63},"    \"",[40,172,173],{"class":46},"remote-example",[40,175,159],{"class":63},[40,177,134],{"class":63},[40,179,180],{"class":63}," {",[40,182,183],{"class":63}," \"",[40,185,187],{"class":186},"sbssI","url",[40,189,159],{"class":63},[40,191,134],{"class":63},[40,193,183],{"class":63},[40,195,196],{"class":50},"https://example.com/mcp",[40,198,159],{"class":63},[40,200,201],{"class":63}," },\n",[40,203,205,207,210,212,214,216,218,221,223,225,227,230,232,235,237,240,242,244,247,249,252,254,256,258,261,263,266],{"class":42,"line":204},4,[40,206,170],{"class":63},[40,208,209],{"class":46},"local-example",[40,211,159],{"class":63},[40,213,134],{"class":63},[40,215,180],{"class":63},[40,217,183],{"class":63},[40,219,220],{"class":186},"command",[40,222,159],{"class":63},[40,224,134],{"class":63},[40,226,183],{"class":63},[40,228,229],{"class":50},"npx",[40,231,159],{"class":63},[40,233,234],{"class":63},",",[40,236,183],{"class":63},[40,238,239],{"class":186},"args",[40,241,159],{"class":63},[40,243,134],{"class":63},[40,245,246],{"class":63}," [",[40,248,159],{"class":63},[40,250,251],{"class":50},"-y",[40,253,159],{"class":63},[40,255,234],{"class":63},[40,257,183],{"class":63},[40,259,260],{"class":50},"some-mcp-package",[40,262,159],{"class":63},[40,264,265],{"class":63},"]",[40,267,268],{"class":63}," }\n",[40,270,272],{"class":42,"line":271},5,[40,273,274],{"class":63},"  }\n",[40,276,278],{"class":42,"line":277},6,[40,279,280],{"class":63},"}\n",[11,282,283,284,287],{},"Restart Cursor and check the MCP panel; in Claude Code run ",[37,285,286],{},"/mcp",".",[18,289,291],{"id":290},"_1-design-input","1. Design input",[293,294,296],"h3",{"id":295},"figma-mcp-your-own-design-files","Figma MCP: your own design files",[11,298,299,300,303,304,309],{},"Figma's official server gives the agent the structure of a selected frame, its variables, styles and components, so it builds from the design instead of a screenshot. Remote URL: ",[37,301,302],{},"https://mcp.figma.com/mcp",". Best when your team designs in Figma first. The ",[305,306,308],"a",{"href":307},"/api/blog/figma-mcp-setup-and-alternatives","Figma MCP setup guide"," covers seats, limits and the desktop variant.",[293,311,313],{"id":312},"miromiro-mcp-live-websites","MiroMiro MCP: live websites",[11,315,316],{},"When the reference is a site that already exists (a competitor, a site you're migrating, an inspiration page) there's no Figma file to read. MiroMiro's server reads the live URL in a real browser and returns:",[318,319,320,332,342,352],"ul",{},[321,322,323,324,327,328,331],"li",{},"the section's ",[25,325,326],{},"real rendered code"," as Tailwind, HTML, React or Vue (",[37,329,330],{},"extract_code",")",[321,333,334,335,338,339,331],{},"the site's ",[25,336,337],{},"brand",": logo, colors, fonts (",[37,340,341],{},"extract_brand",[321,343,344,345,348,349,331],{},"its full ",[25,346,347],{},"design tokens"," as CSS variables or a W3C tokens file (",[37,350,351],{},"extract_design_tokens",[321,353,354,355,358],{},"its ",[25,356,357],{},"images, SVGs, fonts, videos, audio and Lottie"," files",[30,360,362],{"className":32,"code":361,"language":34,"meta":35,"style":35},"claude mcp add --transport http miromiro https://miromiro.app/mcp\n",[37,363,364],{"__ignoreMap":35},[40,365,366,368,370,372,374,376,379],{"class":42,"line":43},[40,367,47],{"class":46},[40,369,51],{"class":50},[40,371,54],{"class":50},[40,373,57],{"class":50},[40,375,60],{"class":50},[40,377,378],{"class":50}," miromiro",[40,380,381],{"class":50}," https://miromiro.app/mcp\n",[11,383,384,385,389,390,393,394,397,398,287],{},"Free account, 300 credits a month, no card; the client opens a sign-in page the first time. In Cursor, use the ",[305,386,388],{"href":387},"/api/agents/cursor","one-click install"," or add ",[37,391,392],{},"{\"url\": \"https://miromiro.app/mcp\"}"," to ",[37,395,396],{},"mcp.json",". Then ask things like \"rebuild the pricing section of linear.app in our components\" and the agent calls the right tool. ",[305,399,401],{"href":400},"/api/blog/connect-miromiro-mcp-claude-cursor-chatgpt","Client-by-client setup",[11,403,404],{},"Figma and MiroMiro pair well: Figma for screens you designed, MiroMiro for sites you're referencing.",[18,406,408],{"id":407},"_2-seeing-the-result","2. Seeing the result",[293,410,412],{"id":411},"playwright-mcp-let-the-agent-use-a-browser","Playwright MCP: let the agent use a browser",[11,414,415,416,287],{},"Microsoft's Playwright MCP gives the agent a real browser it can navigate, click and read through accessibility snapshots. Useful for \"open localhost:3000 and check the signup flow works\" and for checking a page after a change. Local package: ",[37,417,418],{},"@playwright/mcp",[293,420,422],{"id":421},"chrome-devtools-mcp-debug-what-the-browser-sees","Chrome DevTools MCP: debug what the browser sees",[11,424,425,426,430,431,287],{},"Google's Chrome DevTools MCP connects the agent to DevTools: console messages, network requests and performance traces. Reach for it when the UI is wrong ",[427,428,429],"em",{},"and"," you need to know why, such as a failed request or a layout shift. Local package: ",[37,432,433],{},"chrome-devtools-mcp",[18,435,437],{"id":436},"_3-components","3. Components",[293,439,441],{"id":440},"shadcn-mcp-the-right-components-not-invented-ones","shadcn MCP: the right components, not invented ones",[11,443,444,445,448],{},"If your project uses shadcn/ui, the shadcn MCP lets the agent browse and install components from the registries you configure, so it uses the real component instead of writing a look-alike. The shadcn CLI sets it up for your client (",[37,446,447],{},"npx shadcn@latest mcp init",").",[18,450,452],{"id":451},"_4-docs","4. Docs",[293,454,456],{"id":455},"context7-current-library-docs","Context7: current library docs",[11,458,459,460,287],{},"Models are trained on older versions of fast-moving libraries. Context7 fetches current, version-specific docs and examples on request, so the agent writes Tailwind v4 or Next.js code that matches the version you actually use. Remote URL: ",[37,461,462],{},"https://mcp.context7.com/mcp",[18,464,466],{"id":465},"_5-web-content-not-design","5. Web content (not design)",[293,468,470],{"id":469},"firecrawl-mcp-pages-as-text-for-the-model","Firecrawl MCP: pages as text for the model",[11,472,473,474,477,478,481],{},"Firecrawl's server scrapes and crawls pages into clean markdown, which is what you want when the agent needs a site's ",[427,475,476],{},"words",": docs, articles, product data. It's the counterpart to MiroMiro: Firecrawl for content, MiroMiro for design. Local package: ",[37,479,480],{},"firecrawl-mcp"," (needs a Firecrawl API key).",[18,483,485],{"id":484},"a-starter-setup-for-ui-work","A starter setup for UI work",[487,488,489,505],"table",{},[490,491,492],"thead",{},[493,494,495,499,502],"tr",{},[496,497,498],"th",{},"Job",[496,500,501],{},"Server",[496,503,504],{},"Why",[506,507,508,520,531,542,553],"tbody",{},[493,509,510,514,517],{},[511,512,513],"td",{},"Build from your designs",[511,515,516],{},"Figma MCP",[511,518,519],{},"Frames, variables and components from your files",[493,521,522,525,528],{},[511,523,524],{},"Build from live sites",[511,526,527],{},"MiroMiro MCP",[511,529,530],{},"Real code, tokens, brand and assets from any URL",[493,532,533,536,539],{},[511,534,535],{},"Check the result",[511,537,538],{},"Playwright MCP",[511,540,541],{},"The agent opens the page and clicks through it",[493,543,544,547,550],{},[511,545,546],{},"Use your components",[511,548,549],{},"shadcn MCP",[511,551,552],{},"Real registry components, not look-alikes",[493,554,555,558,561],{},[511,556,557],{},"Current docs",[511,559,560],{},"Context7",[511,562,563],{},"Version-correct examples",[11,565,566],{},"Install the two or three that match the work you repeat, and add more only when you hit the gap. A shorter tool list keeps the agent quick to pick the right one.",[11,568,569,572,573,576,577,287],{},[25,570,571],{},"Next:"," ",[305,574,575],{"href":400},"connect MiroMiro to Claude, Cursor or ChatGPT"," in under a minute, or read ",[305,578,580],{"href":579},"/api/blog/make-ai-agent-match-a-real-website-design","what an AI agent needs to match a real website's design",[582,583,584],"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 pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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);}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}",{"title":35,"searchDepth":149,"depth":149,"links":586},[587,588,592,596,599,602,605],{"id":20,"depth":149,"text":21},{"id":290,"depth":149,"text":291,"children":589},[590,591],{"id":295,"depth":167,"text":296},{"id":312,"depth":167,"text":313},{"id":407,"depth":149,"text":408,"children":593},[594,595],{"id":411,"depth":167,"text":412},{"id":421,"depth":167,"text":422},{"id":436,"depth":149,"text":437,"children":597},[598],{"id":440,"depth":167,"text":441},{"id":451,"depth":149,"text":452,"children":600},[601],{"id":455,"depth":167,"text":456},{"id":465,"depth":149,"text":466,"children":603},[604],{"id":469,"depth":167,"text":470},{"id":484,"depth":149,"text":485},"AI Engineering","2026-10-20","The MCP servers that make Cursor and Claude Code better at UI work: Figma, a live-website extractor, browser control, DevTools, component registries and docs. What each gives your agent and how to add it.","md",[611,614,617,620,623],{"question":612,"answer":613},"What are the best MCP servers for frontend development?","A good frontend setup covers four jobs: design input (the Figma MCP for your own files, a website extractor such as MiroMiro for live sites), seeing the result (Playwright MCP or Chrome DevTools MCP), components (the shadcn MCP if you use shadcn/ui) and current docs (Context7). Start with the one that matches the job you repeat most; three or four servers is plenty.",{"question":615,"answer":616},"How do I add an MCP server to Claude Code?","For a remote server run claude mcp add --transport http \u003Cname> \u003Curl>, for example claude mcp add --transport http miromiro https://miromiro.app/mcp. For a local package run claude mcp add \u003Cname> -- npx \u003Cpackage>. Then start Claude Code and run /mcp to check it connected.",{"question":618,"answer":619},"How do I add an MCP server to Cursor?","Add it to ~/.cursor/mcp.json under mcpServers, with a url for remote servers or a command and args for local packages, then restart Cursor and check the MCP panel. Many servers also offer a one-click Add to Cursor link.",{"question":621,"answer":622},"Is there an MCP server that turns a website into code?","Yes. MiroMiro's MCP server reads a live URL and returns the rendered section's real code as Tailwind, HTML, React or Vue, plus the site's design tokens, brand colors, fonts and assets. It is the website counterpart of the Figma MCP, which reads design files.",{"question":624,"answer":625},"How many MCP servers should I install?","Only the ones you use weekly. Every server adds its tool descriptions to the agent's context, and a long tool list makes it slower to pick the right one. Three or four focused servers beat fifteen.",null,{},true,"/api-blog/best-mcp-servers-for-frontend-design",8,[632,633,634],"connect-miromiro-mcp-claude-cursor-chatgpt","figma-mcp-setup-and-alternatives","add-design-extraction-to-claude-code-mcp",{"title":5,"description":608},"Best MCP Servers for Cursor & Claude Code: Frontend (2026)","api-blog/best-mcp-servers-for-frontend-design",[639,640,641,642,643,644,645,646],"cursor mcp","claude code mcp","best mcp servers","mcp servers for cursor","frontend mcp","design mcp","figma mcp","mcp","ICf_oioYWRX0aEuxaK8xEeGKx1OzxrH788wVPp8qe9M",[649,1495,1864],{"id":650,"title":651,"author":6,"body":652,"category":606,"date":1467,"dateModified":1468,"description":1469,"extension":609,"faqs":1470,"image":626,"meta":1482,"navigation":628,"path":1483,"readingTime":277,"relatedSlugs":1484,"seo":1487,"seoTitle":1488,"stem":1489,"tags":1490,"__hash__":1494},"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":653,"toc":1448},[654,661,669,673,676,729,736,742,752,755,766,866,872,876,879,952,958,961,964,972,976,982,999,1013,1023,1026,1029,1049,1055,1111,1119,1123,1126,1184,1205,1209,1212,1281,1284,1288,1291,1305,1309,1348,1352,1358,1362,1365,1399,1406,1410,1414,1417,1421,1424,1428,1431,1435,1445],[11,655,656,657,660],{},"Every client that speaks MCP can connect to MiroMiro with one URL. Paste ",[37,658,659],{},"https://miromiro.app/mcp"," into the client's connector settings and nine design-extraction tools appear in your chats: section-to-code, brand, design tokens, images, SVGs, fonts, videos, audio and Lottie.",[11,662,663,664,668],{},"You do not need to paste a key. The bare URL triggers a one-click sign in with your MiroMiro account - ",[305,665,667],{"href":666},"/api/onboarding","free",", 300 credits a month, no card. Client-by-client steps below.",[18,670,672],{"id":671},"claude-web-and-desktop","Claude - web and desktop",[11,674,675],{},"Claude calls these custom connectors. Two ways in:",[677,678,679,697,717,720],"ol",{},[321,680,681,682,685,686,689,690,689,693,696],{},"In any chat, click the ",[25,683,684],{},"+"," button in the input, then ",[25,687,688],{},"Connectors"," → ",[25,691,692],{},"Add connector",[25,694,695],{},"Add custom connector",". (Settings → Connectors gets you to the same dialog.)",[321,698,699,700],{},"In the dialog, fill in:\n",[318,701,702,710],{},[321,703,704,572,707],{},[25,705,706],{},"Name:",[37,708,709],{},"MiroMiro",[321,711,712,572,715],{},[25,713,714],{},"URL:",[37,716,659],{},[321,718,719],{},"Leave the OAuth Client ID and Secret fields under Advanced settings empty - Claude discovers them from the server.",[321,721,722,723,726,727,287],{},"Click ",[25,724,725],{},"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 ",[37,728,341],{},[11,730,731],{},[732,733],"img",{"alt":734,"src":735},"Claude's + menu: Connectors, then Add connector, then Add custom connector","/api-blog/connector1.png",[11,737,738],{},[732,739],{"alt":740,"src":741},"Claude's Add custom connector dialog with the MiroMiro name and URL filled in","/api-blog/connector2.png",[11,743,744,745,751],{},"One click faster: ",[305,746,750],{"href":747,"rel":748},"https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=MiroMiro&connectorUrl=https%3A%2F%2Fmiromiro.app%2Fmcp",[749],"nofollow","Add MiroMiro to Claude"," opens this dialog with the name and URL pre-filled - you just click Add and sign in.",[18,753,129],{"id":754},"cursor",[11,756,757,758,763,764,134],{},"Cursor supports install deeplinks, so ",[305,759,762],{"href":760,"rel":761},"https://cursor.com/install-mcp?name=miromiro&config=eyJ1cmwiOiJodHRwczovL21pcm9taXJvLmFwcC9tY3AifQ%3D%3D",[749],"Add MiroMiro to Cursor"," does the whole thing in one click - it opens Cursor with the server config pre-filled. Manual version, in ",[37,765,133],{},[30,767,769],{"className":137,"code":768,"language":139,"meta":35,"style":35},"{\n  \"mcpServers\": {\n    \"miromiro\": {\n      \"url\": \"https://miromiro.app/mcp\",\n      \"headers\": { \"Authorization\": \"Bearer mm_live_your_key\" }\n    }\n  }\n}\n",[37,770,771,775,787,800,820,852,857,862],{"__ignoreMap":35},[40,772,773],{"class":42,"line":43},[40,774,146],{"class":63},[40,776,777,779,781,783,785],{"class":42,"line":149},[40,778,152],{"class":63},[40,780,156],{"class":155},[40,782,159],{"class":63},[40,784,134],{"class":63},[40,786,164],{"class":63},[40,788,789,791,794,796,798],{"class":42,"line":167},[40,790,170],{"class":63},[40,792,793],{"class":46},"miromiro",[40,795,159],{"class":63},[40,797,134],{"class":63},[40,799,164],{"class":63},[40,801,802,805,807,809,811,813,815,817],{"class":42,"line":204},[40,803,804],{"class":63},"      \"",[40,806,187],{"class":186},[40,808,159],{"class":63},[40,810,134],{"class":63},[40,812,183],{"class":63},[40,814,659],{"class":50},[40,816,159],{"class":63},[40,818,819],{"class":63},",\n",[40,821,822,824,827,829,831,833,835,839,841,843,845,848,850],{"class":42,"line":271},[40,823,804],{"class":63},[40,825,826],{"class":186},"headers",[40,828,159],{"class":63},[40,830,134],{"class":63},[40,832,180],{"class":63},[40,834,183],{"class":63},[40,836,838],{"class":837},"swJcz","Authorization",[40,840,159],{"class":63},[40,842,134],{"class":63},[40,844,183],{"class":63},[40,846,847],{"class":50},"Bearer mm_live_your_key",[40,849,159],{"class":63},[40,851,268],{"class":63},[40,853,854],{"class":42,"line":277},[40,855,856],{"class":63},"    }\n",[40,858,860],{"class":42,"line":859},7,[40,861,274],{"class":63},[40,863,864],{"class":42,"line":630},[40,865,280],{"class":63},[11,867,868,869,871],{},"Drop the ",[37,870,826],{}," 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 nine tools.",[18,873,875],{"id":874},"chatgpt","ChatGPT",[11,877,878],{},"ChatGPT only takes remote servers, which is exactly what this is:",[677,880,881,893,939],{},[321,882,883,689,886,889,890],{},[25,884,885],{},"Settings",[25,887,888],{},"Security and login"," → enable ",[25,891,892],{},"Developer mode",[321,894,895,689,897,900,901,906,907,910,911],{},[25,896,885],{},[25,898,899],{},"Plugins"," (or go straight to ",[305,902,905],{"href":903,"rel":904},"https://chatgpt.com/plugins",[749],"chatgpt.com/plugins",") → ",[25,908,909],{},"New Plugin",":\n",[318,912,913,919,927,933],{},[321,914,915,572,917],{},[25,916,706],{},[37,918,709],{},[321,920,921,924,925],{},[25,922,923],{},"Connection:"," Server URL, ",[37,926,659],{},[321,928,929,932],{},[25,930,931],{},"Authentication:"," OAuth - ChatGPT reads the sign-in settings from the server, so there is nothing to configure",[321,934,935,936],{},"Tick the custom-server acknowledgment and click ",[25,937,938],{},"Create",[321,940,941,942,945,946,948,949,287],{},"ChatGPT shows a consent card. Click ",[25,943,944],{},"Sign in with MiroMiro",", approve, and the tools appear in any chat via the ",[25,947,684],{}," menu → ",[25,950,951],{},"More",[11,953,954],{},[732,955],{"alt":956,"src":957},"ChatGPT's Add MiroMiro to ChatGPT consent screen with the Sign in with MiroMiro button","/api-blog/chatgpt-consent.png",[11,959,960],{},"OpenAI has renamed this area twice recently - if your build still says Apps & Connectors, the Developer mode toggle lives under Advanced there instead.",[11,962,963],{},"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:",[30,965,970],{"className":966,"code":968,"language":969,"meta":35},[967],"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\"\nThen run: codex mcp login miromiro (signs in through the browser).\n\nThen list the tools - you should see extract_code, extract_brand, extract_design_tokens, extract_assets, extract_svgs, extract_fonts, extract_videos, extract_audio and extract_lottie.\n","text",[37,971,968],{"__ignoreMap":35},[18,973,975],{"id":974},"codex-cli","Codex CLI",[11,977,978,979,134],{},"Add to ",[37,980,981],{},"~/.codex/config.toml",[30,983,987],{"className":984,"code":985,"language":986,"meta":35,"style":35},"language-toml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[mcp_servers.miromiro]\nurl = \"https://miromiro.app/mcp\"\n","toml",[37,988,989,994],{"__ignoreMap":35},[40,990,991],{"class":42,"line":43},[40,992,993],{},"[mcp_servers.miromiro]\n",[40,995,996],{"class":42,"line":149},[40,997,998],{},"url = \"https://miromiro.app/mcp\"\n",[11,1000,1001,1002,1005,1006,1009,1010,1012],{},"Then sign in once: run ",[37,1003,1004],{},"codex mcp login miromiro"," and approve in the browser. ",[37,1007,1008],{},"codex mcp list",", or ",[37,1011,286],{}," inside Codex, shows it connected. The command line and the IDE extension share this file.",[11,1014,1015,1016,1019,1020,287],{},"To pin a key instead, add ",[37,1017,1018],{},"bearer_token_env_var = \"MIROMIRO_API_KEY\""," under the URL and set that environment variable, or use ",[37,1021,1022],{},"url = \"https://miromiro.app/mcp?access_key=mm_live_your_key\"",[18,1024,27],{"id":1025},"claude-code",[11,1027,1028],{},"One command in your terminal, not inside a session:",[30,1030,1031],{"className":32,"code":361,"language":34,"meta":35,"style":35},[37,1032,1033],{"__ignoreMap":35},[40,1034,1035,1037,1039,1041,1043,1045,1047],{"class":42,"line":43},[40,1036,47],{"class":46},[40,1038,51],{"class":50},[40,1040,54],{"class":50},[40,1042,57],{"class":50},[40,1044,60],{"class":50},[40,1046,378],{"class":50},[40,1048,381],{"class":50},[11,1050,1051,1052,1054],{},"Then run ",[37,1053,286],{}," 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:",[30,1056,1058],{"className":32,"code":1057,"language":34,"meta":35,"style":35},"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",[37,1059,1060,1080,1093,1098],{"__ignoreMap":35},[40,1061,1062,1064,1066,1068,1070,1072,1074,1077],{"class":42,"line":43},[40,1063,47],{"class":46},[40,1065,51],{"class":50},[40,1067,54],{"class":50},[40,1069,57],{"class":50},[40,1071,60],{"class":50},[40,1073,378],{"class":50},[40,1075,1076],{"class":50}," https://miromiro.app/mcp",[40,1078,1079],{"class":70}," \\\n",[40,1081,1082,1085,1087,1090],{"class":42,"line":149},[40,1083,1084],{"class":50},"  --header",[40,1086,183],{"class":63},[40,1088,1089],{"class":50},"Authorization: Bearer mm_live_your_key",[40,1091,1092],{"class":63},"\"\n",[40,1094,1095],{"class":42,"line":167},[40,1096,1097],{"emptyLinePlaceholder":628},"\n",[40,1099,1100,1102,1104,1107],{"class":42,"line":204},[40,1101,47],{"class":46},[40,1103,51],{"class":50},[40,1105,1106],{"class":50}," list",[40,1108,1110],{"class":1109},"sHwdD","   # look for \"✓ Connected\"\n",[11,1112,1113,1114,1118],{},"Claude Code also runs the ",[305,1115,1117],{"href":1116},"/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.",[18,1120,1122],{"id":1121},"grok-bot-muse-and-openai-dots","Grok Bot, Muse and OpenAI dots",[11,1124,1125],{},"The newer agents take the same URL, each in its own way:",[318,1127,1128,1154,1174],{},[321,1129,1130,1133,1134,1137,1138,1141,1142,689,1144,689,1146,1149,1150],{},[25,1131,1132],{},"Grok Bot"," has no field for a server URL in its settings. Ask the bot instead: \"Add a custom MCP server called miromiro at ",[305,1135,659],{"href":659,"rel":1136},[749],"\". Confirm, press ",[25,1139,1140],{},"Authorize"," on the card it posts and sign in. It then shows under ",[25,1143,885],{},[25,1145,899],{},[25,1147,1148],{},"Yours",". Grok Bot runs on a cloud computer, so servers from your Cursor settings do not carry over. ",[305,1151,1153],{"href":1152},"/api/agents/grok-bot","Grok Bot steps",[321,1155,1156,1159,1160,1162,1163,689,1165,689,1167,1169,1170],{},[25,1157,1158],{},"Muse",": ask it in a chat to add a custom connector for ",[37,1161,659],{}," (remote streamable HTTP, OAuth), then approve the sign-in it opens. Some accounts also have ",[25,1164,885],{},[25,1166,688],{},[25,1168,695],{},", which takes the same URL. ",[305,1171,1173],{"href":1172},"/api/agents/muse","Muse steps",[321,1175,1176,1179,1180],{},[25,1177,1178],{},"OpenAI dots"," use the plugins switched on in your ChatGPT account, so the setup is the ChatGPT one above. Start with one small request to see it working. ",[305,1181,1183],{"href":1182},"/api/agents/openai-dots","Dots steps",[11,1185,1186,1187,1190,1191,1190,1195,1190,1198,1202,1203,287],{},"Each agent also has its own page with the steps drawn out: ",[305,1188,875],{"href":1189},"/api/agents/chatgpt",", ",[305,1192,1194],{"href":1193},"/api/agents/claude","Claude",[305,1196,27],{"href":1197},"/api/agents/claude-code",[305,1199,1201],{"href":1200},"/api/agents/codex","Codex"," and ",[305,1204,129],{"href":387},[18,1206,1208],{"id":1207},"sign-in-vs-pasting-a-key","Sign-in vs pasting a key",[11,1210,1211],{},"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.",[487,1213,1214,1226],{},[490,1215,1216],{},[493,1217,1218,1220,1223],{},[496,1219],{},[496,1221,1222],{},"Free account",[496,1224,1225],{},"Paid plans",[506,1227,1228,1238,1249,1260,1270],{},[493,1229,1230,1233,1236],{},[511,1231,1232],{},"Results",[511,1234,1235],{},"Full",[511,1237,1235],{},[493,1239,1240,1243,1246],{},[511,1241,1242],{},"Rate limit",[511,1244,1245],{},"30/min",[511,1247,1248],{},"60 to 300/min",[493,1250,1251,1254,1257],{},[511,1252,1253],{},"Credits",[511,1255,1256],{},"300/month",[511,1258,1259],{},"5,000 to 200,000/month",[493,1261,1262,1265,1268],{},[511,1263,1264],{},"Usage and logs",[511,1266,1267],{},"Dashboard",[511,1269,1267],{},[493,1271,1272,1275,1278],{},[511,1273,1274],{},"Price",[511,1276,1277],{},"Free, no card",[511,1279,1280],{},"From €19/month",[11,1282,1283],{},"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.",[18,1285,1287],{"id":1286},"what-to-ask-once-connected","What to ask once connected",[11,1289,1290],{},"You never name tools in prompts - ask design-shaped questions and the agent picks the right one:",[318,1292,1293,1296,1299,1302],{},[321,1294,1295],{},"\"Rebuild stripe.com's pricing section in React\"",[321,1297,1298],{},"\"Extract linear.app's design tokens and restyle our Button component to match\"",[321,1300,1301],{},"\"What fonts does vercel.com actually load?\"",[321,1303,1304],{},"\"Pull the brand palette from ourcustomer.com and generate a theme file\"",[18,1306,1308],{"id":1307},"common-problems","Common problems",[318,1310,1311,1322,1328,1338],{},[321,1312,1313,1316,1317,1321],{},[25,1314,1315],{},"\"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 ",[305,1318,1320],{"href":1319},"/api/dashboard/keys","API Keys"," - keys are shown once at creation, so rotate if you lost it.",[321,1323,1324,1327],{},[25,1325,1326],{},"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.",[321,1329,1330,1333,1334,1337],{},[25,1331,1332],{},"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: ",[37,1335,1336],{},"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.",[321,1339,1340,1343,1344,1347],{},[25,1341,1342],{},"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 ",[37,1345,1346],{},"?access_key="," still works if you prefer a pinned key.",[18,1349,1351],{"id":1350},"already-using-the-figma-mcp","Already using the Figma MCP?",[11,1353,1354,1355,287],{},"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 ",[305,1356,1357],{"href":307},"Figma MCP: setup and what to use without a Figma file",[18,1359,1361],{"id":1360},"or-skip-mcp-entirely","Or skip MCP entirely",[11,1363,1364],{},"The same engine is a plain REST API:",[30,1366,1368],{"className":32,"code":1367,"language":34,"meta":35,"style":35},"curl \"https://miromiro.app/api/v1/brand?url=stripe.com\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[37,1369,1370,1384],{"__ignoreMap":35},[40,1371,1372,1375,1377,1380,1382],{"class":42,"line":43},[40,1373,1374],{"class":46},"curl",[40,1376,183],{"class":63},[40,1378,1379],{"class":50},"https://miromiro.app/api/v1/brand?url=stripe.com",[40,1381,159],{"class":63},[40,1383,1079],{"class":70},[40,1385,1386,1389,1391,1394,1397],{"class":42,"line":149},[40,1387,1388],{"class":50},"  -H",[40,1390,183],{"class":63},[40,1392,1393],{"class":50},"Authorization: Bearer ",[40,1395,1396],{"class":70},"$MIROMIRO_API_KEY",[40,1398,1092],{"class":63},[11,1400,1401,1402,1405],{},"Full reference at ",[305,1403,1404],{"href":1404},"/api/docs",". You can start for free.",[18,1407,1409],{"id":1408},"frequently-asked-questions","Frequently asked questions",[293,1411,1413],{"id":1412},"how-do-i-add-a-custom-mcp-connector-to-claude-web","How do I add a custom MCP connector to Claude web?",[11,1415,1416],{},"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.",[293,1418,1420],{"id":1419},"do-i-need-a-key-to-try-it","Do I need a key to try it?",[11,1422,1423],{},"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.",[293,1425,1427],{"id":1426},"which-clients-does-the-remote-server-work-with","Which clients does the remote server work with?",[11,1429,1430],{},"Claude web and desktop, Cursor, ChatGPT developer mode, Codex, Claude Code, Grok Bot, Muse, Windsurf, and any MCP SDK. If it takes a server URL, it works.",[293,1432,1434],{"id":1433},"where-does-my-key-go-safest","Where does my key go safest?",[11,1436,1437,1438,1441,1442,1444],{},"Header (",[37,1439,1440],{},"Authorization: Bearer",") where the client supports it - Cursor, Claude Code, SDKs. URL (",[37,1443,1346],{},") only where headers are not an option - claude.ai, ChatGPT. Rotate keys anytime in the dashboard.",[582,1446,1447],{},"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":35,"searchDepth":149,"depth":149,"links":1449},[1450,1451,1452,1453,1454,1455,1456,1457,1458,1459,1460,1461],{"id":671,"depth":149,"text":672},{"id":754,"depth":149,"text":129},{"id":874,"depth":149,"text":875},{"id":974,"depth":149,"text":975},{"id":1025,"depth":149,"text":27},{"id":1121,"depth":149,"text":1122},{"id":1207,"depth":149,"text":1208},{"id":1286,"depth":149,"text":1287},{"id":1307,"depth":149,"text":1308},{"id":1350,"depth":149,"text":1351},{"id":1360,"depth":149,"text":1361},{"id":1408,"depth":149,"text":1409,"children":1462},[1463,1464,1465,1466],{"id":1412,"depth":167,"text":1413},{"id":1419,"depth":167,"text":1420},{"id":1426,"depth":167,"text":1427},{"id":1433,"depth":167,"text":1434},"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.",[1471,1473,1476,1479],{"question":1413,"answer":1472},"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":1474,"answer":1475},"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":1477,"answer":1478},"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":1480,"answer":1481},"What is the difference between the remote MCP server and the npm package?","Same nine 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",[633,634,1485,1486],"how-to-extract-design-tokens-from-any-website-in-python","best-design-to-code-apis-2026",{"title":651,"description":1469},"Connect the MiroMiro MCP to Claude, Cursor, ChatGPT & Codex","api-blog/connect-miromiro-mcp-claude-cursor-chatgpt",[646,47,754,874,1491,1492,1493],"codex","connectors","ai agents","q5YZP-NEp3SpYRPWTI4lt7wrnktpj82H4ERiji1SN0Y",{"id":1496,"title":1497,"author":6,"body":1498,"category":606,"date":1835,"dateModified":1835,"description":1836,"extension":609,"faqs":1837,"image":626,"meta":1853,"navigation":628,"path":1854,"readingTime":859,"relatedSlugs":1855,"seo":1856,"seoTitle":1857,"stem":1858,"tags":1859,"__hash__":1863},"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",{"type":8,"value":1499,"toc":1826},[1500,1503,1526,1529,1533,1547,1552,1570,1579,1591,1595,1598,1624,1627,1631,1634,1660,1663,1667,1678,1681,1701,1704,1715,1721,1725,1781,1784,1786,1812,1816,1823],[11,1501,1502],{},"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:",[30,1504,1506],{"className":32,"code":1505,"language":34,"meta":35,"style":35},"claude mcp add --transport http figma https://mcp.figma.com/mcp\n",[37,1507,1508],{"__ignoreMap":35},[40,1509,1510,1512,1514,1516,1518,1520,1523],{"class":42,"line":43},[40,1511,47],{"class":46},[40,1513,51],{"class":50},[40,1515,54],{"class":50},[40,1517,57],{"class":50},[40,1519,60],{"class":50},[40,1521,1522],{"class":50}," figma",[40,1524,1525],{"class":50}," https://mcp.figma.com/mcp\n",[11,1527,1528],{},"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.",[18,1530,1532],{"id":1531},"set-it-up-in-your-client","Set it up in your client",[11,1534,1535,1536,1539,1540,1542,1543,1546],{},"Figma recommends the ",[25,1537,1538],{},"remote server"," (",[37,1541,302],{},"). There's also a ",[25,1544,1545],{},"desktop server"," that runs through the Figma desktop app; it needs a Dev or Full seat on a paid plan.",[11,1548,1549,1551],{},[25,1550,27],{}," - the command above, or Figma's plugin, which bundles the server with ready-made skills:",[30,1553,1555],{"className":32,"code":1554,"language":34,"meta":35,"style":35},"claude plugin install figma@claude-plugins-official\n",[37,1556,1557],{"__ignoreMap":35},[40,1558,1559,1561,1564,1567],{"class":42,"line":43},[40,1560,47],{"class":46},[40,1562,1563],{"class":50}," plugin",[40,1565,1566],{"class":50}," install",[40,1568,1569],{"class":50}," figma@claude-plugins-official\n",[11,1571,1572,1575,1576,1578],{},[25,1573,1574],{},"Cursor, VS Code, Windsurf and other clients"," - add a remote MCP server with the URL ",[37,1577,302],{}," in the client's MCP settings, then complete the Figma sign-in.",[11,1580,1581,1584,1585,1590],{},[25,1582,1583],{},"Seats:"," the remote server is available on all seats and plans, but seats other than Dev or Full may hit usage limits. Check ",[305,1586,1589],{"href":1587,"rel":1588},"https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server",[749],"Figma's guide"," for the current limits on your plan.",[18,1592,1594],{"id":1593},"what-it-gives-your-agent","What it gives your agent",[11,1596,1597],{},"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:",[318,1599,1600,1606,1612,1618],{},[321,1601,1602,1605],{},[25,1603,1604],{},"Structure"," - the frame's layers and layout, so the agent knows what's nested in what.",[321,1607,1608,1611],{},[25,1609,1610],{},"Variables and styles"," - your real color, spacing and type tokens instead of eyeballed hex values.",[321,1613,1614,1617],{},[25,1615,1616],{},"Components"," - which design-system pieces are in use, so the agent can reach for the matching code components.",[321,1619,1620,1623],{},[25,1621,1622],{},"A screenshot"," - for visual reference alongside the data.",[11,1625,1626],{},"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.",[18,1628,1630],{"id":1629},"the-case-it-doesnt-cover-no-figma-file","The case it doesn't cover: no Figma file",[11,1632,1633],{},"The Figma MCP reads Figma files. A lot of real work starts somewhere else:",[318,1635,1636,1642,1648,1654],{},[321,1637,1638,1641],{},[25,1639,1640],{},"The reference is a live website"," - \"make our pricing page feel like Linear's\".",[321,1643,1644,1647],{},[25,1645,1646],{},"You're migrating an old site"," whose design file was lost years ago, or never existed.",[321,1649,1650,1653],{},[25,1651,1652],{},"The source of truth is production"," - the shipped site has drifted from the Figma file, and you need what users actually see.",[321,1655,1656,1659],{},[25,1657,1658],{},"You're building from a template or theme"," that only exists as HTML.",[11,1661,1662],{},"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.",[18,1664,1666],{"id":1665},"for-live-websites-a-website-extraction-mcp","For live websites: a website-extraction MCP",[11,1668,1669,1670,1673,1674,1677],{},"This is the gap ",[305,1671,709],{"href":1672},"/api/mcp"," fills. It's an MCP server that reads a ",[25,1675,1676],{},"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,1679,1680],{},"Add it the same way - it's also a remote server:",[30,1682,1683],{"className":32,"code":361,"language":34,"meta":35,"style":35},[37,1684,1685],{"__ignoreMap":35},[40,1686,1687,1689,1691,1693,1695,1697,1699],{"class":42,"line":43},[40,1688,47],{"class":46},[40,1690,51],{"class":50},[40,1692,54],{"class":50},[40,1694,57],{"class":50},[40,1696,60],{"class":50},[40,1698,378],{"class":50},[40,1700,381],{"class":50},[11,1702,1703],{},"Then prompt with a URL instead of a frame:",[1705,1706,1707],"blockquote",{},[11,1708,1709,1710,1714],{},"Use miromiro to extract the pricing section from ",[305,1711,1712],{"href":1712,"rel":1713},"https://linear.app/pricing",[749]," as React + Tailwind, then adapt it to our plans.",[11,1716,1717,1718,287],{},"The agent gets the page's real rendered CSS, not a guess. Setup for Cursor, ChatGPT, Claude web and Codex is in ",[305,1719,1720],{"href":400},"how to connect the MiroMiro MCP",[18,1722,1724],{"id":1723},"which-one-to-use","Which one to use",[487,1726,1727,1740],{},[490,1728,1729],{},[493,1730,1731,1734,1737],{},[496,1732,1733],{},"Your design lives in...",[496,1735,1736],{},"Use",[496,1738,1739],{},"What the agent gets",[506,1741,1742,1754,1768],{},[493,1743,1744,1747,1751],{},[511,1745,1746],{},"A Figma file your team owns",[511,1748,1749],{},[25,1750,516],{},[511,1752,1753],{},"Frames, variables, components from the file",[493,1755,1756,1759,1765],{},[511,1757,1758],{},"A live website (yours or someone else's)",[511,1760,1761,1764],{},[25,1762,1763],{},"Website MCP"," (MiroMiro)",[511,1766,1767],{},"Rendered code, tokens, fonts and assets from the URL",[493,1769,1770,1773,1778],{},[511,1771,1772],{},"Both - designing new screens to match a live site",[511,1774,1775],{},[25,1776,1777],{},"Both",[511,1779,1780],{},"Figma for the new screens, the live site for the reference",[11,1782,1783],{},"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.",[18,1785,1308],{"id":1307},[318,1787,1788,1794,1800,1806],{},[321,1789,1790,1793],{},[25,1791,1792],{},"\"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).",[321,1795,1796,1799],{},[25,1797,1798],{},"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.",[321,1801,1802,1805],{},[25,1803,1804],{},"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.",[321,1807,1808,1811],{},[25,1809,1810],{},"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.",[18,1813,1815],{"id":1814},"or-use-one-api-call","Or use one API call",[11,1817,1818,1819,1822],{},"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: ",[305,1820,1821],{"href":666},"get a free API key",", 300 credits a month, no card.",[582,1824,1825],{},"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":35,"searchDepth":149,"depth":149,"links":1827},[1828,1829,1830,1831,1832,1833,1834],{"id":1531,"depth":149,"text":1532},{"id":1593,"depth":149,"text":1594},{"id":1629,"depth":149,"text":1630},{"id":1665,"depth":149,"text":1666},{"id":1723,"depth":149,"text":1724},{"id":1307,"depth":149,"text":1308},{"id":1814,"depth":149,"text":1815},"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.",[1838,1841,1844,1847,1850],{"question":1839,"answer":1840},"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":1842,"answer":1843},"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":1845,"answer":1846},"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":1848,"answer":1849},"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":1851,"answer":1852},"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.",{},"/api-blog/figma-mcp-setup-and-alternatives",[632,634,1486],{"title":1497,"description":1836},"Figma MCP: Setup + What to Use Without a Figma File","api-blog/figma-mcp-setup-and-alternatives",[645,646,1860,1861,754,1862,1493],"figma","claude code","design to code","2qWWWhWRUhTg5T098ol9uRFjOtx5VuBnbFS-UbeX1kM",{"id":1865,"title":1866,"author":6,"body":1867,"category":606,"date":2369,"dateModified":626,"description":2370,"extension":609,"faqs":2371,"image":626,"meta":2383,"navigation":628,"path":2384,"readingTime":271,"relatedSlugs":2385,"seo":2387,"seoTitle":626,"stem":2388,"tags":2389,"__hash__":2390},"apiBlog/api-blog/add-design-extraction-to-claude-code-mcp.md","Add Design Extraction to Claude Code with MCP",{"type":8,"value":1868,"toc":2353},[1869,1872,1932,1935,1943,1947,1950,1957,1961,1971,1975,1986,2025,2034,2038,2073,2076,2085,2089,2095,2219,2225,2229,2262,2266,2271,2273,2276,2306,2312,2314,2317,2326,2330,2333,2337,2340,2344,2350],[11,1870,1871],{},"Two commands and Claude Code can read any website's design system instead of guessing it from a screenshot. Here is the whole setup:",[30,1873,1875],{"className":32,"code":1874,"language":34,"meta":35,"style":35},"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",[37,1876,1877,1895,1905,1918,1922],{"__ignoreMap":35},[40,1878,1879,1881,1883,1885,1887,1890,1893],{"class":42,"line":43},[40,1880,47],{"class":46},[40,1882,51],{"class":50},[40,1884,54],{"class":50},[40,1886,378],{"class":50},[40,1888,1889],{"class":50}," -s",[40,1891,1892],{"class":50}," user",[40,1894,1079],{"class":70},[40,1896,1897,1900,1903],{"class":42,"line":149},[40,1898,1899],{"class":50},"  --env",[40,1901,1902],{"class":50}," MIROMIRO_API_KEY=mm_live_your_key",[40,1904,1079],{"class":70},[40,1906,1907,1910,1912,1915],{"class":42,"line":167},[40,1908,1909],{"class":50},"  --",[40,1911,115],{"class":50},[40,1913,1914],{"class":50}," -y",[40,1916,1917],{"class":50}," miromiro-mcp\n",[40,1919,1920],{"class":42,"line":204},[40,1921,1097],{"emptyLinePlaceholder":628},[40,1923,1924,1926,1928,1930],{"class":42,"line":271},[40,1925,47],{"class":46},[40,1927,51],{"class":50},[40,1929,1106],{"class":50},[40,1931,1110],{"class":1109},[11,1933,1934],{},"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,1936,1937,1938,1940,1941,287],{},"No terminal, or you use Claude in the browser? There is also a hosted server - paste ",[37,1939,659],{}," into any client that takes a URL. Full walkthrough for Claude web, Cursor, ChatGPT and Codex in ",[305,1942,1720],{"href":400},[18,1944,1946],{"id":1945},"why-bother","Why bother",[11,1948,1949],{},"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,1951,1952,1953,287],{},"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 ",[305,1954,1956],{"href":1955},"/api/use-cases/ai-agent-ground-truth","ground truth for AI agents",[18,1958,1960],{"id":1959},"step-1-get-a-key","Step 1: get a key",[11,1962,1963,1964,1967,1968,287],{},"Sign in and mint one at ",[305,1965,1966],{"href":1319},"miromiro.app/api/dashboard/keys",". 300 free credits a month, no card. Keys look like ",[37,1969,1970],{},"mm_live_...",[18,1972,1974],{"id":1973},"step-2-add-the-server","Step 2: add the server",[11,1976,1977,1978,1981,1982,1985],{},"The server is a local stdio process (",[37,1979,1980],{},"npx miromiro-mcp",") that reads your key from ",[37,1983,1984],{},"MIROMIRO_API_KEY",". Run this in your terminal - not inside a Claude session; you are configuring the server before the conversation starts:",[30,1987,1989],{"className":32,"code":1988,"language":34,"meta":35,"style":35},"claude mcp add miromiro -s user \\\n  --env MIROMIRO_API_KEY=mm_live_your_key \\\n  -- npx -y miromiro-mcp\n",[37,1990,1991,2007,2015],{"__ignoreMap":35},[40,1992,1993,1995,1997,1999,2001,2003,2005],{"class":42,"line":43},[40,1994,47],{"class":46},[40,1996,51],{"class":50},[40,1998,54],{"class":50},[40,2000,378],{"class":50},[40,2002,1889],{"class":50},[40,2004,1892],{"class":50},[40,2006,1079],{"class":70},[40,2008,2009,2011,2013],{"class":42,"line":149},[40,2010,1899],{"class":50},[40,2012,1902],{"class":50},[40,2014,1079],{"class":70},[40,2016,2017,2019,2021,2023],{"class":42,"line":167},[40,2018,1909],{"class":50},[40,2020,115],{"class":50},[40,2022,1914],{"class":50},[40,2024,1917],{"class":50},[11,2026,2027,2030,2031,2033],{},[37,2028,2029],{},"-s user"," registers it for every project; drop it to scope to the current one. The ",[37,2032,251],{}," matters: it lets npx start the package unattended, so the editor can spawn the server without an install prompt.",[18,2035,2037],{"id":2036},"step-3-verify-and-use-it","Step 3: verify and use it",[30,2039,2041],{"className":32,"code":2040,"language":34,"meta":35,"style":35},"claude mcp list\n# miromiro ... ✓ Connected\n\nclaude\n> Use the miromiro server to get the brand colors and fonts of stripe.com\n",[37,2042,2043,2052,2057,2061,2066],{"__ignoreMap":35},[40,2044,2045,2047,2049],{"class":42,"line":43},[40,2046,47],{"class":46},[40,2048,51],{"class":50},[40,2050,2051],{"class":50}," list\n",[40,2053,2054],{"class":42,"line":149},[40,2055,2056],{"class":1109},"# miromiro ... ✓ Connected\n",[40,2058,2059],{"class":42,"line":167},[40,2060,1097],{"emptyLinePlaceholder":628},[40,2062,2063],{"class":42,"line":204},[40,2064,2065],{"class":46},"claude\n",[40,2067,2068,2070],{"class":42,"line":271},[40,2069,74],{"class":63},[40,2071,2072],{"class":70}," Use the miromiro server to get the brand colors and fonts of stripe.com\n",[11,2074,2075],{},"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:",[318,2077,2078,2080,2083],{},[321,2079,1298],{},[321,2081,2082],{},"\"Get vercel.com's hero section as Tailwind and adapt it for our landing page\"",[321,2084,1304],{},[18,2086,2088],{"id":2087},"cursor-and-windsurf","Cursor and Windsurf",[11,2090,2091,2092,2094],{},"Both take the standard ",[37,2093,156],{}," JSON block:",[30,2096,2098],{"className":137,"code":2097,"language":139,"meta":35,"style":35},"{\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",[37,2099,2100,2104,2116,2128,2146,2176,2206,2210,2214],{"__ignoreMap":35},[40,2101,2102],{"class":42,"line":43},[40,2103,146],{"class":63},[40,2105,2106,2108,2110,2112,2114],{"class":42,"line":149},[40,2107,152],{"class":63},[40,2109,156],{"class":155},[40,2111,159],{"class":63},[40,2113,134],{"class":63},[40,2115,164],{"class":63},[40,2117,2118,2120,2122,2124,2126],{"class":42,"line":167},[40,2119,170],{"class":63},[40,2121,793],{"class":46},[40,2123,159],{"class":63},[40,2125,134],{"class":63},[40,2127,164],{"class":63},[40,2129,2130,2132,2134,2136,2138,2140,2142,2144],{"class":42,"line":204},[40,2131,804],{"class":63},[40,2133,220],{"class":186},[40,2135,159],{"class":63},[40,2137,134],{"class":63},[40,2139,183],{"class":63},[40,2141,229],{"class":50},[40,2143,159],{"class":63},[40,2145,819],{"class":63},[40,2147,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2171,2173],{"class":42,"line":271},[40,2149,804],{"class":63},[40,2151,239],{"class":186},[40,2153,159],{"class":63},[40,2155,134],{"class":63},[40,2157,246],{"class":63},[40,2159,159],{"class":63},[40,2161,251],{"class":50},[40,2163,159],{"class":63},[40,2165,234],{"class":63},[40,2167,183],{"class":63},[40,2169,2170],{"class":50},"miromiro-mcp",[40,2172,159],{"class":63},[40,2174,2175],{"class":63},"],\n",[40,2177,2178,2180,2183,2185,2187,2189,2191,2193,2195,2197,2199,2202,2204],{"class":42,"line":277},[40,2179,804],{"class":63},[40,2181,2182],{"class":186},"env",[40,2184,159],{"class":63},[40,2186,134],{"class":63},[40,2188,180],{"class":63},[40,2190,183],{"class":63},[40,2192,1984],{"class":837},[40,2194,159],{"class":63},[40,2196,134],{"class":63},[40,2198,183],{"class":63},[40,2200,2201],{"class":50},"mm_live_your_key",[40,2203,159],{"class":63},[40,2205,268],{"class":63},[40,2207,2208],{"class":42,"line":859},[40,2209,856],{"class":63},[40,2211,2212],{"class":42,"line":630},[40,2213,274],{"class":63},[40,2215,2217],{"class":42,"line":2216},9,[40,2218,280],{"class":63},[11,2220,2221,2222,2224],{},"Cursor: ",[37,2223,133],{},". Windsurf: Settings → MCP. Restart the editor after saving; both show the server's tools in their MCP panel when connected.",[18,2226,2228],{"id":2227},"things-worth-knowing","Things worth knowing",[318,2230,2231,2240,2246],{},[321,2232,2233,2236,2237,2239],{},[25,2234,2235],{},"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 ",[37,2238,1336],{}," 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.",[321,2241,2242,2245],{},[25,2243,2244],{},"Credits:"," a token extraction or a brand lookup is 10 credits, section-to-code 25. The free 300/month covers real experimentation; the agent sees remaining quota in each response's usage object.",[321,2247,2248,2251,2252,2255,2256,2259,2260,287],{},[25,2249,2250],{},"Server not connecting?"," It is almost always the key: check ",[37,2253,2254],{},"claude mcp list",", and confirm the env var made it in (",[37,2257,2258],{},"claude mcp get miromiro","). Node 18+ is required for ",[37,2261,229],{},[18,2263,2265],{"id":2264},"using-it-alongside-the-figma-mcp","Using it alongside the Figma MCP",[11,2267,2268,2269,287],{},"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 ",[305,2270,1357],{"href":307},[18,2272,1361],{"id":1360},[11,2274,2275],{},"The same engine is a plain REST API if your agent framework speaks HTTP instead:",[30,2277,2279],{"className":32,"code":2278,"language":34,"meta":35,"style":35},"curl \"https://miromiro.app/api/v1/extract?url=stripe.com\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[37,2280,2281,2294],{"__ignoreMap":35},[40,2282,2283,2285,2287,2290,2292],{"class":42,"line":43},[40,2284,1374],{"class":46},[40,2286,183],{"class":63},[40,2288,2289],{"class":50},"https://miromiro.app/api/v1/extract?url=stripe.com",[40,2291,159],{"class":63},[40,2293,1079],{"class":70},[40,2295,2296,2298,2300,2302,2304],{"class":42,"line":149},[40,2297,1388],{"class":50},[40,2299,183],{"class":63},[40,2301,1393],{"class":50},[40,2303,1396],{"class":70},[40,2305,1092],{"class":63},[11,2307,2308,2309,287],{},"Full setup docs, including the agent quickstart, live at ",[305,2310,2311],{"href":2311},"/api/docs/install-mcp",[18,2313,1409],{"id":1408},[293,2315,615],{"id":2316},"how-do-i-add-an-mcp-server-to-claude-code",[11,2318,2319,2322,2323,2325],{},[37,2320,2321],{},"claude mcp add \u003Cname> ... -- \u003Ccommand>"," in your terminal, then ",[37,2324,2254],{}," to confirm it connected. Exact MiroMiro command at the top of this post.",[293,2327,2329],{"id":2328},"what-tools-does-the-server-expose","What tools does the server expose?",[11,2331,2332],{},"Seven: design tokens, brand, images, SVGs, fonts, Lottie, and section-to-code. They register automatically; the agent picks per task.",[293,2334,2336],{"id":2335},"why-tokens-instead-of-a-screenshot","Why tokens instead of a screenshot?",[11,2338,2339],{},"Screenshots make the model guess every value. Tokens are the site's real CSS - the difference between imitation and ground truth.",[293,2341,2343],{"id":2342},"does-it-work-with-cursor-and-windsurf","Does it work with Cursor and Windsurf?",[11,2345,2346,2347,2349],{},"Yes - standard ",[37,2348,156],{}," JSON (above), restart, done.",[582,2351,2352],{},"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":35,"searchDepth":149,"depth":149,"links":2354},[2355,2356,2357,2358,2359,2360,2361,2362,2363],{"id":1945,"depth":149,"text":1946},{"id":1959,"depth":149,"text":1960},{"id":1973,"depth":149,"text":1974},{"id":2036,"depth":149,"text":2037},{"id":2087,"depth":149,"text":2088},{"id":2227,"depth":149,"text":2228},{"id":2264,"depth":149,"text":2265},{"id":1360,"depth":149,"text":1361},{"id":1408,"depth":149,"text":1409,"children":2364},[2365,2366,2367,2368],{"id":2316,"depth":167,"text":615},{"id":2328,"depth":167,"text":2329},{"id":2335,"depth":167,"text":2336},{"id":2342,"depth":167,"text":2343},"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.",[2372,2374,2377,2380],{"question":615,"answer":2373},"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":2375,"answer":2376},"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":2378,"answer":2379},"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":2381,"answer":2382},"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",[632,1485,2386],"design-token-types-reference",{"title":1866,"description":2370},"api-blog/add-design-extraction-to-claude-code-mcp",[646,1861,1493,347,754],"GCg_wW_oSWoXNv1z9MhkI1ur2Z7s8b3HpO8eJbVP5HU",1792517974799]