Design Tools & Skills
Reusable tools and AI workflows for exploring ideas, reviewing interfaces, and taking designs into code.
- In use; Super Design Skills v0.5.1
- Claude Code plugins, skills and hooks, Node
Two Claude Code plugins that run around UI work. Super Design Skills turns a product design method into skills: framing, options, critique, design QA, spec and handoff. unslop is an audit for AI-built UI that sets constraints before a screen is built and checks it afterwards.
The problem
An agent builds a screen in minutes and then grades its own work. The parts of design that happen before and after the pixels get skipped, and the review is an impression. I wanted the method I use as a designer to run around the build, and an audit that counts problems instead of trusting impressions.
Super Design Skills
A product design method turned into 16 skills. A hook at session start loads the guide that tells the agent when to reach for each one. They cover framing (brainstorming, learning a domain, writing a spec), exploring (options, parallel directions, prototypes), checking (critique, design QA, model-output surfaces, verifying before shipping) and handing off (pixel-accurate builds, handoff, presenting, case studies).
unslop
An audit for AI-built UI with 100 rules kept as data. Each rule has an ID, a tier, an area, a way to detect it, a fix and a reason. Floor rules (65) are never waivable, Reflex rules (32) can be waived on the record, and Finish rules (3) polish. 41 are detected by pattern, 3 by co-occurrence, 13 by rendering the page and 43 by judgment.
How a build runs
The two plugins meet in one loop around every UI change. A rule waived three times becomes house style, so the next build starts from it.
Session starts
The method guide loads, so the agent knows which skill fits the moment.
Before a screen
unslop reads the project's own tokens and gates and sets the bans.
Each edit
A hook scans the edited UI file and reports new findings. It never blocks an edit.
End of the turn
A deeper pass covers every UI file edited, plus a render check if a dev server answers.
Block, rarely
Only a Floor finding in a file edited since the last check can block, and only once.
Audit and fix
A read-only reviewer with fresh eyes, then each finding fixed with the system's own device.
Decisions
Always show more than one direction
Super Design Skills is built around option-driven design: exploring-options blocks a single-direction proposal and asks for at least three.
Count instead of trusting impressions
unslop keeps its 100 rules as data records with IDs. Every rule a script can check has a planted bad and good fixture, so a check that misses its own bad example is known to be broken. Rules that need judgment are listed as unchecked, never as passed.
Check every edit, block rarely
A hook scans each UI file after it is written and reports what it finds without blocking. Before the turn ends it runs a deeper pass, and blocks only on a must-fix finding in a file edited since the last check.
Waivers stay on the record
A Reflex rule can be waived only with an inline comment giving the evidence and the reason. A rule waived three times becomes house style for that project.
Fresh eyes over self-grading
The final review goes to a separate read-only reviewer that is handed the evidence, because the agent that built the screen grades its own work.
No binary, no network, no telemetry
Ideas from Impeccable are credited and rebuilt with Node built-ins only.