LogoSkills

/cc-product:design — 본격 개발 전, "설계" 단계

4단계: Design — 구현 착수 전 `docs/architecture-*.md`(레이어·API·데이터 모델·보안)와 `docs/ux-spec-*.md`(화면 흐름·와이어프레임·접근성), 흐름 전수 점검 문서를 만듭니다.

/cc-product:design — 본격 개발 전, "설계" 단계#

항목내용
실행 명령/cc-product:design
분류파이프라인
난이도●●○ 보통

한마디로#

집을 짓기 전에 설계 도면을 그리는 단계입니다. 기둥과 배관을 어디에 둘지(시스템 구조)와 방·동선을 어떻게 배치할지(화면 흐름)를 미리 정해, 막상 짓다가 허무는 일을 막습니다.

누가·언제 쓰나요#

  • 기획(Planning)이 끝나 PRD·기술 명세가 준비된 사람
  • 시스템 구조와 화면 흐름을 본격 개발 전에 확정하고 싶을 때

👉 건너뛰어도 되는 경우: 기존 구조를 그대로 쓰는 작은 변경이거나, 설계 산출물이 이미 충분히 마련되어 있을 때.

무엇을 해주나요#

설계 문서 두 개가 만들어집니다.

  • docs/architecture-(프로젝트이름).md — 시스템 구조 설계서 (레이어 구분, API, 데이터 모델, 보안 구조)
  • docs/ux-spec-(프로젝트이름).md — 화면 흐름·UX 설계서 (화면 흐름, 와이어프레임, 컴포넌트, 접근성)

여기에 더해 사용자 흐름을 빠짐없이 점검한 docs/flow-permutation-(프로젝트이름).md 문서도 함께 정리됩니다.

어떻게 쓰나요#

# 기본 (시스템 구조 + UX 둘 다 설계)
/cc-product:design

# 시스템 구조에만 집중
/cc-product:design --focus architecture

# 화면 흐름(UX)에만 집중
/cc-product:design --focus ux

--focus를 생략하면 시스템 구조와 UX를 모두 설계합니다.

안에서 무슨 일이 벌어지나요#

크게 설계 → 검토 → 관문 통과 순서로 진행합니다.

  1. 시스템 구조 설계 — 레이어 구분, 의존성 구조, API, 데이터 모델, 보안 구조를 정합니다.
  2. 화면 흐름(UX) 설계 — 화면 흐름과 와이어프레임을 그리고, 컴포넌트·접근성을 정리합니다. 원하면 Claude가 외부 도구 없이 실제 동작하는 UI 시안을 직접 그려 줄 수도 있습니다(Claude 디자인). 동시에 사용자가 거칠 모든 경로(정상·오류·예외)를 빠짐없이 점검합니다.
  3. 교차 검토 — 구조 담당과 UX 담당이 서로의 설계를 다른 시각에서 검토합니다.
  4. 설계 검증 관문(Solutioning Gate) — 구조와 UX 항목을 점검해 통과 여부를 판정하고, 통과하지 못하면 피드백을 반영해 설계를 보완합니다.

설계 결과가 파일로 저장되면 다음 단계인 뼈대 만들기(/cc-product:scaffold) 로 넘어갑니다.

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Triggers#

  • When proceeding with design based on Planning artifacts (PRD/Tech Spec)
  • When architecture and UX design are needed

Usage#

/cc-product:design
/cc-product:design --focus architecture
/cc-product:design --focus ux

Options#

OptionDefaultDescription
--focusbothFocus area (architecture, ux, both)

Prerequisites#

  • Planning stage completed (Analysis Gate passed)
  • PRD/Tech Spec artifacts exist

Execution Flow#

Phase 1: Architecture Design#

Source: cc-product

  1. Architecture design (/cc-product:architecture)
    • System structure design (Clean Architecture)
    • Layer definition (Presentation, Domain, Data)
    • DI structure design
    • API design
    • Data model finalization
    • Security architecture

Phase 2: UX Design + User Flow Permutation (Parallel)#

Source: cc-product, cc-spec

  1. UX design (/cc-product:create-ux-design)

    • Design tool selection (Part 3.5): Figma / Pencil / Claude design (frontend-design) / ASCII·Markdown. Claude design lets Claude generate a high-fidelity, Git-trackable visual mockup directly with no external app or MCP server.
    • Screen flow design
    • Wireframes
    • CoUI component mapping
    • Interaction patterns
    • Accessibility considerations

  2. User flow permutation analysis (@flow-permutation, parallel with UX design)

    • All user flow paths enumeration (happy, error, edge)
    • State transition mapping per screen
    • Gap identification (missing error handling, unclear validation)
    • BDD scenario recommendations for complete coverage
    • Output: docs/flow-permutation-{slug}.md

Phase 3: Parallel Review#

Source: cc-product (Architect + UX Designer personas)

  1. Architect review

    • Clean Architecture compliance
    • DI structure appropriateness
    • API design review
    • Security review

  2. UX Designer review

    • CoUI component suitability
    • Layout consistency
    • Interaction naturalness
    • Accessibility verification

Phase 4: Solutioning Gate#

BMAD Solutioning Gate verification:

Architect checks:

  • Clean Architecture compliance (clean_architecture)
  • DI structure appropriate (di_structure)
  • API design (api_design)
  • Security (security)

UX Designer checks:

  • CoUI compliance (coui_compliance) — recommended when the Co design system is in use; prefer CoUI components and refer to the cc-coui skill for component APIs. Not a hard block when CoUI is not adopted.
  • Layout (layout)
  • Interaction (interaction)
  • Accessibility (accessibility)

Design is revised with feedback if gate fails.

Artifacts#

docs/architecture-{slug}.md    # Architecture document
docs/ux-spec-{slug}.md         # UX specification

After Completion#

  • Verify Solutioning Gate passed
  • Update .pipeline/{slug}.yaml state
  • Present context-clear handoff:
✅ Design stage complete (Solutioning Gate PASSED). Artifacts saved:
  - docs/architecture-{slug}.md
  - docs/ux-spec-{slug}.md

**Option 1 (Recommended)**: Clear context and continue to Issue Breakdown
  /clear
  Then run: /cc-product:breakdown

**Option 2**: Continue in current context
  Proceed directly to /cc-product:breakdown