agent manifest generation, party mode uses it, and tea persona compression
This commit is contained in:
360
bmad/bmm/workflows/2-plan/ux/instructions-ux.md
Normal file
360
bmad/bmm/workflows/2-plan/ux/instructions-ux.md
Normal file
@@ -0,0 +1,360 @@
|
||||
# UX/UI Specification Workflow Instructions
|
||||
|
||||
<workflow>
|
||||
|
||||
<critical>The workflow execution engine is governed by: {project_root}/bmad/core/tasks/workflow.xml</critical>
|
||||
<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
|
||||
<critical>This workflow creates comprehensive UX/UI specifications - can run standalone or as part of plan-project</critical>
|
||||
<critical>Uses ux-spec-template.md for structured output generation</critical>
|
||||
<critical>Can optionally generate AI Frontend Prompts for tools like Vercel v0, Lovable.ai</critical>
|
||||
|
||||
<step n="1" goal="Load context and analyze project requirements">
|
||||
|
||||
<action>Determine workflow mode (standalone or integrated)</action>
|
||||
|
||||
<check>If mode="standalone":</check>
|
||||
<ask>Do you have an existing PRD or requirements document? (y/n)
|
||||
|
||||
If yes: Provide the path to the PRD
|
||||
If no: We'll gather basic requirements to create the UX spec
|
||||
</ask>
|
||||
|
||||
<check>If no PRD in standalone mode:</check>
|
||||
<ask>Let's gather essential information:
|
||||
|
||||
1. **Project Description**: What are you building?
|
||||
2. **Target Users**: Who will use this?
|
||||
3. **Core Features**: What are the main capabilities? (3-5 key features)
|
||||
4. **Platform**: Web, mobile, desktop, or multi-platform?
|
||||
5. **Existing Brand/Design**: Any existing style guide or brand to follow?
|
||||
</ask>
|
||||
|
||||
<check>If PRD exists or integrated mode:</check>
|
||||
<action>Load the following documents if available:</action>
|
||||
|
||||
- PRD.md (primary source for requirements and user journeys)
|
||||
- epics.md or epic-stories.md (helps understand feature grouping)
|
||||
- tech-spec.md (understand technical constraints)
|
||||
- architecture.md (if Level 3-4 project)
|
||||
- project-workflow-analysis.md (understand project level and scope)
|
||||
|
||||
<action>Analyze project for UX complexity:</action>
|
||||
|
||||
- Number of user-facing features
|
||||
- Types of users/personas mentioned
|
||||
- Interaction complexity
|
||||
- Platform requirements (web, mobile, desktop)
|
||||
|
||||
<action>Load ux-spec-template from workflow.yaml</action>
|
||||
|
||||
<template-output>project_context</template-output>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="2" goal="Define UX goals and principles">
|
||||
|
||||
<ask>Let's establish the UX foundation. Based on the PRD:
|
||||
|
||||
**1. Target User Personas** (extract from PRD or define):
|
||||
|
||||
- Primary persona(s)
|
||||
- Secondary persona(s)
|
||||
- Their goals and pain points
|
||||
|
||||
**2. Key Usability Goals:**
|
||||
What does success look like for users?
|
||||
|
||||
- Ease of learning?
|
||||
- Efficiency for power users?
|
||||
- Error prevention?
|
||||
- Accessibility requirements?
|
||||
|
||||
**3. Core Design Principles** (3-5 principles):
|
||||
What will guide all design decisions?
|
||||
</ask>
|
||||
|
||||
<template-output>user_personas</template-output>
|
||||
<template-output>usability_goals</template-output>
|
||||
<template-output>design_principles</template-output>
|
||||
|
||||
<elicit-required/>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="3" goal="Create information architecture">
|
||||
|
||||
<action>Based on functional requirements from PRD, create site/app structure</action>
|
||||
|
||||
**Create comprehensive site map showing:**
|
||||
|
||||
- All major sections/screens
|
||||
- Hierarchical relationships
|
||||
- Navigation paths
|
||||
|
||||
<template-output>site_map</template-output>
|
||||
|
||||
**Define navigation structure:**
|
||||
|
||||
- Primary navigation items
|
||||
- Secondary navigation approach
|
||||
- Mobile navigation strategy
|
||||
- Breadcrumb structure
|
||||
|
||||
<template-output>navigation_structure</template-output>
|
||||
|
||||
<elicit-required/>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="4" goal="Design user flows for critical paths">
|
||||
|
||||
<action>Extract key user journeys from PRD</action>
|
||||
<action>For each critical user task, create detailed flow</action>
|
||||
|
||||
<for-each journey="user_journeys_from_prd">
|
||||
|
||||
**Flow: {{journey_name}}**
|
||||
|
||||
Define:
|
||||
|
||||
- User goal
|
||||
- Entry points
|
||||
- Step-by-step flow with decision points
|
||||
- Success criteria
|
||||
- Error states and edge cases
|
||||
|
||||
Create Mermaid diagram showing complete flow.
|
||||
|
||||
<template-output>user*flow*{{journey_number}}</template-output>
|
||||
|
||||
</for-each>
|
||||
|
||||
<elicit-required/>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="5" goal="Define component library approach">
|
||||
|
||||
<ask>Component Library Strategy:
|
||||
|
||||
**1. Design System Approach:**
|
||||
|
||||
- [ ] Use existing system (Material UI, Ant Design, etc.)
|
||||
- [ ] Create custom component library
|
||||
- [ ] Hybrid approach
|
||||
|
||||
**2. If using existing, which one?**
|
||||
|
||||
**3. Core Components Needed** (based on PRD features):
|
||||
We'll need to define states and variants for key components.
|
||||
</ask>
|
||||
|
||||
<action>For primary components, define:</action>
|
||||
|
||||
- Component purpose
|
||||
- Variants needed
|
||||
- States (default, hover, active, disabled, error)
|
||||
- Usage guidelines
|
||||
|
||||
<template-output>design_system_approach</template-output>
|
||||
<template-output>core_components</template-output>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="6" goal="Establish visual design foundation">
|
||||
|
||||
<ask>Visual Design Foundation:
|
||||
|
||||
**1. Brand Guidelines:**
|
||||
Do you have existing brand guidelines to follow? (y/n)
|
||||
|
||||
**2. If yes, provide link or key elements.**
|
||||
|
||||
**3. If no, let's define basics:**
|
||||
|
||||
- Primary brand personality (professional, playful, minimal, bold)
|
||||
- Industry conventions to follow or break
|
||||
</ask>
|
||||
|
||||
<action>Define color palette with semantic meanings</action>
|
||||
|
||||
<template-output>color_palette</template-output>
|
||||
|
||||
<action>Define typography system</action>
|
||||
|
||||
<template-output>font_families</template-output>
|
||||
<template-output>type_scale</template-output>
|
||||
|
||||
<action>Define spacing and layout grid</action>
|
||||
|
||||
<template-output>spacing_layout</template-output>
|
||||
|
||||
<elicit-required/>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="7" goal="Define responsive and accessibility strategy">
|
||||
|
||||
**Responsive Design:**
|
||||
|
||||
<action>Define breakpoints based on target devices from PRD</action>
|
||||
|
||||
<template-output>breakpoints</template-output>
|
||||
|
||||
<action>Define adaptation patterns for different screen sizes</action>
|
||||
|
||||
<template-output>adaptation_patterns</template-output>
|
||||
|
||||
**Accessibility Requirements:**
|
||||
|
||||
<action>Based on deployment intent from PRD, define compliance level</action>
|
||||
|
||||
<template-output>compliance_target</template-output>
|
||||
<template-output>accessibility_requirements</template-output>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="8" goal="Document interaction patterns" optional="true">
|
||||
|
||||
<ask>Would you like to define animation and micro-interactions? (y/n)
|
||||
|
||||
This is recommended for:
|
||||
|
||||
- Consumer-facing applications
|
||||
- Projects emphasizing user delight
|
||||
- Complex state transitions
|
||||
</ask>
|
||||
|
||||
<check>If yes:</check>
|
||||
|
||||
<action>Define motion principles</action>
|
||||
<template-output>motion_principles</template-output>
|
||||
|
||||
<action>Define key animations and transitions</action>
|
||||
<template-output>key_animations</template-output>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="9" goal="Create wireframes and design references" optional="true">
|
||||
|
||||
<ask>Design File Strategy:
|
||||
|
||||
**1. Will you be creating high-fidelity designs?**
|
||||
|
||||
- [ ] Yes, in Figma
|
||||
- [ ] Yes, in Sketch
|
||||
- [ ] Yes, in Adobe XD
|
||||
- [ ] No, development from spec
|
||||
- [ ] Other: **\_\_\_\_**
|
||||
|
||||
**2. For key screens, should we:**
|
||||
|
||||
- [ ] Reference design file locations
|
||||
- [ ] Create low-fi wireframe descriptions
|
||||
- [ ] Skip visual representations
|
||||
</ask>
|
||||
|
||||
<check>If design files will be created:</check>
|
||||
<template-output>design_files</template-output>
|
||||
|
||||
<check>If wireframe descriptions needed:</check>
|
||||
<for-each screen="key_screens">
|
||||
<template-output>screen*layout*{{screen_number}}</template-output>
|
||||
</for-each>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="10" goal="Generate next steps and output options">
|
||||
|
||||
## UX Specification Complete
|
||||
|
||||
<action>Generate specific next steps based on project level and outputs</action>
|
||||
|
||||
<template-output>immediate_actions</template-output>
|
||||
|
||||
**Design Handoff Checklist:**
|
||||
|
||||
- [ ] All user flows documented
|
||||
- [ ] Component inventory complete
|
||||
- [ ] Accessibility requirements defined
|
||||
- [ ] Responsive strategy clear
|
||||
- [ ] Brand guidelines incorporated
|
||||
- [ ] Performance goals established
|
||||
|
||||
<check>If Level 3-4 project:</check>
|
||||
|
||||
- [ ] Ready for detailed visual design
|
||||
- [ ] Frontend architecture can proceed
|
||||
- [ ] Story generation can include UX details
|
||||
|
||||
<check>If Level 1-2 project or standalone:</check>
|
||||
|
||||
- [ ] Development can proceed with spec
|
||||
- [ ] Component implementation order defined
|
||||
- [ ] MVP scope clear
|
||||
|
||||
<template-output>design_handoff_checklist</template-output>
|
||||
|
||||
<ask>UX Specification saved to {{ux_spec_file}}
|
||||
|
||||
**Additional Output Options:**
|
||||
|
||||
1. Generate AI Frontend Prompt (for Vercel v0, Lovable.ai, etc.)
|
||||
2. Review UX specification
|
||||
3. Create/update visual designs in design tool
|
||||
4. Return to planning workflow (if not standalone)
|
||||
5. Exit
|
||||
|
||||
Would you like to generate an AI Frontend Prompt? (y/n):</ask>
|
||||
|
||||
<check>If user selects yes or option 1:</check>
|
||||
<goto step="11">Generate AI Frontend Prompt</goto>
|
||||
|
||||
</step>
|
||||
|
||||
<step n="11" goal="Generate AI Frontend Prompt" optional="true">
|
||||
|
||||
<action>Prepare context for AI Frontend Prompt generation</action>
|
||||
|
||||
<ask>What type of AI frontend generation are you targeting?
|
||||
|
||||
1. **Full application** - Complete multi-page application
|
||||
2. **Single page** - One complete page/screen
|
||||
3. **Component set** - Specific components or sections
|
||||
4. **Design system** - Component library setup
|
||||
|
||||
Select option (1-4):</ask>
|
||||
|
||||
<action>Gather UX spec details for prompt generation:</action>
|
||||
|
||||
- Design system approach
|
||||
- Color palette and typography
|
||||
- Key components and their states
|
||||
- User flows to implement
|
||||
- Responsive requirements
|
||||
|
||||
<invoke-task>{project-root}/bmad/bmm/tasks/ai-fe-prompt.md</invoke-task>
|
||||
|
||||
<action>Save AI Frontend Prompt to {{ai_frontend_prompt_file}}</action>
|
||||
|
||||
<ask>AI Frontend Prompt saved to {{ai_frontend_prompt_file}}
|
||||
|
||||
This prompt is optimized for:
|
||||
|
||||
- Vercel v0
|
||||
- Lovable.ai
|
||||
- Other AI frontend generation tools
|
||||
|
||||
**Remember**: AI-generated code requires careful review and testing!
|
||||
|
||||
Next actions:
|
||||
|
||||
1. Copy prompt to AI tool
|
||||
2. Return to UX specification
|
||||
3. Exit workflow
|
||||
|
||||
Select option (1-3):</ask>
|
||||
|
||||
</step>
|
||||
|
||||
</workflow>
|
||||
162
bmad/bmm/workflows/2-plan/ux/ux-spec-template.md
Normal file
162
bmad/bmm/workflows/2-plan/ux/ux-spec-template.md
Normal file
@@ -0,0 +1,162 @@
|
||||
# {{project_name}} UX/UI Specification
|
||||
|
||||
_Generated on {{date}} by {{user_name}}_
|
||||
|
||||
## Executive Summary
|
||||
|
||||
{{project_context}}
|
||||
|
||||
---
|
||||
|
||||
## 1. UX Goals and Principles
|
||||
|
||||
### 1.1 Target User Personas
|
||||
|
||||
{{user_personas}}
|
||||
|
||||
### 1.2 Usability Goals
|
||||
|
||||
{{usability_goals}}
|
||||
|
||||
### 1.3 Design Principles
|
||||
|
||||
{{design_principles}}
|
||||
|
||||
---
|
||||
|
||||
## 2. Information Architecture
|
||||
|
||||
### 2.1 Site Map
|
||||
|
||||
{{site_map}}
|
||||
|
||||
### 2.2 Navigation Structure
|
||||
|
||||
{{navigation_structure}}
|
||||
|
||||
---
|
||||
|
||||
## 3. User Flows
|
||||
|
||||
{{user_flow_1}}
|
||||
|
||||
{{user_flow_2}}
|
||||
|
||||
{{user_flow_3}}
|
||||
|
||||
{{user_flow_4}}
|
||||
|
||||
{{user_flow_5}}
|
||||
|
||||
---
|
||||
|
||||
## 4. Component Library and Design System
|
||||
|
||||
### 4.1 Design System Approach
|
||||
|
||||
{{design_system_approach}}
|
||||
|
||||
### 4.2 Core Components
|
||||
|
||||
{{core_components}}
|
||||
|
||||
---
|
||||
|
||||
## 5. Visual Design Foundation
|
||||
|
||||
### 5.1 Color Palette
|
||||
|
||||
{{color_palette}}
|
||||
|
||||
### 5.2 Typography
|
||||
|
||||
**Font Families:**
|
||||
{{font_families}}
|
||||
|
||||
**Type Scale:**
|
||||
{{type_scale}}
|
||||
|
||||
### 5.3 Spacing and Layout
|
||||
|
||||
{{spacing_layout}}
|
||||
|
||||
---
|
||||
|
||||
## 6. Responsive Design
|
||||
|
||||
### 6.1 Breakpoints
|
||||
|
||||
{{breakpoints}}
|
||||
|
||||
### 6.2 Adaptation Patterns
|
||||
|
||||
{{adaptation_patterns}}
|
||||
|
||||
---
|
||||
|
||||
## 7. Accessibility
|
||||
|
||||
### 7.1 Compliance Target
|
||||
|
||||
{{compliance_target}}
|
||||
|
||||
### 7.2 Key Requirements
|
||||
|
||||
{{accessibility_requirements}}
|
||||
|
||||
---
|
||||
|
||||
## 8. Interaction and Motion
|
||||
|
||||
### 8.1 Motion Principles
|
||||
|
||||
{{motion_principles}}
|
||||
|
||||
### 8.2 Key Animations
|
||||
|
||||
{{key_animations}}
|
||||
|
||||
---
|
||||
|
||||
## 9. Design Files and Wireframes
|
||||
|
||||
### 9.1 Design Files
|
||||
|
||||
{{design_files}}
|
||||
|
||||
### 9.2 Key Screen Layouts
|
||||
|
||||
{{screen_layout_1}}
|
||||
|
||||
{{screen_layout_2}}
|
||||
|
||||
{{screen_layout_3}}
|
||||
|
||||
---
|
||||
|
||||
## 10. Next Steps
|
||||
|
||||
### 10.1 Immediate Actions
|
||||
|
||||
{{immediate_actions}}
|
||||
|
||||
### 10.2 Design Handoff Checklist
|
||||
|
||||
{{design_handoff_checklist}}
|
||||
|
||||
---
|
||||
|
||||
## Appendix
|
||||
|
||||
### Related Documents
|
||||
|
||||
- PRD: `{{prd}}`
|
||||
- Epics: `{{epics}}`
|
||||
- Tech Spec: `{{tech_spec}}`
|
||||
- Architecture: `{{architecture}}`
|
||||
|
||||
### Version History
|
||||
|
||||
| Date | Version | Changes | Author |
|
||||
| -------- | ------- | --------------------- | ------------- |
|
||||
| {{date}} | 1.0 | Initial specification | {{user_name}} |
|
||||
Reference in New Issue
Block a user