UI Slicing — Design skill for Claude Code

🎯 UI Slicing — pixel-perfect UI replication from any reference image

An [Agent Skills](https://agentskills.io)-compatible skill + toolkit that turns a UI reference image — a Pinterest pin, a Dribbble shot, a SaaS screenshot, anything — into **pixel-faithful front-end code**, with a built-in **anti-AI-slop system** that keeps generated output from drifting into generic "AI look".

Works with: **pi · Claude Code · Codex · Gemini · ChatGPT** (any agent that can read a SKILL.md and run Python).

---

Why

AI-generated UI fails in two predictable ways:

1. Generic defaults — it builds what such a design usually looks like (Inter everywhere, purple gradients, 3-card grids) instead of what the image shows.
2. Lazy approximation — right structure, wrong numbers: spacing that "looks about right", colors that are close but not the color.

This skill attacks both: **measure, don't guess** and **the reference wins**.

What's inside

ui-slicing/
├── SKILL.md                          # the 6-step workflow the agent follows
├── references/
│   ├── analysis-protocol.md          # measuring technique: px → tokens, font identification + substitution table
│   └── anti-slop-checklist.md        # fidelity gates, injection tells, quality floor, self-critique
└── scripts/
    ├── fetch_reference.py            # download reference from URL (og:image → Pinterest/Dribbble/blog pages)
    ├── slice_reference.py            # analyze: dimensions, DPR, palette (hex + coverage), section detection; save zoomed band crops
    └── compare_screens.py            # side-by-side + diff heatmap + per-band diff score (fix worst bands first)

Requires [Pillow](https://pypi.org/project/Pillow/) for the scripts: `pip install Pillow`

Install

**pi** — copy to the skills directory (or register the folder):

cp -r ui-slicing ~/.pi/agent/skills/

**Claude Code / Codex** — same Agent Skills format:

cp -r ui-slicing ~/.claude/skills/    # or ~/.codex/skills/