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

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

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

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