design-system

name	design-system
description	디자인 시스템을 생성하거나 감사하고, 시각적 일관성을 점검하며, 스타일 변경이 포함된 PR을 검토할 때 사용하는 스킬입니다.
origin	ECC

Design System — 시각 시스템 생성 및 감사

사용 시점

• 디자인 시스템이 필요한 새 프로젝트를 시작할 때
• 기존 코드베이스의 시각적 일관성을 감사할 때
• 리디자인 전에 현재 상태를 파악할 때
• UI가 어색한데 이유를 특정하기 어려울 때
• 스타일 변경이 포함된 PR을 검토할 때

동작 방식

모드 1: 디자인 시스템 생성

코드베이스를 분석해 응집력 있는 디자인 시스템을 만듭니다.

1. CSS/Tailwind/styled-components에서 기존 패턴을 스캔
2. 색상, 타이포그래피, 간격, border-radius, 그림자, 브레이크포인트 추출
3. 브라우저 MCP로 경쟁사 사이트 3개 조사
4. 디자인 토큰 세트 제안(JSON + CSS custom properties)
5. 각 결정의 근거를 담은 DESIGN.md 생성
6. 의존성 없는 self-contained HTML 미리보기 생성

출력물: DESIGN.md + design-tokens.json + design-preview.html

모드 2: 시각 감사

UI를 10개 차원으로 점수화합니다. 각 항목 0~10점입니다.

1. 색상 일관성 — 팔레트를 쓰는가, 임의 hex를 쓰는가?
2. 타이포 계층 — h1 > h2 > h3 > body > caption이 명확한가?
3. 간격 리듬 — 일관된 스케일인가, 제각각인가?
4. 컴포넌트 일관성 — 비슷한 요소가 비슷하게 보이는가?
5. 반응형 동작 — 유연한가, 브레이크포인트에서 깨지는가?
6. 다크 모드 — 완성됐는가, 반쯤 끝났는가?
7. 애니메이션 — 목적이 있는가, 과한가?
8. 접근성 — 대비, 포커스 상태, 터치 타깃
9. 정보 밀도 — 복잡한가, 정돈됐는가?
10. 마감도 — hover, transition, loading, empty state

각 차원에 대해 점수, 구체적 예시, 정확한 file:line 기준 수정안을 제공합니다.

모드 3: AI Slop 탐지

전형적인 AI 생성 디자인 패턴을 식별합니다.

- 모든 곳에 의미 없는 그라디언트
- 보라-파랑 기본 팔레트
- 목적 없는 글래스모피즘 카드
- 둥글면 안 되는 곳까지 과한 둥근 모서리
- 스크롤마다 과한 애니메이션
- 스톡 느낌 그라디언트 위 중앙 정렬 히어로
- 개성 없는 산세리프 폰트 스택

예시

SaaS 앱용 디자인 시스템 생성

/design-system generate --style minimal --palette earth-tones

기존 UI 감사

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

AI 슬롭 점검

/design-system slop-check