BMAD-METHOD/docs/templates/ui-ux-spec.md

{Project Name} UI/UX Specification

Introduction

{State the purpose - to define the user experience goals, information architecture, user flows, and visual design specifications for the project's user interface.}

• Link to Primary Design Files: {e.g., Figma, Sketch, Adobe XD URL}
• Link to Deployed Storybook / Design System: {URL, if applicable}

Overall UX Goals & Principles

• Target User Personas: {Reference personas or briefly describe key user types and their goals.}
• Usability Goals: {e.g., Ease of learning, efficiency of use, error prevention.}
• Design Principles: {List 3-5 core principles guiding the UI/UX design - e.g., "Clarity over cleverness", "Consistency", "Provide feedback".}

Information Architecture (IA)

• Site Map / Screen Inventory:

  graph TD
      A[Homepage] --> B(Dashboard);
      A --> C{Settings};
      B --> D[View Details];
      C --> E[Profile Settings];
      C --> F[Notification Settings];
  

  (Or provide a list of all screens/pages)
• Navigation Structure: {Describe primary navigation (e.g., top bar, sidebar), secondary navigation, breadcrumbs, etc.}

User Flows

{Detail key user tasks. Use diagrams or descriptions.}

{User Flow Name, e.g., User Login}

• Goal: {What the user wants to achieve.}
• Steps / Diagram:

  graph TD
      Start --> EnterCredentials[Enter Email/Password];
      EnterCredentials --> ClickLogin[Click Login Button];
      ClickLogin --> CheckAuth{Auth OK?};
      CheckAuth -- Yes --> Dashboard;
      CheckAuth -- No --> ShowError[Show Error Message];
      ShowError --> EnterCredentials;
  

  (Or: Link to specific flow diagram in Figma/Miro)

{Another User Flow Name}

{...}

Wireframes & Mockups

{Reference the main design file link above. Optionally embed key mockups or describe main screen layouts.}

• Screen / View Name 1: {Description of layout and key elements. Link to specific Figma frame/page.}
• Screen / View Name 2: {...}

Component Library / Design System Reference

{Link to the primary source (Storybook, Figma Library). If none exists, define key components here.}

{Component Name, e.g., Primary Button}

• Appearance: {Reference mockup or describe styles.}
• States: {Default, Hover, Active, Disabled, Loading.}
• Behavior: {Interaction details.}

{Another Component Name}

{...}

Branding & Style Guide Reference

{Link to the primary source or define key elements here.}

• Color Palette: {Primary, Secondary, Accent, Feedback colors (hex codes).}
• Typography: {Font families, sizes, weights for headings, body, etc.}
• Iconography: {Link to icon set, usage notes.}
• Spacing & Grid: {Define margins, padding, grid system rules.}

Accessibility (AX) Requirements

• Target Compliance: {e.g., WCAG 2.1 AA}
• Specific Requirements: {Keyboard navigation patterns, ARIA landmarks/attributes for complex components, color contrast minimums.}

Responsiveness

• Breakpoints: {Define pixel values for mobile, tablet, desktop, etc.}
• Adaptation Strategy: {Describe how layout and components adapt across breakpoints. Reference designs.}

Change Log

Change	Date	Version	Description	Author
Initial draft	YYYY-MM-DD	0.1	Initial draft	{Agent/Person}
Added Flow X	YYYY-MM-DD	0.2	Defined user flow X	{Agent/Person}
...	...	...	...	...