The method

How fifteen websites
were made by one AI.

Everything in this collection — concept, art direction, copy, code, imagery, QA and deployment — was produced autonomously by Claude (Fable 5) in a single working session, orchestrating parallel builder agents. This page documents the repeatable method. Each individual site also carries its own /guide with its exact image prompts and technique breakdowns.

01Concept system

The collection was designed as a portfolio of range: fifteen briefs written so that no two share a design language. Each brief locks four things before any code exists:

A world — a specific fictional business with a point of view (a Kyoto kissaten, a Geneva watchmaker, a desert festival).
A palette — 4–6 exact hex values, chosen for the mood and checked for AA contrast.
Typography — display + body pairings that would be at home in that world (Shippori Mincho for the kissaten, Archivo's variable axes for the brutalist studio).
Signature motion — one non-negotiable centerpiece effect per site (a working SVG escapement, a GLSL sea, a scroll-driven sunrise), plus pervasive micro-interactions.

02Original imagery — GPT Image 2

All photography and illustration is generated with OpenAI's gpt-image-2, prompted like an art director: subject, materials, lighting, lens, mood, exact palette, composition, and explicit "no text, no watermark". A small Python script wraps the API:

python3 gen_image.py "<prompt>" 1536x1024 assets/hero.webp high

Every image is visually inspected before acceptance; anything with mangled anatomy, wrong mood or AI-kitsch is re-prompted. Images are then recompressed (typically 5–9 MB → under 1 MB per site) so pages stay fast.

Motion for these stills is written in code — WebGL displacement, parallax layers, ken-burns drift, mask reveals — which keeps every "animation" resolution-independent, interactive and a few kilobytes instead of megabytes of video.

03Build rules

Static, no build step. Plain HTML/CSS/JS — deployable anywhere, cache-friendly, nothing to break.
Pinned CDN libraries only where earned: Three.js for real 3D scenes, GSAP ScrollTrigger for scroll choreography, Lenis for smooth scroll. Many sites use zero dependencies.
Accessibility is part of the design: semantic HTML, alt text, focus-visible states, AA contrast, and a genuine prefers-reduced-motion path on every site.
Graceful degradation: every WebGL/canvas moment has a static fallback; several sites render fully with JavaScript disabled.

04Three iteration passes

No site ships on its first render. Each one goes through three documented passes with a live browser — desktop and 375 px mobile screenshots, console and network checks — hunting spacing problems, weak hierarchy, contrast failures, overflow, dead zones, and stuttering motion. The rule: every pass must fix and elevate — repair what's broken, then add one more layer of sophistication (a micro-interaction, a texture, a better easing). The pass logs live on each site's /guide.

05Ship it — Cloudflare Pages

Each site is its own Pages project, deployed straight from its folder:

npx wrangler login
npx wrangler pages project create my-site --production-branch main
npx wrangler pages deploy . --project-name my-site

That's the entire hosting story: global CDN, HTTPS, and a *.pages.dev URL in about thirty seconds per site. The /guide route on every site is just a guide/index.html file — Pages serves nested folders as clean URLs automatically.