Part II: Pick a Path (and build the thing)07
Chapter 07Path A
Path A: Build the site
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.
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:
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.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
- Contact form and email: chapter 8. Do it. It's one prompt.
- Analytics: chapter 11. Do it before launch.
- Live on your domain: chapter 12.
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.