Files
pig-farm-controller/bmad/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md
2025-11-01 19:22:39 +08:00

3.1 KiB

{{project_name}} UX Design Specification

Created on {{date}} by {{user_name}} Generated using BMad Method - Create UX Design Workflow v1.0


Executive Summary

{{project_vision}}


1. Design System Foundation

1.1 Design System Choice

{{design_system_decision}}


2. Core User Experience

2.1 Defining Experience

{{core_experience}}

2.2 Novel UX Patterns

{{novel_ux_patterns}}


3. Visual Foundation

3.1 Color System

{{visual_foundation}}

Interactive Visualizations:


4. Design Direction

4.1 Chosen Design Approach

{{design_direction_decision}}

Interactive Mockups:


5. User Journey Flows

5.1 Critical User Paths

{{user_journey_flows}}


6. Component Library

6.1 Component Strategy

{{component_library_strategy}}


7. UX Pattern Decisions

7.1 Consistency Rules

{{ux_pattern_decisions}}


8. Responsive Design & Accessibility

8.1 Responsive Strategy

{{responsive_accessibility_strategy}}


9. Implementation Guidance

9.1 Completion Summary

{{completion_summary}}


Appendix

  • Product Requirements: {{prd_file}}
  • Product Brief: {{brief_file}}
  • Brainstorming: {{brainstorm_file}}

Core Interactive Deliverables

This UX Design Specification was created through visual collaboration:

  • Color Theme Visualizer: {{color_themes_html}}

    • Interactive HTML showing all color theme options explored
    • Live UI component examples in each theme
    • Side-by-side comparison and semantic color usage
  • Design Direction Mockups: {{design_directions_html}}

    • Interactive HTML with 6-8 complete design approaches
    • Full-screen mockups of key screens
    • Design philosophy and rationale for each direction

Optional Enhancement Deliverables

This section will be populated if additional UX artifacts are generated through follow-up workflows.

Next Steps & Follow-Up Workflows

This UX Design Specification can serve as input to:

  • Wireframe Generation Workflow - Create detailed wireframes from user flows
  • Figma Design Workflow - Generate Figma files via MCP integration
  • Interactive Prototype Workflow - Build clickable HTML prototypes
  • Component Showcase Workflow - Create interactive component library
  • AI Frontend Prompt Workflow - Generate prompts for v0, Lovable, Bolt, etc.
  • Solution Architecture Workflow - Define technical architecture with UX context

Version History

Date Version Changes Author
{{date}} 1.0 Initial UX Design Specification {{user_name}}

This UX Design Specification was created through collaborative design facilitation, not template generation. All decisions were made with user input and are documented with rationale.