Why This Kit
Why a direction file, scan hooks and independent critics beat asking Claude Code to make it look good.
Out of the box, Claude Code builds interfaces that work. They also look like every other AI-built page, and that is the problem.
A broken layout gets fixed because someone sees it. A default layout ships, because nothing is technically wrong with it. Slop is the sum of choices nobody made.
What goes wrong without it
Left to its defaults, the agent will:
- Reach for a purple-to-blue gradient, a glowing orb and an indigo accent
- Describe the product as "clean, modern, seamless" and design to that
- Use the framework's default type, spacing and radius without deciding anything
- Animate everything, with
transition: alland no reduced-motion guard - Invent metrics, testimonials and customer logos to fill a hero
None of it is wrong on its own. Together it is a page a competitor could ship unchanged.
Why "make it look good" isn't enough
A vague aesthetic ask gets the model's average taste, and the model's average taste is the template. "Make it premium" produces the same page for a law firm and a skate shop. What changes the output is a decision written down before the CSS: who this is for, what world it borrows from, the one detail it owns.
The kit makes that decision a file and keeps it in front of the agent:
| Concern | Left to the prompt | With this kit |
|---|---|---|
| No direction | "make it modern" | /design-brief and /direction fill DESIGN_MAP.md, then stop for approval |
| Direction drifts mid-session | hope it holds | session-start re-surfaces Character and Signature every session |
Reflex palette, transition-all, hype copy | catch it in review | slop-scan flags the line right after the edit |
| Motion without a reduced-motion guard | rarely noticed | motion-gate flags it right after the edit |
| Reviewing your own work | anchored on the code just written | design-critic reads the rendered screen fresh |
The hooks warn; they never block. A pattern can't tell a reflex from a choice the direction made on purpose, so the final call stays with you and the map.
What you get
- CLAUDE.md: the cardinal rule Chosen, Not Defaulted and the Brief → Direction → Build → Audit loop, read at every session boot.
- DESIGN_MAP.md: Product, Character, World, Moments, Signature, Tokens, Competitors and Don'ts. Every token names the line it serves.
- 6 hooks:
session-start,prompt-router,slop-scan,motion-gate,branch-protect,block-dangerous-commands. - 8 skills:
/design-brief,/direction,/brand-method,/motion-craft,/slop-audit,/interface-check,/motion-review,/stress-ui. - 3 review agents:
design-critic,interface-reviewer,motion-reviewer, all on Opus. - 6 reference docs: slop signs, direction, tokens, motion, interface guidelines, brand identity.
It stays yours
Everything is plain markdown and shell. The installer never overwrites your overlay (DESIGN_MAP.md, CLAUDE.project.md, linear.md), merges its hooks into an existing .claude/settings.json, and uninstall.sh removes only what it installed. MIT, except three files adapted from unslop that stay CC BY 4.0; see Sources.