How to Build Any Website From a Screenshot With Claude
1008 次观看 · 2026-10-22
UI 设计
👉 Check out image.to.design: https://divriots.com/image.to.design/?ref=sergei
📝 My Blueprint Method workbook: https://app.notion.com/p/chyrkov/The-Blueprint-Method-Screenshot-Code-Workbook-free-3fc666b62e1081e0b0e6c444e5bccc46
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn
I gave Claude the same screenshot two ways, right in the Claude app. Once on its own, and once together with an HTML file from image.to.design. Same model, same prompt, a fresh chat every time, web search off. Three real pages: the YouTube homepage, a very long full homepage, and a dense dashboard from Mobbin. Then I put every result next to the original and scored sections, spacing, and text and fonts.
What you'll learn:
- Why Claude loses whole sections of long screenshots (and the 8,000 px limit in the Claude app)
- The Blueprint Method: screenshot → HTML blueprint → Claude
- How the two compare on the YouTube homepage, a very long page and a dense dashboard
- How I moved my own site off a no-code platform into real code, in my current style
- 4 real cases where it's worth using (and when Claude on its own is fine)
Long pages are where it really breaks: the Claude app only accepts images up to 8,000 px on a side, and big images lose detail before Claude reads them. Giving Claude a structured HTML "blueprint" instead is what I call the Blueprint Method.
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 - Intro
0:47 - How does image.to.design work
1:02 - The rules
1:32 - Do not clone anyone's work
2:11 - Round 1: YouTube homepage
2:52 - Using image.to.design to get code from screenshot
3:33 - My blueprint method explained
3:53 - Perfect code results from screenshot
4:30 - Round 2: the full Stripe page
4:43 - The 8,000 pixel limit
6:01 - Using image.to.design for long screenshots over 100 000px
7:02 - Figma Plugin demo
7:35 - Round 3: Dashboard layout
8:27 - Final scoreboard
9:14 - When to use it (and when not)
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#claude #ai #uxui #webdesign
📝 My Blueprint Method workbook: https://app.notion.com/p/chyrkov/The-Blueprint-Method-Screenshot-Code-Workbook-free-3fc666b62e1081e0b0e6c444e5bccc46
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn
I gave Claude the same screenshot two ways, right in the Claude app. Once on its own, and once together with an HTML file from image.to.design. Same model, same prompt, a fresh chat every time, web search off. Three real pages: the YouTube homepage, a very long full homepage, and a dense dashboard from Mobbin. Then I put every result next to the original and scored sections, spacing, and text and fonts.
What you'll learn:
- Why Claude loses whole sections of long screenshots (and the 8,000 px limit in the Claude app)
- The Blueprint Method: screenshot → HTML blueprint → Claude
- How the two compare on the YouTube homepage, a very long page and a dense dashboard
- How I moved my own site off a no-code platform into real code, in my current style
- 4 real cases where it's worth using (and when Claude on its own is fine)
Long pages are where it really breaks: the Claude app only accepts images up to 8,000 px on a side, and big images lose detail before Claude reads them. Giving Claude a structured HTML "blueprint" instead is what I call the Blueprint Method.
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 - Intro
0:47 - How does image.to.design work
1:02 - The rules
1:32 - Do not clone anyone's work
2:11 - Round 1: YouTube homepage
2:52 - Using image.to.design to get code from screenshot
3:33 - My blueprint method explained
3:53 - Perfect code results from screenshot
4:30 - Round 2: the full Stripe page
4:43 - The 8,000 pixel limit
6:01 - Using image.to.design for long screenshots over 100 000px
7:02 - Figma Plugin demo
7:35 - Round 3: Dashboard layout
8:27 - Final scoreboard
9:14 - When to use it (and when not)
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#claude #ai #uxui #webdesign