The recipe
How Claude Fable 5 built three showcase websites, start to finish, on its own.
The three sites in Website Templates were designed, coded, tested, and deployed by Anthropic's Claude Fable 5 running autonomously in Claude Code. This page is the exact workflow, written so you can hand it to Claude and get your own.
01Write a brief per site, and make them fight
One page each: a fictional brand, a palette with hex values, a type system (two or three faces, at least one variable font), the signature technique, and a section map. The rule that matters: each site must be a different world. Dark 3D luxury, light print-brutalism, chromatic dreamscape. If two briefs could swap fonts without anyone noticing, rewrite one.
02Generate assets before you code
Imagery came from GPT-Image 2, six to eight images per world, each prompt ending in the same style suffix so the set hangs together ("cinematic dreamlike matte painting, soft volumetric light, atmospheric haze, painterly texture, wide composition, no text"). The hero of SOMNIUM is one of those stills animated into a 10-second loop with an image-to-video model (Gemini), then compressed with ffmpeg. Everything ships as webp at 1600px and mp4 under 1.5 MB.
Faces are risky, landscapes are safe. Duotone or black-and-white prompts hide model artifacts and match a print palette for free.
03Hand-code the build. No component libraries.
Each site is a plain Vite project, vanilla JavaScript, four files that matter:
- three.js + custom GLSL for the showpiece: a procedural brilliant-cut gem with physical dispersion (VESPER), an fbm-noise dissolve between textures (SOMNIUM).
- GSAP ScrollTrigger + Lenis for scroll choreography: pinned acts, scrubbed reveals, panel swaps driven by scroll position.
- Variable fonts, self-hosted (Fontshare and Google woff2s): kinetic width/weight axes respond to cursor proximity on RUPTURA's hero glyphs.
- Craft details: custom cursors, magnetic buttons, film grain overlays, preloaders,
prefers-reduced-motionfallbacks, WebGL fallback posters.
04Iterate at least three times, with screenshots
A build you have not seen is not designed. Claude ran a Playwright screenshot harness: load the page headless, scroll to nine positions, wait for animations to settle, capture. Review every frame at 1440×900 and 390×844, write down every flaw, fix, re-sweep. Real bugs this loop caught: a starfield rendering as gray squares, a gem twice its intended size (frame-rate-dependent lerp), split-text that could not wrap on mobile, missing word spacing in a scrubbed paragraph.
node shoot.js http://localhost:5181/ ./shots vesper 1440 900
node shoot.js http://localhost:5181/ ./shots vesper-mobile 390 84405Make it discoverable (SEO / GEO / AEO)
Every site ships:
robots.txtthat explicitly welcomes AI crawlers (GPTBot, ClaudeBot, PerplexityBot…)sitemap.xmlandllms.txt— a plain-markdown cheat sheet for language models- JSON-LD (
WebSite+CreativeWork), unique titles and descriptions, canonical URLs - Semantic HTML: one
h1, landmarks, labeled sections
06Deploy
vite build, then wrangler pages deploy dist --project-name fable-vesper.
Each site is its own Cloudflare Pages project with a custom subdomain attached via the Pages API.
Vercel works identically if that is your stack.
07The prompt to reproduce this
Paste something like this into Claude Code with Claude Fable 5 (or the most capable model available to you):
Build me a showcase website for [fictional brand]. Write a one-page
design brief first: palette, type system (one variable font), one
signature WebGL or typographic technique, section map. Then build it
as a Vite + vanilla JS site with self-hosted fonts, GSAP ScrollTrigger,
and Lenis. Generate any imagery with an image model using one shared
style suffix. After building, do three fine-toothed-comb iteration
passes: screenshot every section at desktop and mobile sizes, list
every design flaw, fix them all, and re-verify. Ship with robots.txt
(AI crawlers allowed), sitemap.xml, llms.txt, JSON-LD, and unique
metadata. Then deploy and hand me the live URL.The three iteration passes are the part people skip. They are also the part that separates "generated a page" from "designed a site."