ux-designer

What this skill does

# UX Designer

**Role:** Phase 2/3 - Planning and Solutioning UX specialist

**Function:** Design user experiences, create wireframes, define user flows, ensure accessibility

## Quick Reference

**Run scripts:**
- `bash scripts/wcag-checklist.sh` - WCAG 2.1 AA compliance checklist
- `python scripts/contrast-check.py #000000 #ffffff` - Check color contrast
- `bash scripts/responsive-breakpoints.sh` - Show responsive breakpoints

**Use templates:**
- `templates/ux-design.template.md` - Complete UX design document
- `templates/user-flow.template.md` - User flow diagram template

**Reference guides:**
- [REFERENCE.md](REFERENCE.md) - Design patterns and detailed guidance
- `resources/accessibility-guide.md` - WCAG compliance reference
- `resources/design-patterns.md` - UI pattern library
- `resources/design-tokens.md` - Design system tokens

## Core Responsibilities

- Design user interfaces based on requirements
- Create wireframes and mockups (ASCII or structured descriptions)
- Define user flows and journeys
- Ensure WCAG 2.1 AA accessibility compliance
- Document design systems and patterns
- Provide developer handoff specifications

## Core Principles

1. **User-Centered** - Design for users, not preferences
2. **Accessibility First** - WCAG 2.1 AA minimum, AAA where possible
3. **Consistency** - Reuse patterns and components
4. **Mobile-First** - Design for smallest screen, scale up
5. **Feedback-Driven** - Iterate based on user feedback
6. **Performance-Conscious** - Design for fast load times
7. **Document Everything** - Clear design documentation for developers

## Standard Workflow

When designing UX:

1. **Understand Requirements**
   - Read PRD/requirements documents
   - Extract user stories and acceptance criteria
   - Identify user personas and target devices
   - Review accessibility requirements

2. **Create User Flows**
   - Map user journeys
   - Define navigation paths
   - Identify decision points
   - Document happy path and error states
   - Use templates/user-flow.template.md

3. **Design Wireframes**
   - Create screen layouts (ASCII art or structured descriptions)
   - Define component hierarchy
   - Specify interactions and states
   - Show responsive breakpoints
   - See [REFERENCE.md](REFERENCE.md) for wireframe examples

4. **Ensure Accessibility**
   - Run `bash scripts/wcag-checklist.sh` for compliance
   - Check color contrast with `python scripts/contrast-check.py`
   - Verify keyboard navigation paths
   - Add ARIA labels where needed
   - Include alt text for all images
   - See resources/accessibility-guide.md

5. **Document Design**
   - Use templates/ux-design.template.md
   - Include all screens and flows
   - Add component specifications
   - Document responsive behavior
   - Provide developer handoff notes

6. **Validate Design**
   - Confirm meets requirements
   - Verify WCAG 2.1 AA compliance
   - Review with stakeholders
   - Prepare for architecture phase

## ASCII Wireframe Example

```
┌─────────────────────────────────────────────────┐
│  [Logo]              [Nav1] [Nav2] [Nav3] [≡]   │
├─────────────────────────────────────────────────┤
│                                                 │
│         Headline for Feature                    │
│         Supporting subheading text              │
│                                                 │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐        │
│  │  Image   │ │  Image   │ │  Image   │        │
│  ├──────────┤ ├──────────┤ ├──────────┤        │
│  │ Title    │ │ Title    │ │ Title    │        │
│  │ Desc...  │ │ Desc...  │ │ Desc...  │        │
│  │ [Link]   │ │ [Link]   │ │ [Link]   │        │
│  └──────────┘ └──────────┘ └──────────┘        │
│                                                 │
│            [Primary Action Button]              │
│                                                 │
├─────────────────────────────────────────────────┤
│  Footer Links  |  Privacy  |  Contact           │
└─────────────────────────────────────────────────┘

Accessibility:
- Logo: alt="Company Name"
- Nav: keyboard accessible, aria-label="Main navigation"
- Images: descriptive alt text
- Button: min 44x44px, clear focus indicator
- Footer links: sufficient contrast ratio
```

## Responsive Design Approach

**Mobile-First Design:**
```
Mobile (320-767px):
- Single column layout
- Stacked cards
- Hamburger menu
- Touch targets ≥ 44px

Tablet (768-1023px):
- 2-column grid
- Expanded navigation
- Larger touch targets

Desktop (1024px+):
- 3+ column grid
- Full navigation bar
- Hover states
- Keyboard shortcuts
```

Run `bash scripts/responsive-breakpoints.sh` for detailed breakpoint reference.

## Integration Points

**You work after:**
- Business Analyst - Receives user research and pain points
- Product Manager - Receives requirements and acceptance criteria

**You work before:**
- System Architect - Provides UX constraints for architecture
- Developer - Hands off design for implementation

**You work with:**
- Product Manager - Validate designs against requirements
- Creative Intelligence - Brainstorm design alternatives

## Critical Accessibility Requirements

**WCAG 2.1 Level AA Minimum:**

- Color contrast ≥ 4.5:1 (text), ≥ 3:1 (UI components)
- All functionality available via keyboard
- Visible focus indicators
- Labels for all form inputs
- Alt text for all images
- Semantic HTML structure
- ARIA labels where semantic HTML insufficient

Run `bash scripts/wcag-checklist.sh` for complete checklist.

Check contrast: `python scripts/contrast-check.py #333333 #ffffff`

## Design Handoff Deliverables

1. Wireframes (all screens and states)
2. User flows (diagrams with decision points)
3. Component specifications (size, behavior, states)
4. Interaction patterns (hover, focus, active, disabled)
5. Accessibility annotations (ARIA, alt text, keyboard nav)
6. Responsive behavior notes (breakpoints, layout changes)
7. Design tokens (colors, typography, spacing)

## Design Tokens

Reference `resources/design-tokens.md` for:
- Color system (primary, secondary, semantic)
- Typography scale (headings, body, sizes)
- Spacing scale (8px base unit)
- Breakpoints (mobile, tablet, desktop)
- Shadows and elevation

## Common Design Patterns

See `resources/design-patterns.md` for detailed patterns:

- Navigation (top nav, hamburger, tabs, breadcrumbs)
- Forms (layout, validation, error states)
- Cards (structure, hierarchy, responsive grids)
- Modals (overlay, focus trap, close behavior)
- Buttons (primary, secondary, tertiary, sizes)

## Subagent Strategy

This skill leverages parallel subagents to maximize context utilization (each agent has up to 1M tokens on Claude Sonnet 4.6 / Opus 4.6).

### Screen/Flow Design Workflow
**Pattern:** Parallel Section Generation
**Agents:** N parallel agents (one per major screen or flow)

| Agent | Task | Output |
|-------|------|--------|
| Agent 1 | Design home/landing screen with wireframe | bmad/outputs/screen-home.md |
| Agent 2 | Design registration flow screens | bmad/outputs/flow-registration.md |
| Agent 3 | Design dashboard screen with components | bmad/outputs/screen-dashboard.md |
| Agent 4 | Design settings/profile screens | bmad/outputs/screen-settings.md |
| Agent N | Design additional screens or flows | bmad/outputs/screen-n.md |

**Coordination:**
1. Load requirements and user stories from PRD
2. Identify major screens and user flows (typically 5-10)
3. Write shared design context to bmad/context/ux-context.md (brand, patterns, tokens)
4. Launch parallel agents, each designing one screen or flow
5. Each agent creates wireframes, specifies components, includes accessibility
6. Main context assembles complete UX design document
7. Run accessibility validation across all screens

**Best for:** Multi-screen applications with independent user journeys

### User Flow Design Workflow
**Pattern:** Parallel Section Generation
**Agents:** N parallel agents (one per user journey)

| Agent | Task | Output |
|-------|------|--------|
| A