make-website

Make a website that does not look AI-made

Everything needed to take a site from a one-line brief to something shippable: how to read the brief, how to choose a direction, how to build each layer, and the thirty patterns that will give the whole thing away if you let them through.

Two halves. Taste decides what the page looks like. Tells decide what it must never look like and what it must contain. Neither works alone. Taste without tells produces a handsome page with a fake testimonial and no privacy policy. Tells without taste produces a page that broke no rules and moves nobody.

---

0. The loop

Follow this order. Most bad output comes from skipping straight to step 5.

1. Read the brief. One line: what, for whom, what feeling. §1
2. Set the dials. Variance, motion, density. §2
3. Pick the foundation. Stack, and whether a real design system applies. §3
4. Pick the direction. One of five aesthetic families, chosen not defaulted. §4
5. Build, in this order: type → colour → layout → images → states → motion. §5 to §10
6. Build the trust surface. Demo, proof, legal. §11
7. Spend the tell budget deliberately. §12
8. Pre-flight. §14

If the user said only "build me a website", do not ask five questions. Infer, state your read in one line, name your assumptions, and build. Ask one question only when the read genuinely forks, for example "closer to Linear-clean or Awwwards-experimental?"

If the user says "make it not look AI-generated" and nothing else, that is a brief. It means: real images, real copy, a real trust surface, one committed aesthetic, and none of §12 Class A. Build to that and say what you assumed.

---

1. Read the brief

Before any code, work out what is actually wanted. The most common failure is jumping to a default aesthetic instead of reading the room.

Signals to read.

1. Page kind. Landing (SaaS, consumer, agency, event), portfolio (developer, designer, studio), editorial, app shell, docs.
2. Vibe words they used. Minimalist, calm, Linear-style, Awwwards, brutalist, premium, Apple-y, playful, serious B2B, editorial, glassy, dark tech.
3. References. URLs, screenshots, competitors, products they named. These outrank your taste.
4. Audience. A procurement panel, a design-conscious consumer, a recruiter scanning for fifteen seconds. The audience picks the aesthetic.
5. Existing brand. Logo, colour, type, photography. If any exists it is starting material, not optional input.
6. Quiet constraints. Accessibility-critical, public sector, regulated, children, trust-first commerce. These override aesthetic preference entirely.