How this was made.

The instruction was, roughly: reference a showcase site, then build something like it — twenty-five fundamentally different websites, each a demonstration of design taste and technical range. Host them. Iterate three times on each. Don't ask me anything until it's done.

What follows is exactly how that happened — including the parts that broke and how they were routed around. Nothing here is aspirational; it's the actual build.

01 — THE SHAPEOne site, seventy rooms

Rather than seventy separate deployments, everything lives under a single static site on Netlify: a gallery homepage, a /guide route, and seventy self-contained sub-sites at /sites/NN-slug/. One link to share, one deploy pipeline, and no build step — every page is hand-written HTML/CSS/JS so nothing can fail to compile.

fable-x25/
├── index.html          → the gallery (itself a showcase piece)
├── guide/index.html    → you are here
└── sites/
    ├── 01-liquid-metal/index.html  (+ assets/)
    ├── 02-terrain/index.html
    └── … ×70

Each sub-site is fully independent — its own fonts, palette, and libraries loaded from CDNs (Three.js, GSAP) where needed. That isolation is what let dozens of them be built in parallel without stepping on each other.

02 — THE CONCEPTSSeventy deliberately different worlds

The hardest constraint was "fundamentally different." It's easy to make seventy variations of the same dark-hero-with-gradient template. So the concepts were spread across six families, forcing different techniques in each:

The collection later grew by a second wave of five — each chosen to add a technique the first twenty-five didn't have: emergent simulation, a hand-rolled physics engine, procedural landscape painting, a ritual object built on generated artwork, and real astronomical computation. A third wave of five followed, three of them East-Asian in spirit — a procedurally painted Chinese ink handscroll, an interactive Japanese zen garden, a generative paper-cutting studio — beside a rain-on-glass refraction shader and an aurora. A fourth wave of fifteen pushed further still: GPU simulations (slime mould, reaction-diffusion, an n-body sandbox), instruments (a kaleidoscope, a harmonograph, a working mechanical watch movement, an audio-reactive visualiser), fully hand-built brand worlds with no photography (a type foundry, a coffee roaster, a speakeasy, a perfume house, a repertory cinema), and three more from the sky and sea (a star atlas, a globe of arcs, a golden-hour ocean). A fifth wave of five turned to fortune-telling — the Chinese zodiac, the computational four-pillars of BaZi, the I Ching cast with coins, temple fortune-sticks you shake loose, and a Western horoscope wheel — divination systems rendered with real logic and a light, for-reflection tone. A sixth wave of ten then built the entire rest of the Chinese fortune-telling canon — Zi Wei Dou Shu's twelve-palace star chart, the Liu Yao and Plum Blossom methods, Qi Men Dun Jia's strategist board, Feng Shui (Bagua and Flying Stars), the daily almanac, face & palm reading, name analysis by the Five Grids, marriage matching, and a dream dictionary — each with real computation where the tradition has it. A seventh wave of five returned to the material world: two perfume shops that share nothing but a nose (a French bespoke perfumer's organ where you compose your own accord, and a bright digital-native fragrance house where every scent is a living gradient derived from its formula, found by quiz), a fictional city's entire metro system with trains that actually run and a split-flap departure board, a mechanical keyboard you can type on with every switch sound synthesized in Web Audio, and a paper-marbling tank built on the closed-form mathematics of ebru. Same pipeline, same three-pass rule.

Each concept came with a full art-direction brief: a fictional brand and real copy (no lorem ipsum), an exact palette, a font pairing chosen for that world, and the specific technique it had to prove. A shared BRIEF.md held the non-negotiables — favicon, a back-link to the gallery, responsive at 390px and 1440px, zero console errors, motion that respects prefers-reduced-motion.

03 — THE ASSETSGenerating imagery and motion

Five of the cinematic sites needed photography that doesn't exist. That was generated, not scraped:

Stills — GPT Image (gpt-image-2)

Thirty-one images were produced from a manifest of art-directed prompts — couture shot in fog, a rain-slicked 1948 street, a bioluminescent glasshouse, eight museum paintings of histories that never happened — run three at a time through a small Node script hitting the OpenAI images API, then compressed to web JPEGs.

// one entry from the manifest
{ out:"14-noir/street.png", size:"1536x1024", quality:"high",
  prompt:"1948 Los Angeles film noir: rain-slicked empty
  downtown street at 3am, neon smeared on wet asphalt,
  a lone figure in a fedora under a streetlamp…" }

Motion — Kling, via fal.ai

Three of the hero stills were then animated into seamless 5-second loops (fog drifting, a slow dolly through the mall, plants breathing with light) using the Kling image-to-video model on fal.ai. Each site prefers its .mp4 if present and falls back to the still — so a slow API never blocks a build.

04 — THE BUILDParallel agents, one per site

Each site was handed to its own sub-agent with the shared brief plus its concept. Agents ran in parallel batches, each owning one folder — writing the HTML/CSS/JS, wiring up the shaders or the WebAudio graph, copying in its assets. Because the sites are isolated, a dozen could build at once.

The interesting failures were the honest kind. The raymarched blob first rendered as porcelain, not chrome — the fix was rewriting the in-shader environment into a banded studio sky with a razor horizon. The particle system had a "noise ball" mid-morph until per-particle stagger was raised so two formations briefly coexist. A CSS-3D crane went invisible in headless capture because a still-animating composited layer dropped its 3D contents — fixed by settling the entrance animation on completion. None of these are visible now; all of them were real.

05 — THE CRITIQUE LOOPThree hostile passes, with a camera

This is the part that matters most, and the part most people skip. Building a site once gets you 70%. The last 30% — the spacing rhythm, the dead zones, the contrast that's almost right — only comes from looking.

So every site was screenshotted with a headless browser (Puppeteer), at desktop 1440×900 and mobile 390×844, mid-scroll and mid-interaction. The model then read its own screenshots and critiqued them like an art director who wants the work to fail — then fixed what it found. Minimum three full passes each, logged in a PASSES.md per site.

The screenshot is the ground truth. A model describing what it thinks it built is guessing; a model looking at a picture of what it actually built is editing.

The same script captured the console. A black WebGL canvas or a single error wasn't a warning — it was a defect to fix before the pass could close. Several sites are measurably better for it: a magazine audited to sub-pixel grid alignment, a terrain flyover re-framed so each peak sits opposite its caption, museum ripples verified over real HTTP after a file:// texture-tainting red herring.

// the whole critique tool, in essence
const page = await browser.newPage();
page.on('console', m => m.type()==='error' && errors.push(m.text()));
await page.goto(url, {waitUntil:'networkidle2'});
await page.screenshot({path:'pass2-desktop.png'});
// → then: Read the image. Be merciless. Fix. Repeat.

06 — THE ONE HUMAN TOUCHA single login

The entire run was autonomous with exactly one exception: authorising the Netlify CLI in the browser, once, at the start. After that — site creation, thirty-four asset generations, twenty-five parallel builds, seventy-plus critique passes, and every production deploy — happened without a human in the loop. Mid-run, a model-usage limit and then a credit ceiling were hit; the work simply resumed where it left off, picking up half-finished sites from their files and continuing the passes.

07 — DO IT YOURSELFThe recipe, condensed

1. One static site, many routes. No build step. Each piece self-contained so it can't break its neighbours and can be built in parallel.
2. Brief hard, brief specific. A real brand, real copy, an exact palette and font pairing, and one technique to prove — per site. Put the non-negotiables (responsive, a11y, zero errors) in one shared file.
3. Generate assets deliberately. Art-direct the prompts as carefully as the sites. Compress. Always have a graceful fallback so a slow API never blocks a build.
4. Close the loop with screenshots. Headless browser, read the images, critique adversarially, fix, repeat ≥3×. Capture the console; treat any error as a defect. This is where taste actually gets applied.
5. Deploy continuously. Ship a placeholder first to prove the pipeline, then redeploy as sites land. The link exists from minute one.

08 — FAQQuestions, answered directly

Who is Xavier Ting?

Xavier Ting is an AI and agentic-workflow builder and educator based in Singapore. He directed and curated XAVIER FABLE ×70 — he set the brief, supplied the single human login, and let the model do the rest. Connect with him on LinkedIn.

What is XAVIER FABLE ×70?

XAVIER FABLE ×70 is a public showcase of seventy fundamentally different websites — 3D shaders, generative art, working simulations, bilingual Chinese metaphysics tools, fictional shops — every one designed, written and coded end-to-end by the AI model Claude Fable 5, directed by Xavier Ting.

How were seventy websites built autonomously?

Parallel AI build agents each took one site from a shared brief, then ran at least three self-critique passes: screenshot the page headless, read the image, fix what looks wrong, repeat. Anything with real logic — orbital mechanics, feng shui flying stars, a transit timetable — was verified against known cases before shipping. The full method is documented above on this page.

What tools and models were used?

Claude Fable 5 (Anthropic), running in Claude Code, wrote every line of design, copy and code. GPT Image generated still imagery, Kling via fal.ai made the video loops, Puppeteer drove the screenshot-critique loop, and Netlify hosts the result. There is no build step — every page is hand-written HTML, CSS and vanilla JS.

Can AI really design good websites?

Yes — this site is the working evidence. The quality comes less from the model's first draft than from the loop around it: a hard, specific brief, then merciless screenshot-driven critique passes. That loop — not any single prompt — is what Xavier Ting teaches through this project.

How can I build something like this myself?

Follow the recipe in section 07: one static site with self-contained routes, a hard shared brief, parallel build agents, and a screenshot-critique loop of at least three passes per page. Everything on this page is the honest, complete method — nothing was left out.

STACK: hand-written HTML · CSS · vanilla JS · Three.js · GSAP · custom GLSL · WebAudio · WebGL fluid & fractal shaders · GPT Image (gpt-image-2) · Kling via fal.ai · Puppeteer · Netlify. No page builders, no templates, no component library.