How this was made — and how to do it yourself

The setup

Everything ran locally through Claude Code with three external services: Netlify (hosting, via a personal access token), the OpenAI API (GPT Image 2 photography), and Higgsfield's MCP server (Nano Banana Pro photography). The only human inputs were the original prompt — 25 sites, a few required subjects, total creative freedom — and API keys.

1 · One shared brief, written once

Before any site existed, a single BRIEF.md set the ground rules for every builder:

• Hard floor: static HTML/CSS/JS only, responsive to 375px, keyboard focus visible, prefers-reduced-motion respected, zero console errors, no placeholder copy — ever.
• Anti-default blacklist: the three looks AI design collapses into (cream + serif + terracotta; near-black + one acid accent; broadsheet hairlines) were banned outright, along with fake numbered feature cards and purple SaaS gradients.
• One signature element per site — spend all the boldness in one place, keep everything else disciplined.

2 · Twenty-five locked art directions

Each site got a concept entry in a shared sites.json: subject, audience, the page's single job, a named palette, a typography direction, the signature element, and the technical approach. Writing these centrally is what keeps 25 parallel builds from converging on one look — variety is designed, not hoped for.

3 · Parallel builder agents

A workflow fanned out one builder agent per site (8 running concurrently), each instructed to read the brief and its concept, then build. Deploys were deliberately not agent work — a 60-line Python script zip-deploys to Netlify's API and polls until live. Spend agent tokens on design, not plumbing.

4 · Three screenshot-driven iteration passes

The heart of the quality. A shared Playwright tool serves each site locally and captures desktop (1440px), mobile (390px), and mid-scroll states, plus console errors and horizontal-overflow checks. Each builder had to run it, read the actual images, and fix what it saw — three times, with an escalating standard:

1. Correctness & composition — layout breaks, spacing rhythm, contrast, errors.
2. Elevation — deepen the signature element, refine the type scale, add one micro-interaction that rewards attention.
3. Taste — the Chanel rule: remove one accessory. Then mobile, then reduced motion, then ship.

5 · Imagery: generate it, or refuse it

Nineteen of the twenty-five draw every visual in code — GLSL aurora curtains, a 4Hz Swiss lever escapement in SVG, seeded generative artworks, verlet physics. The six photographic sites ran two models head-to-head:

• GPT Image 2 (OpenAI API): the Manhattan brokerage, the Kyoto kaiseki house, the Burgundy estate.
• Nano Banana Pro (via Higgsfield MCP): the Brooklyn brownstone brokerage, the fashion editorial, the open-hearth restaurant, the festival.

The two New York real-estate sites are the controlled comparison — same category, same brief style, different model. Judge for yourself: Gramercy & Vane vs Stoop & Lintel.

Prompt craft matters more than the model: specify lens, light, time of day, and film stock, and forbid text in the image. Convert PNGs to ~82-quality JPEG before shipping.

6 · Deploy and verify

# create site (once), then zip-deploy — that's the whole pipeline
curl -X POST https://api.netlify.com/api/v1/sites \
  -H "Authorization: Bearer $NETLIFY_TOKEN" -d '{"name":"my-site"}'
zip -qr site.zip . && curl -X POST \
  https://api.netlify.com/api/v1/sites/$SITE_ID/deploys \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -H "Content-Type: application/zip" --data-binary @site.zip

Two practical notes: Netlify rate-limits bursts of site creation (back off ~2 minutes on a 429 and space deploys ~45s apart), and a fresh site can 404 for a few seconds while its subdomain propagates — retry the verification, don't panic. A guide at guide/index.html serves automatically at /guide.

The encore

After the first twenty-five shipped, seven more were commissioned: two more New York brokerages — Queens (Nano Banana Pro) vs the Five Towns (GPT Image 2), a second controlled face-off — an auto-body atelier, two houses of jewelry (pearl and gold), and two rooms of live music (a candlelit listening series and a rock and roll ballroom). Same brief, same three-pass protocol, same bar. They're indexed on the main page under "the encore."

Do this yourself

1. Write a brief with a quality floor and an explicit blacklist of the looks you're tired of seeing.
2. Lock a concept per site — subject, audience, palette, type, one signature element — before any code.
3. Ask Claude to build it static, no frameworks, real copy throughout.
4. Demand screenshot-driven iteration: capture desktop, mobile, and mid-scroll; make the model read its own screenshots and critique them; three passes minimum.
5. Generate photography only where the concept truly needs it; write photographic prompts like a photographer.
6. Deploy by script, verify every route returns 200, and make every site explain itself at /guide.

← Back to all twenty-five