Turn any screenshot into pixel-perfect front-end code.

Give an AI one image — a Pinterest pin, a Dribbble shot, a SaaS page. ui‑slicing measures it, extracts the tokens, and rebuilds it faithfully. No generic defaults. No invented numbers.

Get the skill Star on GitHub ★

Generated UI fails two ways.

Both come from the same root: the model builds from memory instead of from the image in front of it.

Generic defaults

It builds what such a design usually looks like — not what this image shows.

Inter everywherepurple gradients3-card gridscentered-everything heroesemoji iconstemplate navbounce easing

Lazy approximation

Right structure, wrong numbers — "close enough" instead of the color on screen.

close, not the color"looks about right" spacingone radius on everythinginvented metricsfonts swapped17px normalized to 16

ui‑slicing attacks both with two rules: measure, don't guess — and the reference wins, even when it uses purple, Inter, or three equal cards. Slop is inventing. Matching is the job.

Six steps. One pass.

Image in — index.html out. Analysis, tokens, and the complete runnable file happen in the same response. The user never asks twice.

Acquire

Local image or URL — the fetcher pulls Pinterest pins, Dribbble shots, any page via og:image.

python scripts/fetch_reference.py <url>

Analyze

Dimensions, DPR, palette coverage, section boundaries — then the agent reads every zoomed band crop before writing a line of code.

python scripts/slice_reference.py ref.png --bands

Tokens

Exact hex, identified fonts, measured spacing — locked into a token block before any component exists.

Build

One section at a time, each checked against its crop immediately. Placeholders keep exact aspect and treatment.

Verify

Screenshot vs reference: side-by-side, diff heatmap, per-band scores. Fix the worst bands first. Repeat.

python scripts/compare_screens.py ref.png out.png

Deliver

One self-contained index.html. Deviations and assumptions reported explicitly — never silently.

See the slice.

Every tag on the mock is a value measured from the image — then honored in the tokens.

pad 24 r 8 gap 16

FIG — reference.png · 1440×400 region · palette sampled · radius 8 · gap 16. Tags are measured, not remembered.

/* tokens — sampled from the image */
:root {
  --surface: #17181C;
  --card: #212329;
  --accent: #8FA4FF;
  --accent-2: #F79CE0;
  --radius: 8px;  /* measured */
  --gap: 16px;  /* measured */
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
}

The reference wins.

If the design uses three equal cards, purple, or a centered hero — replicate it exactly. Those are only "tells" when the AI invents them. Here they are the design. Never silently improve the reference.

Install once. Slice forever.

Generative AI — chat, no install

Gemini · ChatGPT · Claude · Copilot · MiniMax · Grokupload & ask

attach SKILL.md + references/ with your image, then: slice this UI

Coding agents & IDEs — skills directory

Cursor · Claude Code · Codex · Gemini CLI · Copilot · VS Code+ Antigravity · Cline · Kilo Code · Kimi · Windsurf · Roo · TRAE · Kiro

$ cp -r ui-slicing ~/.agents/skills/

Any agent that reads the Agent Skills standard works. Native dirs also fine — ~/.claude/skills · .cursor/skills · ~/.gemini/skills · ~/.codex/skills — check your tool's docs.

Agent harnesses — terminal-native

pi · OpenCode · Amp · Goose · OpenHandsand 40+ more

$ cp -r ui-slicing ~/.agents/skills/

CursorClaude CodeCodexGemini CLIGitHub CopilotVS CodeAntigravityClineKilo CodeKimiWindsurfRoo CodeTRAEKiroGooseAmpOpenCodepiJunieQodoTabnineFactory+ 25 more on agentskills.io

Scripts need Pillow — pip install Pillow. Full docs in the README.