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:

  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:

Analyze project for UX complexity:

Load ux-spec-template from workflow.yaml

<template-output>project_context</template-output>

Let’s establish the UX foundation. Based on the PRD:

1. Target User Personas (extract from PRD or define):

2. Key Usability Goals: What does success look like for users?

3. Core Design Principles (3-5 principles): What will guide all design decisions?

<template-output>user_personas</template-output> <template-output>usability_goals</template-output> <template-output>design_principles</template-output>

<invoke-task halt=“true”>{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>

Based on functional requirements from PRD, create site/app structure

Create comprehensive site map showing:

<template-output>site_map</template-output>

Define navigation structure:

<template-output>navigation_structure</template-output>

<invoke-task halt=“true”>{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>

Extract key user journeys from PRD For each critical user task, create detailed flow

<for-each journey=“user_journeys_from_prd”>

Flow: {{journey_name}}

Define:

Create Mermaid diagram showing complete flow.

<template-output>userflow{{journey_number}}</template-output>

</for-each>

<invoke-task halt=“true”>{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>

Component Library Strategy:

1. Design System 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:

<template-output>design_system_approach</template-output> <template-output>core_components</template-output>

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:

Define color palette with semantic meanings

<template-output>color_palette</template-output>

Define typography system

<template-output>font_families</template-output> <template-output>type_scale</template-output>

Define spacing and layout grid

<template-output>spacing_layout</template-output>

<invoke-task halt=“true”>{project-root}/bmad/core/tasks/adv-elicit.xml</invoke-task>

Responsive Design:

Define breakpoints based on target devices from PRD

<template-output>breakpoints</template-output>

Define adaptation patterns for different screen sizes

<template-output>adaptation_patterns</template-output>

Accessibility Requirements:

Based on deployment intent from PRD, define compliance level

<template-output>compliance_target</template-output> <template-output>accessibility_requirements</template-output>

Would you like to define animation and micro-interactions? (y/n)

This is recommended for:

Define motion principles <template-output>motion_principles</template-output>

Define key animations and transitions <template-output>key_animations</template-output>

Design File Strategy:

1. Will you be creating high-fidelity designs?

2. For key screens, should we:

<template-output if=“design files will be created”>design_files</template-output>

<for-each screen=“key_screens”> <template-output>screenlayout{{screen_number}}</template-output> </for-each>

UX Specification Complete

Generate specific next steps based on project level and outputs

<template-output>immediate_actions</template-output>

Design Handoff Checklist:

- [ ] 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

<template-output>design_handoff_checklist</template-output>

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:

<invoke-task>{project-root}/bmad/bmm/tasks/ai-fe-prompt.md</invoke-task>

Save AI Frontend Prompt to {{ai_frontend_prompt_file}}

AI Frontend Prompt saved to {{ai_frontend_prompt_file}}

This prompt is optimized for:

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