Software UI/UX Design
Design intuitive, accessible, user-centered interfaces.
Baselines (Jan 2026):
Quick Start
- Clarify platform(s), primary user journey, and constraints (accessibility level, performance, localization, auth).
- Choose track: audit an existing UI (heuristics + state matrix + WCAG) or design a new UI (IA + flows + UI spec).
- Produce artifacts: recommendations, acceptance criteria, and a handoff spec (components, states, copy, tokens).
Decision Tree
Design challenge:
├─ What to build? → Use software-ux-research first
├─ Improving existing UI?
│ ├─ Usability issues → Heuristic review
│ ├─ Accessibility gaps → WCAG 2.2 audit
│ ├─ Inconsistency → Design system alignment
│ └─ Conversion issues → CRO audit
├─ Building new UI?
│ └─ references/ui-generation-workflows.md
├─ Specific demographics?
│ └─ references/demographic-inclusive-design.md
└─ Platform constraints?
├─ Web → semantics + focus + reflow
├─ iOS → system nav + Dynamic Type
└─ Android → Material + edge-to-edge
Interaction Checklist
| Goal |
Do |
Avoid |
| Clarity |
One primary action per view |
Competing CTAs |
| Affordances |
Native controls, strong signifiers |
Clickable divs, hover-only |
| Feedback |
Immediate visual response |
Silent taps |
| Error prevention |
Constrain inputs, show examples |
Submit-then-fail |
| Error recovery |
Specific message + next step |
"Something went wrong" |
| Consistency |
Reuse patterns and terms |
Same term, different meanings |
State Matrix
| State |
Treatment |
When |
| Loading |
Placeholder matching layout |
Data fetching |
| Empty |
Message + CTA |
Zero items |
| Error |
Alert + retry action |
Request fails |
| Offline |
Banner + cached indicator |
No network |
| Degraded |
Warning + limited functionality |
Partial failure |
Platform Constraints
Web
- Semantic HTML first (no "div soup")
- ARIA only when needed
- Manage focus on SPA navigation
- Reflow at 320 CSS px (WCAG 1.4.10)
- Target size ≥24px (WCAG 2.5.8)
iOS
- System navigation (tab bar, nav bar)
- Dynamic Type support
- Dark mode + system materials
- Handle Safe Areas
Android
- Material 3 components
- Dynamic Color (Material You)
- Edge-to-edge content
- Handle predictive back
WCAG 2.2 Key Changes
| Requirement |
Implementation |
| Focus not obscured |
Keep focus visible with sticky UI |
| Focus appearance |
Clear visible indicator |
| Dragging movements |
Non-drag alternatives |
| Target size |
≥24×24 CSS px |
| Redundant entry |
Don't re-request known info |
| Accessible auth |
Avoid cognitive tests |
Reduced Motion
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Design Tokens
{
"color": {
"primary": {
"$value": "#0066cc",
"$type": "color"
}
},
"spacing": {
"sm": {
"$value": "8px",
"$type": "dimension"
}
}
}
| Layer |
Examples |
Purpose |
| Primitive |
blue-500, 16px |
Raw values |
| Semantic |
color-primary |
Intent-based |
| Component |
button-bg |
Component-specific |
Resources
| Resource |
Purpose |
| references/implementation-research-workflow.md |
Research before building |
| references/design-systems.md |
Design system patterns |
| references/component-library-comparison.md |
shadcn, MUI, Radix |
| references/nielsen-heuristics.md |
Heuristic evaluation |
| references/wcag-accessibility.md |
WCAG compliance |
| references/demographic-inclusive-design.md |
Age-specific UX |
| references/neurodiversity-design.md |
ADHD, autism, dyslexia |
| references/ui-generation-workflows.md |
UI from scratch |
| references/ai-design-tools-2025.md |
Figma AI, v0 |
| references/cro-framework.md |
Conversion optimization |
| references/operational-playbook.md |
Decision frameworks |
Templates
| Template |
Purpose |
| assets/design-brief.md |
Design brief |
| assets/ux-review-checklist.md |
UX review |
| assets/ui-generation/full-ui-spec.md |
UI spec |
| assets/audits/cro-audit-template.md |
CRO audit |
Pattern Inspiration
Related Skills
1---2name: software-ui-ux-design3description: Use when designing or auditing UI/UX (wireframes to UI specs), running heuristic and accessibility reviews (WCAG 2.2 AA, ARIA), defining design systems and tokens, improving flows/forms/states and conversion (CRO), or tailoring inclusive experiences (age, neurodiversity) across web/iOS/Android/desktop, including AI/automation UX patterns.4---5
6# Software UI/UX Design
7
8Design intuitive, accessible, user-centered interfaces.
9
10**Baselines (Jan 2026)**:
11- **Accessibility**: WCAG 2.2 Level AA — [W3C](https://www.w3.org/TR/WCAG22/)
12- **Performance**: Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1) — [web.dev](https://web.dev/vitals/)
13- **Platforms**: [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/), [Material 3](https://m3.material.io/)
14
15---
16
17## Quick Start
18
19- Clarify platform(s), primary user journey, and constraints (accessibility level, performance, localization, auth).
20- Choose track: audit an existing UI (heuristics + state matrix + WCAG) or design a new UI (IA + flows + UI spec).
21- Produce artifacts: recommendations, acceptance criteria, and a handoff spec (components, states, copy, tokens).
22
23---
24
25## Decision Tree
26
27```text
28Design challenge:
29 ├─ What to build? → Use software-ux-research first
30 ├─ Improving existing UI?
31 │ ├─ Usability issues → Heuristic review
32 │ ├─ Accessibility gaps → WCAG 2.2 audit
33 │ ├─ Inconsistency → Design system alignment
34 │ └─ Conversion issues → CRO audit
35 ├─ Building new UI?
36 │ └─ references/ui-generation-workflows.md
37 ├─ Specific demographics?
38 │ └─ references/demographic-inclusive-design.md
39 └─ Platform constraints?
40 ├─ Web → semantics + focus + reflow
41 ├─ iOS → system nav + Dynamic Type
42 └─ Android → Material + edge-to-edge
43```
44
45---
46
47## Interaction Checklist
48
49| Goal | Do | Avoid |
50|------|----|-------|
51| Clarity | One primary action per view | Competing CTAs |
52| Affordances | Native controls, strong signifiers | Clickable divs, hover-only |
53| Feedback | Immediate visual response | Silent taps |
54| Error prevention | Constrain inputs, show examples | Submit-then-fail |
55| Error recovery | Specific message + next step | "Something went wrong" |
56| Consistency | Reuse patterns and terms | Same term, different meanings |
57
58---
59
60## State Matrix
61
62| State | Treatment | When |
63|-------|-----------|------|
64| **Loading** | Placeholder matching layout | Data fetching |
65| **Empty** | Message + CTA | Zero items |
66| **Error** | Alert + retry action | Request fails |
67| **Offline** | Banner + cached indicator | No network |
68| **Degraded** | Warning + limited functionality | Partial failure |
69
70---
71
72## Platform Constraints
73
74### Web
75
76- Semantic HTML first (no "div soup")
77- ARIA only when needed
78- Manage focus on SPA navigation
79- Reflow at 320 CSS px (WCAG 1.4.10)
80- Target size ≥24px (WCAG 2.5.8)
81
82### iOS
83
84- System navigation (tab bar, nav bar)
85- Dynamic Type support
86- Dark mode + system materials
87- Handle Safe Areas
88
89### Android
90
91- Material 3 components
92- Dynamic Color (Material You)
93- Edge-to-edge content
94- Handle predictive back
95
96---
97
98## WCAG 2.2 Key Changes
99
100| Requirement | Implementation |
101|-------------|----------------|
102| Focus not obscured | Keep focus visible with sticky UI |
103| Focus appearance | Clear visible indicator |
104| Dragging movements | Non-drag alternatives |
105| Target size | ≥24×24 CSS px |
106| Redundant entry | Don't re-request known info |
107| Accessible auth | Avoid cognitive tests |
108
109### Reduced Motion
110
111```css
112@media (prefers-reduced-motion: reduce) {
113 *, *::before, *::after {
114 animation-duration: 0.01ms !important;
115 transition-duration: 0.01ms !important;
116 }
117}
118```
119
120---
121
122## Design Tokens
123
124```json
125{
126 "color": {
127 "primary": {
128 "$value": "#0066cc",
129 "$type": "color"
130 }
131 },
132 "spacing": {
133 "sm": {
134 "$value": "8px",
135 "$type": "dimension"
136 }
137 }
138}
139```
140
141| Layer | Examples | Purpose |
142|-------|----------|---------|
143| Primitive | `blue-500`, `16px` | Raw values |
144| Semantic | `color-primary` | Intent-based |
145| Component | `button-bg` | Component-specific |
146
147---
148
149## Resources
150
151| Resource | Purpose |
152|----------|---------|
153| [references/implementation-research-workflow.md](references/implementation-research-workflow.md) | Research before building |
154| [references/design-systems.md](references/design-systems.md) | Design system patterns |
155| [references/component-library-comparison.md](references/component-library-comparison.md) | shadcn, MUI, Radix |
156| [references/nielsen-heuristics.md](references/nielsen-heuristics.md) | Heuristic evaluation |
157| [references/wcag-accessibility.md](references/wcag-accessibility.md) | WCAG compliance |
158| [references/demographic-inclusive-design.md](references/demographic-inclusive-design.md) | Age-specific UX |
159| [references/neurodiversity-design.md](references/neurodiversity-design.md) | ADHD, autism, dyslexia |
160| [references/ui-generation-workflows.md](references/ui-generation-workflows.md) | UI from scratch |
161| [references/ai-design-tools-2025.md](references/ai-design-tools-2025.md) | Figma AI, v0 |
162| [references/cro-framework.md](references/cro-framework.md) | Conversion optimization |
163| [references/operational-playbook.md](references/operational-playbook.md) | Decision frameworks |
164
165## Templates
166
167| Template | Purpose |
168|----------|---------|
169| [assets/design-brief.md](assets/design-brief.md) | Design brief |
170| [assets/ux-review-checklist.md](assets/ux-review-checklist.md) | UX review |
171| [assets/ui-generation/full-ui-spec.md](assets/ui-generation/full-ui-spec.md) | UI spec |
172| [assets/audits/cro-audit-template.md](assets/audits/cro-audit-template.md) | CRO audit |
173
174## Pattern Inspiration
175
176- [Mobbin](https://mobbin.com/) — 300k+ screenshots
177- [Page Flows](https://pageflows.com/) — User flow recordings
178- [Refero Design](https://refero.design/) — Web design references
179
180## Related Skills
181
182| Skill | Purpose |
183|-------|---------|
184| [software-ux-research](../software-ux-research/SKILL.md) | Research (use first) |
185| [software-frontend](../software-frontend/SKILL.md) | Implementation |
186| [software-mobile](../software-mobile/SKILL.md) | Mobile patterns |
187| [product-management](../product-management/SKILL.md) | Product strategy |
majiayu000