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: Execute {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
When 'P' selected: Execute {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:

What's most important: Speed, uniqueness, or balance?
How much design expertise does your team have?
Are there existing brand guidelines to follow?
What's your timeline and budget?
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):

Execute {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):

Execute {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!

step-06-design-system.md 8.6 KB Istoric Crud