| name | design-polish-suite |
| description | The full design glow-up toolkit. Turns forgettable interfaces into something that looks like a real designer touched it. Routes to 6 sub-skills for de-slopifying, typography, spacing, gradients, motion, and adding that one detail people actually remember. Use when a UI feels mid, generic, AI-generated, or just painfully beige. |
Design Polish Suite
Welcome to the design emergency room. Your UI called — it wants its personality back.
This suite contains 6 focused skills that together form a full-stack design intervention for interfaces suffering from Terminal Blandness Syndrome (TBS). Symptoms include: identical card radiuses everywhere, #000 text on #fff backgrounds, hover states that just make things darker, and gradients that scream "I asked an AI to make this."
Sub-skills
Load these individually based on what hurts the most:
| Skill | What it fixes | When your UI... |
|---|
de-slopify-audit | Generic AI-slop patterns | ...looks like it was born in a ChatGPT prompt |
typography-that-sells | Flat, default typography | ...uses Inter 16px for literally everything |
spatial-rhythm-and-whitespace | Layout and spacing | ...has padding: 24px on every single element |
soft-gradient-dreamy | Gradients and atmosphere | ...has a purple-to-blue hero gradient (again) |
motion-and-micro-interactions | Animation and transitions | ...uses transition: all 0.3s ease on hover |
add-signature-moment | Brand recall and identity | ...is technically fine but nobody remembers it |
Recommended workflow (the full intervention)
For maximum impact, run them in this order — each one builds on the last:
- De-Slopify Audit — diagnose what makes it look generic (be honest, it's for your own good)
- Typography That Sells — give it a voice that isn't the system font default
- Spatial Rhythm and Whitespace — teach it that not everything needs the same padding
- Soft Gradient Dreamy — add atmosphere without turning it into a Lisa Frank folder
- Motion and Micro-Interactions — make it feel alive, not like a PowerPoint transition
- Add Signature Moment — the one detail that makes someone go "oh that's nice"
How to use
To load a sub-skill, read its SKILL.md from this directory:
~/.claude/skills/design-polish-suite/de-slopify-audit/SKILL.md~/.claude/skills/design-polish-suite/typography-that-sells/SKILL.md~/.claude/skills/design-polish-suite/spatial-rhythm-and-whitespace/SKILL.md~/.claude/skills/design-polish-suite/soft-gradient-dreamy/SKILL.md~/.claude/skills/design-polish-suite/motion-and-micro-interactions/SKILL.md~/.claude/skills/design-polish-suite/add-signature-moment/SKILL.md
Read the relevant SKILL.md, then follow its instructions against the target codebase.
Philosophy
Good design isn't decoration. It's the difference between "that works" and "who made this, I want to hire them." This suite exists because life is too short for default border-radius and color: #333.
