Use when auditing one existing UI, page, screen, flow, or document for design quality and producing evidence-backed, severity-rated findings. Use product-design-audit for multiple product surfaces and design-qa-and-pre-launch-review for a release verdict.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Use when auditing one existing UI, page, screen, flow, or document for design quality and producing evidence-backed, severity-rated findings. Use product-design-audit for multiple product surfaces and design-qa-and-pre-launch-review for a release verdict.
Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.
Use When
You need a severity-rated UI/UX audit across the 10 dimensions (AI slop, visual hierarchy, accessibility, typography, colour, layout/spacing, interaction states, motion, microcopy, performance) with a defensible 0–100 score.
A screen, flow, landing page, or component "looks AI-generated" or generic and you need to prove it: Inter/Roboto defaults, purple gradients, everything-in-cards, glassmorphism, "Submit"/"Loading..." copy.
You need a WCAG 2.2 AA pass (contrast, target size 24/44px, focus not obscured, drag/auth/redundant-entry deltas) and a Core Web Vitals check (LCP/INP/CLS at field p75).
You need findings triaged into an ordered fix queue (red-route/Travis test + effort×impact + MoSCoW) to hand off to ux-remediation-and-redesign, not just a list of complaints.
A premium product needs a premium-readiness pass: buyer proof, pricing confidence, support visibility, empty states, executive clarity.
Do Not Use When
You want to execute the fixes — redesign lo-fi→hi-fi, run 5-user/A/B/tree tests, measure uplift. That is ux-remediation-and-redesign; this skill diagnoses, scores, and triages, then hands off.
You need only the detailed visual/product slop checklist (visual-product-slop-audit), the positive visual system rules to build against (practical-ui-design), or animation craft standards (motion-design) — load those directly.
You need a ship go/no-go gate — that is design-qa-and-pre-launch-review.
Inputs
Artefact or context
Source
Required?
Why
Inspectable artefact and key states
User or project
yes
Grounds every finding in evidence
Audience, purpose, platform, and brand intent
Brief
yes
Sets the correct design bar
Design system, analytics, and field data
Project evidence
conditional
Tests consistency and real-world impact
The artifact under audit: screens/URLs/components plus, ideally, the live build (CWV needs CrUX/RUM field data, not just a mockup).
Context for Step 1: who the users are, the purpose (task/commerce/info), the platform (web/Android/iOS), the design system/tokens if any, and the intended brand personality.
Whether a full 10-dimension scored audit or the 10-minute quick checklist is wanted, and whether a premium-readiness pass applies.
Workflow
For premium products, add a premium-readiness pass: buyer proof, service cues, pricing confidence, executive clarity, support visibility, SEO/content authority, and product packaging.
Decision Rules
Condition
Action
Wrong-choice failure
One page, screen, flow, or document
Run this audit and produce a triaged finding register
Product-wide scope dilutes evidence and misses local detail
The artefact or a critical state cannot be inspected
Mark the dimension unverified and cap confidence
Guessed findings are presented as observed evidence
Capability Contract
Read and visual inspection are required. Repository search, browser access, rendering, and
measurement tools are optional but strengthen evidence. This audit is read-only: do not edit the
artefact unless the user separately requests remediation.
Degraded Mode
When only screenshots or partial files are available, audit only visible states, label every
unseen interaction or breakpoint as unverified, and return a conditional score. Do not claim
accessibility, responsiveness, or release readiness without the relevant interactive checks.
Stop rather than score when the primary artefact itself cannot be inspected.
Quality Standards
Every finding must be observable, severity-calibrated, routed to an owner, and preserved in the
coverage record. Hard-gate failures cap the verdict; missing evidence lowers confidence.
Anti-Patterns
Finding without evidence. Cite the screen, state, measurement, or source line; otherwise
remove the claim.
Severity by taste. Tie severity to blocked tasks, user harm, compliance, frequency, or
business impact; do not promote a personal preference to Critical.
Score averaging across blockers. Apply the hard caps when accessibility or slop gates fail;
a polished visual average must not hide a release blocker.
Audit that silently redesigns. End with the triaged queue and hand accepted findings to
ux-remediation-and-redesign.
Happy-path-only inspection. Include empty, error, loading, focus, disabled, responsive, and
recovery states or mark them unverified.
Outputs
Artefact
Consumer
Evidence and acceptance condition
Scored audit and triaged finding register
Design and product owners
Every finding cites observed evidence, severity logic, and an owning remediation skill
Coverage and confidence note
Release reviewer
Unseen states and unrun checks are explicit
A design audit report covering visual hierarchy, typography, spacing, colour, accessibility,
performance, microcopy, slop signals, and an ordered fix queue.
An accessibility pass report when WCAG conformance is part of the audit scope.
References
doctrine/design-doctrine.md — the anti-slop charter every audit enforces.
doctrine/references/ai-slop-taxonomy.md — the visual/product slop tells the AI Slop dimension checks against.
doctrine/references/ai-slop-banned-fonts.md — the banned primary typefaces the Typography dimension flags.
doctrine/references/pairing-principles.md and doctrine/references/type-scale-and-spacing.md — the type-pairing and scale standards the Typography dimension audits against.
Use references/consistency-audit.md when drift between screens, components, or labels is a suspected issue.
references/audit-rubric.md — composes the AI-slop, WCAG 2.2, and Core Web Vitals gates into a
scored 0–100 rubric with cap rules; use it whenever the audit needs a defensible number.
references/triage-and-prioritization.md — the triage stack (Travis red-route test +
effort-vs-impact + MoSCoW + tie-breakers) that turns scored findings into an ordered fix
queue; run it after scoring (Workflow Step 3).
doctrine/references/interaction-anti-patterns.md — the behavioural interaction-detection
checklist (A1–E3: navigation, forms, feedback, hierarchy, novelty/platform-fit). Walk the UI
against it during the systematic scan; any match is a finding, with severity set by triage.
doctrine/references/wcag-2.2-criteria.md and doctrine/references/web-performance-budgets-2026.md
— the accessibility floor (WCAG 2.2 AA) and performance floor (CWV "good") the rubric enforces.
Examples
examples/design-audit-filled.md — a real scored audit of a sample artifact (marketing
landing + signup), showing the three gates, 0–4 dimension scoring, and how a failed gate caps
the final score.
Plugins (Load Alongside)
Companion Skill
When to Load
visual-product-slop-audit
Detailed visual/product AI slop checklist
practical-ui-design
Visual system rules to audit against
motion-design
Animation quality standards
ux-remediation-and-redesign
After the audit — to triage, redesign, re-validate, and measure the fixes for the findings this audit produced (the fix side; this skill is the diagnose side)
ux-remediation-and-redesign
Downstream hand-off — once findings are triaged into a fix queue, that skill redesigns, re-validates (5-user / A/B / tree test), and measures the uplift. This skill diagnoses + triages; that one executes the fix.
1. Audit Process
Step 1: Gather Context
Before auditing, understand:
Who are the users? (age, tech literacy, use context)
What's the purpose? (task completion, information display, commerce)
What platform? (web, Android, iOS, cross-platform)
What design system? (if any — tokens, components, patterns)
What's the brand personality? (professional, playful, clinical)
Step 2: Systematic Scan
Evaluate across all 10 dimensions (Section 2). Score each dimension. Run the
interaction-detection pass: walk the UI against doctrine/references/interaction-anti-patterns.md
(A1–E3) — any match is a finding feeding the list below.
Step 3: Triage — sequence the findings into a fix order
Scoring tells you how bad; it does not tell you what to fix first. After scoring, run every
finding through the triage stack in references/triage-and-prioritization.md:
Red-route / Travis test (red route? hard to overcome? persistent?) → sets the severity band.
Effort-vs-impact map → sequences within a band (Quick wins → Major projects → Fill-ins; park Thankless).
MoSCoW (Must/Should/Could/Won't) → the release commitment.
Tie-break on frequency and business alignment.
Gate failures (Slop / WCAG 2.2 AA / CWV) are always at least Critical/High and never demoted below
their cap. The output is an ordered fix queue — the audit ends with a prioritised sequence, not
just a number. This queue is the input contract to the ux-remediation-and-redesign skill (see
Section 6 / Hand-off): this skill diagnoses, scores, and triages; that skill executes the fix.
Step 4: Produce Report
Follow the report structure (Section 3). Order findings by the Step 3 triage queue, not just by
raw severity.
2. The 10 Audit Dimensions
Dimension 1: AI Slop Detection
The first check. Does this interface look machine-generated?
Check
Look For
Typography
Inter/Roboto defaults, no hierarchy, title case everywhere
Colour
Cyan-on-dark, purple gradients, gradient text, pure black/white
Layout
Everything in cards, identical card grids, everything centred
Premium audit red flags include generic screenshots, unsupported premium claims, vague pricing CTAs, weak empty states, no proof, no support path, no business outcome, and polish that is not backed by speed, accessibility, data quality, or controls.
Dimension 2: Visual Hierarchy
Check
Standard
Squint test
Most important element visible when blurred
Size hierarchy
Clear primary > secondary > tertiary sizing
Weight contrast
Bold for headings, regular for body (not medium/light)
Colour emphasis
Brand colour reserved for interactive elements
Whitespace
Generous spacing separates sections; tight spacing groups related items
Focal point
Each screen has one clear entry point for the eye
Dimension 3: Accessibility
Check
Standard
Severity
Text contrast
>= 4.5:1 (body), >= 3:1 (large text)
Critical
UI component contrast
>= 3:1 against background
Critical
Touch targets
>= 44x44px (48x48px preferred)
Critical
Keyboard navigation
Logical tab order, visible focus ring
Critical
Screen reader
Semantic HTML, ARIA labels, meaningful alt text
Critical
Colour independence
Never colour alone as indicator
High
Zoom support
Usable at 200% zoom
High
Reduced motion
prefers-reduced-motion respected
High
Focus management
Focus moves logically after interactions
Medium
WCAG 2.2 deltas to check (new since 2.1): focus not obscured by sticky chrome (2.4.11, AA);
target size >= 24x24 CSS px or spaced (2.5.8, AA); every drag has a single-pointer
alternative (2.5.7, AA); no re-entry of info already given in the flow (3.3.7, A); auth needs no
cognitive-function test without an alternative (3.3.8, AA); help appears in consistent order
(3.2.6, A). See doctrine/references/wcag-2.2-criteria.md. Certify with the WCAG ratio; design
with APCA.
Dimension 4: Typography
Check
Standard
Font choice
Intentional, not default (matches brand personality)
Type scale
Consistent scale (Major Third or project-appropriate)
Body size
>= 16px (18px preferred)
Line height
1.5-2.0 for body; decreasing for larger sizes
Line length
40-80 characters (66 ideal)
Weight usage
Regular + Bold only (avoid thin/light/medium)
Alignment
Left-aligned body text (no justified, centre only for 1-2 lines)
Letter spacing
Decreased for large display text
Dimension 5: Colour
Check
Standard
Tinted neutrals
No pure grey (#808080), black (#000), or white (#fff)
Verify CWV from field p75 (CrUX/RUM) where available; Lighthouse lab is a proxy. Set the
three thresholds as Lighthouse-CI gates. See doctrine/references/web-performance-budgets-2026.md
for per-archetype asset budgets.
## Critical (Must Fix Before Ship)
### [Finding Title]
- **Dimension:** [Which of the 10 dimensions]
- **Location:** [Where in the interface]
- **Issue:** [What's wrong]
- **Impact:** [Who is affected and how]
- **Fix:** [Specific actionable fix]
- **Standard:** [Which standard it violates]
## High (Fix Within Sprint)
[Same structure]
## Medium (Fix Within Quarter)
[Same structure]
## Low (Nice to Have)
[Same structure]
Severity Definitions
Severity
Meaning
Critical
Blocks users, fails accessibility law, data loss risk
High
Significant UX degradation, frequent user confusion
Medium
Noticeable quality issue, occasional friction
Low
Minor polish, edge case, aesthetic preference
Positive Findings
## What's Working Well
[List patterns and decisions that are effective and should be maintained]
Triage Queue & Recommendations
Include the triage worksheet from references/triage-and-prioritization.md §2, then derive the
ordered recommendations from its Order column:
## Triage Queue
[Triage worksheet: each finding scored red-route / hard / persistent → severity, impact×effort,
MoSCoW, and a final Order integer.]
## Prioritised Recommendations (from the triage Order)
1. [Highest impact fix] — addresses [N] critical/high issues — [Must]
2. [Second priority] — addresses [N] issues — [Should]
3. [Third priority] — addresses [N] issues — [Could]
Hand the ordered queue to ux-remediation-and-redesign to execute the fixes.
4. Scoring Guide
For a defensible, repeatable score, use references/audit-rubric.md — it composes the AI
Slop, WCAG 2.2, and Core Web Vitals gates (which can cap the total) with the 0–4 dimension
scoring and the weights below. A worked, filled example is in examples/design-audit-filled.md.
Score
Meaning
90-100
Production-ready. Minor polish only.
75-89
Good foundation. Fix high-priority issues before shipping.
Major redesign areas. Multiple dimensions failing.
< 40
Fundamental problems. Start with structure and hierarchy.
Dimension Weights
Dimension
Weight
Rationale
Accessibility
20%
Legal requirement, blocks users
Visual Hierarchy
15%
Foundation of usability
Interaction States
12%
Functional completeness
Content & Microcopy
12%
User comprehension
Typography
10%
Readability
Colour
8%
Communication and mood
Layout & Spacing
8%
Structure and scannability
Performance
6%
Speed and responsiveness
Motion
5%
Polish and feedback
AI Slop
4%
Distinctiveness (binary pass/fail)
5. Quick Audit Checklist (10-Minute Version)
For rapid checks when a full audit isn't needed:
AI Slop: Does this look machine-generated? (fonts, colours, layout)
Hierarchy: Squint test passes — primary element is clear
Contrast: Body text >= 4.5:1, UI components >= 3:1
Touch targets: >= 44x44px on touch devices
Keyboard: Tab through the page — focus visible, logical order
States: Hover, focus, active, error, loading all defined
Buttons: All use verb + noun labels
Errors: All show what, why, how to fix
Empty states: No blank screens
Responsive: Works on mobile without horizontal scroll
Performance: Loads in < 3s on mobile
Motion: No bounce easing, reduced motion handled
6. Hand-off — where the audit stops
This skill ends at a triaged, ordered fix queue (Workflow Step 3 + the Triage Queue report
section). It deliberately does not redesign, re-prototype, or re-test.
Pass the triage worksheet + Prioritised Recommendations to ux-remediation-and-redesign as its
input contract. That closes the loop: audit → fix → re-validate → ship.
Sources: Impeccable audit and critique skills (Bakaus, 2025); WCAG 2.2 AA; Nielsen Norman Group heuristic evaluation framework; triage method after Maioli, "Fixing Bad UX Designs" (2018).
