04-design - SKILL.md Agent Skill

name: 04-design description: > UI/UX 디자인 및 프로토타입 단계. "디자인", "UI 설계", "UX 설계", "와이어프레임", "프로토타입", "화면 설계", "디자인 시스템", "컴포넌트 설계", "design", "wireframe", "prototype", "mockup" 요청 시 사용. metadata: phase: "4" phase_name: "디자인/프로토타입"

사용자 경험을 설계하고 시각적 프로토타입을 만든다. 코드 작성 전 검증 단계.

이 Phase를 시작하기 전에 반드시 거버넌스 프로세스를 따른다.

PLAN — 실행계획서를 작성한다 (governance 스킬의 references/execution-plan-template.md 참조)
- .claude/local/plans/<sanitized-branch>/04-design/execution-plan.md로 저장 (브랜치별 작업 영역, gitignore 대상)
- 목표, 범위, 실행 단계, 성공 기준을 구체적으로 기술
REVIEW — 실행계획서를 사용자에게 제시하고 명시적 수락을 받는다
- 승인(Approved) → 실행 절차로 진행
- 수정 요청(Revise) → 계획 수정 후 재검증
- 거부(Rejected) → 근본적 재설계
EXECUTE — 수락된 계획에 따라 아래 실행 절차를 수행한다
RE-VERIFY — 실행 완료 후 산출물과 결과를 재검증한다
- 성공 기준 대비 달성 여부 확인
- 산출물 완결성 및 이전 Phase와의 정합성 검증
- 교훈(Lessons Learned) 기록
- 통과(Pass) → 다음 Phase 진행 / 미달(Fail) → 보완 실행 또는 계획 재수립

⚠️ 실행계획 수립과 수락 없이 실행에 들어가지 않는다. 실행 후 재검증 없이 다음 Phase로 넘어가지 않는다.

사용자 흐름은 Mermaid flowchart로 작성:

graph TD
    A[랜딩 페이지] --> B{로그인 여부}
    B -->|Yes| C[대시보드]
    B -->|No| D[로그인 페이지]
    D --> C

텍스트 기반 와이어프레임(ASCII 또는 구조 설명)으로 각 화면의 레이아웃을 정의:

Claude Code는 텍스트 기반 에이전트이므로, 시각적 디자인보다 UI/UX 인터랙션을 구조화된 명세로 정의하여 Phase 5 구현의 입력으로 전달:

화면별 인터랙션 명세 — references/interaction-spec-template.md 기반
- 화면 개요, 레이아웃 구조, 반응형 브레이크포인트
- 컴포넌트 명세 (props, states, events, validation, accessibility)
- 인터랙션 흐름 (사용자 동작 → 시스템 반응)
- 상태 관리 (어떤 상태를 언제 변경하는지)
- API 연동 정보
- 에러 및 엣지 케이스 처리
- 애니메이션 및 트랜지션
산출물 — 각 화면마다 .claude/04-design/interaction-specs/[화면ID].md 생성

인터랙션 명세서는 Phase 5에서 개발자가 코드를 구현할 때 참고하는 구체적인 입력 문서로, 와이어프레임보다 더 상세한 동작 명세를 포함한다.

코드로 관리 가능한 디자인 토큰과 컴포넌트 규칙:

HTML/CSS 또는 React로 핵심 화면의 인터랙티브 프로토타입을 만든다: