@sergei-chyrkov · Watch the video tutorial: here
Hey friend 👋
This is the workbook from my video. If you've ever pasted a screenshot into Claude and typed "build this", you know how it goes. It looks close. Then you put them side by side and the spacing is off, the font is wrong, and a whole section just isn't there.
So here's the fix I tested. I call it the Blueprint Method. image.to.design turns your screenshot into real HTML: the layout, the text, the colors, the section order. That file is the blueprint. Claude is the builder. Claude is great at writing code, it's just bad at measuring. So you stop asking it to measure.
Below: the setup, the exact prompts I used, and the scorecard, so you can run the same test on your own page.
<aside> 🙏
Before you start: this is not for cloning. Use it on your own stuff. Your own screenshots, your old sites, a client's mockup, learning how a good layout is built, or moving your own website into code. In the video I used YouTube, Stripe and a Mobbin screen only as test pages, because everyone knows them and it's easy to see if a rebuild is accurate. Please don't use this to copy someone else's product and ship it as your own.
</aside>
📌 Size limits to know: the Claude app takes images up to 8,000 × 8,000 px. image.to.design takes screenshots up to 100,000 px tall. So a really long page might get refused by Claude but still go into image.to.design in full. More on that in Troubleshooting.