ros/BMAD-METHOD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
36231173d1550a3b3610a1199ce4267732253c25
BMAD-METHOD/src/modules/bmm/workflows/2-plan-workflows/ux/instructions-ux.md
Brian Madison 36231173d1 workflows consistent method to update status file
2025-10-17 23:44:43 -05:00

11 KiB
Raw Blame History

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 Communicate all responses in {communication_language} and language MUST be tailored to {user_skill_level} Generate all documents in {document_output_language} 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

DOCUMENT OUTPUT: Professional, precise, actionable UX specs. Use tables/lists over prose. User skill level ({user_skill_level}) affects conversation style ONLY, not document content.

mode: init-check Store {{status_file_path}} for later updates Set tracking_mode = true Set tracking_mode = false Note: Running without workflow tracking. Run `workflow-init` to enable progress tracking.

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:
  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?
Load the following documents if available:
  • PRD.md (primary source for requirements and user journeys)
  • epics.md (helps understand feature grouping)
  • tech-spec.md (understand technical constraints)
  • solution-architecture.md (if Level 3-4 project)
  • bmm-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

{project-root}/bmad/core/tasks/adv-elicit.xml

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

{project-root}/bmad/core/tasks/adv-elicit.xml

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}}

{project-root}/bmad/core/tasks/adv-elicit.xml

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

{project-root}/bmad/core/tasks/adv-elicit.xml

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
- [ ] Ready for detailed visual design - [ ] Frontend architecture can proceed - [ ] Story generation can include UX details - [ ] Development can proceed with spec - [ ] Component implementation order defined - [ ] MVP scope clear

design_handoff_checklist

✅ UX Specification Complete, {user_name}!

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

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

mode: update action: complete_workflow workflow_name: ux ✅ Status updated! Next: {{next_workflow}}