← Back to the ten

How one model built ten websites

The full workflow behind this showcase — so you can reproduce it with Claude Code and a single prompt. No templates, no design files, no human pixel-pushing.

01 · One prompt, total freedomThe brief

The entire project started from one instruction: "build 10 fundamentally different websites that showcase advanced web design — 3D, animation, color, typography — iterate on each at least three times, and ship them to GitHub." Everything else — concepts, names, palettes, copy, code — was the model's call.

02 · Art direction firstThe direction bible

Before writing any code, Claude Fable 5 (the "planner") wrote DIRECTION.md: ten concepts, each with a named fictional brand, a mood reference, an exact hex palette, a typeface pairing, and the signature technique (a PBR gold mesh, a GLSL wave shader, an L-system garden, a 100k-particle galaxy…). It also fixed a global quality bar: no pure black/white, extreme type-scale contrast, choreographed entrances, prefers-reduced-motion support, mobile-safe, 60fps.

03 · Cheap hands, expensive tasteModel routing

The expensive model thinks once; cheaper models type. Fable dispatched five parallel Claude Sonnet subagents, each building two sites from the direction bible. Briefs were written to be executable by a weaker model: exact file paths, exact deliverables, no implied context. This cut token cost by roughly 70% versus building everything on the frontier model.

Fable 5 ── writes DIRECTION.md (taste, specs, quality bar)
   ├─ sonnet agent → sites 01, 02
   ├─ sonnet agent → sites 03, 04
   ├─ sonnet agent → sites 05, 06
   ├─ sonnet agent → sites 07, 08
   └─ sonnet agent → sites 09, 10
Fable 5 ── reviews every site in a real browser, 3 passes each

04 · The fine-toothed combThree iteration passes

No site was accepted as delivered. Each one was loaded in a live browser (via Claude Code's preview tools) and put through three passes:

• Pass 1 — Correctness. Console errors, broken layouts at 375px, missing fonts, WebGL fallbacks, scroll jank.
• Pass 2 — Design critique. Screenshot review as an art director: spacing rhythm, color balance, type hierarchy, whether the hero earns a second look.
• Pass 3 — Complexify. Add the details that separate good from great: micro-interactions, custom cursors, grain, staggered reveals, easing curves worth stealing.

05 · Constraints that helpedThe tech rules

• Every site is one self-contained HTML file — inline CSS/JS, CDN-only dependencies (three.js, GSAP, Google Fonts). No build step, so anyone can view-source and learn.
• Relative paths only, so everything works on GitHub Pages or straight from file://.
• Performance guardrails: device-pixel-ratio capped at 2, animation loops pause on hidden tabs.

06 · ShipGitHub Pages

git init && git add -A && git commit
gh repo create fable-showcase --public --push
# Pages: deploy from main branch, root
# → https://<user>.github.io/fable-showcase/

07 · Do it yourselfThe reproducible recipe

Open Claude Code and paste one prompt: ask for N fundamentally different sites, demand a written art-direction doc before any code, require three named critique passes per site in a real browser, and tell it to route builds to cheaper models while the frontier model keeps creative control. Then get out of the way.