Software UI/UX Design

Design intuitive, accessible, user-centered interfaces.

Baselines (Mar 2026):

• Accessibility: WCAG 2.2 Level AA — W3C
• Performance: Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1) — web.dev
• Platforms: Apple HIG, Material 3

---

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
    ├─ Non-technical users / simplification?
    │   └─ references/simplification-patterns.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/mobile-ux-patterns.md	Mobile UX: thumb zone, navigation, gestures, platform patterns
references/form-design-patterns.md	Form UX: layout, validation, multi-step, accessibility
references/dark-mode-theming.md	Dark mode & multi-theme: tokens, CSS, platform implementation
references/ai-automation-ux.md	AI/automation UX: chatbots, agents, progressive disclosure
references/cultural-design-patterns.md	Cross-cultural design: RTL, CJK, color semiotics, locale UX
references/frontend-aesthetics-2025.md	Visual design trends 2025: glassmorphism, variable fonts, 3D
references/simplification-patterns.md	Interface simplification for non-technical users, digital literacy spectrum
references/modern-ux-patterns-2025.md	Modern UX patterns: command palettes, skeleton states, dark mode, 2026 trends
references/data-visualization-ux.md	Data viz: chart selection, dashboards, accessible charts
references/typography-systems.md	Type scales, font pairing, variable fonts, design tokens
references/performance-ux-vitals.md	Core Web Vitals UX, perceived performance, loading patterns
references/prototype-to-production.md	Prototype-to-production alignment, dashboard QA, design-to-ship checks
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
assets/accessibility/template-wcag-testing.md	WCAG testing
assets/audits/simplification-audit-template.md	Simplification audit
assets/design-systems/template-design-system.md	Design system setup
assets/component-libraries/template-shadcn-ui.md	shadcn/ui integration
assets/component-libraries/template-mui-material-ui.md	MUI / Material UI
assets/interaction-patterns/template-micro-interactions.md	Micro-interactions

Pattern Inspiration

• Mobbin — 300k+ screenshots
• Page Flows — User flow recordings
• Refero Design — Web design references

Related Skills

Skill	Purpose
software-ux-research	Research (use first)
software-frontend	Implementation
software-mobile	Mobile patterns
product-management	Product strategy

---

Fact-Checking

• Use web search/web fetch to verify current external facts, versions, pricing, deadlines, regulations, or platform behavior before final answers.
• Prefer primary sources; report source links and dates for volatile information.
• If web access is unavailable, state the limitation and mark guidance as unverified.