How this was made

Ten briefs before a line of code

The single most important decision: every site got a complete creative brief up front, written by the lead model — a fictional client treated as a real one. Each brief fixed the concept (an orbital-debris observatory; a Riviera hotel at dusk; a Parisian restoration atelier), an exact palette in hex, a named type pairing, a layout archetype, a motion language ("viscous, 0.9–1.6s" vs. "hard 120–200ms cuts, zero soft fades"), and one signature technique the site had to be built around — a scroll-scrubbed blueprint, raw fragment shaders, procedural weather, a before/after restoration slider.

Diversity was engineered, not hoped for: layout archetypes, font pairings, and technique families were assigned so no two sites could converge on the same look. These briefs served as each site's founding design document; each finished site then wrote its system back into a DESIGN.md — palette tokens, type scale, spacing, motion rules — so any study can seed a future real project.

The banned list

Every builder worked under an explicit list of AI tells, forbidden outright: emoji-as-icons, "Elevate / Unlock / Empower" copy, three-equal-cards-with-icons rows, the indigo-gradient-plus-glassmorphism hero, uniform border-radius on everything, 0.3s-ease on everything, and the logo-left/links-center/button-right navbar. Each site had to invent a navigation that belonged to its own concept — corner marks, an index bar, a day-strip, a running head.

One orchestrator, a fleet of builders

Fable 5 ran the show from a single session: wrote the briefs, authored a deterministic workflow script, and fanned the work out to Claude Sonnet worker agents — three at a time, the machine's concurrency budget. Each site moved through a fixed pipeline:

The three passes are deliberately three different agents. A builder reviewing its own work keeps its own blind spots; passes 2 and 3 arrive with no memory of the construction and judge only what is actually on screen — against the brief and against a world-class bar.

Screenshots as eyes

Every pass reviewed the real rendered page, not the code. A small Playwright harness (tools/shot.mjs) shot each site headlessly at 1440×900 and 390×844, at four scroll depths — capturing scroll-triggered states — while also reporting console errors and horizontal overflow. Agents were required to read every screenshot and name concrete flaws before fixing them: pass 1 at least five, pass 2 at least six plus two "elevations" (added depth: grain, secondary motion, a micro-interaction).

Reality included: usage-limit windows cut three runs mid-flight. The workflow's finished-site fence and journal made every restart cheap — completed work was never redone by design, and the whole set converged across five launches.

The case for fresh eyes, in evidence

A sample of real defects the review passes found and fixed — none visible in a code-only review:

• Kessler Station — zero mobile navigation: the desktop nav was display:none below the breakpoint, with nothing replacing it. Pass 3 built a concept-native mobile nav, then caught the tab-order and offset bugs the fix itself introduced.
• Ateliers Réunis — an entirely French-content page declared lang="en"; corrected to lang="fr".
• Vesper, Fjord — WCAG AA contrast failures in accent colors (3.0–4.4:1), fixed with darkened text-role tokens while keeping the bright accents for non-text UI.
• Across nearly every site — mobile touch targets under 44px (nav links as small as 14px tall), fixed with invisible hit-area expansion that leaves the visual design untouched, verified by DOM measurement.
• Chromatica, Fjord — prefers-reduced-motion proven, not assumed: agents verified canvases render byte-identical frames with the preference on, and that one SMIL animation (which CSS media queries cannot reach) was removed via JS.
• Codex audit, 2026 — Helios Cycles' signature opening visual, a bicycle scene, never fired, leaving the first composition empty; restored. Isohel's remote stock feed was unreliable and off-brief; replaced with seventeen original monochrome plates stored in the project. The audit itself was made repeatable: a full-scroll, multi-depth browser check any future pass can re-run.

Deliberately boring foundations

Every site is a self-contained folder of vanilla HTML, CSS, and JavaScript — no framework, no build step, no bundler. Heavy lifting comes from exactly two CDN libraries where earned (three.js for real 3D, GSAP ScrollTrigger for scrubbed scroll choreography) and otherwise from the platform itself: raw WebGL, Canvas 2D, SVG filters, CSS custom properties and 3D transforms, variable-font axes, the Web Audio API. Fonts load from Google Fonts. Any static server can host the whole gallery; nothing to install, nothing to compile.

Code where it earns its keep; original imagery where it matters

Most visuals remain generated by browser code — the smoke, book covers, weather, shaders and data instruments. Isohel is intentionally different: a photography portfolio now built from seventeen original AI-generated monochrome plates stored locally in the project, replacing the earlier remote placeholder feed. There is no stock photography and no dependency on a third-party image service.

Design documentation

The briefs acted as each site's founding DESIGN.md; every finished site carries its own written system (tokens, scale, motion) authored in pass 3. The wrapper you're reading follows the same discipline. One honest footnote: builders were offered a UI/UX skill library (ui-ux-pro-max) as an optional consult, but it wasn't available inside worker sessions — every design decision here came from the briefs and the models' own judgment.