Section-research R&D · Pipeline explainer · v2.0 · 2026-06-10

One cheap mock, one signature, one autonomous build

The settled architecture: the client approves an inexpensive AI-generated full-page concept mock; from that signature, the pipeline derives, recovers, rebuilds, and verifies a faithful, web-native site with no human gates — and a graceful quality ladder that means it can degrade but never stall.

companions: SECTION-TAXONOMY.md · PIPELINE-AND-ARTIFACTS.md (decision registry) supersedes v1.1 (archived alongside) internal source map in the footer
The ten section archetypes
  • S1 Overlay canvas — full-bleed image with text & button floating on it (the hero)
  • S2 Strip band — thin band of small repeated units (stats, badges, logos)
  • S3 Split panel — image on one side, text block on the other
  • S4 Card grid — N repeating cards stamped from one template
  • S5 Data panel — menus, price lists, hours set in type
  • S6 Gallery & collage — image-dominant, from neat grid to freeform collage
  • S7 Editorial prose — long-form text; the design is the typography
  • S8 Interactive proxy — painted stand-in for a live widget (form, map, booking)
  • S9 Chrome — the site furniture: nav bar + footer (not the browser)
  • S10 Connective tissue — dividers, bleeds & stickers crossing section boundaries
Project vocabulary
  • page mock (U8a) — the one continuous full-page image the client approves; the consistency anchor
  • section mocks (U8b) — per-section high-res images derived from U8a crops; what recovery runs on
  • baked — rendered into the image's pixels (as opposed to live HTML)
  • untext / clean plate — remove the baked text from a mock; the text-free background that remains
  • greeked — deliberately illegible placeholder text; shows layout, not copy
  • tokens — the design system's named values: colors, type scale, spacing
  • SAFE fonts — from our 93-font study: fonts the image model bakes with faithful proportions
  • manifest — the machine-readable half of the contract: every section's archetype, elements, copy, fonts, bindings
  • conformance gate — the automatic check that everything declared actually appears in a generated image
  • bleed — artwork crossing a section boundary
Working definitions for this document. Full catalog, variants, and evidence: SECTION-TAXONOMY.md.

1The deal, settled

The business motion this pipeline serves: research a small business, generate one or several full-page design concepts cheaply, let the client approve the one they love, and then deliver a real website that is recognizably that design — built autonomously after the signature. The decision that shapes everything (settled 2026-06-10): the approval artifact is the cheap concept mock itself. We do not pre-build the site to win approval; heavier approval artifacts exist only as escalation options.

Three principles make that promise safe rather than reckless:

1 — Fidelity is not the scarce resource; web-nativeness is. Perfect visual fidelity is always available at the bottom of a fallback ladder: ship the approved pixels themselves as an image. What the bottom rung costs is responsiveness, editability, accessibility, and search visibility. So the engineering program buys web-nativeness without spending fidelity — and a failed step never blocks delivery, it just lands a section one rung lower (§6).

2 — The mock is authored, not received. We control what the client is ever shown: pages composed only from the ten archetypes, display type from the SAFE-font catalog, dense text greeked, painted widgets matching components we actually ship, bleeds declared as explicit elements — all checked by an automated pre-flight lint before a client sees anything. The client cannot approve what we cannot build.

3 — Declare, don't detect. Because we author every prompt, we already know each section's archetype, element inventory, exact copy, fonts, and data bindings. That travels in the manifest. The only things ever read from pixels are the model's design decisions — where it put things, how big, what color — and verification.

2The pipeline end-to-end

One human signature divides the pipeline. Everything before it is cheap to change; everything after it is autonomous and answers to the contract.

StageWhat happensKey artifactsGate
Research & dataCompile the business's reality: facts, hours, reviews, full menu (with extraction provenance), social themesfindings · menu data · business data
Asset curationCollect and describe real photos; record rights, quality, approved usesasset register
Product & copyPositioning, personality, anti-references; then exact per-section copy with case and length budgetsPRODUCT · copy brief + copy.yamlcopy lint + approval
Visual identityCheap direction probes FIRST (the direction gate), then toolkit lock — full investment only after a direction winsdirection brief · toolkitdirection + toolkit approval
Design systemTokens authored from product + toolkit: palette with computed contrast pairs, type scale, font passports (tier, corrective facts)DESIGN + tokens.jsontoken lint
Page programChoose sections from the archetype grammar; declare elements, data bindings, bleeds, proxies, target rungspage-plan.yaml (manifest skeleton)plan lint
Page mock (U8a)ONE continuous full-page image from templated prompts; rejection-sampled until it passes the contract lint floorpage mock + manifest@freeze + approval recordlint floor → client approval
Autonomous buildSection mocks gated against approved crops → recover (plate/crop/measure) → rebuild at the highest rung → verify per contract → derive mobile/accessibility/performanceU8b set · manifest@build · deviation ledgermachine gates only
ShipAssembled site + the faithfulness report (per-element results, every deviation classed and justified, every fallback flagged)site · faithfulness reportreport = ship gate

3The contract chain

At concept grade the client signs a cheap image, not a built site — so "faithful to the mock" has to be defined in layers. The freeze freezes intent; machines derive the rest and answer for it.

The contract lint floor — what must be true before a concept mock is client-shown

Headline-tier copy correct and legible · body-tier approximately right · dense text greeked · all planned sections present, in order, with recognizable archetype silhouettes · palette within token tolerance · painted widgets match components we actually deliver · and a structured approval record attached (mock fingerprint, manifest version, grade, the disclosure set) so the autonomous gates have something machine-readable to check changes against.

Approval grades — an escalation dial, not a default

GradeArtifact the client approvesWhen
concept (the settled default)The raw page mock, passing the lint floor, with disclosuresFunnel variants and the normal approval; contract = design intent
standard+ the composite assembled from the section mocks (full element conformance)When intent-level contracting isn't enough; approved pixels = recovery sources exactly
hardened+ rebuilt renders (real fonts over recovered backgrounds) for the riskiest sectionsDemanding clients; sections where font/plate divergence is most visible
pre-builtThe fully built pageRare: final pre-launch sign-off

The grades form a ladder of how much of the downstream build is pulled in front of the freeze. Rule: harden the winner, not the candidates — exploration variants stay concept-grade; only the chosen direction ever pays for more.

Accepted variation — the deviation classes and the rulebook

ClassExamplesAutonomous disposition
0 — invisibleanti-aliasing, sub-threshold offsetsauto-accept
1 — immaterialline re-breaks in the same zone, ≤1–2% spacing drift, true-font rendering vs the baked approximationauto-accept + log
2 — material but necessaryreal menu longer than the greeked mock; live map ≠ painted map; contrast raised to the accessibility minimum; mobile reflowauto-accept only against the disclosures pre-authorized at approval
3 — design-changingdifferent artwork, palette shift, layout change, missing elementauto-fail → drop a rung. Never silently shipped; a rung-C failure parks the section for async review
The deviation rulebook makes "well justified" machine-checkable. A pre-enumerated list of allowed transformations — each with a trigger, a bound, and its design justification (kill a widow, refit to the reserved zone within ±N%, lift contrast within a color budget, extend data per the approved pattern, reflow per archetype) — so every accepted change cites a rule in the ledger instead of improvising judgment. Anything not covered by a rule is Class 3 by definition.
1artwork identity changes
2copy changes
3brand color shifts
4display type changes
5macro proportions
6micro spacing & line breaks

The fidelity budget, spent top-down: what a non-designer client notices in a side-by-side. A working hypothesis the pilot calibrates — it's why a changed hero illustration is a hard failure while a re-broken body line is a logged non-event.

4The element thread

The worry this answers: the build depends on per-section element data that must survive the trip through a generative image model. The resolution: build data never rides the image channel. Prompts carry only what the image needs (strings to paint, style language, composition); everything the build needs rides the manifest, losslessly. The only payload crossing the lossy channel is painted strings + geometry — both verifiable on the far side. Every element gets a stable id (sectionId.role) that is the join key across the whole pipeline:

CheckpointWhereMechanical check
borncopy.yaml — exact string, case, rolecopy lint (length budgets vs archetype + font)
declaredpage-plan.yaml — section + archetype + zoneplan lint
boundthe prompt, via a versioned templateprompt lint: every declared string appears in the prompt text — completeness by construction
paintedthe generated mockconformance gate: each element found, copy matched, exactly once, legible, in its zone — plus an inverse sweep rejecting any text we did NOT declare
frozen / measuredthe manifest — declared fields at freeze, measured geometry added from accepted section mocksassembly check
builta DOM node carrying its element idstructural diff: manifest ids ↔ DOM ids
reportedthe faithfulness report, one row per idship gate

Because the conformance check is closed-set — we know exactly which strings to look for — it is automatable and reliable (our detector ensemble achieved zero role errors precisely because copy was known). And because it's automatic, generation becomes rejection sampling: roll, check, re-roll to a cap; only conforming candidates ever reach a human or a downstream stage. Reliability cost becomes API cost. Honest limits: heavily stylized display lettering degrades the checker (the lint floor bounds how stylized baked text may get), and model-invented non-text additions need a vision-model "anything unexpected?" sweep.

5Artifacts & single source of truth

The survey of our prior runs found the pipeline structured at both ends — research data and build specs — but pure prose in the middle, so every hex value and copy string crossed by hand. The fix: each prose document keeps its rationale and gains a small structured twin carrying its values; the manifest is then an assembly of twins, never an authored document. The test: if assembling the manifest requires reading prose, an upstream artifact is missing structure.

ArtifactKindFeeds
findings · menu · business data · reviewsdata layercopy facts, data-bound sections (menus, hours), testimonial quotes
asset registerdata layerreal-photo sourcing (galleries, story), rights & approved uses
PRODUCT (prose, by design)prosevoice, personality → prompt language, judgment
copy brief + copy.yamlprose + twinexact strings/case/budgets → prompts, manifest, build text
DESIGN + tokens.jsonprose + twinpalette/type/spacing + font passports → prompts, shell CSS, theming, color checks in verify
shape brief + page-plan.yamlprose + twinthe manifest skeleton: archetypes, elements, bindings, bleeds, proxies, target rungs
manifest (assembled)assemblythe machine half of the contract; completed progressively (declared at freeze → measured at build)
generation log + kept assetsrecordevery image's template-version + bindings + conditioning → reproducibility, drift telemetry
approval record · deviation ledger · faithfulness report · run staterecordthe contract event, every accepted difference with its rule, the ship gate, cross-session continuity
The single-source rule: every literal in a prompt, a mock, or a stylesheet traces to exactly one artifact — hex → tokens, copy string → copy file, fact → research data, image → asset/generation id. If a hex code or a headline was typed into a prompt by hand, that is a pipeline bug.

Prompts are versioned instruments. Prompt structure measurably changes output (describing letterforms beyond the font name worsens fidelity; verbose layout language degrades it; the word "website" conjures fake browser chrome). So template phrasing is frozen and versioned; only typed slots vary, bound from the twins; each run carries a style lexicon settled once at toolkit time and reused verbatim; any phrasing change goes through a matrix-test harness; and the generation log ties outcomes to template versions — every production run quietly extends the eval data.

6Autonomy & predictability

"Fully autonomous after approval" is a design constraint, not an aspiration: no human gates after the freeze. Two mechanisms make that safe.

The judge. With no human between freeze and ship, the whole-page reviewer is a vision model benchmarked for the job (our tests: Gemini-class models read spatial layout at roughly 0.2% mean error vs roughly 5% for Claude-class). It must pass a human-agreement benchmark before it may gate alone — that calibration is pilot work, not an assumption.

Predictability without seeds. The default image model exposes no seed or determinism control (verified against current docs; the one Google model line that had seeds is being retired). What we use instead: pin every exposed parameter (model version, aspect, the newly-found resolution setting — up to 4K, which also solves crop resolution) and log full config per generation · a golden canary battery — a fixed probe suite re-run before big jobs to catch silent provider drift ("same battery → same score distribution" replaces "same seed → same pixels") · conditioning on the approved anchor for composition stability · N-sample statistics everywhere a single roll would lie · and deterministic local operations over generative ones within their envelope — local inpainting handles flat backgrounds, while structured artwork behind text uses an AI-erased plate composited into the original only inside the text-ink masks, keeping every pixel outside the text identical to the approved image by construction.

7Per-archetype playbook

How each archetype plays out under the contract chain: its recovery→rebuild recipe, the rung it can ship at as of today's capabilities, what most threatens perceived faithfulness, and the skills that move it up the ladder. Definitions: SECTION-TAXONOMY.md.

ArchetypeContractRecovery → rebuildRung now → targetTop faithfulness risksUnlocking skills
S1 overlay canvaspixelclean plate + element detect & measure → overlay rebuild in container-relative unitsA (proven) → A⁺background damage during text removal · busy-background contrast · font metricsbeyond the fixed three elements (headline / body / CTA button) · automated contrast check · fine-position read tolerance (open item)
S2 strip bandstructureminimal structure read → tokens + small repeatA near-term≈ none (flat background, authored copy)pilot vehicle for the whole gate/ledger machinery
S3 split panelstructure (image panel: pixel)panel boundary + crop → flow text block + imageB → Acrop resolution · image aspect honored (condense copy, don't distort the image) · text re-breakscrop + resolution path · flow rebuild · panel read
S4 card gridstructurerepeat read + per-cell assets → template × NB → Acell-asset resolution · template uniformityrepetition inference · asset-first authoring · template rebuild
S5 data panelstructure + semantic datastructure read → bind the structured menu dataA by hand → A automatedapproved length ≠ real data (expectations, covered by disclosure)structure read · data binding + length policy
S6 gallery & collagepixel images in structural gridgrid read + crop ×N (freeform: cutouts) → grid CSS + framesgrid ≈ A · freeform Barrangement match · frame chrome in CSS · overlapping images (freeform)multi-crop · frame reconstruction · segmentation (late wave)
S7 editorialstructuretype-system read → deep flow rebuildAtype rhythm & measure fidelitytype-scale extraction
S8 interactive proxysemanticmanifest-declared → component swapmust ship live (cannot ship baked at any rung)painted widget ≠ shipped componentcomponent library · paint-what-we-ship rule · masked verify
S9 chromestructurecontent + token read; logo as assetA nowlogo crispness (raster vs vector)conventions template · logo asset path
S10 connectivepixeldeclared bleeds → baked-cut + transparent-underlap assembly · sticker cutoutsB by designseam alignment · mobile simplificationbleed authoring rules · seam QC

Gallery variants referenced above: G1 uniform grid · G2 masonry/asymmetric · G3 framed/styled cells · G4 filmstrip/carousel · G5 freeform overlapping collage. Build-out inventory (27 skills: 5 exist · 8 partial · 14 new; tier 1 = the three structured twins + the lint family + the lock protocol) lives in PIPELINE-AND-ARTIFACTS.md.

8Prove it first — the pilot's validation set

Wave 1 pilots the architecture, not a new archetype: one page (hero + bands), concept-grade approval simulated, then a fully autonomous run to a built page — measuring the seven things the concept-grade bet depends on:

#MeasurementWhy it's load-bearing
1U8a contract lint floor + conformance on real page mocksdefines what may be client-shown as a contract
2Section-mock fidelity gate vs human perceived-samenessgenerative ops now run post-freeze with no human backstop — the single most important calibration
3Detect/measure envelopes, incl. the fine-position tolerance (currently an open research item)an autonomous rebuild can't ask a human to eyeball alignment
4Rebuild + per-contract verify end-to-endthe proven hero engine, exercised inside the new gate machinery
5Perceptual-judge agreement with human client-notice judgmentsthe judge is the binding reviewer; it must earn that role
6Element round-trip integrity (% of manifest elements reaching the DOM through every checkpoint)the headline number for the whole element thread
7Page-mock geometry: aspect × resolution × section count → crop adequacysets the U8a spec; 4K output should make section crops genuinely usable anchors

Then the capability waves proceed as before — split panels, data panels, card grids (the small-business 80%), then galleries and chrome, then editorial and the component library for forms, then the freeform frontier — each wave inheriting the same working definition of "faithful" instead of inventing its own.

9Where decisions stand

The canonical, always-current registry lives in PIPELINE-AND-ARTIFACTS.md §7, alongside tolerance numbers to be set empirically in the pilot.