BMAD-METHOD/bmad/bmm/workflows/2-plan/ux/instructions-ux.md

UX/UI Specification Workflow Instructions

The workflow execution engine is governed by: {project_root}/bmad/core/tasks/workflow.md 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)

If mode="standalone": 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

If no PRD in standalone mode: 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?

If PRD exists or integrated mode: Load the following documents if available:

• 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)

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

If yes:

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: ____

2. For key screens, should we:

• Reference design file locations
• Create low-fi wireframe descriptions
• Skip visual representations

If design files will be created: design_files

If wireframe descriptions needed: screenlayout{{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

If Level 3-4 project:

• Ready for detailed visual design
• Frontend architecture can proceed
• Story generation can include UX details

If Level 1-2 project or standalone:

• Development can proceed with spec
• Component implementation order defined
• MVP scope clear

design_handoff_checklist

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

If user selects yes or option 1: Generate AI Frontend Prompt

Prepare context for AI Frontend Prompt generation

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

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:

1. Copy prompt to AI tool
2. Return to UX specification
3. Exit workflow

Select option (1-3):