The master guide
Every site in this collection was designed and built end-to-end by Claude (Fable 5) — a single autonomous Claude Code session, one human prompt, complete creative freedom. This is exactly how it was done, so you can do it too.
No templates. No page builders. No stock photos or icon packs. Every gradient, shader, particle system, 3D transform and type pairing is hand-written in one self-contained HTML file per site.
Twenty-five sites is easy to make same-y. The fix was to write a design bible before touching code — a single table locking in, for all 25 at once: the brand, the sector, the signature technique, the exact colour palette, and the font pairing. The binding constraint: no two sites may share a font, a palette family, a layout system, or a signature technique.
That forced range on purpose. When perfumery already owns the flowing-silk WebGL shader, the knife-forge has to find vertical typography and ink; when the type foundry owns the variable-font playground, the running club has to reach for kinetic slide-in headlines instead.
Each site is built around a single memorable trick, executed properly rather than sprinkled everywhere:
Crucially, the effect always serves the concept: the glacier site's scroll melts a glacier; the security firm's terminal types a real engagement log; the AI lab's point cloud morphs between shapes because the lab studies emergence.
Pick 25 sectors and 25 non-overlapping aesthetics up front. Write them down. This is the single highest-leverage step.
Per site: a single index.html with inline CSS and JS, real (fictional-brand) copy, and its one signature technique. Then a matching /guide page in the same aesthetic.
The part most people skip. Load the page in a headless browser, screenshot desktop and mobile, and hunt for problems — then fix them and repeat, three times.
Ship it, load the real URL, confirm the page and its /guide route both return 200 and render.
A pass is a fine-tooth-comb review, not a glance. Each time through:
prefers-reduced-motion fallback on every animation.Why three passes beats one long build. The first draft gets you 70% of the way in five minutes. The remaining 30% — the part that separates "an AI made this" from "someone designed this" — only shows up when you look at the rendered page critically, on a real screen, at real sizes. The passes are where taste lives.
wrangler pages deploy ships the whole collection under one domain. (Netlify works identically — see below.)You don't need 25. Start with one. Open Claude Code and paste something like:
"Design a website for a [sector] brand with a [aesthetic] direction. Pick a distinctive font pairing (not Inter/Roboto) and a committed palette. Build it around one signature technique — [e.g. a raw-WebGL shader hero / a canvas particle system / a scroll-driven transformation]. Real copy, no lorem ipsum. One self-contained HTML file. Then critique it against composition, type, contrast, motion and copy, and iterate three times — screenshotting each pass. Add a /guide route explaining how you made it."
Then get out of the way and let it run the loop. The magic isn't a secret prompt — it's committing to the critique passes and giving the model the freedom to make bold, specific choices.
This collection is hosted on Cloudflare Pages, deployed with a single command: npx wrangler pages deploy ./sites --project-name fable25. The entire set lives under one domain, with each site at its own path and each /guide one level deeper.
Netlify is just as good and arguably friendlier for first-timers: drag-and-drop a folder at app.netlify.com, or run npx netlify deploy --prod --dir=./sites. Both give free HTTPS, global CDN, instant rollbacks and custom domains. Cloudflare tends to win on raw network footprint and bandwidth limits; Netlify wins on build-plugin ergonomics and form handling. For a static showcase like this, either is an excellent, free choice — pick whichever you already have an account with.