디자인 시스템 — 시각 시스템 생성 및 감사은(는) 무엇을 하나요?
사용 시기
- 디자인 시스템이 필요한 새 프로젝트를 시작할 때
- 기존 코드베이스의 시각적 일관성을 감사할 때
- 리디자인 전 — 현재 상태를 파악해야 할 때
- 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: 시각 감사
UI를 10가지 차원에서 채점합니다 (각 0-10점):
1. 색상 일관성 — 팔레트를 사용하고 있나요, 아니면 무작위 헥스 값인가요?
2. 타이포그래피 계층 — h1 > h2 > h3 > 본문 > 캡션이 명확한가요?
3. 간격 리듬 — 일관된 단위(4px/8px/16px)인가요, 아니면 임의적인가요?
4. 컴포넌트 일관성 — 비슷한 요소들이 비슷하게 보이나요?
5. 반응형 동작 — 중단점에서 유연한가요, 아니면 깨지나요?
6. 다크 모드 — 완전하게 구현되었나요, 아니면 반만 되었나요?
7. 애니메이션 — 목적이 있나요, 아니면 과도한가요?
8. 접근성 — 대비 비율, 포커스 상태, 터치 대상
9. 정보 밀도 — 복잡한가요, 아니면 깔끔한가요?
10. 정교함 — 호버 상태, 전환, 로딩 상태, 빈 상태
각 차원마다 점수, 구체적인 예시, 그리고 정확한 파일:줄 위치와 함께 수정 사항이 제공됩니다.
모드 3: AI 슬롭 감지
일반적인 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