UI UX Excellence Guide

Overview

Turn vague UI requests into production-ready decisions and implementation guidance. Treat visual quality, clarity, usability, accessibility, responsiveness, and performance as one system.

Workflow Selection

Choose one primary workflow before proposing changes:

Greenfield: create a new screen, feature, product surface, or design system slice.
Refactor: improve existing UI while preserving product behavior.
Audit: critique, diagnose, or prioritize fixes before implementation.

If the user asks directly for implementation, do the workflow internally and deliver the changed UI. If the request is ambiguous but low risk, make reasonable assumptions and state them.

Shared Rules

Apply these rules in every workflow:

Start from the user's task, audience, platform, and success signal.
Decide layout rhythm early: spacing ramp, grid, margins, gutters, and density.
Use semantic tokens for spacing, typography, color, radius, elevation, and motion.
Treat microcopy, empty states, loading states, and errors as interaction design.
Keep accessibility constraints non-negotiable; document any unmet item as risk.
Validate the actual touched surface before delivery whenever tooling allows it.

Read references/uiux-baseline-2026.md when you need numeric defaults, accessibility thresholds, touch targets, motion rules, or Web Vitals criteria. Read references/uiux-delivery-template.md only for complete design handoffs or audit reports.

Greenfield

Frame the problem:

Identify audience, platform, key journeys, and success criteria.
Confirm if there is an existing design system; if none, define a minimal token contract.

Establish structural system:

Set spacing, grid, margins, gutters, and density before decorative styling.
Prefer compact only for data-heavy or operational surfaces.

Define readability and hierarchy:

Define type scale, line-height, content hierarchy, and concise state-first labels.
Ensure contrast, focus visibility, and non-text affordance contrast.

Define motion and state communication:

Use short, purposeful transitions for state change and spatial continuity.
Provide reduced-motion fallback behavior.

Plan validation:

Set UX, accessibility, responsive, and performance acceptance criteria before implementation.

Refactor

Audit the current surface:

Map friction points: confusion, misclicks, unreadable content, poor hierarchy.
Identify inconsistent tokens, spacing rhythm, responsive behavior, and interaction patterns.

Prioritize changes:

Rank by impact on task success, error reduction, and accessibility risk.
Prefer low-risk structural fixes before visual polish.

Refactor with guardrails:

Preserve working behavior unless regression is explicitly accepted.
Normalize onto semantic tokens and remove one-off values.
Improve copy, state feedback, and recovery paths where users get stuck.

Validate and report:

Compare before/after behavior for the touched surface.
Include exact files touched and expected user-visible improvements.

Audit

Produce findings first, ordered by severity.
Attach concrete evidence (component, flow, file, line when applicable).
Provide actionable fixes, not vague recommendations.
Separate hard blockers from enhancement opportunities.
State validation gaps explicitly if checks cannot be completed.

Output Contract

For substantial design or implementation work, return outcomes in this order:

Direction: concise visual and UX direction statement.
Decisions: spacing, typography, density, motion, accessibility, and performance choices.
Implementation: exact edits or code-level plan.
Validation: checklist and measured/proxy results.
Risks: what is still unknown or untested.

For small fixes, answer briefly but still mention the user-visible change, validation performed, and remaining risk.

References

references/uiux-baseline-2026.md: implementation defaults and thresholds.
references/uiux-delivery-template.md: reusable response format for design and implementation tasks.