How a model built twenty-five websites in an afternoon.

The architecture: one director, twenty-five studios

The core trick is not "generate a website 25 times." It's an orchestrator/builder split:

• A single orchestrator session wrote a shared design constitution (BRIEFS.md): a non-negotiable build standard — real copy only, distinctive type, custom easing, responsive, accessibility, zero console errors — plus twenty-five individually art-directed briefs, each specifying concept, palette, typefaces, signature techniques, and one thing the site had to prove.
• Twenty-five parallel builder agents (subagents of the same model) each received one brief and full autonomy over one folder. No templates, no shared components — deliberately, so no two sites could converge.

The orchestrator then acted as a design director: reviewing every finished site's screenshots itself and sending sites back with specific QA notes (a mid-word line break, a low-contrast button, a paragraph drowning in artwork).

The self-critique loop (this is the part that matters)

Every site went through three mandatory iteration passes. One pass =

1. Render the real page in headless Chrome via a tiny Puppeteer harness — desktop and mobile, top / mid-scroll / bottom, capturing console errors and document height.
2. Look at the pixels. The agent reads its own screenshots with vision and critiques them like a hostile design director: rhythm, alignment, contrast, widows, dead zones, anything that smells like "AI default."
3. Fix everything found — then add one deliberate complexity upgrade (a texture, a micro-interaction, marginalia, an easter egg). The upgrade rule stops iteration from converging on bland safety.

// shot.js — the whole harness is ~25 lines
node shot.js http://localhost:4179/strata/ out.png 1440x900 4000 [scrollY]
// → {"out":"out.png","docHeight":3834,"errors":[]}

The asset pipeline: generated, then treated like production media

Ten sites use cinematic media. All of it was generated on demand via the Higgsfield API/MCP, then optimized like any professional asset:

• Every image: ffmpeg → WebP, ≤1920w — 5 MB PNGs became 40–190 KB.
• Every video: h264, CRF 26, muted, faststart — under 600 KB, safe to autoplay.
• Generating the video from the hero still keeps poster and loop visually continuous.

Total generation cost: ≈ 40 credits (~27 assets). The other fifteen sites are fully procedural — GLSL, canvas flow fields, SVG illustration, CSS — because restraint is also a budget.

What the sites had to prove

Each brief targeted a different axis of capability, so the set covers the space rather than repeating one trick: real-time 3D (custom vertex-shader terrain; a configurable GLB product), generative art (seeded flow fields), kinetic and variable typography, scroll-driven data storytelling on real NASA GISTEMP data, audio synthesized from raw oscillators, an interactive terminal, print-grade editorial typography with margin footnotes, and disciplined excess (brutalism, vaporwave, Y2K chrome) where the chaos is gridded underneath.

Shipping

fable-25/
├── netlify.toml          # publish = "sites", asset cache headers
├── BRIEFS.md             # the design constitution
├── tools/shot.js         # puppeteer critique harness
└── sites/
    ├── index.html        # this gallery
    ├── guide/            # you are here
    ├── strata/ … frequency/   # 25 self-contained sites
    └── assets/thumbs/    # gallery thumbnails (from the QA shots)

Everything is static — no build step, no framework, fonts from Google Fonts, Three.js from a CDN. One netlify deploy --prod ships all 26 surfaces atomically.

Every site documents itself

This page is the systems view. For the craft view, every one of the 25 sites carries its own /guide route — written by the agent that built it, in that site's own visual language: the brief it received, the signature techniques with real code excerpts from its source, where its assets came from, and what its three critique passes actually found and changed. Visit any site and follow the "how this was built →" link by its credit, or go directly to /<site>/guide/ — e.g. /strata/guide/, /degrees/guide/, /orbitchair/guide/.

Reproduce it

1. Write a build standard your agents cannot negotiate away (copy quality, motion, a11y, zero errors).
2. Write real briefs — name the palette, the typefaces, the signature technique, the thing to prove.
3. Give every agent a screenshot harness and require N critique passes with a complexity-upgrade rule.
4. Generate media async and early; optimize it like production assets.
5. Keep one session as director: review every hero shot cold, send back specific findings.
6. Deploy static. Complexity in the pixels, not the pipeline.

Wave 1 — Public Works (the autonomous loop begins)

The portfolio now grows in waves without a human in the loop: an orchestrator session reads a registry of every site's "DNA" (domain / technique / palette / type / mood), invents six new strings that may share at most one axis with anything already live, generates hero media on frontier models first (stills, an image-to-video sea loop, and a photograph lifted into a 3D GLB mesh), then runs six parallel builder agents through the same three-pass critique gauntlet and a cold director review. Wave 1's theme is Public Works — six civic institutions that don't exist: a metro authority with a working split-flap board, an office of tides whose WebGL sea computes real harmonic constituents, a society of speculative cartography with a procedurally inked globe, a horology institute whose specimen was reconstructed from a single generated photograph, a risograph co-op that screens every dot live, and a national weather teletext service. New lessons for practitioners: headless-Chrome screenshot modes can hang machine-wide under parallel load (pin the stable one in the shared harness); a 12 MB GLB is a design flaw, not an asset (1 K WebP textures brought it to 2 MB with no visible loss); and asset generation belongs to the director, not the builders — one queue, one budget, no cap collisions.