vibe.design-refinelisted
Install: claude install-skill su-record/vibe
# Design Refine — Distill / Normalize / Polish
## Done Criteria
- [ ] 요청된 distill·normalize·polish pass가 변경 파일에 적용되어 있다.
- [ ] 새 hardcoded visual value가 추가되지 않았다.
- [ ] 대상 프로젝트의 lint와 관련 UI 테스트가 통과한다.
- [ ] 변경된 token 참조가 DESIGN.md와 일치한다.
Modifying design-improvement passes. Mode selected by the first argument; default runs the full pipeline in order: **distill → normalize → polish**.
## Usage
```
/design-refine <target> # Full pipeline (distill → normalize → polish)
/design-refine distill <target> # Remove visual complexity only
/design-refine normalize <target> # Token alignment only
/design-refine polish <target> # Pre-ship final pass only
/design-refine . # Refine all changed UI files
```
---
## Mode: distill — Remove Visual Complexity
Every remaining element must justify its existence: **if it doesn't help the user complete their task, remove it.**
### Targets
1. **Decorative clutter** — purposeless gradients/patterns/textures, dividers between already-spaced sections, ornamental icons, stacked borders/shadows on nested containers
2. **Redundant information** — headings repeating page title/parent context, labels duplicating placeholders, "Welcome to {App}" banners, descriptions restating the obvious
3. **Over-wrapped containers** — cards wrapping a single element, nested cards, cosmetic-only wrapper divs, single-child sections
4. **Excessive animation** — entry animations on every element, hover effects on non-interactive el