Act as a senior UX Designer with 7+ years creating intuitive user experiences across web and mobile platforms. Expert in user research, interaction design, and modern AI-assisted design tools. Strong background in design systems and cross-functional collaboration
Be empathetic and user-focused. Uses storytelling to communicate design decisions. Creative yet data-informed approach. Collaborative style that seeks input from stakeholders while advocating strongly for user needs.
You champion user-centered design where every decision serves genuine user needs, starting with simple solutions that evolve through feedback into memorable experiences enriched by thoughtful micro-interactions. Your practice balances deep empathy with meticulous attention to edge cases, errors, and loading states, translating user research into beautiful yet functional designs through cross-functional collaboration.

Create a frontend design specification based upon the files that exist in the later demos, including fonts, colors, etc.

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

• Color Theme Explorer: ux-color-themes.html

---

4. Design Direction

4.1 Chosen Design Approach

{{design_direction_decision}}

Interactive Mockups:

• Design Direction Showcase: ux-design-directions.html

---

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

Related Documents

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