BMAD-METHOD/.claude/templates/ui-spec.md

# {{project_name}} UI/UX Specification

## Introduction

This document defines the user experience goals, information architecture, user flows, and visual design specifications for {{project_name}}'s user interface. It serves as the foundation for visual design and frontend development, ensuring a cohesive and user-centered experience.

### Overall UX Goals & Principles

#### Target User Personas
{{persona_descriptions}}

#### Usability Goals
{{usability_goals}}

#### Design Principles
1. **{{design_principle_1}}:** {{design_principle_1_description}}
2. **{{design_principle_2}}:** {{design_principle_2_description}}
3. **{{design_principle_3}}:** {{design_principle_3_description}}

### Change Log
| Date | Version | Description | Author |
|------|---------|-------------|---------|
| {{date}} | {{version}} | {{description}} | {{author}} |

## Information Architecture (IA)

### Site Map / Screen Inventory
```mermaid
{{sitemap_diagram}}
```

### Navigation Structure
**Primary Navigation:** {{primary_nav_description}}

**Secondary Navigation:** {{secondary_nav_description}}

**Breadcrumb Strategy:** {{breadcrumb_strategy}}

## User Flows

### {{flow_1_name}}
**User Goal:** {{flow_1_goal}}

**Entry Points:** {{flow_1_entry_points}}

**Success Criteria:** {{flow_1_success_criteria}}

#### Flow Diagram
```mermaid
{{flow_1_diagram}}
```

#### Edge Cases & Error Handling
- {{flow_1_edge_case_1}}
- {{flow_1_edge_case_2}}
- {{flow_1_edge_case_3}}

**Notes:** {{flow_1_notes}}

### {{flow_2_name}}
**User Goal:** {{flow_2_goal}}

**Entry Points:** {{flow_2_entry_points}}

**Success Criteria:** {{flow_2_success_criteria}}

#### Flow Diagram
```mermaid
{{flow_2_diagram}}
```

#### Edge Cases & Error Handling
- {{flow_2_edge_case_1}}
- {{flow_2_edge_case_2}}

**Notes:** {{flow_2_notes}}

## Wireframes & Mockups

**Primary Design Files:** {{design_tool_link}}

### Key Screen Layouts

#### {{screen_1_name}}
**Purpose:** {{screen_1_purpose}}

**Key Elements:**
- {{screen_1_element_1}}
- {{screen_1_element_2}}
- {{screen_1_element_3}}

**Interaction Notes:** {{screen_1_interaction_notes}}

**Design File Reference:** {{screen_1_design_link}}

#### {{screen_2_name}}
**Purpose:** {{screen_2_purpose}}

**Key Elements:**
- {{screen_2_element_1}}
- {{screen_2_element_2}}
- {{screen_2_element_3}}

**Interaction Notes:** {{screen_2_interaction_notes}}

**Design File Reference:** {{screen_2_design_link}}

## Component Library / Design System

**Design System Approach:** {{design_system_approach}}

### Core Components

#### {{component_1_name}}
**Purpose:** {{component_1_purpose}}

**Variants:** {{component_1_variants}}

**States:** {{component_1_states}}

**Usage Guidelines:** {{component_1_usage_guidelines}}

#### {{component_2_name}}
**Purpose:** {{component_2_purpose}}

**Variants:** {{component_2_variants}}

**States:** {{component_2_states}}

**Usage Guidelines:** {{component_2_usage_guidelines}}

## Branding & Style Guide

### Visual Identity
**Brand Guidelines:** {{brand_guidelines_link}}

### Color Palette
| Color Type | Hex Code | Usage |
|------------|----------|-------|
| Primary | {{primary_color}} | {{primary_usage}} |
| Secondary | {{secondary_color}} | {{secondary_usage}} |
| Accent | {{accent_color}} | {{accent_usage}} |
| Success | {{success_color}} | Positive feedback, confirmations |
| Warning | {{warning_color}} | Cautions, important notices |
| Error | {{error_color}} | Errors, destructive actions |
| Neutral | {{neutral_colors}} | Text, borders, backgrounds |

### Typography

#### Font Families
- **Primary:** {{primary_font}}
- **Secondary:** {{secondary_font}}
- **Monospace:** {{mono_font}}

#### Type Scale
| Element | Size | Weight | Line Height |
|---------|------|--------|-------------|
| H1 | {{h1_size}} | {{h1_weight}} | {{h1_line}} |
| H2 | {{h2_size}} | {{h2_weight}} | {{h2_line}} |
| H3 | {{h3_size}} | {{h3_weight}} | {{h3_line}} |
| Body | {{body_size}} | {{body_weight}} | {{body_line}} |
| Small | {{small_size}} | {{small_weight}} | {{small_line}} |

### Iconography
**Icon Library:** {{icon_library}}

**Usage Guidelines:** {{icon_guidelines}}

### Spacing & Layout
**Grid System:** {{grid_system}}

**Spacing Scale:** {{spacing_scale}}

## Accessibility Requirements

### Compliance Target
**Standard:** {{compliance_standard}}

### Key Requirements
**Visual:**
- Color contrast ratios: {{contrast_requirements}}
- Focus indicators: {{focus_requirements}}
- Text sizing: {{text_requirements}}

**Interaction:**
- Keyboard navigation: {{keyboard_requirements}}
- Screen reader support: {{screen_reader_requirements}}
- Touch targets: {{touch_requirements}}

**Content:**
- Alternative text: {{alt_text_requirements}}
- Heading structure: {{heading_requirements}}
- Form labels: {{form_requirements}}

### Testing Strategy
{{accessibility_testing}}

## Responsiveness Strategy

### Breakpoints
| Breakpoint | Min Width | Max Width | Target Devices |
|------------|-----------|-----------|----------------|
| Mobile | {{mobile_min}} | {{mobile_max}} | {{mobile_devices}} |
| Tablet | {{tablet_min}} | {{tablet_max}} | {{tablet_devices}} |
| Desktop | {{desktop_min}} | {{desktop_max}} | {{desktop_devices}} |
| Wide | {{wide_min}} | - | {{wide_devices}} |

### Adaptation Patterns
**Layout Changes:** {{layout_adaptations}}

**Navigation Changes:** {{nav_adaptations}}

**Content Priority:** {{content_adaptations}}

**Interaction Changes:** {{interaction_adaptations}}

## Animation & Micro-interactions

### Animation Principles
{{animation_principles}}

### Key Micro-interactions
{{micro_interactions}}

### Performance Considerations
{{animation_performance}}

## Technical Considerations

### Performance Requirements
{{performance_requirements}}

### Browser Support
{{browser_support}}

### Framework Integration
{{framework_integration_notes}}

## Next Steps

{{next_steps_guidance}}

### Frontend Architecture Handoff
{{frontend_architecture_prompt}}