How this was made

Fifteen websites, each with its own subject, palette, typography, and signature technique — designed and built end-to-end by Claude Fable 5 inside Claude Code, then deployed as one static bundle. This is the complete workflow, written so you can run it yourself.

STEP 01Write the briefs before any code

The single highest-leverage artifact was a briefs document: one section per site, written before any building began. Each brief fixed the things that make sites converge when left to chance — a named (fictional) subject and audience, a 4–6 hex palette, an exact font pairing, a one-paragraph description of the signature element (the one thing the site would be remembered by), and a short forbidden list of the clichés that category always produces ("no purple AI gradients", "no realtor grids", "no Matrix green").

A companion standards document set the floor every site had to clear: static HTML/CSS/JS only, no frameworks, relative paths, honest copy in the brand's voice, prefers-reduced-motion respected, visible keyboard focus, readable without JavaScript, zero console errors, and a payload budget. Separating "what makes this site itself" (brief) from "what makes any site good" (standards) is what let fifteen sites be built in parallel without blurring together.

STEP 02Build in parallel, one agent per site

Each site was built by its own agent — a separate Claude instance with the same two documents and one instruction: build your brief, then iterate. Fifteen agents ran concurrently. None saw another site's code, which turned out to matter: shared code breeds shared look. The only shared surface was a small toolbox:

A screenshot harness — a ~70-line Node script that serves the site folder, opens it in headless Chromium (Playwright), captures any route at any viewport/scroll position, and prints every console error. Agents ran it constantly and actually looked at the images.
An image generator — a thin wrapper around GPT Image 2 for the handful of sites that wanted photography (real-estate dusk shots, 35mm film frames, engraved botanical plates), with hard-art-directed prompts: medium, lens, light, palette hexes, era. Most sites used zero raster images — procedural WebGL, canvas, and SVG proved stronger and weigh almost nothing.

Techniques across the fifteen: procedural three.js (a watch movement with correct 8:1 gear meshing, a pot thrown on a lathe, Earth with a GLSL terminator), hand-rolled fragment shaders (heat mirage, iridescent silk), canvas ecosystems (bioluminescent depth zones, three-layer rain, falling spore prints), seeded generative editions, variable-font spring physics, FLIP-animated grids, WebAudio synthesis (hydrophone hum, water-drop suikinkutsu, watch ticks), and one strictly three-color Swiss grid with its own grid inspector.

STEP 03Three critique passes — the fine-toothed comb

No site was accepted as first-built. Each agent ran three mandatory passes over its "finished" site, each pass starting with fresh screenshots (desktop hero, full page, mid-scroll, and 390px mobile) that it read like a reviewer:

Design flaws. Find at least five concrete problems — there are always five. Spacing rhythm, alignment, contrast failures, orphaned lines, sections that read as template, broken mobile. Fix them.
Elevation. Make the signature element richer; add the layer a rushed build skips (grain, secondary motion, hover states, a detail that rewards attention) — and cut one thing (the Chanel rule: look in the mirror, remove one accessory).
The comb. Verify rather than assume: zero console errors, reduced-motion actually tested, keyboard focus visible, alt text, no-JS readability, mobile re-checked after pass-2 changes, copy proofread, payload audited.

Every pass was logged — findings, then fixes. The logs caught real bugs that "looks done" hides: stretched images from a lone HTML height attribute, a page that rendered blank without JavaScript, reveal animations that never fired, a neon sign that stayed dark when scripts were off.

STEP 04Assemble and deploy

Each site lives in its own folder with relative paths, so the whole showcase is one static bundle: a gallery index at the root (thumbnails are just headless-browser screenshots of each hero), this guide, and fifteen directories. Deployment is the Netlify API, no CLI needed:

# create the site once
curl -X POST https://api.netlify.com/api/v1/sites \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -d '{"name":"your-site-name"}'

# then every deploy is: zip the folder, POST it
zip -qr deploy.zip .
curl -X POST https://api.netlify.com/api/v1/sites/$SITE_ID/deploys \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -H "Content-Type: application/zip" \
  --data-binary "@deploy.zip"

STEP 05Do it yourself

The recipe, compressed:

Pick subjects first; make each one concrete enough to have its own vernacular.
Write briefs that assign palette, type, signature element, and a forbidden list per site — and a standards doc with the quality floor all of them share.
Give the builder (human or model) a screenshot loop it must actually look at. A picture is worth a thousand tokens.
Require three critique passes with logged findings. Pass 1 finds flaws, pass 2 adds the layer others skip and removes one thing, pass 3 verifies accessibility, robustness, and copy.
Prefer procedural over stock. A shader, a lathe geometry, or a synthesized sound is smaller, more original, and more alive than any asset you could download.
Ship as boring, portable static files.

Honest notes: the build hit real-world friction — API usage caps mid-flight (agents resumed from their transcripts and logs) and an image-API billing limit that cut some photo sets short. The agents adapted: a moonrise photo became a drawn art-deco plate, missing botanical plates became SVG line engravings styled as a second printing register, a perfume bottle became a 3 KB vector-glass SVG. Constraints, as usual, improved the work.