BUILDING & APPS
Rebuild any website you love with Claude Code ⚡
Master this high-ROI AI workflow: This shows you how to hand Claude Code a screenshot and copied styles from any website you love, then have it rebuild the
Master this high-ROI AI workflow: 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.
The real unlock of AI agents is not full autonomy, but human-in-the-loop systems design. Structure your agent inputs with explicit constraints, negative prompts, and automated test checkpoints. When building tools, keep token consumption lean by caching system prompts and isolating tasks into specialized sub-agents.
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.
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.
The setup (one time) 🛠️
Do this once, then it is ready for every future rebuild.
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.Capture the design 📸
Two grabs from the site you love: the full picture, then the real colours.
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.
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.
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.