Hey, it's Cindy 🌱 This shows you how to hand Claude Code a screenshot and copied styles from any website you love, then have it rebuild the look and self-correct until it is yours.
Ever landed on a website that looked so good you thought, I could never build something like that? You can, and you do not have to be a developer. The trick is to hand Claude Code two things from the site you love, a full-page screenshot and its copied styles, and let it rebuild the look, then self-correct against the original until it is close.
One honest note up front: treat this as inspiration, not copying. You are borrowing the layout and feel, then swapping in your own words, images, and brand. Do not lift logos or copyrighted assets. With that said, here is the exact setup, the capture steps, and the rebuild prompt, all in order.
the four moves
What this actually does 🧠
Four moves take you from "a site I love" to "a site that is mine."
- ⚙️ Set up Claude Code once inside Antigravity, Google's free AI coding app, so you have a terminal that can build for you.
- 📸 Capture the design as one full-page screenshot plus the site's copied styles, which carry the real colours and gradients.
- 🔁 Let Claude Code rebuild and self-correct, taking a screenshot of its own work, comparing it to the original, and fixing the gaps until it is close.
- ✍️ Swap in your own content so the result ends up genuinely yours, not a clone.
one-time setup
The setup (one time) 🛠️
Do this once, then it is ready for every future rebuild.
1️⃣ Download Antigravity (Google's free AI coding app, built on VS Code). Open the integrated terminal inside it, run npm install -g @anthropic-ai/claude-code, then type claude and press enter. On a paid Claude plan you just sign in, no API key needed. If it trips on a VS Code extension step, just use the terminal claude command directly.
two grabs
Capture the design 📸
Two grabs from the site you love: the full picture, then the real colours.
2️⃣ On the site, right click anywhere and hit Inspect to open the developer tools. Set the view to full desktop width so you capture the desktop layout, not the squished mobile one.
3️⃣ Open the command bar with Cmd+Shift+P (Ctrl+Shift+P on Windows), type screenshot, and pick Capture full size screenshot. That grabs the entire page, top to bottom, as one image. Shrink it down if it is huge so it is not too heavy to paste.
4️⃣ Still in the Elements panel, right click the body tag near the top and hit Copy styles. That copies all the colours and gradients, the part a screenshot alone cannot capture.
copy this
The mega prompt 📋
In your Claude Code terminal, paste both the screenshot and the copied styles, then paste this. Claude builds it, checks its own work, and keeps fixing until it matches.
📋 the rebuild and self-correct prompt
Here is a full-page screenshot of a website I want to use as design inspiration, plus its copied styles (colours and gradients). Rebuild it as a clean, responsive website. After your first build, take a screenshot of your own result, compare it to the original, list the visual differences you see, and fix them. Repeat that compare-and-fix loop until it looks close to the original. Then swap in my content: [paste your text, headings, and image notes]. I want this inspired by the original, not a pixel clone, so use my brand and my words.
go further
3 bonus prompts to run next 🎁
Once the first version looks right, keep going in the same Claude Code session. It already has all the context.
📱 Make it mobile-responsive. Now make this fully responsive. Check how it looks at phone, tablet, and desktop widths, fix anything that overflows, stacks badly, or gets too small to tap, and make sure the navigation collapses into a clean mobile menu. Show me before and after screenshots at each size.
📝 Add a blog / CMS. Add a simple blog to this site with a post list page and individual post pages, using Markdown files so I can add posts without touching code. Match the existing design, and create two sample posts so I can see the layout and styling working.
🚀 Deploy it live. Walk me through deploying this site live for free, step by step, using Vercel or Netlify. Tell me exactly what to click and what to paste, set it up so it redeploys automatically when I push changes, and explain how to connect a custom domain later. Assume I have never deployed anything before.
how to run it
How to get the most out of it 🎓
- 🖥️ Capture at full desktop width. If you screenshot the mobile view by accident, Claude rebuilds the squished version. Set the desktop layout first, every time.
- 🔁 Let the self-correct loop run. The magic is in the compare-and-fix passes. If the first build looks off, just say "compare to the original again and fix the differences" and let it keep going.
- 🪜 It works at every level. Brand new? Paste the prompts exactly as-is and answer Claude's questions as they come. More advanced? Drop in your own design system or brand colours up front and have it match those instead of the source site's palette.
- 🙅 Keep it clean and yours. Swap in your own copy, images, and brand. Do not lift logos or copyrighted assets. The goal is a site that looks pro and is unmistakably yours, not a copy of someone else's.
the honest bit
The honest bit ✅
This gets you a great-looking starting point fast, not a finished, bug-free product on the first try. You will still tweak copy, fix the odd layout glitch, and make design calls. But going from a blank screen to something that looks like the sites you admire, in an afternoon, with no dev background, is the part that used to be impossible. That is what changed.