Interfaces that look generated chosen.
A design discipline for Claude Code. It writes the direction down before any CSS, flags default-looking choices right after each edit, and sends the result to a critic that didn’t write it.
node · bash · python3 · never overwrites your files
or, as a Claude Code plugin
- 1
export function Hero() { - 2
return ( - 3
<section className="bg-gradient-to-r from-purple-600 to-indigo-500"> - 4
<h1 className="font-extrabold">Supercharge your workflow</h1> - 5
<span className="animate-pulse rounded-full" /> - 6
<button className="transition-all">Get started ✨</button> - 7
</section> - 8
) - 9
}
Chosen, not defaulted. Every visual choice traces to the direction.
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.
Left to its defaults
“make it look modern”
- Purple-to-blue gradient, a glowing orb, an indigo accent
- Character described as “clean, modern, seamless”
- Framework-default type, spacing and radius, unchosen
- transition: all on everything, no reduced-motion guard
- Invented metrics, testimonials and customer logos in the hero
With the kit
same model · same prompt
- A palette and type that come from the product’s own world
- Two or three concrete character words, written in DESIGN_MAP.md
- Every token names the line of the direction it serves
- Motion only where it carries meaning, with its guards
- Placeholders marked [PLACEHOLDER], never passed off as real
Decide first. Then write CSS.
Every piece of visual work walks the same four steps. The direction lives in DESIGN_MAP.md, and the session hook puts its Character and Signature back in front of the agent at the start of every session.
01
Brief
Read the project, then ask once for what it can’t find: the product, who it serves, the one job of the screen, real competitors, the assets that exist. Write a subject inventory of 8–12 things only this product has.
/design-brief
02
Direction
Five lines — Product, Character, World, Moments, Signature — and one idea sentence: “On this page, X becomes Y.” Then the token table. Then stop for your agreement.
/direction · /brand-method
03
Build
Implement against the map. Motion only where it carries meaning, with reduced-motion and hover guards. The scan hooks flag default-looking choices right after each edit.
/motion-craft · slop-scan · motion-gate
04
Audit
Screenshots at three widths, in both themes. Nine ordered passes from spacing to motion, then a fresh read by an agent that didn’t write the code.
/slop-audit · design-critic
They mark the line. You make the call.
A pattern can’t tell a reflex from a choice the direction made on purpose, so the scan hooks warn and never block. A file with a reason can opt out with design-kit-allow-slop.
session-startcontextSession start. Loads DESIGN_MAP.md and re-surfaces Character and Signature, or says the map is still the template.
prompt-routercontextEach prompt. Points “make it nicer” at the brief, and a visual task at the right skill.
slop-scanwarnsAfter an edit. Reflex gradients, transition-all, ambient pulse, heavy headings, emoji icons, hype copy. Names the file and line.
motion-gatewarnsAfter an edit. Animation with no reduced-motion guard in the file, and transitions on layout properties like width, top or margin.
branch-protectblocksBefore git. Pushes to main or master, and force-pushes.
block-dangerous-commandsblocksBefore a command. rm -rf on system paths, git reset --hard, git clean -fd, SQL TRUNCATE.
One skill per step, and a second read.
Invoke with /skill-name. The design-critic, interface-reviewer and motion-reviewer agents review work they didn’t write.
Brief & Direction
Why not just ask it to make it look good?
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, kept in front of the agent, and checked after every edit.
Why this kitDistilled from
- unslopslop signs, CC BY 4.0
- emilkowalski/skillsmotion craft
- taste-skilldirection before code
- Web Interface GuidelinesVercel
- brand-identity-skillbrand method
Write the direction first.
One command, from your product repo. Then run /design-brief in your next session and let it ask what it can’t find.
--dry-run shows every file it would touch