Build with AI · Guide 6 of 10
Show it real sites you like, then judge every version with your own eyes.
Anthropic calls examples one of the most reliable ways to steer the output. Give it three or four real sites and say what you like about each.
Try this
Here are sites I like: [link] for its hero, [link] for its navigation and [link] for its colours. Say what each does well, then propose a direction for my site that borrows the ideas, not the look.
Refero Styles collects design systems taken from product websites, each with a DESIGN.md file an AI coding tool can read.
├─ DESIGN.md colours, type, spacing, components├─ CLAUDE.md "Follow @DESIGN.md for every page."└─ src/Try this
Read this DESIGN.md: [paste]. Build my [section] with its spacing and type scale, using my own colours and content.
Galleries such as land-book.com for layouts, navbar.gallery for navigation and pricingpages.design for pricing show many versions of one part. Some block automated browsers, so send a screenshot instead.
Try this
Here is a screenshot of a [navigation bar] I like. List what makes it work, including spacing, type, states and motion. Then build mine to the same standard.
Have it screenshot what it built at desktop and phone width, and fix what it sees before it shows you.
Try this
Take screenshots of [page] at 1440px and 390px wide. List everything that looks broken, crowded or generic, fix it, and screenshot again.
Three or four sites, each picked for one thing you want.
Ask it to question you about audience, tone and content before it designs anything.
Agree the look on the first screen before it builds the rest.
Screenshot it, judge it yourself and fix it, at least two rounds a page. Judge the screenshots, not the code.
Run a separate reviewer that has not seen how the page was built.
A site can build with no errors and still look generic. Only looking at it tells you.
When it says a page looks great, check for yourself.
Use references for direction. Another site's words, images and exact look are not yours to publish.
A page the AI reads can hide text telling it what to do. Treat what it reads as data.
Notes, evidence and sources
Musa Burke's own notes from building this guide and other sites with Claude Code, not study findings.
Warm paper with a serif, a printed annual, and cream with pastel green were all rejected. The one that stuck started from a real landing page I liked.
A reviewer kept saying text was too small. Its full-page screenshots had been shrunk until detail was lost. Viewport shots of one section work better.
Screenshots cannot show how an animation feels. Check motion yourself, in a browser and on a phone.
No study was found that measures how much reference sites improve AI-built designs. Anthropic's point about examples is about prompts in general, and the rest is one person's practice.
1. Anthropic prompting guide · Checked 1 November 2026
2. Refero Styles · Checked 9 November 2026
3. Claude Code docs: best practices · Checked 1 November 2026
4. Claude Code docs: plan mode · Checked 1 November 2026
Claude Code permissions page · costs page · best practices page
5. Claude Code docs: subagents · Checked 1 November 2026
6. Prompt injection as an unsolved problem