# Design Polish Suite

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

- Skill: `automattic/design-polish-suite` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add automattic/design-polish-suite`
- Raw SKILL.md: https://api.skillmd.com/api/skills/automattic/design-polish-suite/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Automattic (https://skillmd.com/u/automattic)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/automattic/design-polish-suite

---


# 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:

1. **De-Slopify Audit** — diagnose what makes it look generic (be honest, it's for your own good)
2. **Typography That Sells** — give it a voice that isn't the system font default
3. **Spatial Rhythm and Whitespace** — teach it that not everything needs the same padding
4. **Soft Gradient Dreamy** — add atmosphere without turning it into a Lisa Frank folder
5. **Motion and Micro-Interactions** — make it feel alive, not like a PowerPoint transition
6. **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`.