AI Guides › Playbooks
By Nigel Guy · 7 min read
Most people's first attempt at building their own site with Claude Code is one line: "make me a website for my business." Something appears quickly, it looks fine, and the next two hours go on vague corrections like "make it more premium", each one undoing part of the last. You haven't saved yourself the developer's quote. You've become the developer's least specific client.
The rule: brief one page at a time on a card with four fixed blocks, give Claude a way to check its own work, then change one thing per round.
| You need | Notes at time of writing |
|---|---|
| A paid Claude plan or a Console (API) account | Claude Code is included in Pro, Max, Team and Enterprise, not the Free plan. Anthropic's pricing page lists Pro at US$20 a month billed monthly (US$17 a month billed annually). The UK price is charged in pounds at checkout. We couldn't confirm the exact £ figure, so check it there before you subscribe. |
| Claude Code installed | On macOS, Linux or WSL: curl -fsSL https://claude.ai/install.sh | bash. On Windows PowerShell: irm https://claude.ai/install.ps1 | iex. Then run claude --version in a new terminal. |
| An empty project folder | Open a terminal in that folder (cd into it), run claude and log in when it prompts you. |
| One or two reference sites | Real pages whose feel you want to borrow. Take screenshots: you can paste or drag images straight into the prompt. |
The card has four blocks plus a proof line. Each block answers a question Claude would otherwise answer by guessing.
| Block | What it settles | What happens if you leave it out |
|---|---|---|
| 1. Purpose | Page type, who it's for, and the one action a visitor should take | You get a generic page with three equal buttons and no point |
| 2. Order | The headline claim first, then each section in sequence | Sections arrive in template order (features, testimonials, pricing), whatever your business actually needs |
| 3. Feel | Three adjectives, one real reference, and one thing to avoid | "Modern and clean", which means stock gradients |
| 4. Movement | What moves as the visitor scrolls, or an instruction that nothing does | Animation stacked on everything because it's easy to add |
| Proof | How Claude will check the result | You become the only test, and every mistake waits for you to spot it |
Anthropic's best-practice guidance backs the proof line: give Claude a check it can run, such as a screenshot compared against a design, and it iterates instead of stopping when the work merely looks done.
Press Shift+Tab until the status bar shows plan mode, or start with claude --permission-mode plan. In plan mode Claude reads and proposes but doesn't edit. Paste your card and ask for a plan first. Press Ctrl+G if you want to edit the plan in your text editor before approving it. For a one-line fix later, skip plan mode. It only earns its keep on the first build or a big restructure.
You are building one page of a small business website on my machine, in this project folder. I am not a developer, so explain anything I need to do myself in plain steps.
PURPOSE
Page type: [PAGE TYPE, e.g. home / pricing / about]
Business and audience: [WHAT YOU DO AND WHO FOR, one sentence]
The single action a visitor should take: [ACTION, e.g. book a call, email me]
ORDER (top to bottom)
1. Headline claim: [YOUR MAIN CLAIM, in your words]
2. [NEXT SECTION]
3. [NEXT SECTION]
Use only the text I give you. Where copy is missing, insert a visible [COPY NEEDED] marker instead of writing it.
FEEL
Three words: [WORD 1], [WORD 2], [WORD 3]
Closest real reference: [A REAL SITE OR PRODUCT PAGE, or attach a screenshot]
Avoid: [WHAT IT MUST NOT FEEL LIKE]
MOVEMENT
On scroll: [WHAT SHOULD MOVE, or "no animation at all"]
Respect the visitor's reduced-motion setting.
BUILD RULES
- A working page that opens in a browser, not a picture of one.
- Plain HTML, CSS and minimal JavaScript unless I say otherwise; no paid services, no sign-ups, no tracking scripts.
- Readable on a phone as well as a laptop.
BEFORE YOU START: if any bracketed field above is still empty, ask me for it rather than inventing it.
PROOF: when the build is finished, open the page, take screenshots at phone and laptop width, compare them against this brief block by block, list every mismatch, fix what you can, and tell me which file to open to see it.
Fill in: every square-bracketed field. If you have no reference site, attach one screenshot of a page you like instead.
What you get is a set of files in your folder (usually an HTML page and a stylesheet) plus Claude's mismatch list. Open the HTML file in your browser. Judge it against the card, block by block, not against your general mood. If Claude reports it couldn't take screenshots in your setup, take your own at phone and laptop width and paste them back in.
Iteration works because each round starts from a concrete page. "Make it calmer" is now answerable, because there's something specific to be less busy than. It stops working when you bundle five changes into one message and can't tell which one broke the layout.
Change one thing on [PAGE FILE NAME]: [THE SINGLE CHANGE, e.g. "the headline is too small on phones"].
What I want instead: [THE TARGET, e.g. "large enough to read without zooming, still on one line on a laptop"].
Do not touch any other section. Before editing, tell me in two sentences what you will change and why. After editing, screenshot the affected section at phone and laptop width and confirm nothing else moved.
Fill in: the file name, the one change, and what "fixed" looks like.
If a round goes wrong, press Esc twice on an empty prompt (or type /rewind) and choose Restore code to go back to that checkpoint. If you've corrected the same thing twice and it's still wrong, run /clear and resend an improved card. A fresh session with a better brief beats a long one full of failed attempts.
A sole-trader bookkeeper in Leeds, invented for illustration, wants a one-page site. Her card says: Purpose: home page for small café and shop owners, single action "book a free 20-minute call". Order: headline "Your books done before your VAT deadline, not after", then three services, then prices, then the booking button. Feel: "calm, plain, trustworthy", reference: a screenshot of a gov.uk page, avoid: "fintech start-up". Movement: none. Proof: screenshots compared against the card.
First build: the structure is right, but the services section comes back with marketing copy she never wrote. That's the trap. Round two: "Replace every sentence in Services with [COPY NEEDED]." Round three: "Prices table overflows on phones." Round four: "Button colour fails contrast against the background — fix and state the contrast ratio." Four rounds, four single changes, each checked before the next.
Shift+Tab or /permissions.