Twenty-one websites, one barbershop,
zero invented facts.

Step 01 — Study the real place

Seven photos, one logo, and a phone number read off the sign

The input was a folder: storefront, interior, portraits of both barbers, one candid of the head barber cutting a kid’s hair, and the shop’s logo. Every image was analyzed before any design work — the building’s brick and awning, the interior’s mirrors and wood floor, the barbers’ actual faces, the signage.

Facts were extracted, not invented: the phone number was verified by cropping the storefront photo at full resolution and reading the box sign. Anything the photos and brief couldn’t support — founding dates, awards, exact opening hours — was banned from all ten sites.

Step 02 — One shared image pool

Identity-faithful edits, anonymous gaps

All ten sites draw from one 14-image pool so they differ only in design language. Generated with fal.ai’s GPT Image 2 in one batched script (4 concurrent, retries):

• Edit mode with the real photos as input for everything depicting the actual shop — storefront (day and dusk), interior, both portraits. Prompts demanded identity: same face, same building, same signage text, same room.
• Plain generation for anonymous stock-style detail shots (razor, fade, tools, chair, lather, pole, scissors) — deliberately generic, never depicting the real shop or barbers.

// the edit call, per image (concurrency 4, 3 retries)
POST https://fal.run/openai/gpt-image-2/edit
{
  "prompt": "…same face, same building, same signage text…",
  "image_urls": ["data:image/jpeg;base64,…"],   // the real photo(s)
  "image_size": { "width": 1536, "height": 1024 },
  "quality": "high", "output_format": "webp"
}

Every output was then reviewed against the source photos. The review round caught three defects and re-ran those jobs with corrected prompts:

Approved masters were compressed with sharp to 1600px/q80 plus an 800px variant — the whole pool ships at ~2.6 MB for 27 files.

Step 03 — One spec as the contract

Grounded facts, shared copy, ten direction briefs

A single SPEC.md is the source of truth for every builder: the verified facts, one pricing table, a pool of twelve testimonials written strictly from real review themes, the image manifest, engineering constraints (static, self-contained, responsive at 390px, reduced-motion safe, semantic HTML, AA body contrast) — and ten one-paragraph direction briefs, each a fundamentally different design language with fixed URL slugs.

The ten: vintage print built on the real logo · neo-noir gold · Swiss type poster · real-time 3D chrome · warm minimal · cut-and-paste zine · thermal receipt · aurora animation · blueprint drafting set · editorial magazine.

Step 04 — Ten parallel builders

Each site: one agent, three iteration passes, screenshots it must actually look at

Ten builder agents (forks of the same model, inheriting the full context) ran in parallel, each owning one slug and one port. The rule that mattered most: a pass isn’t reading your own code — it’s looking at pixels. Each pass = serve the site, take full-page screenshots at 1440×900 and 390×844 with Playwright, inspect them, then fix what you see:

• Pass 1 — structure & fidelity: every required section present, facts correct, images resolving, no overflow, nav working.
• Pass 2 — design critique: hierarchy, spacing rhythm, palette discipline, type scale, breakpoints.
• Pass 3 — complexify & polish: the detail layer — motion choreography, texture, hover states — then re-shoot and confirm no regressions.

A recurring class of bug the builders caught themselves: scroll-reveal animations that hide content by default render blank pages in full-page captures and for no-JS visitors. The pattern that survived: content visible by default, JS only adds the entrance.

Step 05 — Independent review

The director re-verifies everything with fresh eyes

Every finished site was re-screenshotted and inspected by the orchestrating agent — not the builder — the same way an art director reviews a designer’s work. This pass caught what self-review missed: a desktop-only horizontal overflow (a 150vw decorative ribbon widened the page to 1803px; the builder had only verified mobile), and two “blank image” reports that turned out to be capture artifacts, confirmed harmless by probing the live DOM (img.complete, computed opacity, box size) instead of trusting the screenshot.

Step 06 — The fleet probe

Ten sites, one objective pass/fail sweep

Before deploy, a headless probe visited all ten at both viewports and asserted the things screenshots can’t prove at a glance:

// per site, at 1440×900 and 390×844
scrollWidth === clientWidth          // zero horizontal overflow
pageerror events === 0               // zero JS exceptions
responses ≥ 400 === 0                // zero broken assets
title, meta description present
body includes the real phone number
footer credits Fable + links to the hub

Result: 10/10 green on every check.

Step 07 — Deploy

One bundle, one command

A small assembler copies the hub to the root, each site to its slug, the image pool to /assets/camp-ave/, and this guide to /guide/ — then the whole bundle ships as a single direct upload:

node tools/build-bundle.mjs
npx wrangler pages deploy bundle --project-name=fable-showcase --branch=main

Post-deploy, every route is re-verified live (status, content-type, spot screenshots) before calling it done. Cloudflare Pages serves everything as static files — no build step, no server.

Step 08 — Wave two: the SEO build-out

The two favorites, iterated eleven ways

After reviewing the ten, the client picked two favorites — the letterpress original and the editorial journal — and asked for five new iterations of each, plus one more take on the midnight noir. Wave two is a different exercise: not ten unrelated worlds, but controlled variation inside two design families, with every site grown from a design study into a 10–13 section local-SEO homepage.

A second spec (SPEC-V2.md) added the contract wave one didn’t have:

• SEO head: brand-first title (“Camp Ave Barbershop — Barber Shop in Merrick, NY…”), ≤160-char meta description, canonical URL, OG tags, exactly one keyworded h1.
• Barbershop JSON-LD with areaServed (ten Merrick-area neighborhoods), the true 4.9/159 aggregate rating, town-only address — and no invented hours.
• “Where the regulars come from”: a neighborhood chart on every site, drawn in that site’s own design language (engraved bars, graphics-desk figure, gold ledger…) and footnoted “Illustrative distribution — demo data.”
• Areas-we-serve blurbs for all ten neighborhoods, each naming a real service keyword.
• A fixed nav contract: Services · Process · The Shop · Reviews · Areas · FAQ, with a “Our Prices / Pricelist / Our Rates” CTA — and no booking anything: the shop is walk-ins only, so a booking form would be a lie.

The tiny 400px logo also had to survive header duty. An ESRGAN 4× upscale lost to the file’s alpha channel (black-speckle artifacts); the winner was a GPT Image 2 edit-mode recreation at 1536px — “recreate this exact logo as crisp flat artwork” with the original as reference — then the platform’s background-removal pass for true transparency, verified on both light and dark grounds.

Same workflow otherwise: eleven parallel builders, three looked-at-the-pixels passes each, an upgraded fleet probe (now asserting the SEO contract — schema fields, neighborhood coverage, nav labels, no booking language — alongside overflow/errors/broken assets), independent review, one deploy.

The rules that kept it honest

Constraints are what make the demonstration credible

• Reproduce it: assets → facts → image pool → spec → parallel builds → independent review → probe → deploy.
• Three passes minimum, and every pass looks at rendered pixels, not code.
• Verify with instruments, not vibes — probes for overflow/errors, DOM checks before believing a screenshot.