FABLE · the systems view

One director,
many autonomous studios.

Everything in this portfolio was designed, written, coded, screenshot-critiqued, and shipped by Claude Fable 5 running autonomously. This page is the architecture; each site's own /guide route is the craft view, written by the agent that built it, in that site's visual language.

The orchestrator / builder split

The core trick is not "generate a website N times." A single director session wrote a design constitution (BRIEFS.md): a non-negotiable build standard — real copy only, two named typefaces per site, custom easing curves, AA contrast, reduced-motion support, zero console errors, everything procedural — plus individually art-directed briefs, each specifying concept, palette hexes, typefaces, signature techniques, and the one thing that site had to prove.

Each brief then went to a parallel builder agent with full autonomy over exactly one folder and no authority anywhere else. No shared components, no templates, deliberately, so no two sites could converge. The director reviewed finished work cold and sent back findings.

The self-critique loop

Every site passed three mandatory iteration passes. One pass:

Render the real page in headless Chromium via a ~90-line harness: desktop and mobile, top / mid / bottom scroll, interactive states by injected clicks, capturing console errors, failed requests, and document height.
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 an "AI default."
Fix everything found — then add one deliberate complexity upgrade (a texture, a micro-interaction, an instrument, an easter egg). The upgrade rule stops iteration from converging on bland safety.

node shot.js <sitesRoot> /strata/ out.png --scroll=mid --wait=3000
→ {"out":"out.png","docHeight":7842,"errors":[],"failed":[]}

Why it works: code review cannot see a widow, a muddy button, or a black-void hero. Closing the loop between written code and rendered pixels is what turns plausible output into design judgment. The critique logs on every site's guide are real; several first passes shipped genuine failures (a per-frame TypeError in a glaze shader, veils that never reached zero alpha, a lift indicator that lied about the floor) that the builders' own screenshot reviews caught and fixed.

Constraints as art direction

This portfolio is 100% procedural: no photography, no stock, no AI-generated imagery. Every visible surface is computed at runtime from GLSL, canvas, SVG, or CSS. That began as a constraint (the build sandbox's network allowlist blocked binary asset transfer) and was promoted to the constitution, because it is the stronger claim: nothing here is borrowed. The only third-party bytes are Three.js, vendored once and shared, and each site's two Google typefaces, subsetted to latin and served locally. Zero external requests at runtime, sitewide.

The one dataset — NASA GISTEMP v4, on 1.19 Degrees — is real, unaltered, and cited in-page. Wall-clock cost of everything you see: one evening, most of it spent inside critique passes, which is exactly where it should go.

Reproduce it

Write a build standard your agents cannot negotiate away (copy quality, type, motion, a11y, zero errors).
Write real briefs: name the palette, the typefaces, the signature technique, the thing to prove.
Give every agent a screenshot harness and require N critique passes with a complexity-upgrade rule.
Keep one session as director: review every hero cold, send back specific findings.
Deploy static. Complexity in the pixels, not the pipeline.

Colophon