AI Guides › Workbench
By Nigel Guy · 6 min read
Most people redesign a site by typing "make my website look modern" and pasting a screenshot. What comes back is a generic template with your logo on it, and it feels like progress because it looks finished. The page is polished, but nothing in it knows who your visitors are or what you want them to do.
The rule: give Claude three inputs before you ask for a single pixel (your real content, your visitor and their one job, and your design limits), then work in three rounds, not one.
| Input | What it is | Why it matters | Catch |
|---|---|---|---|
| 1. Your content | Current page text, page list, offers, proof you genuinely have | Stops invented copy and invented claims | Paste text, not screenshots of text |
| 2. Visitor and job | Who arrives, what they want, the single action you want from them | Decides layout, order and what gets cut | "Everyone" is not a visitor |
| 3. Design limits | Brand colours, fonts, tone, things you refuse, one or two reference sites you like | Stops the template look | References steer style only; never ask for a copy |
Where you do the work matters less than the inputs, but there are three routes.
| Route | What it does | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
| Claude chat with artifacts | Builds a working HTML page you preview beside the chat | Free plan exists; Pro is $20 a month (about £16 at time of writing; check the £ price at checkout) | One-page sites and mock-ups | Artifacts are for previewing and sharing; you still need hosting for a real site |
| A Claude Project | Stores your brand notes and content so each chat starts with them | Free accounts get up to 5 projects; fuller features on paid plans | Re-using the three inputs across many pages | Keep the files current or it drifts |
| Claude Code | Edits real files on your machine | Included with Pro; Max starts from $100 a month (about £80 at time of writing; check at checkout) | A multi-page site already in a codebase | Needs comfort with a terminal and version control |
Check the plans page before you pay. Limits and prices move.
If you use Claude chat, switch on the artifacts feature: Settings, then Capabilities, then "Cloud code execution and file creation". Without it you will get code in the chat rather than a preview.
Skipping this round is the usual way a redesign goes wrong. A beautiful layout on weak structure just makes the weakness expensive.
You are a senior website strategist and UX writer working for [BUSINESS_NAME], which [WHAT_YOU_DO_IN_ONE_SENTENCE].
CONTEXT
- Visitor: [WHO_ARRIVES_AND_WHAT_THEY_WANT]
- The one action that counts as success: [SINGLE_CONVERSION_GOAL]
- Current page text (the only source of facts you may use):
[PASTE_CURRENT_PAGE_TEXT]
- Proof I can genuinely show: [REAL_PROOF_OR_NONE]
TASK
Propose a new structure for [PAGE_OR_SITE]. Do not design anything visual yet.
STEPS
1. List what the visitor must believe, in order, before they will take the action.
2. Turn that list into sections, each with a one-line purpose, a headline, and a draft of the body copy.
3. Say what you would cut from the current text and why.
4. Mark every place where you lack a fact with [NEEDS: ...] instead of filling it in.
OUTPUT
A table of sections (order, purpose, headline), followed by the draft copy under each section heading.
RULES
- Use only facts from the text and proof above. Invent no statistics, testimonials, awards or client names.
- If any bracketed input above is empty or vague, ask me for it before writing.
SELF-CHECK
Before answering, confirm that every section serves the success action, and list anything you were unsure of.
Fill in the square brackets. Edit the result by hand; this is where your judgement beats the model's.
You are a brand and web designer. Using the approved structure below, propose three distinct visual directions for [BUSINESS_NAME].
APPROVED STRUCTURE:
[PASTE_ROUND_1_RESULT_AFTER_YOUR_EDITS]
DESIGN LIMITS
- Colours: [BRAND_COLOURS_OR_NONE]
- Fonts: [FONTS_OR_NONE]
- Tone: [TONE_WORDS]
- Refuse: [THINGS_TO_AVOID]
- Reference sites and what I like about each: [REFERENCES_AND_REASONS]
OUTPUT
For each direction: a name, a two-sentence description, palette with hex codes, type pairing, layout idea for the first screen, and one risk. Then recommend one and explain why in three sentences.
RULES
- Take style cues from the references, never their layout or wording.
- Check contrast between text and background and tell me if any pairing looks too weak to read.
- Ask me if any limit above is missing rather than guessing.
Choose one direction. Say which, and what you would change.
You are a front-end developer. Build [PAGE_OR_SITE] as a single self-contained HTML file with inline CSS, using the structure and copy below and the chosen direction.
STRUCTURE AND COPY:
[PASTE_FINAL_COPY]
CHOSEN DIRECTION:
[PASTE_DIRECTION_AND_YOUR_CHANGES]
REQUIREMENTS
- Works at phone width first, then scales up; no sideways scrolling.
- Real headings in order, descriptive alt text placeholders, visible keyboard focus, readable contrast.
- One primary button for [SINGLE_CONVERSION_GOAL], repeated where it makes sense.
- Keep every [NEEDS: ...] marker visible so I can fill the gap.
- No placeholder lorem ipsum, no invented facts.
SELF-CHECK
Before answering, list anything you could not do and any assumption you made.
One giant request makes structure, copy and style compete, and the model settles for the average of all three. Separate rounds give you a point to inspect and correct before the next layer is built on top. Each round's output becomes the next round's input, so a mistake caught in round one costs a sentence, not a rebuild.