gabrielmoreira Visual UI UX Audit
Core Workflow
- Inspect the actual interface when possible, not only code. Use browser screenshots, responsive viewports, and interaction states.
- Define the task, user, viewport, primary workflow, and quality bar before critiquing.
- Capture key states: initial screen, primary flow, empty/loading/error/success, mobile, desktop, and any modal/menu/dropdown states.
- Identify issues by evidence: where it appears, why it hurts the user, and what change would improve it.
- Prioritize fixes by user impact and effort. Separate polish from blockers.
- If editing, re-check screenshots after changes.
Tooling Rule
When the interface is local or browser-accessible, prefer actual browser inspection through the available browser tooling. Capture desktop and mobile states when relevant. If a browser cannot be used, disclose that the audit is based on code or static artifacts only.
Audit Dimensions
- Visual hierarchy: focal point, contrast, scan order, CTA prominence.
- Layout: alignment, spacing, density, grouping, rhythm, responsive behavior.
- Typography: size, line length, weight, contrast, truncation, overflow.
- Color: contrast, semantic meaning, palette consistency, state differentiation.
- Interaction states: hover, focus, active, disabled, loading, error, success.
- Information architecture: labels, grouping, navigation, progressive disclosure.
- Accessibility: keyboard flow, focus visibility, readable contrast, motion, hit targets.
- Craft: AI-generic styling, nested cards, accidental gradients, inconsistent radius/shadows, clutter.
Output Contract
- Screens/states inspected
- Prioritized findings with evidence
- Recommended changes
- Quick wins
- Larger redesign risks
- Verification steps
References
- Read
references/visual-audit-checklist.mdwhen performing a visual UI/UX critique.