Software UI UX Design

Software UI/UX Design

Use this skill to design or audit interfaces, flows, component systems, and AI-assisted frontend briefs. It owns design direction, interaction behavior, state coverage, and implementation-ready handoff, not user research or code remediation.

Quick Reference

When to Use This Skill

Use this skill when the main task is:

• designing screens, flows, or component behavior
• auditing an interface for design-level issues
• choosing design-system patterns or component libraries
• preparing a strong brief for AI-generated frontend work
• reviewing AI/automation UX

Route elsewhere when the main task is:

Defaults

• clarify platform, primary user journey, and constraints first
• one primary task flow per output
• cover loading, empty, error, offline, and degraded states — these decide trust, not happy paths
• semantic and accessibility constraints must be present in the handoff
• for AI-generated UI, define visual and interaction thesis before code generation
• verify current platform-guideline claims before final advice
• aim for consumer-grade craft, not just "passes audit". A screen that meets WCAG and feels lifeless is not done.

Craft Bar

Consumer-grade product work is judged on the rows below, not just task completion. Every substantive design output should be reviewed against these.

If three or more rows fail, the screen is debt regardless of what metrics say. See consumer-craft-patterns.md for the full playbook.

For agent surfaces — anything that acts on the user's behalf over multiple steps — add these four rows. They fail independently of the ones above, and a surface can pass every row of the table above while failing all four of these.

See references/ai-automation-ux.md for each.

Workflow

1. Confirm the mode: audit, new UI, design-system decision, or AI frontend brief.
2. Gather states, constraints, and quality bars.
3. For new surfaces, generate a concrete design direction from the offline database: python3 scripts/search.py "<product> <industry> <tone>" --design-system (see references/design-database-search.md); persist it with --persist for cross-session reuse.
4. Define the primary flow and supporting states.
5. Produce acceptance criteria and implementation-ready handoff details; check priorities 1-3 in references/ui-quality-priority-rules.md.
6. For AI-generated UI, add visual anchor, content plan, and browser-based verification path.

ASCII Flow

UI/UX design task
  -> Confirm mode: audit, new UI, system decision, or AI frontend brief
  -> Gather platform, primary journey, states, constraints, and quality bar
  -> Define hierarchy, interaction model, and supporting states
  -> Add accessibility, performance, and implementation handoff criteria
  -> Specify verification path and evidence needed
  -> Deliver acceptance criteria and unresolved tradeoffs

Accessibility Baseline

WCAG 2.2 is the current W3C standard (October 2023; became ISO standard October 2025) and the legally mandated baseline under the European Accessibility Act (in force June 2025), ADA/Section 508, and EN 301 549. WCAG 3.0 remains a Working Draft — the 3 March 2026 update published the majority of requirements plus a proposed conformance model for public review, and renamed "outcomes" to "requirements". Candidate Recommendation is anticipated Q4 2027 and full Recommendation 2028 or later — do not use it as a compliance target yet. Note its broader stated scope (static, dynamic, interactive, and streaming content; apps, tools, publishing) when designing token-by-token streaming agent surfaces: WCAG 2.2 remains the compliance baseline, but streaming UI is squarely in WCAG 3's forward scope.

Verification Checklist

Before finalizing any UI/UX design output:

• [ ] Platform confirmed (web, iOS, Android) and platform-specific constraints applied
• [ ] All five state types covered: loading, empty, error, offline/degraded, and happy path
• [ ] Primary action is singular per view; secondary actions visually subordinate
• [ ] Craft Bar row pass/fail reviewed; fewer than 3 fails before shipping