Don't Install 45 Skills. Stack These Four.
You don't need a pile of design skills to beat AI slop. You need four: a taste base, motion, tokens, and a visual feedback loop. Here's the recipe.
There's a temptation, once you discover design skills, to install all of them. Forty-five skills, every aesthetic direction, every specialty. Resist it. More skills is not more taste — it's more contradiction. When two skills disagree about spacing or motion, your agent drifts back toward the median to reconcile them, and you've reintroduced the exact slop you were trying to kill. The builders shipping the best AI-designed work don't have the biggest stack. They have the right four.
This is the practical payoff of the "Killing AI Design Slop" series. The six-layer stack mapped the whole territory; this post gives you the minimal recipe that covers the layers that actually matter for most builds. Four skills: a base taste layer, motion, tokens, and a visual feedback loop. Here's why each earns its slot and why the forty-first skill doesn't.
Key Takeaways
- Four skills cover the slop that matters. A taste base, motion, tokens, and a feedback loop handle what 95% of builds need.
- The base sets the floor. Pick one of frontend-design, impeccable, or taste-skill — not all three.
- Motion separates senior from median. One eased, purposeful animation skill beats the default weak hover everywhere.
- Tokens keep screen 30 consistent with screen 1. theme-factory generates the palette, type, and spacing the agent reuses.
- Eyes close the loop. webapp-testing lets the agent see its own output and fix what's off instead of guessing.
Pick One Base, Not Three
The base is your taste floor — the skill that overwrites the model's default aesthetic before anything else. You only get one base, because three competing taste skills cancel out. Choose by how much opinion you want.
frontend-design from Anthropic is the safe, strong default — a senior frontend sensibility with restraint built in:
npx skills add anthropics/skills --skill frontend-design
impeccable is the more opinionated pick, with its own init flow that sets up a sharper, more distinctive baseline:
npx impeccable install
/impeccable init
And taste-skill leans into the philosophy that taste is understanding constraints, not banning fonts:
npx skills add https://github.com/Leonxlnx/taste-skill --skill taste-skill
Run one. Live with it for a few builds before swapping. The point of a base is consistency, and consistency requires committing to a single point of view.
Add Motion, Tokens, and Eyes
The base fixes static layout. The other three slots fix what the base alone can't.
Motion is the fastest tell of senior versus median. The default is one weak hover; a real product has eased, purposeful, choreographed motion. animate installs motion rules the agent applies everywhere:
npx skills add https://github.com/delphi-ai/animate-skill --skill animate
Tokens are what keep screen 30 looking like screen 1. Without a token system, the agent reinvents colors and spacing on every screen and coherence collapses. theme-factory generates a reusable palette, type scale, and spacing rhythm:
npx skills add anthropics/skills --skill theme-factory
Eyes close the loop. Most slop survives because the agent can't see what it built — it writes CSS blind and hopes. webapp-testing gives the agent a visual feedback loop so it can look at the rendered output and fix what's actually wrong:
npx skills add anthropics/skills --skill webapp-testing
The Four Picks, Side by Side
Here's the full recipe in one view — slot, job, pick, and install.
| Slot | Job | Pick | Install |
|---|---|---|---|
| Base taste | Overwrite default aesthetic | frontend-design | npx skills add anthropics/skills --skill frontend-design |
| Motion | Replace the weak hover everywhere | animate | npx skills add https://github.com/delphi-ai/animate-skill --skill animate |
| Tokens | Keep all screens consistent | theme-factory | npx skills add anthropics/skills --skill theme-factory |
| Eyes | Let the agent see and fix output | webapp-testing | npx skills add anthropics/skills --skill webapp-testing |
Four slots, four jobs, no overlap. That's the design — each skill owns a distinct layer so they reinforce instead of contradict. Together they cover the visible quality (base + tokens + motion) and the reliability (eyes) that most AI builds are missing.
Why Not More
The case against forty-five skills is the same as the case for a tight design system: every additional rule source is another chance for contradiction, and contradiction is where the median sneaks back in. When animate says one thing about transitions and a second motion skill says another, the agent splits the difference — and split-the-difference is just a fancier word for average. The whole point of skills is to move the model off the mean, so anything that pulls it back toward the mean is working against you.
A tight stack also keeps your context window lean and your taste legible. You know exactly which file owns which decision, so when something looks off you know where to fix it. Start with these four, build a few projects, and only add a fifth skill when you hit a specific layer the four don't cover — a graphics skill from the six-layer stack, say, if your imagery is the weak spot. Until then, four is the recipe. Browse the options in the Designs category and assemble your base.
Frequently Asked Questions
Why exactly four skills and not five or six?
Because four covers the layers that carry visible quality and reliability without overlapping. A base sets the aesthetic floor, tokens keep it consistent across screens, motion handles the most obvious senior-versus-median tell, and a feedback loop lets the agent verify its own work. Add a fifth only when you hit a specific gap the four don't address — not preemptively.
Can I use impeccable or taste-skill instead of frontend-design as the base?
Yes — the base slot takes exactly one of the three, chosen by how much opinion you want. frontend-design is the safe strong default, impeccable is more distinctive with its own init flow, and taste-skill leans into constraint-driven judgment. Pick one and commit; running two bases reintroduces the contradiction you're trying to avoid.
What does the visual feedback loop actually do?
webapp-testing lets the agent render and look at its own output rather than writing CSS blind. Most slop survives because the model never sees what it built — it guesses and moves on. With eyes, the agent can spot that the spacing is off or the contrast is weak and fix it in the same loop, which is how human designers work.
Won't four skills bloat my context window?
Far less than forty-five would. A tight four-skill stack keeps context lean and, more importantly, keeps each design decision traceable to one file. Bloat and contradiction both come from over-installing — when many skills overlap, the agent burns tokens reconciling them and drifts toward the average. Four distinct, non-overlapping skills is the lean choice.
Do these four replace a DESIGN.md token system?
They complement it. theme-factory generates tokens, but if you want a portable, committed DESIGN.md you carry across projects, the sibling AI Design Systems series covers that approach in depth. The four-skill stack is the taste-and-process layer; a DESIGN.md is the token substrate underneath it. Most builders benefit from both.
Browse the curated design skills in the Designs category, or explore the full catalog at aiskill.market.