mockup-to-code

name

mockup-to-code

description

Convert static web-design mockup images (AI-generated or hand-made comp/カンプ, single image or a multi-frame section set) into high-fidelity, responsive HTML/CSS. Three modes: pixel-clone, production, hybrid (default for AI comps — regenerate photo/background rasters text-free and UI-free, rebuild type/UI in HTML/CSS, support verified generated lettering decals for non-structural handwritten decoration, reconstruct the visual language). Measurement-driven (manifest, box-diff repair, crop-pair evidence, axis-min review) with a hard LAYOUT LAW: content is built in flow/Grid/Flex inside responsive containers — measured rects are acceptance targets, never absolute coordinates. Includes multi-frame LP fidelity gradients, page composition, FV look-and-tune, and degraded-mode ladders. Trigger when the user wants a design image coded into a web page with high visual fidelity: 「この画像をHTML/CSSにして」「カンプをコーディングして」 「デザイン画像を再現して」 "code this mockup", "implement this design image".

mockup-to-code

Reverse-engineer a static mockup into HTML/CSS through measurement, not eyeballing — and into a web document, not a screenshot. You interpret meaning and form hypotheses; scripts measure pixels; the browser answers with DOMRects; box diff tells you what to fix; your eyes judge what rendered.

Detailed procedures live in references/ — each phase below names its file. Read the named reference before running that phase; this file alone is not enough to execute a phase correctly.

The few things agents skip — and must not. The rest of this file is detail for when you need it; these are the difference between a real run and theater:

• Isolate WORK_ROOT; normalize every comp before measuring.
• Photo-led rasters are regenerated, not faked or dropped: declare mediaClass: photo, generate to a file before any fallback, never reclassify a subject to svg/UI or ship a contaminated crop (rules 6, 13, 23–25).
• Run asset_preflight.py after photo asset decisions and before CSS. A crop that avoids fused text/UI by narrowing the scene still fails when it changes the comp's environment or focal composition (rule 27).
• Classify each visible device by owner and anchor before CSS: container content, hero-bound layers, viewport-fixed/global UI, edge typography, generated lettering decal, decoration, or background (rules 7, 16).
• Freeze every display block's source letterform class (gothic/mincho/rounded/ display) before the font bake-off; never buy a bbox pass by distorting text with CSS transform. For Japanese, mixed-script, vertical, or display-critical work, invoke the typography skill and bind its run ledger/report into the manifest before CSS (rules 22, 28).
• When source-signature grain, halftone, scanlines, RGB offset, erosion, distress, or banded glitch must survive, set rasterTexture.required:true explicitly and invoke raster-texture-reconstruction. Bind its ready pre-CSS and pass completion report; never ship source pixels or rasterize structural copy (rule 55).
• Start hybrid multi-frame manifests from templates/manifest.hybrid-multiframe.min.json, then run contract_doctor.py --phase pre-css until it passes. This catches malformed geometry, ownership, page-composition, and generated-asset evidence before CSS exists.
• Ask the pipeline what is legally next: mockup_pipeline.py --phase next returns one action, detects stale pre-CSS receipts, and caps runs that built below-FV DOM before FV convergence.
• data-el + manifest on every important element; box_diff, not your eyes, is the repair signal (rules 2–4, 8, 9).
• Flow/Grid/Flex only — measured rects are targets, never coordinates (rule 16).
• FV passes before any below-FV CSS (rule 19); the verdict is computed by completion_gate.py and reported verbatim (rules 18, 20).
• Run artifact_check.py before completion_gate.py: sparse crop pairs, missing bbox ledger, unchecked generated assets, or blended WEB/fidelity scoring means needs_work even when visual-check passes. The artifact report hash-binds the manifest/box/scores it audited; stale or swapped evidence cannot reach complete (rule 26).
• A clean documentElement.scrollWidth is not responsive proof. The widths sweep checks body width, root overflow suppression, meaningful-element visible ratios, and same-document fragments; overflow-x:hidden/clip cannot conceal missing content (rule 31).
• Multi-frame comps require executable pageComposition section/seam contracts. Run page_flow_check.py after rendering; a stack of repeated frame-height slabs, undeclared clipping, or unevidenced seams cannot reach complete (rule 30).
• When the source explicitly asks for a seamless FV-to-next handoff or scroll invitation, route seamless-section-waves and declare an art-directed-bridge: outgoing environment, opaque destination-owned field, one connective motif, and an incoming next-section preview. A readable wave crop alone is not continuity proof (rule 43).
• Inventory fidelity is machine-shaped: every detailInventory row maps to a completion disposition, and a different reviewer judges crop pairs without seeing implementation rationale. The lower score controls (rules 33–34).
• Generated card/object rasters declare who owns the frame, background, padding, radius, and bleed. A raster panel inside a CSS card is a double-frame defect.
• Freeze each critical raster's source topology before generation: a section field becomes a copy-space-aware full-field plate; a floating object/diagram/collage becomes a real alpha scene including its shadow. Do not use a framed opaque fallback.
• Large section waves use measured bezier geometry or an off-canvas true-circle arc. A convenient stretched ellipse is blocked without source evidence.
• Critical Japanese headings declare viewport-specific line strings and orphan fragments; a stranded particle or inflection such as て is a hard failure.

Hard rules (non-negotiable)

1. Do not estimate when you can measure (vision-only px only on priority: low, tagged estimated).
2. Hypothesis first, then measure that ROI — never measure globally.
3. Box diff is the repair signal; pixel diff is final QA only.
4. Every repaired element carries a data-el bound in the manifest.
5. Structural copy never ships as generated glyphs — headings, CTA, nav, body, legal and content labels are HTML/CSS text — but non-structural expressive lettering (speech bubbles, signatures, decorative callouts) may ship as a verified transparent raster/SVG lettering-decal with exact content proof. DO chase typographic treatment for HTML text (scale steps, tracking, weight, serif accents, mixed-script optical sizing).
6. Never ship a photo with baked-in text/design — regenerate, stock-replace, or placeholder+ask. No concealment.
7. Decide ownership, anchors, and layering before styling (placement ledger + layer plan precede CSS for FV/overlaps).
8. Fix the FIRST failing element in document order, then re-render.
9. Measure the comp BEFORE implementing; DOMRect-derived numbers are never fidelity evidence.
10. The comp's quality lives in its details — every visible device is inventoried and dispositioned.
11. Reproduce the motif, not a category stand-in (an outline 「止」 is that kanji, not "some shapes").
12. Additions never occlude comp devices; no self-granted waivers.
13. A visual's medium is part of the design — photo-class content stays raster; vector drawing only for decorative geometry, flat UI, icons. Do not synthesize a photo/illustration background by drawing SVG/CSS/Canvas/Pillow/HTML and saving it as PNG; that is a prohibited fake asset, not generated.
14. Verdicts are judged on rendered pixels via saved crop pairs, never on CSS/DOM inspection.
15. Account for the whole frame — the ground/environment is a device with its own inventory row.
16. LAYOUT LAW: content lives in flow/Grid/Flex; position:absolute only for declared decorative/overlay layers.
17. Degraded modes are earned (recorded failed attempt) and reported — never silently assumed.
18. Self-scores run ~3 points high — back every score with a crop-pair path.
19. FV FIRST: below-FV implementation starts only after the FV gate passes (5.5 tune + fv-critical boxes + impression metrics) — measured-but-unrepaired is the skill's central failure.
20. The completion verdict is computed (completion_gate.py), never narrated — the report headline carries its status; prose may explain a , never promote it to 完了/complete.

Generated background gate

Before implementing any section whose comp uses a photo/illustration background, write its asset plan into the manifest and follow rules 23–25. The default for a contaminated raster is regenerate a clean plate (full decision tree in manifest-and-assets.md):

• Classify the full intended photo field before cropping. Do not inspect only the rectangle you hope to ship. Set sourceFrameHasForegroundOverlap against the whole environment shown by the comp. If true, a narrower clean crop is not a clean source; use a separate clean layer, regenerate, or replace.
• Attempt generation first. A raster generator is usually reachable here (cockpit gen-image, a Codex/Firefly image tool, the user's stock account) — invoke one to a file. "I couldn't verify the output" is not grounds to skip the attempt: generate, then verify the file on disk and copy it into "$WORK_ROOT"/assets/ with generatedAsset {generator, prompt, workspacePath}. A chat preview or tool response is not an asset until the path exists.
• Issue the receipt before generation. Save the exact prompt, then run prompt_receipt.py issue; it refuses an already-existing output. After the generator writes the asset, run prompt_receipt.py adopt and bind that receipt in generatedAsset.generationReceipt. A prompt file newer than the output, or a changed prompt/output hash, blocks pre-CSS.
• Bind the exact prompt and inputs. Store one UTF-8 exact-prompt file per adopted critical asset and record its SHA-256. generatedAsset.prompt must equal that file, not a retrospective summary. Every reference records path, hash, semantic role, and whether it was actually sent to the generator.
• Make copy space measurable. A full-frame FV plate declares canonical copySpace ROIs, subjectZones, and desktop/mobile responsiveFocalPoints. Prompt prose such as "left 40% clear" is not proof; the ROIs must stay in bounds and copy space may not intersect focal subjects.
• Choose full-field scene vs transparent scene before generation. A coupled hero scene that creates the section world uses full_field_scene_plate and owns the section edges. A paper object, exploded-layer diagram, device group, or collage that floats on the Web field uses transparent_scene, preserving coupled objects and soft shadows inside alpha while excluding the generator's outer white/paper rectangle.
• Only a recorded, failed attempt earns placeholder (a plain neutral block + blocker note). Never draw a "photo-like" scene in SVG/CSS/Canvas/Pillow and call it generated, and never reclassify the subject to svg/ui-mock/css with invented foreground UI (rule 24) — the field escape that shipped a hero as a fake "decision dashboard" and a testimonial as an empty panel. Gate G8 catches missing/reclassified photo media; G9 catches invalid source/crop decisions.

"$SKILL_DIR/scripts/skill-pack-python" "$SKILL_DIR/scripts/asset_preflight.py" "$WORK_ROOT/manifest.json" \
  --work-root "$WORK_ROOT" --out "$WORK_ROOT/reports/asset-preflight.json"

Layout law (rule 16, expanded)

Measured rects tempt you to copy left/top/width into absolute positioning: the numbers match at 1440 and the build still fails at every other width (dead gutter, no reflow). A run that did this scored 30/100 as web design at 29/29 boxes.

• Text, headings, buttons, cards, forms, in-section navigation, CTA groups → normal document flow, CSS Grid, or Flexbox. Two-column areas are grid/flex with breakpoints, never fixed left/right coordinates. Global site chrome (fixed header nav, persistent vertical logo/title, viewport-edge labels) may be fixed/sticky only when the Phase 1 ownership ledger declares it as viewport/global UI and the mobile release behavior is written down.
• Sections use a responsive container: width: min(var(--content-max), 100% - 2*var(--gutter)); margin-inline: auto;.
• position: absolute/fixed/sticky is allowed only for: layer-plan-declared overlays (background photo layers, overlay gradients), decorative layers (outline watermark type, accent bands, curves), badges pinned to a parent, viewport/global chrome, and true comp overlaps — each declared in the manifest with matching positioning and a layerRole. visual-check audits computed CSS against this (layout-law violation).
• Measured rects are acceptance targets, not implementation instructions. Reach the target bbox at 1440 by flow means (container width, grid tracks, gaps, paddings, font metrics). If it matches at 1440 but creates dead space, overflow, or broken reflow at 320/390/768/1024/1440/1728, it fails the --widths sweep (Phase 7).
• Text bboxes follow the same law: do not apply CSS transforms because a glyph bbox is tall/narrow. A transformed glyph can pass DOMRect geometry while its strokes, counters, baseline, and following-flow clearance are visibly wrong.

Fidelity modes (decide first, record in manifest mode)

mode	goal	primary signal	typical input
pixel-clone	reproduce ONE authoritative comp exactly	box diff → masked pixel diff	hand-made comp, site screenshot
production	clean production code informed by the comp	box diff on key elements, relaxed	comp + real content/CMS reality
hybrid	reconstruct the comp's visual language	layer plan + box diff + visual-check + section review	AI-generated comp (the usual case)

Hybrid is the default for AI comps: photo, type and decoration are fused into one raster — you decompose: background plates are regenerated, replaced, or extracted text-free/UI-free; ALL type and UI are rebuilt in HTML/CSS; stacking is designed explicitly. When text or UI overlaps the photo, the clean background plate comes first, then the foreground DOM layers. Success is judged on FV impression, typographic hierarchy, photo use, layering, responsive integrity, and whether the comp's small devices survived.

Hybrid changes the medium, never the bar. It licenses rebuilding in different material (HTML type, regenerated photos), not a looser resemblance. Flow-first recomposition (reordering / taller sections) waives cross-section y-position only; every element's scale, density, tone, and internal layout are judged at full strictness. "Hybrid residual" prose is not a license to narrate a box-4/23 build as complete — completion_gate.py computes the verdict.

Multiple reference images — which case are you in?

• Mood boards / alt comps = visual-language sources: sample from them, register with use: "visual-language", reproduce only the primary comp.
• A sectioned comp set (ref-01…NN, one image per section of ONE page) = multi-frame hybrid: register each with use: "section-comp" + section, normalize ALL frames to one width, set per-element sourceImage. QA is scoped per frame with the fidelity gradient:
  • FV frame: near-pixel-strict — judged like a poster comp, full box-diff depth, masked pixel diff.
  • Below-FV frames: essence-first, flow-first — reproduce each frame's essence ledger and internal hierarchy; heights, margins and seams belong to the executable pageComposition plan (Phase 4.5). Frame height is a one-sided density floor (shorter = collapsed = fail; taller = fine), not a target copied into every section. The frames are separately-generated 16:9 slides — their letterbox geometry is a generator artifact, not a design decision. Chasing it yields "half- faithful everywhere, compelling nowhere".

Pipeline (phases × modes × required artifacts)

Environment first: bash "$SKILL_DIR/scripts/setup_env.sh" → prints SKILL_DIR, script inventory, browser/python status, RECOMMENDED MODE. $SKILL_DIR = this skill's directory (scripts are NOT in your project). $WORK_ROOT = output root, default work/; isolate fresh runs (references/fallbacks.md).

For hybrid multi-frame work, initialize once with the unified runner; it refuses to overwrite an existing run and copies all machine-shaped starters:

"$SKILL_DIR/scripts/skill-pack-python" "$SKILL_DIR/scripts/mockup_pipeline.py" "$WORK_ROOT" --phase init
# at every hand-off between phases:
"$SKILL_DIR/scripts/skill-pack-python" "$SKILL_DIR/scripts/mockup_pipeline.py" "$WORK_ROOT" --phase next
# after measurements, asset decisions, inventory, and specialist reports:
"$SKILL_DIR/scripts/skill-pack-python" "$SKILL_DIR/scripts/mockup_pipeline.py" "$WORK_ROOT" --phase pre-css

pre-css must report implementationAllowed: true before Phase 5 (pass normally; needs_work only for an asset-policy-earned placeholder). Run the doctor again with --phase completion after scores exist; it is a shape/policy gate before, not a replacement for, artifact_check.py and completion_gate.py.

#	phase	reference	pixel-clone	production	hybrid
0	normalize frames	measurement.md	req	req	req (every frame)
1	hypotheses: ownership/anchor ledger, essence, machine-readable detail inventory (+ground row), lettering-vs-HTML copy split, type spec with separate visual-line/run counts, typography specialist report, explicit raster-texture routing decision, bake-off	measurement.md	important els	key els	req
2	measure bboxes/colors	measurement.md	every important el	key els	FV + section-critical
3	manifest (+positioning, media class, asset strategy)	manifest-and-assets.md	full	full	full (sparse bboxes OK)
3.25	contract doctor (shape, ownership, FV line counts, page/photo contract)	manifest-and-assets.md	req	req	req before CSS
3.5	asset preflight (source overlap, composition, on-disk proof)	manifest-and-assets.md	req for photo/illustration	req	req before CSS
4	layer plan (+photo edges, decoration craft)	composition.md	where overlap	where overlap	req for FV + overlaps
4.5	executable page composition plan (pageComposition: section strategies, edge ownership, seams; art-directed continuity when requested)	composition.md	—	—	req multi-frame
4.75	conditional motion plan (motion.required, max two motifs, settled/reduced/JS-off contract)	composition.md	when requested	when requested	when requested
5	implement (layout law; FV first)	composition.md	—	—	—
5.5	FV look-and-tune (eyes before boxes)	composition.md	optional

Minimum artifact checklist (hybrid multi-frame) — a missing artifact is a skipped phase: normalized frames in $WORK_ROOT/mockups/; reports/hypotheses.md (ownership/anchor ledger, asset plan, lettering-vs-HTML copy split, essence ledgers, detail inventories ending in the ground row, type specs with separate visual-line + script/word-run counts, optical-size ratios, bake-off record, and typography specialist report); manifest.json; reports/contract-doctor.json with status: pass; reports/asset-preflight.json with implementationAllowed: true; background/foreground decomposition + clean-raster asset review + lettering-decal asset review; layer-plan + page-composition blocks; reports/fv-tune/ screenshots; desktop+mobile renders from the first loop iteration; --section-relative box report; visual-check + widths-sweep JSON (including 320px and semantic visible-ratio metrics); reports/page-flow.json plus a readable crop/screenshot for every seam; hash-bound seam-continuity/v1 plus desktop/mobile crops and seam-pixel-check/v1 for every explicitly requested art-directed bridge; hash-bound raster-texture-report/v1 plus desktop/mobile texture crop pairs when rasterTexture.required=true; reports/crops/ pairs; reports/section-review.md (FV gate, dispositions with pair paths, hex pairs, axis-min scores, additions table, page-flow review, impression-metrics table, copy proof, top-5 visible gaps, separate WEB品質 and カンプ再現度 self-scores); machine-bound detailInventory dispositions; reviewProvenance with a different crop-only reviewer; FV masked pixel diff with comparison coverage; reports/artifact-check.json with input hash receipts and freshness checks; reports/section-scores.json + reports/completion-verdict.json (Phase 10).

Specialist routing (invoke only when the condition is present)

Run the deterministic routing matrix in references/specialist-routing.md. The default specialist chain is inventory → typography/raster texture/photo direction → implementation → whitespace/motion → media delivery/interaction → independent visual QA, but every step is conditional. Hash-bind machine reports through specialistReports; do not invoke a specialist merely because it exists.

When the environment caps you, spend verification in the evidence-ladder order (references/fallbacks.md): FV crop pairs → FV box diff + pixel diff → mobile FV → per-section screenshots + crop pairs → full box loop → widths sweep. Honest partial evidence + a blocked note beats retrying a dead browser.

The design-quality bar (why Phase 5.5 and 7 exist)

Box convergence cannot see beauty. The rules that carry the "as a website" score live in composition.md (device craft) and qa.md (impression metrics); the flags to remember:

• Photo integration — an environment photo never ends in a hard rectangle: bleed / mask-gradient it into the adjacent field, or frame it only if the comp does. Declare each edge.
• Ownership and anchors — fixed headers, viewport-edge vertical logos, hero-bottom watermarks, photo-bound callouts and container content are different implementation objects; preserve the relationship, not just the 1440px rect.
• Decoration craft — a curve is an SVG bezier with the comp's sweep, glass is blur+translucency+edge light. A straight line for a curve is missing.
• Typography integrity — the source letterform class wins before bbox size; a gothic comp rebuilt in mincho or a non-uniformly scaled heading fails even when box diff is 100%.
• Layer topology — masks/veils clip to the frame that owns them; staggered cards keep their offsets; object photos tone-merge with card fields; CTA portraits use a full plate or plate+cutout when the comp does.
• Look first, measure second — Phase 5.5 tunes the FV visually (2–4 iterations) before the box loop trues up geometry.
• Impression is measured, not vibed — four FV numbers (lockup scale, mixed- script optical ratios, photo-tone luminance, repeated-device scale+clip) feed impression-metrics.json and gate G6, catching a lockup that shrank, AI gone optically small, a photo gone dark, cards grown 1.4× and clipped.
• The page is judged as a page — seams, motif continuity, whitespace rhythm (Phase 4.5 contract, Phase 7 computed page-flow review). Four 8/10 sections can compose a 5/10 page; G10 prevents that page from being called complete.
• A bridge is not a divider — for explicit continuity requests, judge the outgoing field, opaque destination surface, connective motif, and incoming preview in one desktop and one mobile crop. Exact destination color is a pixel contract; the feeling of continuation is a two-section composition.

Browser discipline

ONE browser at a time — parallel launches SIGKILL each other under memory pressure. render/visual-check hold a launch lock and retry; if they still fail, walk the transport ladder (do NOT loop retries) and earn any degraded mode with a recorded failure. Full ladder + no-OpenCV policy: references/fallbacks.md.

Command reference

All scripts under $SKILL_DIR/scripts/; outputs under $WORK_ROOT.

Script	Purpose
setup_env.sh	preflight: SKILL_DIR, script inventory, browser/python, recommended mode
normalize_image.py in.png --width 1440 --out $WORK_ROOT/mockup.png	canonical coordinate space
profile.py img --axis y [--roi x,y,w,h]	section bands / container edges
snap_bbox.py img --bbox x,y,w,h [--radius 16]	refine hypothesis bboxes (cv2)
sample_color.py img --roi x,y,w,h [--exclude …]	measured color tokens
crop_asset.py img --roi x,y,w,h --out f.png	candidate crop + pixel contamination check; never authorizes adoption; use --purpose evidence-crop only for rendered QA strips
crop_pair.py --comp f --comp-roi … --build f --build-roi … --out pair.png [--zoom 2]	side-by-side verdict evidence (Pillow-only OK)
typography_geometry.py --manifest manifest.json --source f --source-roi … --build f --build-roi … --element-id id --out report.json	hash-bound stdlib-only source/build ink bounds, density, every adjacent line advance, and line-start-angle gate; --out must match posterGeometry.reportPath; texture/glitch excluded
mockup_pipeline.py $WORK_ROOT --phase init|pre-css|completion	non-overwriting setup and ordered gate orchestration; writes reports/pipeline-summary.json
mockup_pipeline.py $WORK_ROOT --phase next	return one allowed action; reject stale receipts, premature below-FV DOM, missing FV tune/impression, and non-pass completion artifacts
prompt_receipt.py issue|adopt …	prove the exact prompt existed before generator output and bind prompt/output hashes
split_sprite.py <transparent-master> --count N --names … --out-dir … --report …	split generated icon sheets by measured alpha clusters; do not assume equal-width cells; block clipped/mixed cut edges
contract_doctor.py $WORK_ROOT --phase pre-css|completion --out report	stdlib contract preflight: blocks malformed bbox/score containers, global ownership drift, FV line-count freedom, incomplete page/photo contracts before downstream tracebacks

Failure modes (top; more in each reference)

Symptom	Fix
Content absolutely-positioned to match rects; dead right gutter off-1440	Layout law: rebuild in flow/grid; rects are targets, not coordinates; run --widths sweep
responsive-check passes only after adding overflow-x:hidden/clip	root overflow is concealing content; inspect responsive-visible-ratio, fix fixed tracks/breakpoints, and rerun 320–1728 widths
Text/UI-contaminated raster crop reused as a background	rule 23: regenerate or replace a clean background plate; rebuild text/cards/charts as DOM layers; crop reuse is missing
Adopted crop is text-free only because it excludes the overlapped half of the room/scene	rule 27: set sourceFrameHasForegroundOverlap: true; the crop is forbidden unless a separate clean layered source exists. Regenerate/replace the full composition; G9 blocks completion.
Structural copy shipped as a generated lettering image	rule 5: only non-structural decorative callouts/signatures can be lettering-decal; headings/CTA/nav/body/legal stay HTML/CSS
Fixed header or vertical logo stuffed into hero flow to match the FV	Phase 1 ownership ledger: classify as viewport-fixed/global UI, manifest positioning: "fixed" or sticky, then preserve responsive behavior
Photo-led region reclassified to svg/UI or dropped, then scored "adapted"	rules 24–25: declare it mediaClass: photo, attempt generation to a file first; a removed/reclassified photographic subject is missing, not adapted; gate G8 catches it
Generator available but never invoked ("couldn't verify output" → skipped)	rule 25: run the raster generator to a file, then verify; only a recorded failed attempt earns stock/placeholder
Prompt file was written after image generation	run prompt_receipt.py issue before the generator and adopt after output; retrospective summaries and stale receipts block pre-CSS
Agent draws a photo/illustration with SVG/CSS/Canvas/Pillow and saves PNG	invalid fake asset — delete/reject it; use image generator / licensed stock / owned clean asset / placeholder+ask
Many elements fail diff at once

Per-phase failure modes (hard-rectangle photos, curves→lines, y-waived children, device-scale clip, mood shift, no-OpenCV, dirty work/, webfont stalls) live in the reference file for their phase — composition.md, qa.md, fallbacks.md.

Files

• references/measurement.md — Phases 0–2 (normalize, hypotheses, inventory, type spec, bake-off, measuring)
• references/manifest-and-assets.md — Phases 3/3.5 (manifest contract, fonts, media-class asset policy, pre-CSS gate)
• references/composition.md — Phases 4/4.5/5/5.5 (layers, photo edges, decoration craft, page plan, FV tune)
• references/qa.md — Phases 6–9 (box loop, visual-check, section review, verdicts & scoring, pixel diff, responsive)
• references/fallbacks.md — setup, WORK_ROOT isolation, no-OpenCV, browser ladder, evidence ladder, completion report
• references/specialist-routing.md — conditional specialist triggers, ordering, report contracts, and skip rules
• references/fv-poster-example.md — worked hybrid FV example
• templates/ — base.css, poster-typography.css, hypotheses.md, section-review.md, photo-asset-review.md, manifest.hybrid-multiframe.min.json, section-scores.min.json
• schemas/element_manifest.schema.json — manifest contract (incl. positioning, layerRole, qaPriority, asset fields)
• VALIDATION.md — per-version field feedback and test evidence