Triggers#

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

Usage#

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

Options#

Prerequisites#

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

Execution Flow#

Phase 1: Architecture Design#

Source: cc-product

1. Architecture design (/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-clarity

2. UX design (/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

3. 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)

3. Architect review

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

4. 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 Epic Creation
  /clear
  Then run: /product:epic

**Option 2**: Continue in current context
  Proceed directly to /product:epic