UI/UX Design

Systematic UI/UX design skill with design system creation guides, Figma workflow patterns, accessibility audit checklists, browser-based visual audit procedures, and design-to-code handoff templates. Produces consistent, accessible, conversion-optimized interfaces.

When to Use

• Creating or extending a design system (tokens, components, patterns)
• Designing new pages, features, or user flows
• Auditing existing UI for accessibility compliance
• Preparing design specifications for developer handoff
• Setting up Figma project structure and workflows
• Reviewing existing UI via automated browser screenshots and heuristic analysis
• Reviewing UI components against heuristics and platform guidelines

When NOT to Use

• Writing page content or copy (use content-creation skill)
• Implementing frontend code (use the frontend-engineer perspective)
• Conducting SEO audits (use /seo-review workflow)
• Writing technical documentation (use /docs workflow)

Design System Creation

Step 1: Audit Existing UI

Before creating a design system:

1. Screenshot inventory: Capture all existing screens and components
2. Pattern extraction: Identify recurring colors, typography, spacing, components
3. Inconsistency map: Document where the same concept is implemented differently
4. Priority matrix: Rank components by frequency of use × inconsistency severity

Step 2: Define Foundations

Build from the ground up:

Step 3: Build Components

Follow Atomic Design progression:

1. Atoms: Button, Input, Label, Icon, Badge, Avatar, Checkbox, Radio, Toggle
2. Molecules: Input Group, Search Bar, Card, Dropdown, Tooltip, Alert, Breadcrumb
3. Organisms: Header, Footer, Sidebar, Form, Data Table, Modal, Navigation

For each component, document:

• Variants: Primary, secondary, outline, ghost, destructive
• Sizes: xs, sm, md, lg, xl
• States: Default, hover, focus, active, disabled, loading, error
• Accessibility: ARIA role, keyboard behavior, screen reader announcement
• Responsive: Behavior at each breakpoint
• Do / Don't: Usage examples and anti-patterns

Step 4: Document and Maintain

• Publish component library with live examples
• Version with semantic versioning
• Changelog for every update
• Deprecation notices with migration guides

See design-system-checklist.md for the full creation checklist.

Figma Workflow

See figma-workflow.md for detailed Figma project setup, component organization, Auto Layout patterns, and developer handoff procedures.

Quick Reference

Accessibility Audit

See accessibility-checklist.md for the comprehensive WCAG 2.2 AA audit checklist.

Quick Audit (5-Minute Check)

1. Tab through the page — can you reach and operate every interactive element?
2. Zoom to 200% — does content reflow without horizontal scrolling?
3. Check contrast — do all text elements meet 4.5:1 (normal) / 3:1 (large)?
4. Screen reader test — do headings, landmarks, and alt text make sense?
5. Keyboard-only — can you complete the primary task without a mouse?

Design-to-Code Handoff Template

When handing off designs to developers, provide:

## Component: [Name]

### Visual Spec
- Dimensions: [width × height or fluid]
- Spacing: [padding, margin in token values]
- Colors: [background, text, border in token values]
- Typography: [font, size, weight, line-height in token values]
- Border: [width, style, color, radius in token values]
- Shadow: [elevation token]

### Variants
- [variant-name]: [visual differences]

### States
- Default: [spec]
- Hover: [changes from default]
- Focus: [focus indicator spec]
- Active: [changes]
- Disabled: [opacity, cursor, interaction]

### Responsive Behavior
- Mobile (< 640px): [layout changes]
- Tablet (640–1024px): [layout changes]
- Desktop (> 1024px): [default layout]

### Interactions
- [trigger] → [animation: property, duration, easing]

### Accessibility
- Role: [ARIA role if not implicit]
- Keyboard: [key bindings]
- Screen reader: [announcement text]

### Code Reference
- Component: `<ComponentName variant="..." size="..." />`
- Tokens: `--token-name: value`

Integration

• Follows rules: ui-ux-designer guidance for design principles, accessibility, and design systems
• Used by workflows: /ui-ux-design (primary), /feature-dev (UI features)
• Companion resources: design-system-checklist.md, figma-workflow.md, accessibility-checklist.md, visual-audit-checklist.md