WEBSITESfor Normal People2026

Part II: Pick a Path (and build the thing)07

Chapter 07Path A

Path A: Build the site

5 min read, 2 cheat sheets

No purple gradients. Promise.

Most people stop here, and most people should. One brief, one prompt, one live site.

Why most AI websites look the same

You've seen them. Purple gradient hero. "Welcome to [Business]" in a huge font. Three cards with emoji icons. A stock photo of people laughing at a laptop. Everyone calls it AI slop, and it's real, but it isn't the AI's fault.

It's the prompt. "Make me a website for my bakery" gives the model nothing to work with, so it hands you the average of every bakery website ever made. The average is boring by definition.

Opus 5.5 is a genuinely good designer. Give it real material and real taste to work from, then get out of its way. That's what the brief is for.

Step 1: Gather your material

Make a folder inside Websites named after your business. Put in it whatever you have:

  • Photos. Your actual work, your space, your products, your face. Real photos beat everything. Phone photos are fine if the light's decent. Twenty mediocre real photos beat one perfect stock image.
  • Logo, if you have one. Any format.
  • Text you already have. Old website, Instagram bio, menu, price list, a Google Doc. Doesn't need to be good. The agent rewrites it.
  • Your old site's address, if there is one. The agent can pull everything from it.

Step 2: Write the brief

Fill this in. Short answers are fine. Honest answers are better than impressive ones.

PromptCheat sheet 0135 lines
BUSINESS
What you do, in one or two sentences:
Where you are / who you serve:
What makes you different from the three competitors down the road:

VISITORS
Who's landing on this site:
The ONE thing you want them to do (call, book, order, get a quote, visit):
The questions they always ask you before buying:

PAGES
[e.g. Home, Menu, About, Catering, Contact. Or "one long page".]

THE FEEL
Three words for how it should feel (not "modern" and "clean", everyone says
that. Try "warm, flour-dusted, slightly chaotic" or "quiet, expensive, gallery"):
Sites you love (any industry) and what exactly you love about each:
  1.
  2.
  3.
Sites or styles you hate:
Borrowing from someone else's look (a famous brand, a book series, a movie)?
Say "evoke it, don't copy it": no names, logos or characters that aren't yours.
Brand colours / fonts, if you have them (or "make them up"):

MOTION AND INTERACTION
[None / subtle / show off.] Any specific idea? ("the menu could be a
flippable card deck", "the hero reacts to the mouse", "scroll through the
steps of making sourdough")

LANGUAGES
[English only / English and French / ...]

MATERIAL
Everything is in this folder: [path]. Old site: [URL or none].

Step 3: The build prompt

New session in your business folder. Opus 5.5, effort High. Paste your brief, then this underneath it:

PromptCheat sheet 0245 lines
Above is my brief. Build my website.

You're the designer here, not just the developer. Use the brief and the
material in this folder, then make real design decisions: a concept, a type
pairing, a colour system, a layout idea that belongs to THIS business. Push
it. I would rather you take a big swing I have to pull back than hand me
something safe. Write your design direction to DESIGN.md before you build,
and follow it.

Hard no's: generic gradient heroes, "Welcome to [business]" headlines, rows of
three identical cards with icons, emoji as icons, stock-photo people, fake
testimonials, lorem ipsum, and any copy that could be on a competitor's site.
Write real copy from my material, in plain language, specific to me. If you
need a fact you don't have (prices, hours, address), leave a clearly marked
TODO and list them all for me at the end. Don't invent them.

Build it properly:
- Latest Next.js, deployed to Cloudflare Workers with OpenNext. I'm on
  Cloudflare's [Free / Paid] Workers plan: stay inside its limits, and tell
  me before adding anything that needs Paid.
- Keep all the words and data in Markdown or data files, separate from the
  design, so a redesign never touches the content.
- Fast: optimised and properly sized images, minimal JavaScript, and no
  layout shift from web fonts (CLS under 0.1). It should score 90+ on mobile
  Lighthouse for performance, accessibility and best practices on staging.
  SEO gets checked on the live domain, since staging is noindex on purpose.
- Motion that fits the brief, and that respects reduced-motion settings.
- Fully responsive. Design the phone version on purpose, most visitors
  will be on one.
- Accessible: real headings, alt text, keyboard navigation, readable
  contrast.
- SEO basics: titles, descriptions, Open Graph images, sitemap, robots.txt,
  schema.org structured data for my business.

Ship it:
- Create a private GitHub repo for it and push.
- Set up GitHub Actions so every push to main deploys to a staging address
  on workers.dev. Staging must be noindex. Put CLOUDFLARE_DEPLOY_TOKEN and
  CLOUDFLARE_ACCOUNT_ID into the repo's Actions secrets from my vault.
  Never the full-access token.
- Deploy, open the staging site yourself, check every page on desktop and
  phone sizes, and fix anything that looks off before you show me.

Then send me the staging link, a short summary of the design direction, and
the list of TODOs you need from me.
Watch itThe staging site, checked on a phone.

Personal details are blurred. Press play, it's silent and loops.

Step 4: Review like a client, not a developer

Open the staging link on your phone first. Then give feedback the way you'd give it to a human designer:

  • Specific: "The hero photo is too dark, use the one of the counter instead" beats "make it pop".
  • Why, not just what: "Customers always ask about gluten-free, so it needs to be on the home page."
  • Batch it. One message with ten points beats ten messages.
  • Answer its TODO list in the same message.

Add-ons

Or, if you need other people editing content, go to Path B. Selling things, Path C.

On a phone, swipe left and right to turn pages.