📌 참고: 이 문서는 awesome Claude Code 문서의 원문 + 레퍼런스입니다.

• 원문 링크를 직접 사용하셔도 됩니다
• 이 파일을 .claude/skills/ 하위에 복사하여 스킬로 등록할 수도 있습니다

(2026.03.15 기준)

디자인 리뷰 워크플로우

이 디렉토리에는 프론트엔드 코드 변경 사항 중 디자인과 관련된 부분에 대해 피드백을 제공하는 자동화된 디자인 리뷰 시스템을 구현하기 위한 템플릿과 예시가 포함되어 있습니다. 이 워크플로우를 통해 엔지니어는 풀 리퀘스트나 작업 중인 변경 사항에 대해 자동으로 디자인 리뷰를 실행할 수 있으며, 개발 과정 전반에 걸쳐 디자인 일관성과 품질을 보장할 수 있습니다.

개념

이 워크플로우는 Claude Code에서 자동화된 디자인 리뷰를 위한 포괄적인 방법론을 수립하며, 여러 고급 기능을 활용하여 코드베이스에서 세계 최고 수준의 UI/UX 표준을 보장합니다:

핵심 방법론:

• 자동화된 디자인 리뷰: PR에 자동으로 또는 slash command를 통해 온디맨드 방식으로 포괄적인 디자인 평가를 트리거합니다
• 라이브 환경 테스트: Playwright MCP 서버 통합을 사용하여 단순 정적 코드 분석이 아닌 실시간으로 실제 UI 컴포넌트와 상호작용하고 테스트합니다
• 표준 기반 평가: 최상위 기업(Stripe, Airbnb, Linear)에서 영감을 받은 엄격한 디자인 원칙을 따르며, 시각적 계층 구조, 접근성(WCAG AA+), 반응형 디자인, 인터랙션 패턴을 다룹니다

구현 기능:

• Claude Code Subagent: @agent-code-reviewer를 태그하여 사전 구성된 도구와 프롬프트가 포함된 전문 디자인 리뷰 에이전트를 배포하여 일관되고 철저한 리뷰를 수행합니다
• Slash Command: /design-review로 즉시 디자인 리뷰를 활성화하여 git diff를 자동으로 분석하고 구조화된 피드백을 제공합니다
• CLAUDE.md 메모리 통합: 프로젝트의 CLAUDE.md 파일에 디자인 원칙과 브랜드 가이드라인을 저장하여, Claude Code가 항상 프로젝트 고유의 디자인 시스템을 참조하도록 합니다
• 다단계 리뷰 프로세스: 인터랙션 흐름, 반응성, 시각적 완성도, 접근성, 견고성 테스트, 코드 건강성을 다루는 체계적인 평가를 수행합니다

이 접근 방식은 디자인 리뷰를 수동적이고 주관적인 프로세스에서 자동화되고 객관적인 평가로 전환하여, 전체 프론트엔드 개발 워크플로우에서 일관성을 유지합니다.

리소스

템플릿 및 예시

• 디자인 원칙 예시 - 자동화된 리뷰를 안내하기 위한 샘플 디자인 원칙 문서
• 디자인 리뷰 에이전트 - 자동화된 디자인 리뷰를 위한 에이전트 구성
• Claude.md 스니펫 - 디자인 리뷰 통합을 위한 Claude.md 설정 스니펫
• Slash Command - 온디맨드 디자인 리뷰를 위한 커스텀 slash command 구현

비디오 튜토리얼

이 워크플로우에 대한 자세한 설명은 YouTube의 종합 튜토리얼을 시청하세요: Patrick Ellis 채널