Build · Review · Deslop
Design craft for Claude Code with the eye of a product designer with 16 years of experience.
Every finding cites a rule and fixes with a number, not vibes.
Backed by a searchable base of 504 design practices and 40 style recipes.
Install · Modes · Commands · Engine
Your AI can build UI. It cannot yet judge UI. It ships output that is correct (it renders, it aligns, colors do not clash) and uncrafted (nothing was decided, the hierarchy is flat, it looks like every other app). Pixel Surgeon closes that gap. It designs from intent instead of defaults, reviews against the bar a design lead would actually hold, and cuts the tells that read as AI generated. And because it sits on a knowledge base of 504 practices, it never hand waves. It names the rule and gives you the number.
Most UIs do not need a redesign. They need surgery.
One prompt: "make this dashboard look premium". Same data, same structure. Both builds live in demo/ so you can read every change.
Build. Start from intent, not defaults. Who is this human, what verb must they complete, how should it feel? Explore the product world, name a signature, hold every token against the intent. The bar: if another AI would produce the same output, it failed.
Operate. Point it at a screenshot, a live URL, a React component, or a Figma frame. It runs a 12 point exam and returns a diagnosis, worst first, with exact value fixes. Then it operates on your code in severity order, one clean diff at a time.
Deslop. A fast, diff scoped pass that removes the signatures: flat hierarchy, no focal point, monotone layout, timid palettes, generic tokens, defaulted type, missing states. Make it stop looking generated.
| Command | What it does |
|---|---|
/pixel-surgeon:design-review |
Strict craft and hierarchy review across six lenses, severity scored, with an approval bar. Judges by default, rebuilds only when you ask. |
/pixel-surgeon:design-deslop |
Two passes: squint the render, then scan the diff. Strips AI slop without changing behavior. |
Generic AI design advice fails because it has no taste and no priorities. Pixel Surgeon ships both, plus the evidence:
- 504 practices across 25 categories, mined from real design books and distilled into a searchable engine
- 40 style recipes for dark mode and soft UI with exact shadow, elevation, and contrast values
- Severity ranking so a report opens with what actually makes the UI look amateur, not alphabetical trivia
- Memory. Save decisions to
.pixel-surgeon/system.md, then every future session holds to them - Reference files the skill reads on demand: the craft moves with exact numbers, and the full catalog of AI slop tells
- A BM25 search engine in pure Python, zero dependencies
/plugin marketplace add AnimaEcho/pixel-surgeon
/plugin install pixel-surgeonOr manually:
git clone https://github.com/AnimaEcho/pixel-surgeon.git
cp -r pixel-surgeon/.claude/skills/pixel-surgeon your-project/.claude/skills/
cp pixel-surgeon/.claude/commands/*.md your-project/.claude/commands/Requires Python 3, nothing else. Built for Claude Code.
Talk to Claude Code:
- "Build me a settings page for a calm reading app"
- "Review this page, it looks off" (attach a screenshot)
- "Audit https://myapp.com and fix what you find"
- "Make this dashboard look premium"
- "This looks AI generated, clean it up before we ship"
Query it directly any time:
python3 .claude/skills/pixel-surgeon/scripts/surgeon.py "button hierarchy hover states"
python3 .claude/skills/pixel-surgeon/scripts/surgeon.py --audit -c typography
python3 .claude/skills/pixel-surgeon/scripts/surgeon.py "dark mode shadows" --stylesThe 12 point exam covers hierarchy, typography, color and contrast, spacing and alignment, buttons, forms, cards and lists, navigation, icons and imagery, depth and effects, states and feedback, and accessibility.
Built by Carlos Lastres. Distilled from 16 years of product design practice.
If it saved your UI, star the repo so it can save someone else's. ⭐
MIT License.