🎨 Clone the Vibe of Any Website Using Claude Code
Ever landed on a site so clean you assumed you'd need a dev team to build anything close? You don't. I'm going to walk you through how I feed Claude Code a screenshot and the copied styles from a site I love, then let it rebuild the look and fix itself until it's basically there.
💡 Big rule up front: this is inspiration, not theft. Borrow the layout and feel — then drop in your own words, images, and brand. Never lift logos or copyrighted assets.
🧠 What You're Actually Doing
Four moves take you from "wish I could build that" to "I built that."
| Step | What Happens |
| ⚙️ Set up | Install Claude Code inside a free IDE so you've got a build-ready terminal |
| 📸 Capture | Grab a full-page screenshot + the site's copied styles (the real colors & gradients) |
| 🔁 Rebuild | Claude builds, screenshots its own work, compares to the original, and patches the gaps |
| ✍️ Make it yours | Swap in your copy, images, and brand so it's genuinely your site |
🛠️ One-Time Setup
You only do this once — then it's ready for every rebuild after.
1️⃣ Grab an IDE. Download Antigravity (Google's free coding app, built on VS Code) or plain VS Code.
2️⃣ Install Claude Code. Open the built-in terminal and run:
npm install -g @anthropic-ai/claude-codeThen type claude and hit enter.
💡 On a paid Claude plan you just log in — no API key needed. If a VS Code extension step gets stuck, ignore it and run the claude command straight from the terminal.
📸 Capturing the Design
Two grabs from the site you love — the full picture, then the true colors.
3️⃣ Open dev tools. Right-click anywhere on the site → Inspect. Set the view to full desktop width so you capture the real layout, not the squished mobile version.
4️⃣ Screenshot the whole page. Open the command bar:
| OS | Shortcut |
| Mac | Cmd + Shift + P |
| Windows | Ctrl + Shift + P |
Type screenshot → pick Capture full size screenshot. That grabs the entire page top to bottom as one image.
5️⃣ Compress it. Run the screenshot through any free image compressor to shrink the file. Big images burn through tokens fast.
6️⃣ Copy the styles. Back in the Elements panel, right-click the <body> tag near the top → Copy styles. This pulls the exact colors and gradients a screenshot can't capture.
📋 The Main Rebuild Prompt
In your Claude Code terminal, paste the screenshot + the copied styles first, then drop in this prompt:
Attached is a full-page screenshot of a website I'm using as design
inspiration, plus its copied styles (colors and gradients). Rebuild
it as a clean, fully responsive website using semantic HTML and modern
CSS.
Workflow:
1. Build a first version.
2. Take a screenshot of your own result.
3. Compare it side-by-side to the original and list every visual
difference you notice (spacing, type scale, colors, layout).
4. Fix those differences, then repeat the compare-and-fix loop until
the result closely matches the original.
Once it's close, swap in MY content:
[paste your headings, body copy, and image notes here]
This should be INSPIRED by the original — not a pixel clone. Use my
brand, my colors, and my words.Claude builds it, checks its own work, and keeps refining until it matches.
🎁 3 Follow-Up Prompts
Keep going in the same Claude Code session — it already has all the context.
📱 Make it mobile-responsive
Make this fully responsive. Test it at phone, tablet, and desktop
widths. Fix anything that overflows, stacks awkwardly, or gets too
small to tap. Collapse the navigation into a clean mobile menu.
Show me before-and-after screenshots at each breakpoint.📝 Add a blog / CMS
Add a simple blog to this site: a post-list page plus individual post
pages, powered by Markdown files so I can publish without touching
code. Match the existing design exactly, and generate two sample posts
so I can see the layout and styling in action.🚀 Deploy it live for free
Walk me through deploying this site live for free, step by step, using
Vercel or Netlify. Tell me exactly what to click and paste. Set it up
to auto-redeploy when I push changes, and explain how to connect a
custom domain later. Assume I've never deployed anything before.🎓 Pro Tips
🖥️ Always capture at full desktop width
If you screenshot the mobile view by accident, Claude rebuilds the squished version. Set the desktop layout before you capture — every single time.
🔁 Let the self-correct loop run
The real 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 grinding.
🪜 It scales to your level
Brand new? Paste the prompts as-is and answer Claude's questions as they pop up. More advanced? Feed it your own design system or brand palette up front and have it match that instead of the source site's colors.
🙅 Keep it clean and yours
Swap in your own copy, images, and brand. Never lift logos or copyrighted assets. The goal is a site that looks pro and is unmistakably yours.
✅ Honest Expectations
| What you get | What you don't get |
| A great-looking starting point in an afternoon | A finished, bug-free product on the first try |
| A layout that looks like the sites you admire | Zero manual tweaking |
| A real foundation with no dev background | Someone else's site copied wholesale |
You'll still fix the odd layout glitch and make some design calls. But going from a blank screen to something that looks pro in an afternoon — that's the part that used to be impossible. That's what changed.