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:
- Screenshot inventory: Capture all existing screens and components
- Pattern extraction: Identify recurring colors, typography, spacing, components
- Inconsistency map: Document where the same concept is implemented differently
- Priority matrix: Rank components by frequency of use × inconsistency severity
Step 2: Define Foundations
Build from the ground up:
| Foundation |
What to Define |
Token Naming |
| Color |
Brand, semantic, neutral, overlay palettes |
color-{category}-{shade} |
| Typography |
Font families, size scale, weights, line heights |
font-{property}-{size} |
| Spacing |
Base unit (4px or 8px), scale |
spacing-{size} |
| Border radius |
Scale from none to full |
radius-{size} |
| Elevation |
Shadow levels |
shadow-{level} |
| Motion |
Duration, easing curves |
motion-{property}-{variant} |
| Breakpoints |
Viewport thresholds |
breakpoint-{name} |
Step 3: Build Components
Follow Atomic Design progression:
- Atoms: Button, Input, Label, Icon, Badge, Avatar, Checkbox, Radio, Toggle
- Molecules: Input Group, Search Bar, Card, Dropdown, Tooltip, Alert, Breadcrumb
- 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
| Figma Concept |
Code Equivalent |
| Auto Layout |
Flexbox / CSS Grid |
| Component variants |
React props / variant configs |
| Design tokens (Variables) |
CSS custom properties |
| Constraints |
CSS positioning / responsive rules |
| Component instances |
React component usage |
Accessibility Audit
See accessibility-checklist.md for the comprehensive WCAG 2.2 AA audit checklist.
Quick Audit (5-Minute Check)
- Tab through the page — can you reach and operate every interactive element?
- Zoom to 200% — does content reflow without horizontal scrolling?
- Check contrast — do all text elements meet 4.5:1 (normal) / 3:1 (large)?
- Screen reader test — do headings, landmarks, and alt text make sense?
- 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
1---2name: ui-ux-design-23description: UI/UX design systems, Figma workflows, accessibility checklists, browser-based visual audit with automated screenshots, component specification patterns, and design-to-code handoff procedures. Use when designing interfaces, creating design systems, auditing accessibility, reviewing existing UI via browser screenshots, specifying components, or preparing design handoff for developers.4---5
6# UI/UX Design
7
8Systematic 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.
9
10## When to Use
11
12- Creating or extending a design system (tokens, components, patterns)
13- Designing new pages, features, or user flows
14- Auditing existing UI for accessibility compliance
15- Preparing design specifications for developer handoff
16- Setting up Figma project structure and workflows
17- Reviewing existing UI via automated browser screenshots and heuristic analysis
18- Reviewing UI components against heuristics and platform guidelines
19
20## When NOT to Use
21
22- Writing page content or copy (use `content-creation` skill)
23- Implementing frontend code (use the `frontend-engineer` perspective)
24- Conducting SEO audits (use `/seo-review` workflow)
25- Writing technical documentation (use `/docs` workflow)
26
27## Design System Creation
28
29### Step 1: Audit Existing UI
30
31Before creating a design system:
32
331. **Screenshot inventory**: Capture all existing screens and components
342. **Pattern extraction**: Identify recurring colors, typography, spacing, components
353. **Inconsistency map**: Document where the same concept is implemented differently
364. **Priority matrix**: Rank components by frequency of use × inconsistency severity
37
38### Step 2: Define Foundations
39
40Build from the ground up:
41
42| Foundation | What to Define | Token Naming |
43|---|---|---|
44| **Color** | Brand, semantic, neutral, overlay palettes | `color-{category}-{shade}` |
45| **Typography** | Font families, size scale, weights, line heights | `font-{property}-{size}` |
46| **Spacing** | Base unit (4px or 8px), scale | `spacing-{size}` |
47| **Border radius** | Scale from none to full | `radius-{size}` |
48| **Elevation** | Shadow levels | `shadow-{level}` |
49| **Motion** | Duration, easing curves | `motion-{property}-{variant}` |
50| **Breakpoints** | Viewport thresholds | `breakpoint-{name}` |
51
52### Step 3: Build Components
53
54Follow Atomic Design progression:
55
561. **Atoms**: Button, Input, Label, Icon, Badge, Avatar, Checkbox, Radio, Toggle
572. **Molecules**: Input Group, Search Bar, Card, Dropdown, Tooltip, Alert, Breadcrumb
583. **Organisms**: Header, Footer, Sidebar, Form, Data Table, Modal, Navigation
59
60For each component, document:
61- **Variants**: Primary, secondary, outline, ghost, destructive
62- **Sizes**: xs, sm, md, lg, xl
63- **States**: Default, hover, focus, active, disabled, loading, error
64- **Accessibility**: ARIA role, keyboard behavior, screen reader announcement
65- **Responsive**: Behavior at each breakpoint
66- **Do / Don't**: Usage examples and anti-patterns
67
68### Step 4: Document and Maintain
69
70- Publish component library with live examples
71- Version with semantic versioning
72- Changelog for every update
73- Deprecation notices with migration guides
74
75See `design-system-checklist.md` for the full creation checklist.
76
77## Figma Workflow
78
79See `figma-workflow.md` for detailed Figma project setup, component organization, Auto Layout patterns, and developer handoff procedures.
80
81### Quick Reference
82
83| Figma Concept | Code Equivalent |
84|---|---|
85| Auto Layout | Flexbox / CSS Grid |
86| Component variants | React props / variant configs |
87| Design tokens (Variables) | CSS custom properties |
88| Constraints | CSS positioning / responsive rules |
89| Component instances | React component usage |
90
91## Accessibility Audit
92
93See `accessibility-checklist.md` for the comprehensive WCAG 2.2 AA audit checklist.
94
95### Quick Audit (5-Minute Check)
96
971. **Tab through the page** — can you reach and operate every interactive element?
982. **Zoom to 200%** — does content reflow without horizontal scrolling?
993. **Check contrast** — do all text elements meet 4.5:1 (normal) / 3:1 (large)?
1004. **Screen reader test** — do headings, landmarks, and alt text make sense?
1015. **Keyboard-only** — can you complete the primary task without a mouse?
102
103## Design-to-Code Handoff Template
104
105When handing off designs to developers, provide:
106
107```
108## Component: [Name]
109
110### Visual Spec
111- Dimensions: [width × height or fluid]
112- Spacing: [padding, margin in token values]
113- Colors: [background, text, border in token values]
114- Typography: [font, size, weight, line-height in token values]
115- Border: [width, style, color, radius in token values]
116- Shadow: [elevation token]
117
118### Variants
119- [variant-name]: [visual differences]
120
121### States
122- Default: [spec]
123- Hover: [changes from default]
124- Focus: [focus indicator spec]
125- Active: [changes]
126- Disabled: [opacity, cursor, interaction]
127
128### Responsive Behavior
129- Mobile (< 640px): [layout changes]
130- Tablet (640–1024px): [layout changes]
131- Desktop (> 1024px): [default layout]
132
133### Interactions
134- [trigger] → [animation: property, duration, easing]
135
136### Accessibility
137- Role: [ARIA role if not implicit]
138- Keyboard: [key bindings]
139- Screen reader: [announcement text]
140
141### Code Reference
142- Component: `<ComponentName variant="..." size="..." />`
143- Tokens: `--token-name: value`
144```
145
146## Integration
147
148- **Follows rules**: `ui-ux-designer` guidance for design principles, accessibility, and design systems
149- **Used by workflows**: `/ui-ux-design` (primary), `/feature-dev` (UI features)
150- **Companion resources**: `design-system-checklist.md`, `figma-workflow.md`, `accessibility-checklist.md`, `visual-audit-checklist.md`
majiayu000