@zeyue0329/xiaoma-cli 1.6.4 → 1.7.0

package/src/xmc/workflows/2-plan-workflows/xiaoma-create-ux-design/steps/step-06-design-system.md

@@ -0,0 +1,253 @@
+# 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 `xiaoma-advanced-elicitation` skill
+- When 'P' selected: Invoke the `xiaoma-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 `xiaoma-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 `xiaoma-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!

package/src/xmc/workflows/2-plan-workflows/xiaoma-create-ux-design/steps/step-07-defining-experience.md

@@ -0,0 +1,255 @@
+# Step 7: Defining Core Experience
+
+## 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 defining the core interaction that defines the product
+- 🎯 COLLABORATIVE discovery, not assumption-based design
+- ✅ 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 defining experience 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 experience insights
+- **P (Party Mode)**: Bring multiple perspectives to define optimal core experience
+- **C (Continue)**: Save the content to the document and proceed to next step
+
+## PROTOCOL INTEGRATION:
+
+- When 'A' selected: Invoke the `xiaoma-advanced-elicitation` skill
+- When 'P' selected: Invoke the `xiaoma-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
+- Core experience from step 3 provides foundation
+- Design system choice from step 6 informs implementation
+- Focus on the defining interaction that makes the product special
+
+## YOUR TASK:
+
+Define the core interaction that, if nailed, makes everything else follow in the user experience.
+
+## DEFINING EXPERIENCE SEQUENCE:
+
+### 1. Identify the Defining Experience
+
+Focus on the core interaction:
+"Every successful product has a defining experience - the core interaction that, if we nail it, everything else follows.
+
+**Think about these famous examples:**
+
+- Tinder: "Swipe to match with people"
+- Snapchat: "Share photos that disappear"
+- Instagram: "Share perfect moments with filters"
+- Spotify: "Discover and play any song instantly"
+
+**For {{project_name}}:**
+What's the core action that users will describe to their friends?
+What's the interaction that makes users feel successful?
+If we get ONE thing perfectly right, what should it be?"
+
+### 2. Explore the User's Mental Model
+
+Understand how users think about the core task:
+"**User Mental Model Questions:**
+
+- How do users currently solve this problem?
+- What mental model do they bring to this task?
+- What's their expectation for how this should work?
+- Where are they likely to get confused or frustrated?
+
+**Current Solutions:**
+
+- What do users love/hate about existing approaches?
+- What shortcuts or workarounds do they use?
+- What makes existing solutions feel magical or terrible?"
+
+### 3. Define Success Criteria for Core Experience
+
+Establish what makes the core interaction successful:
+"**Core Experience Success Criteria:**
+
+- What makes users say 'this just works'?
+- When do they feel smart or accomplished?
+- What feedback tells them they're doing it right?
+- How fast should it feel?
+- What should happen automatically?
+
+**Success Indicators:**
+
+- [Success indicator 1]
+- [Success indicator 2]
+- [Success indicator 3]"
+
+### 4. Identify Novel vs. Established Patterns
+
+Determine if we need to innovate or can use proven patterns:
+"**Pattern Analysis:**
+Looking at your core experience, does this:
+
+- Use established UX patterns that users already understand?
+- Require novel interaction design that needs user education?
+- Combine familiar patterns in innovative ways?
+
+**If Novel:**
+
+- What makes this different from existing approaches?
+- How will we teach users this new pattern?
+- What familiar metaphors can we use?
+
+**If Established:**
+
+- Which proven patterns should we adopt?
+- How can we innovate within familiar patterns?
+- What's our unique twist on established interactions?"
+
+### 5. Define Experience Mechanics
+
+Break down the core interaction into details:
+"**Core Experience Mechanics:**
+Let's design the step-by-step flow for [defining experience]:
+
+**1. Initiation:**
+
+- How does the user start this action?
+- What triggers or invites them to begin?
+
+**2. Interaction:**
+
+- What does the user actually do?
+- What controls or inputs do they use?
+- How does the system respond?
+
+**3. Feedback:**
+
+- What tells users they're succeeding?
+- How do they know when it's working?
+- What happens if they make a mistake?
+
+**4. Completion:**
+
+- How do users know they're done?
+- What's the successful outcome?
+- What's next?"
+
+### 6. Generate Defining Experience Content
+
+Prepare the content to append to the document:
+
+#### Content Structure:
+
+When saving to document, append these Level 2 and Level 3 sections:
+
+```markdown
+## 2. Core User Experience
+
+### 2.1 Defining Experience
+
+[Defining experience description based on conversation]
+
+### 2.2 User Mental Model
+
+[User mental model analysis based on conversation]
+
+### 2.3 Success Criteria
+
+[Success criteria for core experience based on conversation]
+
+### 2.4 Novel UX Patterns
+
+[Novel UX patterns analysis based on conversation]
+
+### 2.5 Experience Mechanics
+
+[Detailed mechanics for core experience based on conversation]
+```
+
+### 7. Present Content and Menu
+
+Show the generated defining experience content and present choices:
+"I've defined the core experience for {{project_name}} - the interaction that will make users love this product.
+
+**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 the core experience definition
+[P] Party Mode - Bring different perspectives on the defining interaction
+[C] Continue - Save this to the document and move to visual foundation
+
+### 8. Handle Menu Selection
+
+#### If 'A' (Advanced Elicitation):
+
+- Invoke the `xiaoma-advanced-elicitation` skill with the current defining experience content
+- Process the enhanced experience insights that come back
+- Ask user: "Accept these improvements to the defining experience? (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 `xiaoma-party-mode` skill with the current defining experience
+- Process the collaborative experience insights that come back
+- Ask user: "Accept these changes to the defining experience? (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-08-visual-foundation.md`
+
+## APPEND TO DOCUMENT:
+
+When user selects 'C', append the content directly to the document using the structure from step 6.
+
+## SUCCESS METRICS:
+
+✅ Defining experience clearly articulated
+✅ User mental model thoroughly analyzed
+✅ Success criteria established for core interaction
+✅ Novel vs. established patterns properly evaluated
+✅ Experience mechanics designed in detail
+✅ A/P/C menu presented and handled correctly
+✅ Content properly appended to document when C selected
+
+## FAILURE MODES:
+
+❌ Not identifying the true core interaction
+❌ Missing user's mental model and expectations
+❌ Not establishing clear success criteria
+❌ Not properly evaluating novel vs. established patterns
+❌ Experience mechanics too vague or incomplete
+❌ 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-08-visual-foundation.md` to establish visual design foundation.
+
+Remember: Do NOT proceed to step-08 until user explicitly selects 'C' from the A/P/C menu and content is saved!