254 lines
8.6 KiB
Markdown
254 lines
8.6 KiB
Markdown
# 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}`
|
|
- ✅ YOU MUST ALWAYS WRITE all artifact and document content in `{document_output_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: Invoke the `bmad-advanced-elicitation` skill
|
|
- When 'P' selected: Invoke the `bmad-party-mode` skill
|
|
- 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:
|
|
|
|
```markdown
|
|
## 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):
|
|
|
|
- Invoke the `bmad-advanced-elicitation` skill 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):
|
|
|
|
- Invoke the `bmad-party-mode` skill 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!
|