디자인 시스템 없이 페이지마다 다른 UI, 이제 코드 스캔으로 한 번에 정리하세요

1. 어떤 문제를 해결하나요?

개발이 거듭될수록 CSS 파일에 색상이 제각각이 되고, 버튼 크기가 페이지마다 다르며, 간격 값은 일관성이 없어집니다. design-system은 코드베이스를 스캔해 디자인 시스템을 생성하거나, UI를 10개 차원에서 0-10점으로 채점하고, AI 슬롭 패턴을 감지합니다.

2. 이런 분들에게 추천합니다

• UI가 점점 제각각이 돼가는 것을 느끼는 프론트엔드 개발팀

• 스타일링 관련 PR을 리뷰해야 하는 테크리드·PO

• 디자인 시스템 없이 개발된 기존 프로덕트를 정리하고 싶은 팀

3. 어떻게 사용하는 기어인가요?

원하는 모드를 지정합니다. 생성 모드는 코드베이스를 분석해 디자인 토큰과 DESIGN.md를 자동 생성합니다. 감사 모드는 실행 중인 앱 URL을 제공하면 10개 차원에서 점수와 구체적 수정 방법을 제공합니다.

4. 어떤 결과를 얻을 수 있나요?

• DESIGN.md + 디자인 토큰 JSON + 인터랙티브 프리뷰 HTML

• 10개 차원 점수 + 각 차원별 구체적 문제점 (파일:라인 명시)

• AI 슬롭 패턴 감지 리포트

5. 포함된 구성

• design-system 스킬 소스 (SKILL.md)

• Mode 1: 디자인 시스템 생성 파이프라인

• Mode 2: 시각적 감사 — 10개 차원 채점 프레임워크

• Mode 3: AI 슬롭 감지 — 12개 패턴 룰셋

6. 사용 AI 도구

Claude Sonnet 4 / Claude Opus 4 (Anthropic) + Browser MCP

7. 실제 활용 예시

• "우리 앱 디자인 시스템 만들어줘" → CSS 스캔 → 토큰 추출 → DESIGN.md + 프리뷰 생성

• "UI 어디가 어색한지 분석해줘" → 10개 차원 점수 + 구체적 수정 방법 리포트

8. 실제 활용 예시

• Author: affaan-m

• Repository: affaan-m/everything-claude-code

• GitHub: https://github.com/affaan-m/everything-claude-code