design-system

디자인 시스템 — 시각 시스템 생성 및 감사

사용 시기

• 디자인 시스템이 필요한 새 프로젝트를 시작할 때
• 기존 코드베이스의 시각적 일관성을 감사할 때
• 리디자인 전에 현재 상태를 파악해야 할 때
• UI가 '어색해' 보이지만 원인을 정확히 찾을 수 없을 때
• 스타일링과 관련된 PR을 리뷰할 때

작동 방식

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

코드베이스를 분석하여 일관된 디자인 시스템을 생성합니다:

1. 기존 패턴에 대해 CSS/Tailwind/styled-components 스캔
2. 추출: 색상, 타이포그래피, 간격, 테두리 반경, 그림자, 중단점
3. 영감을 위해 브라우저 MCP를 통해 경쟁사 사이트 3곳 조사
4. 디자인 토큰 세트 제안 (JSON + CSS 사용자 속성)
5. 각 결정에 대한 근거가 담긴 DESIGN.md 생성
6. 대화형 HTML 미리보기 페이지 생성 (자체 포함, 종속성 없음)

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

모드 2: 시각 감사

10가지 차원에서 UI를 평가합니다 (각 0-10점):

1. 색상 일관성 — 팔레트를 사용하고 있나요, 아니면 무작위 16진수 값을 사용하나요?
2. 타이포그래피 계층 — h1 > h2 > h3 > 본문 > 캡션 순서가 명확한가요?
3. 간격 리듬 — 일관된 척도(4px/8px/16px) 또는 임의적인 값인가요?
4. 컴포넌트 일관성 — 유사한 요소들이 비슷하게 보이나요?
5. 반응형 동작 — 중단점에서 자연스럽게 변하거나 깨지나요?
6. 다크 모드 — 완전히 구현되었나요, 아니면 절반만 되었나요?
7. 애니메이션 — 목적이 있나요, 아니면 과장되었나요?
8. 접근성 — 명암비, 포커스 상태, 터치 대상
9. 정보 밀도 — 복잡한가요, 깔끔한가요?
10. 세련미 — 호버 상태, 전환, 로딩 상태, 빈 상태

각 차원은 점수, 구체적인 예시, 그리고 정확한 파일:줄 위치가 포함된 수정 사항을 받습니다.

모드 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 Slop 확인:

/design-system slop-check