BMAD-METHOD/src/bmm/workflows/2-plan-workflows/create-ux-design/steps/step-06-design-system.md

Step 6: Design System Choice

MANDATORY EXECUTION RULES (READ FIRST):

• 🛑 NEVER generate content without user input

• 📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions

• 🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding

• ✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder

• 📋 YOU ARE A UX FACILITATOR, not a content generator

• 💬 FOCUS on choosing appropriate design system approach

• 🎯 COLLABORATIVE decision-making, not recommendation-only

• ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config {communication_language}

EXECUTION PROTOCOLS:

• 🎯 Show your analysis before taking any action
• ⚠️ Present A/P/C menu after generating design system decision content
• 💾 ONLY save when user chooses C (Continue)
• 📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted.
• 🚫 FORBIDDEN to load next step until C is selected

COLLABORATION MENUS (A/P/C):

This step will generate content and present choices:

• A (Advanced Elicitation): Use discovery protocols to develop deeper design system insights
• P (Party Mode): Bring multiple perspectives to evaluate design system options
• C (Continue): Save the content to the document and proceed to next step

PROTOCOL INTEGRATION:

• When 'A' selected: Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
• When 'P' selected: Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md
• PROTOCOLS always return to this step's A/P/C menu
• User accepts/rejects protocol changes before proceeding

CONTEXT BOUNDARIES:

• Current document and frontmatter from previous steps are available
• Platform requirements from step 3 inform design system choice
• Inspiration patterns from step 5 guide design system selection
• Focus on choosing foundation for consistent design

YOUR TASK:

Choose appropriate design system approach based on project requirements and constraints.

DESIGN SYSTEM CHOICE SEQUENCE:

1. Present Design System Options

Educate about design system approaches: "For {{project_name}}, we need to choose a design system foundation. Think of design systems like LEGO blocks for UI - they provide proven components and patterns, ensuring consistency and speeding development.

Design System Approaches:

1. Custom Design System

• Complete visual uniqueness
• Full control over every component
• Higher initial investment
• Perfect for established brands with unique needs

2. Established System (Material Design, Ant Design, etc.)

• Fast development with proven patterns
• Great defaults and accessibility built-in
• Less visual differentiation
• Ideal for startups or internal tools

3. Themeable System (MUI, Chakra UI, Tailwind UI)

• Customizable with strong foundation
• Brand flexibility with proven components
• Moderate learning curve
• Good balance of speed and uniqueness

Which direction feels right for your project?"

2. Analyze Project Requirements

Guide decision based on project context: "Let's consider your specific needs:

Based on our previous conversations:

• Platform: [platform from step 3]
• Timeline: [inferred from user conversation]
• Team Size: [inferred from user conversation]
• Brand Requirements: [inferred from user conversation]
• Technical Constraints: [inferred from user conversation]

Decision Factors:

• Need for speed vs. need for uniqueness
• Brand guidelines or existing visual identity
• Team's design expertise
• Long-term maintenance considerations
• Integration requirements with existing systems"

3. Explore Specific Design System Options

Dive deeper into relevant options: "Recommended Options Based on Your Needs:

For [Your Platform Type]:

• [Option 1] - [Key benefit] - [Best for scenario]
• [Option 2] - [Key benefit] - [Best for scenario]
• [Option 3] - [Key benefit] - [Best for scenario]

Considerations:

• Component library size and quality
• Documentation and community support
• Customization capabilities
• Accessibility compliance
• Performance characteristics
• Learning curve for your team"

4. Facilitate Decision Process

Help user make informed choice: "Decision Framework:

1. What's most important: Speed, uniqueness, or balance?
2. How much design expertise does your team have?
3. Are there existing brand guidelines to follow?
4. What's your timeline and budget?
5. Long-term maintenance needs?

Let's evaluate options based on your answers to these questions."

5. Finalize Design System Choice

Confirm and document the decision: "Based on our analysis, I recommend [Design System Choice] for {{project_name}}.

Rationale:

• [Reason 1 based on project needs]
• [Reason 2 based on constraints]
• [Reason 3 based on team considerations]

Next Steps:

• We'll customize this system to match your brand and needs
• Define component strategy for custom components needed
• Establish design tokens and patterns

Does this design system choice feel right to you?"

6. Generate Design System Content

Prepare the content to append to the document:

Content Structure:

When saving to document, append these Level 2 and Level 3 sections:

## Design System Foundation

### 1.1 Design System Choice

[Design system choice based on conversation]

### Rationale for Selection

[Rationale for design system selection based on conversation]

### Implementation Approach

[Implementation approach based on chosen system]

### Customization Strategy

[Customization strategy based on project needs]

7. Present Content and Menu

Show the generated design system content and present choices: "I've documented our design system choice for {{project_name}}. This foundation will ensure consistency and speed up development.

Here's what I'll add to the document:

[Show the complete markdown content from step 6]

What would you like to do? [A] Advanced Elicitation - Let's refine our design system decision [P] Party Mode - Bring technical perspectives on design systems [C] Continue - Save this to the document and move to defining experience

8. Handle Menu Selection

If 'A' (Advanced Elicitation):

• Read fully and follow: {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml with the current design system content
• Process the enhanced design system insights that come back
• Ask user: "Accept these improvements to the design system decision? (y/n)"
• If yes: Update content with improvements, then return to A/P/C menu
• If no: Keep original content, then return to A/P/C menu

If 'P' (Party Mode):

• Read fully and follow: {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current design system choice
• Process the collaborative design system insights that come back
• Ask user: "Accept these changes to the design system decision? (y/n)"
• If yes: Update content with improvements, then return to A/P/C menu
• If no: Keep original content, then return to A/P/C menu

If 'C' (Continue):

• Append the final content to {planning_artifacts}/ux-design-specification.md
• Update frontmatter: append step to end of stepsCompleted array
• Load ./step-07-defining-experience.md

APPEND TO DOCUMENT:

When user selects 'C', append the content directly to the document using the structure from step 6.

SUCCESS METRICS:

✅ Design system options clearly presented and explained ✅ Decision framework applied to project requirements ✅ Specific design system chosen with clear rationale ✅ Implementation approach planned ✅ Customization strategy defined ✅ A/P/C menu presented and handled correctly ✅ Content properly appended to document when C selected

FAILURE MODES:

❌ Not explaining design system concepts clearly ❌ Rushing to recommendation without understanding requirements ❌ Not considering technical constraints or team capabilities ❌ Choosing design system without clear rationale ❌ Not planning implementation approach ❌ Not presenting A/P/C menu after content generation ❌ Appending content without user selecting 'C'

❌ CRITICAL: Reading only partial step file - leads to incomplete understanding and poor decisions ❌ CRITICAL: Proceeding with 'C' without fully reading and understanding the next step file ❌ CRITICAL: Making decisions without complete understanding of step requirements and protocols

NEXT STEP:

After user selects 'C' and content is saved to document, load ./step-07-defining-experience.md to define the core user interaction.

Remember: Do NOT proceed to step-07 until user explicitly selects 'C' from the A/P/C menu and content is saved!