I found a way to clone any website design using Claude + Chrome DevTools MCP — here's the exact prompt

Hey, this is my first post here. I've been experimenting with AI workflows lately and wanted to share something that actually saved me a ton of time.

I've been looking for a solid way to reproduce website designs I like — not copy them pixel by pixel, but take the visual foundation and rebuild it my way. Tried a bunch of stuff, but recently stumbled onto a workflow that actually works.

What you need: - Claude Code or Cursor (Codex works too) - Chrome DevTools MCP — connects to your browser and gives Claude direct access to the page structure - A screenshot of your reference site

How it works:

Pick any site you like visually. Take a screenshot. Connect Chrome DevTools MCP — it lets Claude look directly into the DOM, styles, spacing, and fonts. Then you talk to Claude block by block: start with the header, then the hero section, then cards, etc. It reads the structure, uses the screenshot as a visual reference, and builds each block one at a time.

The result isn't a blind copy — it's clean, properly written code that follows the same visual logic.

Prompt to get started:

I'm going to give you a reference website to use as visual inspiration. Here is the screenshot: [attach screenshot]. I've also connected Chrome DevTools MCP — use it to inspect the page structure, fonts, spacing, and colors directly.

Let's build this page block by block. Start with the header. Analyze the reference, inspect the DOM if needed, and write clean HTML/CSS (or React — specify your stack) that visually matches the reference. Don't copy the content — just the layout, spacing, typography, and color logic.

After each block, wait for my confirmation before moving to the next one.

The whole thing takes around 20–40 minutes for an average landing page. The key is not to rush it — let Claude finish each block properly before moving on, otherwise you'll end up fixing things later.