[{"data":1,"prerenderedAt":1313},["ShallowReactive",2],{"blog-how-to-send-figma-designs-to-claude-code-en":3,"blog-locales-how-to-send-figma-designs-to-claude-code":342,"blog-related-how-to-send-figma-designs-to-claude-code-en":343},{"id":4,"title":5,"author":6,"body":7,"category":307,"date":308,"dateModified":308,"description":309,"descriptionEs":310,"descriptionJa":310,"descriptionZh":310,"extension":311,"faqs":312,"image":310,"meta":328,"navigation":329,"path":330,"readingTime":331,"seo":332,"stem":333,"tags":334,"thumbnail":310,"titleEs":310,"titleJa":310,"titleZh":310,"__hash__":341},"blog/blog/how-to-send-figma-designs-to-claude-code.md","How to Send Figma Designs to Claude Code (2026)","Soraia",{"type":8,"value":9,"toc":293},"minimark",[10,22,25,51,56,64,67,71,76,88,91,95,103,106,110,113,117,124,127,135,150,163,166,222,226,229,240,243,251,255,275,283,287,290],[11,12,13,14,21],"p",{},"People search \"Claude Code to Figma\" expecting a button that pipes one into the other. There isn't one, exactly. What they actually want is simpler: give ",[15,16,20],"a",{"href":17,"rel":18},"https://docs.anthropic.com/en/docs/claude-code/overview",[19],"nofollow","Claude Code"," enough design context that the UI it writes matches the design they already have in Figma.",[11,23,24],{},"That framing matters, because once you see it as a context problem, the question becomes \"what's the most accurate way to hand Claude that design?\" Here are the realistic options today, and which one drifts.",[26,27,29,35],"callout",{"color":28},"primary",[11,30,31],{},[32,33,34],"strong",{},"Key takeaways:",[36,37,38,42,45,48],"ul",{},[39,40,41],"li",{},"\"Claude Code to Figma\" really means giving Claude design context so it builds matching UI.",[39,43,44],{},"Three ways exist today: paste an exported image (lossy), copy CSS from Figma Dev Mode, or use a Figma MCP integration if you have one.",[39,46,47],{},"Image input drifts: wrong fonts, off spacing, no semantic structure. Claude infers from pixels.",[39,49,50],{},"If the design also exists as a live website, extract its real HTML and Tailwind and hand that to Claude instead. Real code in, accurate code out.",[52,53,55],"h2",{"id":54},"what-claude-code-to-figma-actually-means","What \"Claude Code to Figma\" actually means",[11,57,58,59,63],{},"There's no native bridge that exports a Figma frame straight into Claude Code as a finished component. So the goal is to get the design ",[60,61,62],"em",{},"in front of"," Claude in a form it can build from.",[11,65,66],{},"The accuracy of the result depends entirely on the form you choose. Some forms hand Claude real structure. Others hand it a picture and ask it to reverse-engineer the rest. The gap between those two is the whole story.",[52,68,70],{"id":69},"the-three-ways-to-get-a-figma-design-into-claude-code","The three ways to get a Figma design into Claude Code",[72,73,75],"h3",{"id":74},"_1-export-the-frame-as-an-image-and-paste-it","1. Export the frame as an image and paste it",[11,77,78,79,83,84,87],{},"The easiest path. Export the Figma frame as a PNG, drop it into Claude Code, and ask for the markup. This is just ",[15,80,82],{"href":81},"/blog/image-to-code-the-honest-guide","image-to-code",", and it carries the same problem: Claude reads pixels and ",[60,85,86],{},"guesses"," the structure.",[11,89,90],{},"In practice that means the wrong font (Claude picks something close, not your actual typeface), spacing that's off by a few pixels everywhere, and flat output with no semantic HTML. It gets you a rough draft, not a faithful build. Fine for a throwaway prototype, frustrating when you need the real thing.",[72,92,94],{"id":93},"_2-copy-css-and-measurements-from-figma-dev-mode","2. Copy CSS and measurements from Figma Dev Mode",[11,96,97,102],{},[15,98,101],{"href":99,"rel":100},"https://www.figma.com/dev-mode/",[19],"Figma Dev Mode"," exposes the real values behind a design: exact colors, spacing, font sizes, and generated CSS per layer. You can copy those and paste them into Claude Code as text, which is a real step up from an image because the numbers are exact rather than inferred.",[11,104,105],{},"The catch is that it's manual and per-layer. Dev Mode gives you correct values, but you're stitching together CSS snippets by hand, and the generated code is often verbose absolute-positioned markup rather than clean, composable components. Accurate inputs, tedious assembly.",[72,107,109],{"id":108},"_3-use-a-figma-mcp-or-dev-mode-integration","3. Use a Figma MCP or Dev Mode integration",[11,111,112],{},"Claude Code supports MCP servers, so if a Figma MCP connection is configured, Claude can pull structured data from the file directly rather than from a pasted image. This is the cleanest of the Figma-native paths when it's set up, because Claude reads real layer data instead of guessing. The friction is setup and access: you need the integration wired up and the right Figma permissions, which not every team has ready to go.",[52,114,116],{"id":115},"the-cleaner-angle-hand-claude-the-real-rendered-code","The cleaner angle: hand Claude the real rendered code",[11,118,119,120,123],{},"Here's the move most people miss. A lot of the time, the design you're \"sending to Claude\" isn't a pure mockup at all. You're recreating a real website, or rebuilding a section you already shipped, or matching a competitor's layout. The design exists as a ",[60,121,122],{},"live page",".",[11,125,126],{},"When that's true, you have a far better input than any Figma screenshot: the real rendered HTML and Tailwind. Instead of asking Claude to infer structure from pixels, you give it the actual structure as ground truth.",[11,128,129,134],{},[15,130,133],{"href":131,"rel":132},"https://chromewebstore.google.com/detail/miromiro/kpmkikjpclolhodgckeogmiiaehpfjhl",[19],"MiroMiro"," is a free Chrome extension that extracts clean code from any live website in one click:",[136,137,138,141,147],"ol",{},[39,139,140],{},"Open the live page (your site, a staging build, a reference you admire).",[39,142,143,144,123],{},"Click the section you want and copy it as clean ",[32,145,146],{},"HTML + Tailwind",[39,148,149],{},"Paste that into Claude Code as context.",[11,151,152,153,157,158,162],{},"Now Claude isn't guessing the font, the spacing, or the layout. It has the real values and builds from them. This is the same principle behind ",[15,154,156],{"href":155},"/blog/how-to-design-in-cursor","giving the AI real design context"," in Cursor: real code in, accurate code out. It pairs naturally with the broader idea of ",[15,159,161],{"href":160},"/blog/design-tools-that-export-clean-html-css","design tools that export clean HTML and CSS"," rather than handing models a flat image.",[11,164,165],{},"Be honest about the limit, though. If your design is a pure Figma-only mockup with no live source anywhere, MiroMiro has nothing to extract. For that case you're back to Dev Mode or image input. The live-code route only works when the design exists, or can exist, as a rendered page.",[167,168,169,185],"table",{},[170,171,172],"thead",{},[173,174,175,179,182],"tr",{},[176,177,178],"th",{},"What you hand Claude",[176,180,181],{},"What Claude does",[176,183,184],{},"Result",[186,187,188,200,211],"tbody",{},[173,189,190,194,197],{},[191,192,193],"td",{},"Figma screenshot",[191,195,196],{},"Guesses from pixels",[191,198,199],{},"Wrong fonts, off spacing, no semantics",[173,201,202,205,208],{},[191,203,204],{},"Dev Mode CSS (manual)",[191,206,207],{},"Uses exact values",[191,209,210],{},"Accurate but verbose, tedious to assemble",[173,212,213,216,219],{},[191,214,215],{},"Real extracted HTML + Tailwind",[191,217,218],{},"Builds from real structure",[191,220,221],{},"Faithful, clean, composable",[52,223,225],{"id":224},"a-prompt-template-for-claude-code","A prompt template for Claude Code",[11,227,228],{},"Once you have your context (extracted code or copied Dev Mode values), the prompt that works best is specific about what to keep and what to change. Paste your code block, then add:",[230,231,236],"pre",{"className":232,"code":234,"language":235},[233],"language-text","This is the [hero / pricing / nav] section I extracted from [site].\nAdapt it to my project:\n- Keep the layout, spacing, and structure as-is.\n- Pull colors and fonts from my tailwind.config.\n- Replace the copy with [your content].\n- Use semantic HTML and my existing component conventions.\nDon't redesign it. Match the reference and rewire it to my brand.\n","text",[237,238,234],"code",{"__ignoreMap":239},"",[11,241,242],{},"The \"don't redesign it\" line matters. Left open-ended, Claude tends to improvise and drift back toward generic defaults. Telling it to match the reference and only adapt the brand keeps the output anchored to the structure you handed it.",[11,244,245,246,250],{},"If your tokens are scattered, you can also ",[15,247,249],{"href":248},"/blog/how-to-export-design-tokens-from-website-to-figma-and-code","export design tokens to Figma and code"," first, so Claude has a clean palette and type scale to pull from instead of inventing them.",[52,252,254],{"id":253},"which-path-should-you-use","Which path should you use?",[36,256,257,263,269],{},[39,258,259,262],{},[32,260,261],{},"Pure Figma mockup, no live version:"," Dev Mode for accurate values, or an image paste for a fast rough draft. Set expectations: image input will drift.",[39,264,265,268],{},[32,266,267],{},"Figma MCP available:"," use it. Structured file data beats a screenshot every time.",[39,270,271,274],{},[32,272,273],{},"The design is, or can be, a live page:"," extract the real HTML + Tailwind with MiroMiro and hand Claude ground truth. This is the most accurate option and the cheapest.",[11,276,277,278,282],{},"You can turn any reference into Claude-ready context with the ",[15,279,281],{"href":280},"/website-to-code","website-to-code"," workflow in under a minute, no Figma export step required.",[52,284,286],{"id":285},"one-less-monthly-bill-in-your-ai-stack","One less monthly bill in your AI stack",[11,288,289],{},"Claude Code, Cursor, v0, Figma Dev Mode. That stack runs €75+/month, every month, before you ship anything. MiroMiro is the one piece here that doesn't have to be recurring:",[291,292],"lifetime-math",{},{"title":239,"searchDepth":294,"depth":294,"links":295},2,[296,297,303,304,305,306],{"id":54,"depth":294,"text":55},{"id":69,"depth":294,"text":70,"children":298},[299,301,302],{"id":74,"depth":300,"text":75},3,{"id":93,"depth":300,"text":94},{"id":108,"depth":300,"text":109},{"id":115,"depth":294,"text":116},{"id":224,"depth":294,"text":225},{"id":253,"depth":294,"text":254},{"id":285,"depth":294,"text":286},"AI Coding","2026-06-09","How to send Figma designs to Claude Code so it builds matching UI. Image input drifts, so here are the cleaner ways to hand Claude real design context.",null,"md",[313,316,319,322,325],{"question":314,"answer":315},"How do I send a Figma design to Claude Code?","There are three realistic ways today. Export the frame as an image and paste it into Claude (lossy, since Claude infers structure from pixels). Open Figma Dev Mode and copy the CSS and measurements as text. Or, if a Figma MCP or Dev Mode integration is set up, let Claude read the file directly. Image input is the easiest but the least accurate.",{"question":317,"answer":318},"Can Claude Code read a Figma file directly?","Only through an integration. Claude Code can use MCP servers, so if a Figma MCP connection is configured it can pull structured data from the file. Without that, you are limited to pasting an exported image or copying CSS out of Figma Dev Mode by hand.",{"question":320,"answer":321},"Why does pasting a Figma screenshot into Claude produce wrong results?","A screenshot is pixels, not structure. Claude has to guess the fonts, the spacing scale, and the layout, so it commonly drifts: close-looking output with the wrong font, off spacing, and no semantic HTML. An image tells Claude what something looks like, not how it is built.",{"question":323,"answer":324},"What if my design is a real website, not just a Figma mockup?","Then you have a better option. Extract the real rendered HTML and Tailwind from the live page and hand that to Claude as ground-truth context instead of a Figma screenshot. Real code in means accurate code out. MiroMiro does this extraction in one click.",{"question":326,"answer":327},"Is there a free way to get accurate design context into Claude Code?","Yes, if the design exists as a live site. MiroMiro is a free Chrome extension that extracts clean HTML and Tailwind from any public page. Paste that into Claude Code as context and it builds from real structure instead of guessing from an image.",{},true,"/blog/how-to-send-figma-designs-to-claude-code",6,{"title":5,"description":309},"blog/how-to-send-figma-designs-to-claude-code",[335,336,337,338,339,340],"claude code to figma","figma to claude","figma to code","design to code","claude code","website to code","RsWjktQuvoFQzXfIL_-Am_Fm2zphs9W5XUUGsONZJZA",[],[344,711,1024],{"id":345,"title":346,"author":6,"body":347,"category":307,"date":682,"dateModified":682,"description":683,"descriptionEs":310,"descriptionJa":310,"descriptionZh":310,"extension":311,"faqs":684,"image":310,"meta":700,"navigation":329,"path":81,"readingTime":331,"seo":701,"stem":702,"tags":703,"thumbnail":310,"titleEs":310,"titleJa":310,"titleZh":310,"__hash__":709,"score":710},"blog/blog/image-to-code-the-honest-guide.md","Image to Code: The Honest Guide (and the Cleaner Alternative)",{"type":8,"value":348,"toc":672},[349,352,355,375,379,394,412,415,419,426,470,473,477,480,490,496,500,503,513,539,542,546,628,632,639,647,651,654,665,667,670],[11,350,351],{},"\"Image to code\" is one of those phrases that sounds like the future arrived: drop in a picture, get working code out. AI can genuinely do it now. But there's a gap between the demo and your project, and it's worth understanding before you build on it.",[11,353,354],{},"Here's how image-to-code actually works, where it breaks, and the cleaner path when the design is a real website.",[26,356,357,361],{"color":28},[11,358,359],{},[32,360,34],{},[36,362,363,366,369,372],{},[39,364,365],{},"AI image-to-code works by inferring structure from pixels. It's a guess, not a copy.",[39,367,368],{},"It's fine for static mockups with no live source. It drifts on complex or content-heavy designs.",[39,370,371],{},"If the design is a live website, extracting the real HTML and CSS beats any image-to-code guess.",[39,373,374],{},"Best workflow: extract real code, then hand it to Cursor or v0 as ground-truth context.",[52,376,378],{"id":377},"how-image-to-code-works","How image-to-code works",[11,380,381,382,387,388,393],{},"Modern vision models like ",[15,383,386],{"href":384,"rel":385},"https://platform.openai.com/docs/guides/vision",[19],"OpenAI's GPT-4 with vision"," and ",[15,389,392],{"href":390,"rel":391},"https://docs.anthropic.com/en/docs/build-with-claude/vision",[19],"Anthropic's Claude"," (plus Gemini and purpose-built tools) take an image and infer code from it. The model looks at the pixels, guesses where the boxes, text, and buttons are, estimates spacing and colors, and emits HTML/CSS or React.",[11,395,396,397,400,401,387,404,407,408,411],{},"When we ran the same Stripe pricing section through both paths, the screenshot route produced a layout that looked right at a glance but used the wrong font stack, off-by-a-few-pixels padding, and plain ",[237,398,399],{},"\u003Cdiv>","s where the real page used semantic ",[237,402,403],{},"\u003Csection>",[237,405,406],{},"\u003Cbutton>"," elements. The extracted version matched the source exactly because it ",[60,409,410],{},"was"," the source.",[11,413,414],{},"For simple, clean layouts (a centered card, a basic landing hero) it works surprisingly well. You get something close to the picture in seconds.",[52,416,418],{"id":417},"where-it-falls-apart","Where it falls apart",[11,420,421,422,425],{},"The problem is the word ",[32,423,424],{},"guess",". The model has no access to the real design. It's reverse-engineering structure from a flat image, which means it can't know:",[36,427,428,435,441,458,464],{},[39,429,430,431,434],{},"Your ",[32,432,433],{},"exact font"," (it picks a lookalike)",[39,436,437,440],{},[32,438,439],{},"Precise spacing and sizing"," (it estimates, and small errors compound across the layout)",[39,442,443,446,447,449,450,453,454,457],{},[32,444,445],{},"Semantic structure."," Is that a ",[237,448,406],{},", a ",[237,451,452],{},"\u003Cnav>",", an ",[237,455,456],{},"\u003Carticle>","? It guesses from appearance",[39,459,460,463],{},[32,461,462],{},"Hover states, transitions, responsive breakpoints."," All invisible in a static image",[39,465,466,469],{},[32,467,468],{},"The actual color values."," It samples approximations, not your real tokens",[11,471,472],{},"So the output is \"close but off.\" Good enough to start; never good enough to ship without cleanup. And for content-heavy or complex designs, the drift gets worse fast.",[52,474,476],{"id":475},"the-key-question-does-the-design-already-exist-as-a-website","The key question: does the design already exist as a website?",[11,478,479],{},"This is the fork in the road most people miss.",[11,481,482,485,486,123],{},[32,483,484],{},"If you only have a static mockup"," (a Figma export, a screenshot, a sketch on paper) then image-to-code is a reasonable tool. There's no live source to pull from, so an AI guess is your best option. Paste it into Cursor or v0 and iterate. The same caveats apply to the closely related ",[15,487,489],{"href":488},"/blog/screenshot-to-code-what-actually-works","screenshot-to-code workflow",[11,491,492,495],{},[32,493,494],{},"But if the design is a real, live website"," (and most of the time it is) then converting an image of it to code is the slow, lossy path. The real HTML and CSS already exist. The browser is rendering them right now. Reconstructing them from a screenshot throws away the exact thing you're trying to recreate.",[52,497,499],{"id":498},"the-cleaner-alternative-extract-the-real-code","The cleaner alternative: extract the real code",[11,501,502],{},"When the design is a live page, skip image-to-code entirely and extract the actual code.",[11,504,505,508,509,512],{},[15,506,133],{"href":131,"rel":507},[19]," is a free Chrome extension that lets you click any element or section on a website and get its ",[32,510,511],{},"real, clean code"," in one step:",[36,514,515,522,533,536],{},[39,516,517,518,521],{},"The actual ",[32,519,520],{},"HTML + the CSS that applies to it",", not an inference from pixels",[39,523,524,525,528,529,532],{},"Clean ",[32,526,527],{},"Tailwind"," or ",[32,530,531],{},"vanilla CSS"," output",[39,534,535],{},"Exact fonts, colors, spacing, because they're the real values, not approximations",[39,537,538],{},"Whole sections at once (hero, pricing, navbar), not one guess per screenshot",[11,540,541],{},"Real code in means no guesswork, no drift, no \"close but off.\"",[52,543,545],{"id":544},"image-to-code-vs-real-extraction","Image-to-code vs. real extraction",[167,547,548,560],{},[170,549,550],{},[173,551,552,554,557],{},[176,553],{},[176,555,556],{},"Image to code (AI)",[176,558,559],{},"Extract real code (MiroMiro)",[186,561,562,573,584,595,606,617],{},[173,563,564,567,570],{},[191,565,566],{},"Source",[191,568,569],{},"A static image (model guesses)",[191,571,572],{},"The live page (exact values)",[173,574,575,578,581],{},[191,576,577],{},"Fonts / spacing",[191,579,580],{},"Approximated",[191,582,583],{},"Exact",[173,585,586,589,592],{},[191,587,588],{},"Semantic HTML",[191,590,591],{},"Inferred",[191,593,594],{},"Real structure",[173,596,597,600,603],{},[191,598,599],{},"Hover / responsive",[191,601,602],{},"Missing",[191,604,605],{},"Captured",[173,607,608,611,614],{},[191,609,610],{},"Best for",[191,612,613],{},"Mockups with no live source",[191,615,616],{},"Any design that exists as a website",[173,618,619,622,625],{},[191,620,621],{},"Output quality",[191,623,624],{},"\"Close but off\"",[191,626,627],{},"Production-grade starting point",[52,629,631],{"id":630},"using-it-with-ai-tools","Using it with AI tools",[11,633,634,635,638],{},"If your end goal is feeding an AI coding tool, the logic still holds. Pasting a screenshot into Cursor or v0 gives the model a guess to work from. Pasting ",[32,636,637],{},"real extracted code"," gives it ground truth.",[11,640,641,642,646],{},"So the best workflow for recreating a live design isn't image-to-code. It's: extract the real section with MiroMiro, paste the clean HTML + Tailwind into Cursor / Claude / v0 / Lovable, then let the AI adapt it to your needs. Accurate input, accurate output. (For a full breakdown of which AI tools accept pasted code best, see ",[15,643,645],{"href":644},"/blog/how-to-copy-ui-components-from-any-website-into-cursor-claude-v0","how to copy any UI component into Cursor, Claude & v0",".)",[52,648,650],{"id":649},"try-it","Try it",[11,652,653],{},"If the design you want to \"convert\" is a live website, you don't need an image-to-code guess — you need the real code.",[11,655,656,660,661,664],{},[15,657,659],{"href":131,"rel":658},[19],"Install MiroMiro for free"," and extract your first clean component in under 30 seconds. Want the whole design? Here's how to ",[15,662,663],{"href":280},"clone a website"," into clean code, section by section.",[52,666,286],{"id":285},[11,668,669],{},"You're likely already paying for Cursor, Claude, v0 — €75+/month before you ship a line. MiroMiro is the one tool in that workflow that doesn't have to be a recurring bill:",[291,671],{},{"title":239,"searchDepth":294,"depth":294,"links":673},[674,675,676,677,678,679,680,681],{"id":377,"depth":294,"text":378},{"id":417,"depth":294,"text":418},{"id":475,"depth":294,"text":476},{"id":498,"depth":294,"text":499},{"id":544,"depth":294,"text":545},{"id":630,"depth":294,"text":631},{"id":649,"depth":294,"text":650},{"id":285,"depth":294,"text":286},"2026-05-29","Image-to-code with AI sounds magic, but the output is a pixel-level guess. Here's how it actually works, where it fails, and the cleaner way to get real code.",[685,688,691,694,697],{"question":686,"answer":687},"Can you really convert an image to code?","Yes, AI vision models can turn an image or screenshot into HTML/CSS or React code by inferring structure from pixels. Tools like GPT-4 vision, Claude, and dedicated image-to-code apps do this. But the output is an approximation — the model guesses the layout, spacing, fonts, and semantics, so it usually needs cleanup and rarely matches the original exactly.",{"question":689,"answer":690},"What is the most accurate image-to-code tool?","Accuracy depends on the image. Clean, simple layouts convert well; complex or content-heavy designs drift. The most accurate approach isn't image-to-code at all — if the design exists as a live website, extracting the real HTML and CSS (with a tool like MiroMiro) beats any image-to-code guess, because you get the actual shipped code instead of an inference from pixels.",{"question":692,"answer":693},"Why does image-to-code output look different from the original?","Because the AI is reconstructing from pixels with no access to the real markup. It can't see your exact font, the precise spacing values, the semantic structure, or hover/responsive states — so it approximates all of them. Small errors compound across a layout, which is why the result looks 'close but off.'",{"question":695,"answer":696},"Is it better to convert an image to code or copy the website's code directly?","If the design is a live website, copy the real code directly — it's faster and exact. Image-to-code is only the right tool when you have a static mockup (a Figma export, a screenshot, a hand sketch) and no live source to extract from. When a real page exists, MiroMiro's one-click extraction gives you clean HTML + Tailwind without the guesswork.",{"question":698,"answer":699},"How do I turn a website screenshot into code for Cursor or v0?","You can paste the screenshot into Cursor or v0 and ask it to rebuild — but you'll get a rough approximation. A better result: if the screenshot is of a real site, open that site and use MiroMiro to extract the actual section as clean HTML + Tailwind, then paste that code into your AI tool as context. Real code in means accurate code out.",{},{"title":346,"description":683},"blog/image-to-code-the-honest-guide",[704,705,706,707,708,338,340],"image to code","image to html","screenshot to code","convert image to code","ai image to code","rC0D_xowGxJJBwpPZUvr6xY6RwSx7Cg3j8JZ4gEoo4I",5,{"id":712,"title":713,"author":6,"body":714,"category":307,"date":682,"dateModified":682,"description":998,"descriptionEs":310,"descriptionJa":310,"descriptionZh":310,"extension":311,"faqs":999,"image":310,"meta":1015,"navigation":329,"path":488,"readingTime":331,"seo":1016,"stem":1017,"tags":1018,"thumbnail":310,"titleEs":310,"titleJa":310,"titleZh":310,"__hash__":1023,"score":710},"blog/blog/screenshot-to-code-what-actually-works.md","Screenshot to Code: What Actually Works in 2026",{"type":8,"value":715,"toc":988},[716,725,728,748,752,755,759,762,801,808,812,815,829,836,840,843,849,874,877,881,955,959,966,968,971,981,983,986],[11,717,718,719,724],{},"Screenshot-to-code is a genuinely cool idea: take a picture of a UI, get working code back. The ",[15,720,723],{"href":721,"rel":722},"https://github.com/abi/screenshot-to-code",[19],"open-source screenshot-to-code project"," popularized it, and now Cursor, v0, Claude, and a dozen apps offer some version. It works, with an asterisk that matters for real projects.",[11,726,727],{},"Here's what screenshot-to-code does well, where it drifts, and the faster route when the design is a live website.",[26,729,730,734],{"color":28},[11,731,732],{},[32,733,34],{},[36,735,736,739,742,745],{},[39,737,738],{},"AI screenshot-to-code infers a UI from pixels, so the result drifts the more complex the design gets.",[39,740,741],{},"The real question is whether the design is a live website. If it is, the exact code already exists.",[39,743,744],{},"When a live source exists, extract the real HTML and CSS instead of guessing from an image.",[39,746,747],{},"Pair extraction with Cursor or v0 by pasting clean, real code as context for the best results.",[52,749,751],{"id":750},"what-screenshot-to-code-does","What screenshot-to-code does",[11,753,754],{},"An AI vision model reads your screenshot, infers the layout, and emits HTML/CSS, Tailwind, or React. For clean, simple designs it's genuinely useful. You get a rough working version in seconds, no manual markup.",[52,756,758],{"id":757},"the-asterisk-its-an-inference-not-a-copy","The asterisk: it's an inference, not a copy",[11,760,761],{},"The model only has pixels. It can't see the real structure, so it reconstructs by guessing:",[36,763,764,770,776,789,795],{},[39,765,766,769],{},[32,767,768],{},"Fonts"," become lookalikes",[39,771,772,775],{},[32,773,774],{},"Spacing and sizes"," are estimated (and errors stack across the layout)",[39,777,778,780,781,783,784,783,786,788],{},[32,779,588],{}," (",[237,782,406],{},", ",[237,785,452],{},[237,787,403],{},") is inferred from appearance",[39,790,791,794],{},[32,792,793],{},"Hover states, transitions, breakpoints"," don't exist in a static image, so they're missing",[39,796,797,800],{},[32,798,799],{},"Colors"," are sampled approximations, not the real tokens",[11,802,803,804,807],{},"The result is \"close but off.\" A fine scaffold; rarely shippable without rework. And the more complex the design, the more it drifts. The same ceiling applies to any ",[15,805,806],{"href":81},"image-to-code workflow",", because the model is always working backward from pixels.",[52,809,811],{"id":810},"the-fork-is-the-design-a-live-website","The fork: is the design a live website?",[11,813,814],{},"Here's the decision that determines which tool you should reach for:",[36,816,817,823],{},[39,818,819,822],{},[32,820,821],{},"Static mockup only"," (Figma frame, a screenshot someone sent you, a sketch) → screenshot-to-code is reasonable. There's no live source, so an AI guess is your best bet.",[39,824,825,828],{},[32,826,827],{},"A real, live website"," → don't screenshot it. The exact HTML and CSS already exist and the browser is rendering them. Turning a picture of it back into code is the lossy, slow path.",[11,830,831,832,835],{},"Most of the time, the thing you want to recreate ",[60,833,834],{},"is"," a live site. Which means screenshot-to-code is solving a problem you don't have to create.",[52,837,839],{"id":838},"the-faster-way-extract-the-real-code","The faster way: extract the real code",[11,841,842],{},"When the design is live, skip the screenshot and grab the actual code.",[11,844,845,848],{},[15,846,133],{"href":131,"rel":847},[19]," is a free Chrome extension. Click any section of a website and get:",[36,850,851,858,868,871],{},[39,852,853,854,857],{},"The real ",[32,855,856],{},"HTML + the CSS that applies"," (exact, not inferred)",[39,859,524,860,528,862,780,864,867],{},[32,861,527],{},[32,863,531],{},[15,865,866],{"href":160},"why clean export beats AI inference",")",[39,869,870],{},"True fonts, colors, and spacing values",[39,872,873],{},"Whole sections in one click (hero, pricing, navbar), not one screenshot at a time",[11,875,876],{},"No guessing. No drift. The code the site actually ships.",[52,878,880],{"id":879},"screenshot-to-code-vs-real-extraction","Screenshot-to-code vs. real extraction",[167,882,883,894],{},[170,884,885],{},[173,886,887,889,892],{},[176,888],{},[176,890,891],{},"Screenshot to code",[176,893,559],{},[186,895,896,907,915,926,935,945],{},[173,897,898,901,904],{},[191,899,900],{},"Input",[191,902,903],{},"A picture — model infers",[191,905,906],{},"The live page — exact code",[173,908,909,911,913],{},[191,910,577],{},[191,912,580],{},[191,914,583],{},[173,916,917,920,923],{},[191,918,919],{},"Semantic structure",[191,921,922],{},"Guessed",[191,924,925],{},"Real",[173,927,928,930,933],{},[191,929,599],{},[191,931,932],{},"Lost",[191,934,605],{},[173,936,937,939,942],{},[191,938,610],{},[191,940,941],{},"Static mockups",[191,943,944],{},"Any live website",[173,946,947,949,952],{},[191,948,184],{},[191,950,951],{},"Needs cleanup",[191,953,954],{},"Production-grade start",[52,956,958],{"id":957},"pairing-it-with-cursor-and-v0","Pairing it with Cursor and v0",[11,960,961,962,965],{},"If you're feeding an AI tool anyway, the principle is the same: a screenshot gives it a guess; real code gives it ground truth. For a live design, extract the section with MiroMiro, paste the clean Tailwind into Cursor / v0 / Claude / Lovable as context, and let the AI adapt accurate code instead of hallucinating from an image. There's a full walkthrough of ",[15,963,964],{"href":644},"copying UI components from any website into Cursor, Claude, or v0"," if you want the step-by-step.",[52,967,650],{"id":649},[11,969,970],{},"If the UI you want to rebuild is a real website, you don't need a screenshot. You need the real code.",[11,972,973,976,977,980],{},[15,974,659],{"href":131,"rel":975},[19]," and grab your first clean section in under 30 seconds. Rebuilding a whole page? See how the ",[15,978,979],{"href":280},"website cloner"," turns a full live site into clean, reusable code.",[52,982,286],{"id":285},[11,984,985],{},"Cursor, Claude, v0 — you're already paying €75+/month before shipping anything. MiroMiro is the one piece of the workflow that doesn't have to be recurring:",[291,987],{},{"title":239,"searchDepth":294,"depth":294,"links":989},[990,991,992,993,994,995,996,997],{"id":750,"depth":294,"text":751},{"id":757,"depth":294,"text":758},{"id":810,"depth":294,"text":811},{"id":838,"depth":294,"text":839},{"id":879,"depth":294,"text":880},{"id":957,"depth":294,"text":958},{"id":649,"depth":294,"text":650},{"id":285,"depth":294,"text":286},"Screenshot-to-code tools turn a picture into HTML with AI — but the results drift. Here's what works, what doesn't, and the faster way to get clean code from any live website.",[1000,1003,1006,1009,1012],{"question":1001,"answer":1002},"What is the best screenshot-to-code tool?","Open-source screenshot-to-code (the GitHub project by abi), plus AI tools like GPT-4 vision, Claude, v0, and dedicated apps all convert screenshots to HTML/React. They're best for static mockups. If the screenshot is of a live website, though, the better tool is one that extracts the real code — MiroMiro pulls the actual HTML and CSS from the page, beating any screenshot guess on accuracy.",{"question":1004,"answer":1005},"How accurate is screenshot to code?","It varies with complexity. Simple layouts convert decently; detailed or content-heavy designs drift because the model infers structure, spacing, and fonts from pixels. Expect a 'close but needs work' result that requires cleanup before shipping.",{"question":1007,"answer":1008},"Why does my screenshot-to-code result not match the original?","The AI has only the image — no access to the real markup, fonts, spacing values, semantic tags, or responsive rules. It approximates everything, and small errors compound across the layout. That's the inherent ceiling of working from pixels instead of real code.",{"question":1010,"answer":1011},"Is screenshot to code or copying the real code better?","If the design is a live website, copying the real code wins on speed and accuracy. Screenshot-to-code is only the right choice for static mockups with no live source. When a real page exists, MiroMiro extracts clean HTML + Tailwind in one click — no inference, no drift.",{"question":1013,"answer":1014},"How do I get a screenshot into Cursor or v0 as code?","You can paste the screenshot and ask the tool to rebuild it, but you'll get an approximation. For a live site, the higher-quality route is to extract the real section with MiroMiro and paste that clean code into Cursor or v0 as context. The AI then adapts real code instead of guessing from an image.",{},{"title":713,"description":998},"blog/screenshot-to-code-what-actually-works",[706,1019,1020,1021,1022,340,338],"screenshot to html","screenshot to react","convert screenshot to code","ai screenshot to code","hqxN5eUtb_Ua5WK6pn4Vn_femjqYWqP9g4zuCMTMU3c",{"id":1025,"title":1026,"author":6,"body":1027,"category":307,"date":682,"dateModified":682,"description":1284,"descriptionEs":310,"descriptionJa":310,"descriptionZh":310,"extension":311,"faqs":1285,"image":310,"meta":1301,"navigation":329,"path":155,"readingTime":331,"seo":1302,"stem":1303,"tags":1304,"thumbnail":310,"titleEs":310,"titleJa":310,"titleZh":310,"__hash__":1311,"score":1312},"blog/blog/how-to-design-in-cursor.md","How to Design in Cursor: Give the AI Real Design Context (2026)",{"type":8,"value":1028,"toc":1273},[1029,1041,1048,1068,1072,1075,1082,1086,1092,1102,1106,1113,1119,1135,1138,1142,1192,1196,1199,1217,1220,1224,1231,1233,1236,1242,1246,1266,1268,1271],[11,1030,1031,1036,1037,1040],{},[15,1032,1035],{"href":1033,"rel":1034},"https://cursor.com",[19],"Cursor"," is excellent at writing code. It's noticeably weaker at ",[60,1038,1039],{},"design"," — ask it for a landing section and you often get the same generic, slightly-off AI aesthetic everyone recognizes by now.",[11,1042,1043,1044,1047],{},"The instinct is to write better prompts. The real fix is better ",[32,1045,1046],{},"input",". Here's how to give Cursor real design context so the UI it generates actually looks intentional.",[26,1049,1050,1054],{"color":28},[11,1051,1052],{},[32,1053,34],{},[36,1055,1056,1059,1062,1065],{},[39,1057,1058],{},"Cursor is strong at writing code, but weak at visual design.",[39,1060,1061],{},"The fix isn't better prompts. It's better input.",[39,1063,1064],{},"Feed it real, extracted design context (clean HTML + Tailwind) from a site you admire.",[39,1066,1067],{},"With a concrete reference, Cursor stops guessing and the output stops looking generic.",[52,1069,1071],{"id":1070},"why-cursors-designs-look-generic","Why Cursor's designs look generic",[11,1073,1074],{},"When you prompt \"build a clean pricing section,\" Cursor has nothing specific to anchor on. So it does what any model does without a reference: it returns the average of everything it's seen. That average is the generic AI look — safe spacing, default fonts, predictable layout.",[11,1076,1077,1078,1081],{},"It's not that Cursor ",[60,1079,1080],{},"can't"," make good UI. It's that \"good UI\" is specific, and a text prompt isn't specific. The model needs a concrete reference.",[52,1083,1085],{"id":1084},"why-screenshots-arent-the-answer","Why screenshots aren't the answer",[11,1087,1088,1089,1091],{},"The common next move is to paste a screenshot of a site you like and say \"make it look like this.\" Better, but still flawed: Cursor reads the screenshot as pixels and ",[32,1090,86],{}," the structure, fonts, and spacing. You're back to approximation — close-but-off output that needs heavy cleanup.",[11,1093,1094,1095,1098,1099,123],{},"A screenshot tells Cursor what something ",[60,1096,1097],{},"looks like",". It doesn't tell Cursor how it's ",[60,1100,1101],{},"built",[52,1103,1105],{"id":1104},"the-fix-give-cursor-real-code-as-context","The fix: give Cursor real code as context",[11,1107,1108,1109,1112],{},"The strongest design reference you can hand an AI tool is the ",[32,1110,1111],{},"actual code"," behind a design you admire.",[11,1114,1115,1118],{},[15,1116,133],{"href":131,"rel":1117},[19]," is a free Chrome extension that extracts real, clean code from any live website in one click:",[136,1120,1121,1124,1129],{},[39,1122,1123],{},"Find a site with a section you love: a hero, a pricing table, a navbar.",[39,1125,1126,1127,123],{},"Click it with MiroMiro and copy it as clean ",[32,1128,146],{},[39,1130,1131,1132],{},"Paste that into Cursor as context: ",[60,1133,1134],{},"\"Match this structure and style, adapt the copy to my product.\"",[11,1136,1137],{},"Now Cursor isn't guessing. It has the real fonts, the real spacing scale, the real layout structure, the real color values — and it adapts them to your content. The output stops looking generic because it's anchored to something specific and real.",[52,1139,1141],{"id":1140},"the-difference-in-practice","The difference in practice",[167,1143,1144,1156],{},[170,1145,1146],{},[173,1147,1148,1151,1154],{},[176,1149,1150],{},"Input you give Cursor",[176,1152,1153],{},"What Cursor does",[176,1155,184],{},[186,1157,1158,1169,1179],{},[173,1159,1160,1163,1166],{},[191,1161,1162],{},"Text prompt",[191,1164,1165],{},"Returns its average",[191,1167,1168],{},"Generic AI look",[173,1170,1171,1174,1176],{},[191,1172,1173],{},"Screenshot",[191,1175,196],{},[191,1177,1178],{},"Close but off",[173,1180,1181,1186,1189],{},[191,1182,1183],{},[32,1184,1185],{},"Real extracted code",[191,1187,1188],{},"Adapts actual structure",[191,1190,1191],{},"Intentional, on-reference",[52,1193,1195],{"id":1194},"a-repeatable-workflow","A repeatable workflow",[11,1197,1198],{},"This becomes a reliable design loop:",[136,1200,1201,1204,1207,1210],{},[39,1202,1203],{},"Browse for reference UI (Dribbble-quality sites, competitors, products you admire).",[39,1205,1206],{},"Extract the exact sections with MiroMiro as clean Tailwind.",[39,1208,1209],{},"Drop them into Cursor as context and ask it to compose and adapt.",[39,1211,1212,1213,1216],{},"Iterate on ",[60,1214,1215],{},"your"," content with a strong design foundation already in place.",[11,1218,1219],{},"You're no longer asking Cursor to invent taste. You're giving it taste, as real code, and letting it do what it's genuinely good at: adapting and wiring it up.",[52,1221,1223],{"id":1222},"works-with-every-ai-tool","Works with every AI tool",[11,1225,1226,1227,1230],{},"The same approach works for Claude, v0, Lovable, and Bolt. The lesson is universal: ",[32,1228,1229],{},"real code in, good design out."," Screenshots and text prompts give the model a guess; extracted code gives it ground truth.",[52,1232,650],{"id":649},[11,1234,1235],{},"Stop fighting Cursor's generic defaults with longer prompts. Give it real design context instead.",[11,1237,1238,1241],{},[15,1239,659],{"href":131,"rel":1240},[19]," and pull your first design reference into Cursor in under 30 seconds.",[52,1243,1245],{"id":1244},"keep-reading","Keep reading",[36,1247,1248,1254,1260],{},[39,1249,1250,1253],{},[15,1251,1252],{"href":644},"How to copy UI components from any website into Cursor, Claude & v0",": the component-level version of this workflow.",[39,1255,1256,1259],{},[15,1257,1258],{"href":488},"Screenshot to code: what actually works"," — why pasting images falls short, and the cleaner alternative.",[39,1261,1262,1265],{},[15,1263,1264],{"href":280},"Turn any website into clean code"," — the one-click extraction Cursor wants as input.",[52,1267,286],{"id":285},[11,1269,1270],{},"Cursor, Claude, v0, Figma — that stack is €75+/month, every month, before you ship. MiroMiro is the one tool here that doesn't have to be recurring:",[291,1272],{},{"title":239,"searchDepth":294,"depth":294,"links":1274},[1275,1276,1277,1278,1279,1280,1281,1282,1283],{"id":1070,"depth":294,"text":1071},{"id":1084,"depth":294,"text":1085},{"id":1104,"depth":294,"text":1105},{"id":1140,"depth":294,"text":1141},{"id":1194,"depth":294,"text":1195},{"id":1222,"depth":294,"text":1223},{"id":649,"depth":294,"text":650},{"id":1244,"depth":294,"text":1245},{"id":285,"depth":294,"text":286},"Want to design in Cursor without generic results? The fix isn't better prompts, it's better input. Feed Cursor real, extracted design context from any website.",[1286,1289,1292,1295,1298],{"question":1287,"answer":1288},"Can Cursor design UI?","Cursor can generate UI code, but design quality depends entirely on the context you give it. Left to a text prompt, it produces generic, AI-looking layouts. Give it real design context (actual HTML and CSS from a site whose look you want) and the output improves dramatically. The bottleneck is input, not the model.",{"question":1290,"answer":1291},"How do I give Cursor a design reference?","Don't paste a screenshot. Cursor will guess from pixels. Instead, extract the real code from a reference website with MiroMiro (clean HTML + Tailwind), and paste that into Cursor as context. The AI then builds from actual structure, fonts, spacing, and colors instead of inventing them.",{"question":1293,"answer":1294},"Why does Cursor produce generic-looking designs?","Because a text prompt like 'make a nice pricing section' gives the model nothing specific to anchor on, so it falls back to its average, the generic AI aesthetic. Designs look good when Cursor has a concrete reference to work from. Real extracted code from a site you admire is the strongest reference you can give it.",{"question":1296,"answer":1297},"What's the best way to copy a website's design into Cursor?","Open the site, use MiroMiro to extract the section you want as clean HTML + Tailwind, and paste it into Cursor as context with a note like 'match this structure and style.' You get the real fonts, spacing, and layout as a starting point, far better than describing it in words or pasting a screenshot.",{"question":1299,"answer":1300},"Does this work with Claude, v0, Lovable, and Bolt too?","Yes. The principle (real code as context beats screenshots and text prompts) applies to every AI coding tool. MiroMiro's extracted HTML + Tailwind works as accurate input for Cursor, Claude, v0, Lovable, and Bolt alike.",{},{"title":1026,"description":1284},"blog/how-to-design-in-cursor",[1305,1306,1307,1308,1309,340,1310],"cursor design","design in cursor","cursor ui","cursor ai design","design context cursor","copy design to cursor","rJXWfLSt9yGQq53-xzi4OZVwZYgP8nAJ1FCjMuL8YPM",4,1781805656665]