BMAD-METHOD/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md

Create UX Design Workflow Instructions

The workflow execution engine is governed by: {project-root}/{bmad_folder}/core/tasks/workflow.xml You MUST have already loaded and processed: {installed_path}/workflow.yaml This workflow uses ADAPTIVE FACILITATION - adjust your communication style based on {user_skill_level} Communicate all responses in {communication_language} and tailor to {user_skill_level} Generate all documents in {document_output_language} SAVE PROGRESS after each major step - use tags throughout ⚠️ ABSOLUTELY NO TIME ESTIMATES - NEVER mention hours, days, weeks, months, or ANY time-based predictions ⚠️ CHECKPOINT PROTOCOL: After EVERY tag, follow workflow.xml substep 2c: SAVE → SHOW checkpoint separator → DISPLAY content → PRESENT options → WAIT for user response

Check if {output_folder}/bmm-workflow-status.yaml exists No workflow status file found. Create UX Design can run standalone or as part of BMM planning workflow. Set standalone_mode = true Load and validate workflow status, check if create-ux-design is completed or out of sequence UX Design already completed or out of sequence. Continue anyway? (y/n) Exit workflow Set standalone_mode = false Review loaded context from Step 1 I've loaded your project documentation. Let me confirm what I'm seeing:

Project: {{project_summary_from_docs}} Target Users: {{user_summary_from_docs}} Does this match your understanding? Any corrections or additions?

Let's start by understanding what you're building.

What are you building? (1-2 sentences) Who is this for? (Describe your ideal user)

project_and_users_confirmed

Now let's dig into the experience itself.

What's the core experience? (What's the ONE thing users will do most?) What should be absolutely effortless? Which user action is most critical to get right? Platform: Web, mobile app, desktop, multiple?

core_experience_and_platform

What should users FEEL when using this?

Empowered and in control? Delighted and surprised? Efficient and productive? Creative and inspired? Calm and focused? Connected and engaged? Something else?

What feeling would make them tell a friend about this?

desired_emotional_response

Name 2-3 apps your users already love and USE regularly.

For each one, what do they do well from a UX perspective? What makes the experience compelling?

Research mentioned apps to analyze current UX patterns and principles inspiration_analysis

Analyze project complexity and set facilitation mode based on {user_skill_level}

Here's what I'm understanding about {{project_name}}:

Vision: {{project_vision_summary}} Users: {{user_summary}} Core Experience: {{core_action_summary}} Desired Feeling: {{emotional_goal}} Platform: {{platform_summary}} Inspiration: {{inspiration_summary_with_ux_patterns}}

This helps me understand both what we're building and the experience we're aiming for. Let's start designing!

Load UX design template and initialize output document project_vision

Identify appropriate design system options based on platform and requirements

Which design system approach resonates with you?

I'll present options for your platform - think of design systems like foundations that provide proven UI components and patterns, speeding development and ensuring consistency.

• Want complete visual uniqueness? (→ custom)
• Want fast development with great defaults? (→ established system)
• Have brand guidelines to follow? (→ themeable system)

design_system_decision

What's your app's defining experience - the core interaction that, if we nail it, everything else follows?

When someone describes your app to a friend, what would they say?

Examples: "Swipe to match with people" (Tinder), "Share photos that disappear" (Snapchat), "Have conversations with AI" (ChatGPT)

Analyze if this core experience has established UX patterns or requires novel pattern design defining_experience

The {{pattern_name}} interaction is novel! Let's design this interaction systematically.

What's the user's goal? How should they initiate this action? What feedback should they see? How do they know it succeeded? What if something goes wrong? novel_pattern_mechanics

Based on our understanding, here are the guiding principles for the entire experience:

Speed: {{speed_principle}} Guidance: {{guidance_principle}} Flexibility: {{flexibility_principle}} Feedback: {{feedback_principle}}

These principles will guide every UX decision from here forward. core_experience_principles

Do you have existing brand guidelines or specific color palette? (y/n)

If no, I'll generate theme options based on your project's personality and goals.

Extract and document brand colors, generate semantic color mappings Generate comprehensive HTML color theme visualizer with multiple options 🎨 I've created a color theme visualizer! Open {color_themes_html} to explore theme options with complete UI examples. Which color theme direction resonates most? You can choose, combine, or request variations.

Define typography system, spacing, and layout foundation visual_foundation

Create 6-8 different design direction variations exploring layout, hierarchy, density, interaction patterns, and visual weight

Generate comprehensive HTML design direction showcase with full-screen mockups, interactive states, and comparison tools 🎨 Design Direction Mockups Generated! Open: {design_directions_html}

Each mockup shows a complete vision for your app's look and feel. As you explore, look for: ✓ Which layout feels most intuitive? ✓ Which information hierarchy matches your priorities? ✓ Which interaction style fits your core experience? ✓ Which visual weight feels right for your brand?

Which design direction(s) resonate most? Pick a favorite, combine elements, or request modifications. design_direction_decision

Extract critical user journeys from PRD Let's design the flow for {{journey_name}}. Walk me through how a user should accomplish this task - entry, input, feedback, success. Consider the minimum steps to value, decision points, error recovery, and progressive disclosure.

Present 2-3 flow approach options based on journey complexity, then create detailed flow documentation with Mermaid diagram

user_journey_flows

Identify required components from design system vs custom needs

For components not covered by {{design_system}}, let's define them together.

For each custom component: What's its purpose? What content/data does it display? What actions can users take? What states does it have?

Document each custom component with anatomy, states, variants, behavior, and accessibility requirements component_library_strategy

Let's establish consistency patterns for how your app behaves in common situations - button hierarchy, feedback patterns, form patterns, modals, navigation, empty states, confirmations, notifications, search, and date/time patterns.

Do you want to go through each pattern category thoroughly, focus only on the most critical for your app, or let me recommend smart defaults and you override where needed?

Facilitate pattern decisions with appropriate depth, documenting chosen approaches and rationale for consistency ux_pattern_decisions

Let's define how your app adapts across devices.

Desktop: How should we use extra space? Multi-column? Side navigation? Tablet: Simplified layout? Touch-optimized? Mobile: Bottom navigation or hamburger menu? How do layouts collapse?

Define breakpoint strategy and adaptation patterns

Accessibility strategy: WCAG Level A (basic), AA (recommended standard), or AAA (highest)?

Based on your deployment intent: {{recommendation}}

Define accessibility requirements and testing strategy responsive_accessibility_strategy

🎨 One more thing! Want to see your design come to life?

1. Key Screens Showcase - 6-8 panels showing your app's main screens with all your design choices applied
2. User Journey Visualization - Step-by-step HTML mockup of one critical user journey
3. Something else - Tell me what you want to see!
4. Skip for now - I'll just finalize the documentation

Generate requested HTML visualizations applying all design decisions

completion_summary

Ensure document is complete with all template-output sections filled

✅ UX Design Specification Complete!

Core Deliverables:

• ✅ UX Design Specification: {default_output_file}
• ✅ Color Theme Visualizer: {color_themes_html}
• ✅ Design Direction Mockups: {design_directions_html}

Recommended Next Steps:

- **Next required:** {{next_workflow}} ({{next_agent}} agent) - **Optional:** Run validation with \*validate-design, or generate additional UX artifacts Check status anytime with: `workflow-status` - Run validation checklist with \*validate-design (recommended) - **Solution Architecture workflow** (with UX context) - *Recommended next step after completing PRD and UX Design* - Or run `workflow-init` to create a workflow path and get guided next steps

Optional Follow-Up Workflows:

• Wireframe Generation / Figma Design / Interactive Prototype workflows
• Component Showcase / AI Frontend Prompt workflows

Save final document

Update workflow status with file path and determine next workflow