AI Guides › Step-by-step guides
By Nigel Guy · 8 min read
Most people who want "a site that feels like that one" paste a screenshot into an AI tool and ask for a copy. What comes back looks plausible from across the room: right layout, roughly the right colours, the wrong font, guessed spacing, and a hero section that falls apart on a phone. It feels like progress because the first draft looks close at a glance, and that glance is the part that misleads you.
The rule: give Claude Code two things, the picture and the measurements. The screenshot shows it the layout; the numbers you read out of your browser's developer tools stop it guessing.
This guide uses only what is already in your browser (Chrome's DevTools, with Firefox notes) plus Claude Code.
| You need | Notes, at time of writing |
|---|---|
| A paid Claude plan | Claude Code needs a Pro, Max, Team, Enterprise or Console (API) account; the free plan does not include it. Anthropic's pricing page lists Pro at $20 a month (about £15 at time of writing) or $17 a month billed annually (about £13), in US dollars. Check the price your UK checkout shows in pounds, including VAT, before you subscribe, as it was not confirmed for this guide. |
| Claude Code installed | macOS 13+, Windows 10 (1809+), or a recent Ubuntu/Debian, with 4 GB+ RAM. There is also a desktop app if you would rather not use a terminal. |
| Chrome or Firefox | For the inspector and full-page screenshot. |
| A site you admire | One page to start with, not the whole site. |
Open a terminal and run the official installer.
curl -fsSL https://claude.ai/install.sh | bashirm https://claude.ai/install.ps1 | iexOpen a new terminal window and run claude --version. If it prints a version number, the install worked. If it says claude is not found, the install folder is not on your PATH yet; Anthropic's troubleshooting page covers the fix.
Then make an empty folder for this project and start Claude Code inside it:
mkdir site-rebuild
cd site-rebuild
claude
The first run opens your browser to log in.
A normal screenshot only captures what is on screen. You want the whole page, top to bottom.
Chrome: open the page, press F12 (or Ctrl+Shift+I on Windows, Cmd+Option+I on Mac) to open DevTools. Click the Toggle device toolbar icon, set the width you care about (try 1440 for desktop, then 390 for a phone), open the toolbar's More options menu (the three dots) and choose Capture full size screenshot. You can also press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the Command Menu and type "screenshot" to find the capture commands.
Firefox: open the Web Console and type :screenshot --fullpage, or enable the screenshot button under DevTools Settings → Available Toolbox Buttons.
Save the image into your site-rebuild folder as reference-desktop.png. Take a phone-width one too and save it as reference-mobile.png.
If the page is very long, also save two or three cropped sections (header and hero, a middle section, footer). A very tall image may be scaled down when the model processes it, so small text and thin lines get lost; crops keep the detail.
This is the step people skip, and it is why their results look plausible rather than close. Right-click an element and choose Inspect. In the Elements panel, the Computed tab shows only the CSS actually being applied, which is what you want, not every rule in the cascade.
Fill in this card in a plain text file called style-notes.md in the same folder. Call it the Measurement Card:
| Measure | Where to read it | Example of what you write |
|---|---|---|
| Body font and size | Click a paragraph → Computed → font-family, font-size, line-height |
font-family: Inter; 18px; line-height 1.6 |
| Heading font, size, weight | Click the main headline → same properties plus font-weight |
64px, weight 700, letter-spacing -0.02em |
| Colours | color and background-color on body, headings, buttons, links |
#111111 text on #FAF8F5 |
| Content width | Click the main container → max-width |
1200px |
| Section spacing | Click a section → padding-top, padding-bottom |
120px top and bottom |
| Buttons | Click a button → padding, border-radius, background |
14px 28px, radius 999px |
| Breakpoint behaviour | Narrow the window in device toolbar and note where the layout changes | cards go 3 → 1 below ~768px |
To copy a full block of styles rather than typing them, right-click a property in the Styles tab and choose Copy all declarations, then paste into your notes.
You are recording values, not lifting the site's files. That distinction matters in the guardrails below.
Back in the terminal session, attach the screenshot. Per Anthropic's docs you can drag the image into the Claude Code window, paste it with Ctrl+V (Alt+V on Windows and WSL), or give its path in your message. Then send a brief like this:
You are a front-end developer rebuilding the look and feel of a web page I admire, as a fresh, original page. You are not copying its code, text, images or logo.
Inputs in this folder:
- Screenshot(s): [reference-desktop.png, reference-mobile.png, any section crops]
- Measurements I took with browser DevTools: style-notes.md
- My own content to use instead of theirs: [MY_HEADLINE], [MY_SECTIONS_AND_COPY], [MY_BRAND_COLOURS_IF_DIFFERENT]
- Tech constraint: [e.g. "one index.html plus styles.css, no frameworks"]
Goal: a page whose layout, spacing, type scale and colour relationships match the screenshot closely at 1440px and 390px wide, built from my content.
Steps:
1. Read style-notes.md and list the values you will use as CSS custom properties. Where a value is missing, say so and ask me rather than guessing.
2. Describe the section structure you see in the screenshot, top to bottom, and wait for me to confirm it.
3. Build the page using those variables. Use grey placeholder boxes where the original has photos.
4. Add the mobile layout based on the breakpoint notes.
Rules: no copied text, images, logos or icon files from the original. If the original font is a paid font, suggest a free alternative and tell me which you chose.
Before you finish, check: every value in style-notes.md is used or explained; the page works with no external files except the font link; nothing from the original site is reproduced verbatim. Then tell me how to open the page.
Fill in the square-bracket parts with your file names, your own copy and your tech preference.
Open the new index.html in your browser next to the original, both at the same width in device toolbar. Do not ask for "make it closer". Take a measurement from the original, take the same one from your page, and give Claude Code the gap:
Compare the [SECTION_NAME] section of my page with the original at [WIDTH]px.
Original values: [VALUES_FROM_DEVTOOLS]. My page's values: [VALUES_FROM_DEVTOOLS].
Change only that section to close the gap. List what you changed and anything you could not match, and why.
Fill in the section, width and the two sets of numbers you read in the inspector. Repeat for the next section.
font-family shows the font you expected, not a fallback.