# Image To UI

> Turn any UI reference image into a pixel-faithful 1:1 clone and then a FULLY FUNCTIONAL app — landing pages, dashboards, mobile app UIs, mac apps, hero sections. Use whenever the user provides a screenshot/image/mockup of an interface and wants it cloned, recreated, or built ("clone this", "build this UI", "make this real", image + "do this one"). Measure-first pipeline with mandatory two-agent adversarial verification after every build, an approval gate, and a design-system-extraction method that extrapolates whole coherent apps from a single screen.

- Skill: `ceorkm/image-to-ui` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add ceorkm/image-to-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ceorkm/image-to-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: ceorkm (https://skillmd.com/u/ceorkm)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ceorkm/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.