How a model designed and built twenty-five websites

01One brief, total freedom

The human input was a single prompt: build 25 fundamentally different websites that demonstrate design capability, iterate on each at least three times, document the process on a /guide route and ship the result to Netlify. No wireframes, no mood boards, no feedback loop. The instruction that mattered most was "each website must be fundamentally different", because it forbids the one thing that makes bulk site generation easy: a shared template.

02Concept before code

The first artifact was not code but a plan: 25 named concepts, each defined by four things chosen to never overlap.

• A fictional client with a soul. A perfume house from deep space. A film-noir jazz club. A Swiss design archive covering 1957 to 1983. Real design starts from a subject, not from a layout.
• One signature technique. Raymarched nebula shaders, particle DNA helices, L-system gardens that grow on scroll, variable-font choreography, CSS 3D paper folds, a working OKLCH color instrument. One per site, never reused.
• An exclusive palette. Each site owns its colors. Phosphor green never appears next to acid yellow twice.
• An exclusive type pairing. Twenty-five different combinations from the Google Fonts library, chosen for the subject: Marcellus for the jazz club, Fraunces for the terrain studio, Shippori Mincho for the ink artist.

A template produces consistency. A constraint against templates produces range. Range is what taste looks like at scale.

03Hard rules that every site obeys

Freedom in the concept, discipline in the engineering. Every site had to satisfy the same contract:

• Fully static and self-contained. Plain HTML, CSS and JavaScript. No build step, no framework. Libraries only from a CDN allowlist (three.js and GSAP where earned).
• WebGL always ships with a graceful fallback for devices that refuse a context.
• Responsive at 1440px and 375px with zero horizontal overflow.
• prefers-reduced-motion is honored: heavy animation stops or simplifies.
• Animation loops pause when the tab is hidden.
• Real copy, written for the fictional client. No lorem ipsum anywhere.
• Every site carries its own /guide route documenting its concept, techniques and iteration log.

04Parallel build, single taste

The 25 sites were built by parallel instances of the same model, each holding the full plan and the contract above, each owning one directory. Working in parallel is not just a speed trick: it prevents the drift that happens when one long session unconsciously starts reusing its own earlier decisions. Each site was conceived fresh against the plan, not against its siblings.

05Three iteration passes, by rule

No site was accepted on its first draft. Each one went through three named critique passes, and the findings are logged on that site's own guide page.

1. The design critique. Contrast arithmetic, hierarchy, spacing rhythm, type scale, letter-spacing at display sizes, color harmony. The question: what would a senior designer flag in the first thirty seconds?
2. The deepening pass. Where can the piece become richer without becoming louder? Better easing curves, added micro-interactions, more layered hover and focus states, more atmosphere in the details.
3. The fine comb. Mobile layout, reduced motion, performance (requestAnimationFrame discipline, tab-blur pauses), accessibility (focus-visible states, aria labels, alt text, 4.5:1 body contrast) and edge cases like WebGL context loss.

After the per-site passes, every page was opened in a headless browser at desktop and mobile sizes, screenshotted, inspected and fixed where reality disagreed with intention. Code review is necessary. Looking at the thing is non-negotiable.

06Ship

The whole showcase is one directory of static files, deployed in a single command:

netlify deploy --prod --dir public

The hub lives at /, every site at /<name>/, every per-site guide at /<name>/guide/. Static files, aggressive simplicity, no servers to break.

07Reproduce this yourself

1. Write a brief that demands difference, not volume. "25 sites" is easy. "25 sites that share nothing" is the real assignment.
2. Make the model write the concept plan first, as a separate deliverable: client, technique, palette, typography per site. Reject overlap before any code exists.
3. Give it a hard engineering contract like the one in section 03, including the guide route and the iteration passes. Rules you do not write down will not survive scale.
4. Let builds run in parallel, one folder per site, then verify visually with screenshots at two viewport widths. Never accept "the code looks right" as evidence.
5. Deploy the folder to any static host. Netlify makes it one command.

The tools were Claude Fable 5 running in Claude Code, a plain filesystem, a headless browser for verification and the Netlify CLI. Nothing else.