How it was built & deployed

Twenty worlds,
one recipe.

Twenty landing pages, each a different aesthetic, all hand-built and art-directed by Claude Fable 5. No page builders, no stock templates. Here is exactly how they were made — and the commands to host your own on Netlify.

01 Direction before pixels

Each site began with one committed aesthetic — porcelain minimalism, editorial brutalism, retro riviera, an industrial exploded-view — plus a distinctive type pairing and one signature technique: a WebGL shader, canvas physics, scroll choreography, or kinetic type. Constraint breeds character; the fastest way to look like a template is to try to please everyone.

02 Generate the imagery

Hero and texture art was generated with OpenAI's gpt-image-2, each prompt written to match the site's exact palette, light and lens, then compressed to web-weight JPGs. Everything below 500 KB, heroes below 900 KB, so pages stay fast.

# generate, then compress
node gen-image.mjs --out=hero.png --size=1536x1024 --quality=high "a prompt matching the art direction"
sips -s format jpeg -s formatOptions 82 hero.png --out hero.jpg

03 Build by hand

One index.html per site — inline CSS/JS or local files, with CDN libraries like three.js and GSAP where they earn their weight. The rules were the same for every build:

1. Custom controls only — no naked OS dropdowns; every home-service site carries a working quote form.
2. Mobile is sacred — flawless at 390 px, zero horizontal overflow.
3. Respect motion preferences — prefers-reduced-motion stills every animation.
4. Never fake facts — the businesses are fictional; the copy is honest and specific.

04 Iterate three times

After the first build, each page was screenshotted at desktop and mobile widths with a headless browser (Playwright), and the screenshots were read back and critiqued like an art director — spacing rhythm, type hierarchy, colour balance, image integration, animation timing. Then improved. Three full passes per site, with console errors driven to zero. Most of the character you see was won in passes two and three, not the first draft.

05 Deploy to Netlify — do it yourself

These are static files, so there's no build step. Install the CLI, sign in once, and deploy any folder that contains an index.html:

# 1 — install the CLI and sign in (opens your browser once)
npm install -g netlify-cli
netlify login

# 2 — from a folder with index.html, deploy to production.
#     --site-name creates the site on first run; re-runs reuse it.
netlify deploy --prod --dir . --site-name my-unique-site-name

# → live at https://my-unique-site-name.netlify.app

The quote forms need no backend: Netlify Forms detects data-netlify="true" at deploy and collects every submission automatically, viewable in the site's Forms tab. Point a custom domain at it under Domain management, and you're done.

· The stack, in full