Automattic 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.