Website templates that don't look AI generated

No code needed. Open your site on a laptop and a phone and go down the list. One or two hits are normal; five or more, and visitors read it as a generic vibe coded website before they read a word. Each line says what to do instead.

1. A purple to blue gradient behind the headline. Use a flat ground in a colour from your trade.
2. Glowing blobs floating behind the content. Remove them; a real photo or a plain ground says more.
3. One sans-serif for everything, often Inter, in one weight. Choose a heading face with character and set it large.
4. One headline word in gradient or another colour. Make the sentence itself specific instead.
5. A small all-caps label above every heading. Keep a label only where it says something, such as a step or a date.
6. A centred hero with a pill badge and two buttons. Open with what is most yours (the room, the dish, the product) and one clear action.
7. Three cards with an icon each. Show the offer as a menu, a price table, a timeline or a list shaped like the business.
8. The same radius and soft shadow on every box. Pick one shape language on purpose and vary it by role; the flat, hard-edged grid pages show how far that choice can go.
9. Frosted glass panels. Use solid ones; glass over a photo also hurts reading.
10. Emoji as bullets. Use plain bullets, or numbers only where order matters.
11. Every block fading up on scroll. Choose one moment that moves and let the rest stand still.
12. Hero, features, testimonials, pricing, FAQ in that order for any business. Order sections by what a customer asks first: hours for a bar, price for a class.
13. Headlines that fit any company, such as "Revolutionize your workflow". Write one sentence with a number, a place or a house rule.
14. Words in threes: fast, simple, powerful. Replace each adjective with the fact behind it, or cut it.
15. Proof nobody can check: logos of firms that never hired you, quotes from people who do not exist. Show only what you can back up.
16. Stock pictures of people at laptops. Use your own photos or screenshots of the real product.

A design is a few dozen small decisions: typefaces and sizes, two or three colours and where each goes, the section order, the corner radius, what moves, what the headline says. A prompt like "a clean landing page for my startup" settles none. The model fills each gap with the choice it has seen most often, and since nearly everyone leaves the same gaps, nearly everyone gets the same page, even when the products have nothing in common.

The stack adds its own defaults: a starter kit's single corner radius, shadow, spacing scale and icon set reach the page untouched, because nothing asked to change them.

Asking the model to "make it unique" does not get you out. It moves the page to the next most common look. Anthropic's frontend design skill for Claude, written to counter generic output, names the looks that generated design now clusters around, among them "a warm cream background (near #F4F1EA) with a high-contrast serif display" and "a near-black background with a single bright acid-green or vermilion accent". Its verdict: "they are defaults rather than choices, and they appear regardless of subject."

So the fix is not a stronger adjective in the prompt. Decide the type, palette, layout, one motion idea and the copy yourself, then write them down where the agent reads them on every run: a DESIGN.md with the tokens for the look, and AGENTS.md for what must not change. An agent that reads both keeps the decisions instead of averaging them away.

Type first. Across the 101 templates 36 typefaces are in use, Inter is not one of them, and 29 templates stay on a single family. The spread is not perfect: Host Grotesk appears in 25. The arcade bar sets condensed serif headings under a Climate Crisis wordmark; the sauna uses Source Serif 4 alone on a dark ground. Colour is a short list with jobs: the tile store runs near-black with blue, yellow and red cells. Layout is where hero plus three cards gives way:

• The genealogy template stacks paper sheets in one column no wider than 820px, with index tabs at the side.
• The tailor template opens on a green panel whose headline is one long sentence containing two photo pills.
• The perfumery template steps each heading to the right and puts photos in arched windows.
• The pottery studio template fixes four columns and five hairlines over the whole page.
• The arcade bar template stacks four photo cards, each shrinking to 90% as the next covers it.

Instead of one fade-up on everything, each template spends its motion on one idea:

• In the coffee roaster template a round frame turns one full circle beside the list.
• In the hardware store template the departments are pinned for about four screens while each photo panel wipes up over the last.
• In the planetarium template a glowing runner travels a line along a strip of five stops.

All 101 load GSAP, ScrollTrigger and Lenis from jsDelivr, and each page still reads in full with reduced motion. Copy is the quieter tell. The demo text is invented but reads like a real business: the genealogy template's method line says nothing goes on the chart until two independent records agree, which is a rule, not a slogan.

Most damage happens at the second prompt, when someone asks an agent to "make it more modern". Ask for content changes instead. Keep the fonts and the CSS variables in :root, keep the section ids and the data-8b attributes the scripts read, and put the DESIGN.md from the ZIP download next to index.html. The steps for Cursor, Codex or Claude Code are in a longer walkthrough for coding agents.

A prompt that holds the decisions in place:

Open index.html, AGENTS.md and DESIGN.md. Replace the demo text with the facts I give you below. Do not invent numbers, names, prices or addresses: ask me when a fact is missing. Keep the fonts, the variables in :root, the layout and the animations. Change content only; no new gradients, cards or sections. When you finish, open the page at 1280 and 390 pixels wide and list anything that looks different from before.

1. Search the page for the demo names, prices, addresses and dates, and for links that go to #. Replace each with your own, or remove the block.
2. Read every headline aloud. If a competitor could use it unchanged, rewrite it around a fact.
3. Delete any logo, quote or number you cannot back up.
4. Swap stock photos for your own where you can, each with a short alt text.
5. Open the page at phone width: nothing scrolls sideways, buttons are easy to tap, the menu opens and closes.
6. Press Tab through the page: you can always see where you are, and every link and field can be reached.
7. Turn on reduced motion in your system settings and reload: all the text is there and readable.
8. Send a test through each form and check that it arrives. Forms here send nothing until you connect Formspree, Netlify Forms or a backend.
9. Show the first screen to someone for ten seconds, then ask what you do and where. If they cannot say, fix that screen.

A template is a starting point, not proof that a site is not AI generated. Leave the invented demo copy in place, or let an agent rewrite it from memory, and the page reads generic again. Photos are stock images from Unsplash. Some looks here, such as hairline grids or a cream ground, are on that skill's list of common generated styles too: take one because it fits your trade, not because it is not purple. AI was involved in making these pages; what differs is that the decisions exist and sit in the file.

All 101 templates