9.3 KiB
UX/UI Specification Workflow Instructions
The workflow execution engine is governed by: {project_root}/bmad/core/tasks/workflow.xml You MUST have already loaded and processed: {installed_path}/workflow.yaml This workflow creates comprehensive UX/UI specifications - can run standalone or as part of plan-project Uses ux-spec-template.md for structured output generation Can optionally generate AI Frontend Prompts for tools like Vercel v0, Lovable.ai
Determine workflow mode (standalone or integrated)
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
Let's gather essential information:- Project Description: What are you building?
- Target Users: Who will use this?
- Core Features: What are the main capabilities? (3-5 key features)
- Platform: Web, mobile, desktop, or multi-platform?
- Existing Brand/Design: Any existing style guide or brand to follow?
- 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)
- solution-architecture.md (if Level 3-4 project)
- project-workflow-status.md (understand project level and scope)
Analyze project for UX complexity:
- Number of user-facing features
- Types of users/personas mentioned
- Interaction complexity
- Platform requirements (web, mobile, desktop)
Load ux-spec-template from workflow.yaml
project_context
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?
user_personas usability_goals design_principles
Based on functional requirements from PRD, create site/app structure
Create comprehensive site map showing:
- All major sections/screens
- Hierarchical relationships
- Navigation paths
site_map
Define navigation structure:
- Primary navigation items
- Secondary navigation approach
- Mobile navigation strategy
- Breadcrumb structure
navigation_structure
Extract key user journeys from PRD For each critical user task, create detailed flow
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.
userflow{{journey_number}}
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.
For primary components, define:
- Component purpose
- Variants needed
- States (default, hover, active, disabled, error)
- Usage guidelines
design_system_approach core_components
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
Define color palette with semantic meanings
color_palette
Define typography system
font_families type_scale
Define spacing and layout grid
spacing_layout
Responsive Design:
Define breakpoints based on target devices from PRD
breakpoints
Define adaptation patterns for different screen sizes
adaptation_patterns
Accessibility Requirements:
Based on deployment intent from PRD, define compliance level
compliance_target accessibility_requirements
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
Define motion principles motion_principles
Define key animations and transitions key_animations
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 (describe)
2. For key screens, should we:
- Reference design file locations
- Create low-fi wireframe descriptions
- Skip visual representations
design_files
screen*layout*{{screen_number}}UX Specification Complete
Generate specific next steps based on project level and outputs
immediate_actions
Design Handoff Checklist:
- All user flows documented
- Component inventory complete
- Accessibility requirements defined
- Responsive strategy clear
- Brand guidelines incorporated
- Performance goals established
design_handoff_checklist
UX Specification saved to {{ux_spec_file}}
Additional Output Options:
- Generate AI Frontend Prompt (for Vercel v0, Lovable.ai, etc.)
- Review UX specification
- Create/update visual designs in design tool
- Return to planning workflow (if not standalone)
- Exit
Would you like to generate an AI Frontend Prompt? (y/n):
Generate AI Frontend PromptPrepare context for AI Frontend Prompt generation
What type of AI frontend generation are you targeting?
- Full application - Complete multi-page application
- Single page - One complete page/screen
- Component set - Specific components or sections
- Design system - Component library setup
Select option (1-4):
Gather UX spec details for prompt generation:
- Design system approach
- Color palette and typography
- Key components and their states
- User flows to implement
- Responsive requirements
{project-root}/bmad/bmm/tasks/ai-fe-prompt.md
Save AI Frontend Prompt to {{ai_frontend_prompt_file}}
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:
- Copy prompt to AI tool
- Return to UX specification
- Exit workflow
Select option (1-3):