Image To UI

Image to UI

Battle-tested across landing pages, dense trading dashboards, mobile apps, macOS apps, and photographic heroes — every build shipped 1:1 AND fully functional. The flow is fixed; the detail lives in references/. Read the reference file for the phase you are in BEFORE doing that phase — they contain the measured numbers, code patterns, and agent briefs that make the difference between "close" and "1:1".

The flow (fixed — do not reorder)

1. MEASURE the image → references/01-measurement.md Scale factor, ink-extent typography, font ID with weight verification, color grammar, photographic techniques. Nothing is built until ANALYSIS.md holds the numbers.
2. BUILD the 1:1 clone — SOLO. You build it yourself; never delegate the build to a background agent. → references/02-build-engines.md for the engine matching the category (dashboard / mobile / landing / mac app / hero) and every layout gotcha.
3. VERIFY — mandatory, automatic. Run your own diff loop until clean, then ALWAYS spawn TWO adversarial verification agents in parallel (pixel-fidelity + product/structure) against the original image. Adjudicate every finding against the artifact (~1 in 8 is false), apply the real ones by hand, re-verify. → references/03-verification.md has the diff tooling and the verbatim agent briefs.
4. PRESENT to the user and STOP. Side-by-side image vs render + the diff numbers. The functional phase does not start until the user approves the clone. The user's eyeball verdict overrides any metric — if they say "done", stop verifying; if they say something is off, the metric missed it — find what they saw.
5. MAKE IT FULLY FUNCTIONAL. Freeze the regression baseline first; the approved pixels are sacred. Extract the design system from the reference and extrapolate every unseen page/view with the recombination method — this is how ONE screenshot becomes a complete coherent app. → references/04-functional.md (the core method — read it in full).
6. VERIFY the functional build the same way: assertion suite + regression gate, then two adversarial reviewers (one functional, one design-consistency vs the approved screen as source of truth). Apply, re-gate, deliver.

Non-negotiable standards (apply to every phase)

• UI must FILL the browser window. Never letterboxed, never a floating panel on a backdrop. If the reference is a presentation shot (app on a decorative canvas), clone the PANEL CONTENT full-bleed and diff against the panel crop, not the canvas.
• Real Unsplash photos only; human faces via ?fit=facearea&facepad=2.2-2.5. Every image at

  =2x its largest rendered size, q>=85. Encode MOOD adjectives in image searches.

• Icons: Phosphor web font (Lucide acceptable). NEVER emojis, NEVER hand-drawn icon SVGs. Charts/sparklines traced from the reference as SVG are data, not icons — those are fine.
• Density: no big empty cards, no dead space, ever.
• Reference fidelity beats copy sense: transcribe the reference's text verbatim, typos included (offer corrections only after approval).
• Every control does something real — no dead taps. A control that lies is worse than no control. Honest copy for demo features ("canned replies, not live AI").
• Zero console errors, zero failed requests — verified, not assumed.
• Single self-contained index.html, no build step, served via python3 -m http.server.

Output layout (per project)

<project>/index.html      single self-contained build
<project>/ANALYSIS.md     every measurement, written incrementally DURING phase 1-2
<project>/PROGRESS.md     phase state + exact resume instructions, updated per section
<project>/measure/        crops, renders, diffs, baselines, verification scripts

PROGRESS.md discipline is not optional: sessions die without warning; a successor (or you, after a crash) must be able to resume from disk alone. THE DISK IS THE TRUTH.