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).
1---2name: design-audit3description: 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.4---56# Design Audit Skill7Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.89<!-- dual-compat-start -->10## Use When1112- 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.13- 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.14- 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).15- 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.16- A premium product needs a premium-readiness pass: buyer proof, pricing confidence, support visibility, empty states, executive clarity.1718## Do Not Use When1920- 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.21- 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.22- You need a ship go/no-go gate — that is `design-qa-and-pre-launch-review`.2324## Inputs2526| Artefact or context | Source | Required? | Why |27|---|---|---|---|28| Inspectable artefact and key states | User or project | yes | Grounds every finding in evidence |29| Audience, purpose, platform, and brand intent | Brief | yes | Sets the correct design bar |30| Design system, analytics, and field data | Project evidence | conditional | Tests consistency and real-world impact |3132- The artifact under audit: screens/URLs/components plus, ideally, the live build (CWV needs CrUX/RUM field data, not just a mockup).33- 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.34- Whether a **full 10-dimension scored audit** or the **10-minute quick checklist** is wanted, and whether a premium-readiness pass applies.3536## Workflow3738- For premium products, add a premium-readiness pass: buyer proof, service cues, pricing confidence, executive clarity, support visibility, SEO/content authority, and product packaging.3940## Decision Rules4142| Condition | Action | Wrong-choice failure |43|---|---|---|44| One page, screen, flow, or document | Run this audit and produce a triaged finding register | Product-wide scope dilutes evidence and misses local detail |45| Multiple product surfaces or platforms | Route to `product-design-audit` | Independent scores cannot expose cross-platform drift |46| Final release decision is required | Route to `design-qa-and-pre-launch-review` | A diagnostic score is mistaken for a ship verdict |47| The artefact or a critical state cannot be inspected | Mark the dimension unverified and cap confidence | Guessed findings are presented as observed evidence |4849## Capability Contract5051Read and visual inspection are required. Repository search, browser access, rendering, and52measurement tools are optional but strengthen evidence. This audit is read-only: do not edit the53artefact unless the user separately requests remediation.5455## Degraded Mode5657When only screenshots or partial files are available, audit only visible states, label every58unseen interaction or breakpoint as unverified, and return a conditional score. Do not claim59accessibility, responsiveness, or release readiness without the relevant interactive checks.60Stop rather than score when the primary artefact itself cannot be inspected.6162## Quality Standards6364Every finding must be observable, severity-calibrated, routed to an owner, and preserved in the65coverage record. Hard-gate failures cap the verdict; missing evidence lowers confidence.666768## Anti-Patterns6970- **Finding without evidence.** Cite the screen, state, measurement, or source line; otherwise71 remove the claim.72- **Severity by taste.** Tie severity to blocked tasks, user harm, compliance, frequency, or73 business impact; do not promote a personal preference to Critical.74- **Score averaging across blockers.** Apply the hard caps when accessibility or slop gates fail;75 a polished visual average must not hide a release blocker.76- **Audit that silently redesigns.** End with the triaged queue and hand accepted findings to77 `ux-remediation-and-redesign`.78- **Happy-path-only inspection.** Include empty, error, loading, focus, disabled, responsive, and79 recovery states or mark them unverified.808182## Outputs8384| Artefact | Consumer | Evidence and acceptance condition |85|---|---|---|86| Scored audit and triaged finding register | Design and product owners | Every finding cites observed evidence, severity logic, and an owning remediation skill |87| Coverage and confidence note | Release reviewer | Unseen states and unrun checks are explicit |8889- A **design audit report** covering visual hierarchy, typography, spacing, colour, accessibility,90 performance, microcopy, slop signals, and an ordered fix queue.91- An **accessibility pass report** when WCAG conformance is part of the audit scope.9293## References9495- `doctrine/design-doctrine.md` — the anti-slop charter every audit enforces.96- `doctrine/references/ai-slop-taxonomy.md` — the visual/product slop tells the AI Slop dimension checks against.97- `doctrine/references/ai-slop-banned-fonts.md` — the banned primary typefaces the Typography dimension flags.98- `doctrine/references/pairing-principles.md` and `doctrine/references/type-scale-and-spacing.md` — the type-pairing and scale standards the Typography dimension audits against.99- Use `references/consistency-audit.md` when drift between screens, components, or labels is a suspected issue.100- `references/audit-rubric.md` — composes the AI-slop, WCAG 2.2, and Core Web Vitals gates into a101 scored 0–100 rubric with cap rules; use it whenever the audit needs a defensible number.102- `references/triage-and-prioritization.md` — the triage stack (Travis red-route test +103 effort-vs-impact + MoSCoW + tie-breakers) that turns scored findings into an **ordered fix104 queue**; run it after scoring (Workflow Step 3).105- `doctrine/references/interaction-anti-patterns.md` — the behavioural **interaction-detection106 checklist** (A1–E3: navigation, forms, feedback, hierarchy, novelty/platform-fit). Walk the UI107 against it during the systematic scan; any match is a finding, with severity set by triage.108- `doctrine/references/wcag-2.2-criteria.md` and `doctrine/references/web-performance-budgets-2026.md`109 — the accessibility floor (WCAG 2.2 AA) and performance floor (CWV "good") the rubric enforces.110111## Examples112113- `examples/design-audit-filled.md` — a real scored audit of a sample artifact (marketing114 landing + signup), showing the three gates, 0–4 dimension scoring, and how a failed gate caps115 the final score.116<!-- dual-compat-end -->117## Plugins (Load Alongside)118119| Companion Skill | When to Load |120|---|---|121| `visual-product-slop-audit` | Detailed visual/product AI slop checklist |122| `practical-ui-design` | Visual system rules to audit against |123| `motion-design` | Animation quality standards |124| `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) |125| `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. |126127---128129## 1. Audit Process130131### Step 1: Gather Context132133Before auditing, understand:134135- **Who are the users?** (age, tech literacy, use context)136- **What's the purpose?** (task completion, information display, commerce)137- **What platform?** (web, Android, iOS, cross-platform)138- **What design system?** (if any — tokens, components, patterns)139- **What's the brand personality?** (professional, playful, clinical)140141### Step 2: Systematic Scan142143Evaluate across all 10 dimensions (Section 2). Score each dimension. Run the144**interaction-detection pass**: walk the UI against `doctrine/references/interaction-anti-patterns.md`145(A1–E3) — any match is a finding feeding the list below.146147### Step 3: Triage — sequence the findings into a fix order148149Scoring tells you *how bad*; it does not tell you *what to fix first*. After scoring, run every150finding through the triage stack in **`references/triage-and-prioritization.md`**:1511521. **Red-route / Travis test** (red route? hard to overcome? persistent?) → sets the severity band.1532. **Effort-vs-impact map** → sequences within a band (Quick wins → Major projects → Fill-ins; park Thankless).1543. **MoSCoW** (Must/Should/Could/Won't) → the release commitment.1554. Tie-break on **frequency** and **business alignment**.156157Gate failures (Slop / WCAG 2.2 AA / CWV) are always at least Critical/High and never demoted below158their cap. The output is an **ordered fix queue** — the audit ends with a prioritised sequence, not159just a number. This queue is the input contract to the `ux-remediation-and-redesign` skill (see160Section 6 / Hand-off): **this skill diagnoses, scores, and triages; that skill executes the fix.**161162### Step 4: Produce Report163164Follow the report structure (Section 3). Order findings by the Step 3 triage queue, not just by165raw severity.166167---168169## 2. The 10 Audit Dimensions170171### Dimension 1: AI Slop Detection172173**The first check.** Does this interface look machine-generated?174175| Check | Look For |176|---|---|177| Typography | Inter/Roboto defaults, no hierarchy, title case everywhere |178| Colour | Cyan-on-dark, purple gradients, gradient text, pure black/white |179| Layout | Everything in cards, identical card grids, everything centred |180| Effects | Glassmorphism, decorative blur, glow borders, SVG blobs |181| Motion | Bounce/elastic easing, animation fatigue |182| Content | "Submit" buttons, "Loading..." text, corporate AI jargon |183184**Verdict**: PASS (distinctive, intentional) / BORDERLINE (some generic choices) / FAIL (immediately recognisable as AI-generated)185186Premium 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.187188### Dimension 2: Visual Hierarchy189190| Check | Standard |191|---|---|192| Squint test | Most important element visible when blurred |193| Size hierarchy | Clear primary > secondary > tertiary sizing |194| Weight contrast | Bold for headings, regular for body (not medium/light) |195| Colour emphasis | Brand colour reserved for interactive elements |196| Whitespace | Generous spacing separates sections; tight spacing groups related items |197| Focal point | Each screen has one clear entry point for the eye |198199### Dimension 3: Accessibility200201| Check | Standard | Severity |202|---|---|---|203| Text contrast | >= 4.5:1 (body), >= 3:1 (large text) | Critical |204| UI component contrast | >= 3:1 against background | Critical |205| Touch targets | >= 44x44px (48x48px preferred) | Critical |206| Keyboard navigation | Logical tab order, visible focus ring | Critical |207| Screen reader | Semantic HTML, ARIA labels, meaningful alt text | Critical |208| Colour independence | Never colour alone as indicator | High |209| Zoom support | Usable at 200% zoom | High |210| Reduced motion | `prefers-reduced-motion` respected | High |211| Focus management | Focus moves logically after interactions | Medium |212213**WCAG 2.2 deltas to check (new since 2.1):** focus not obscured by sticky chrome (2.4.11, AA);214target size **>= 24x24 CSS px** or spaced (2.5.8, AA); every drag has a single-pointer215alternative (2.5.7, AA); no re-entry of info already given in the flow (3.3.7, A); auth needs no216cognitive-function test without an alternative (3.3.8, AA); help appears in consistent order217(3.2.6, A). See `doctrine/references/wcag-2.2-criteria.md`. Certify with the WCAG ratio; design218with APCA.219220### Dimension 4: Typography221222| Check | Standard |223|---|---|224| Font choice | Intentional, not default (matches brand personality) |225| Type scale | Consistent scale (Major Third or project-appropriate) |226| Body size | >= 16px (18px preferred) |227| Line height | 1.5-2.0 for body; decreasing for larger sizes |228| Line length | 40-80 characters (66 ideal) |229| Weight usage | Regular + Bold only (avoid thin/light/medium) |230| Alignment | Left-aligned body text (no justified, centre only for 1-2 lines) |231| Letter spacing | Decreased for large display text |232233### Dimension 5: Colour234235| Check | Standard |236|---|---|237| Tinted neutrals | No pure grey (#808080), black (#000), or white (#fff) |238| Palette structure | Primary + neutral + semantic + surface tokens |239| 60-30-10 rule | 60% neutral, 30% secondary, 10% accent |240| Semantic colour | Red=error, amber=warning, green=success, blue=info |241| Dark mode | Independently designed (not inverted), desaturated brand colours |242| Brand colour usage | Reserved for interactive elements only |243| System colour pairing | Always paired with icon (not colour alone) |244245### Dimension 6: Layout & Spacing246247| Check | Standard |248|---|---|249| Spacing system | Consistent token scale (4pt or 8pt based) |250| Spacing variation | Rhythm through varied spacing (not uniform everywhere) |251| Alignment consistency | Few alignment axes per screen |252| Content max-width | Text constrained to 40-80 character line length |253| Grid usage | Appropriate tool: Flexbox for 1D, Grid for 2D |254| Responsive | Mobile-first, content-driven breakpoints |255| Container queries | Used for reusable components |256257### Dimension 7: Interaction States258259Every interactive element must have these states defined:260261| State | Visual Treatment |262|---|---|263| Default | Base appearance |264| Hover | Subtle shift (colour, shadow, or position) |265| Focus | Visible ring (`focus-visible` for keyboard only) |266| Active/Pressed | Distinct from hover (scale or colour change) |267| Disabled | Reduced opacity OR removed with explanation |268| Loading | Inline indicator with specific status text |269| Error | Red styling + icon + descriptive message |270| Success | Green styling + icon + confirmation message |271272### Dimension 8: Motion & Animation273274| Check | Standard |275|---|---|276| Purpose | Every animation serves a function (feedback, guide, connect) |277| Timing | Follows 100/300/500 rule for category |278| Easing | Exponential curves (ease-out-quart/quint), no bounce/elastic |279| GPU-only | Transform + opacity only (no layout property animation) |280| Reduced motion | `prefers-reduced-motion` alternative provided |281| Performance | 60fps on mid-range devices |282| Restraint | Not everything animates (no animation fatigue) |283284### Dimension 9: Content & Microcopy285286| Check | Standard |287|---|---|288| Button labels | Verb + noun (no "Submit", "OK", "Yes/No") |289| Error messages | What happened + why + how to fix |290| Empty states | Acknowledge + explain value + action |291| Loading text | Names the operation ("Saving your draft...") |292| Link text | Descriptive (no "Click here", "Learn more") |293| Vocabulary | Consistent terms throughout |294| Tone | Matches moment (serious for errors, warm for onboarding) |295296### Dimension 10: Performance297298| Check | Standard |299|---|---|300| LCP | < 2.5s (Core Web Vitals "good", field p75) |301| INP | < 200ms (CWV "good", field p75; INP replaced FID in 2024) |302| CLS | < 0.1 (CWV "good", field p75) |303| Initial load | Within archetype budget (marketing total <= 1 MB gz) |304| Images | WebP/AVIF, srcset, lazy loading, explicit dimensions |305| Fonts | `font-display: swap`, preloaded, subset |306307Verify CWV from **field p75** (CrUX/RUM) where available; Lighthouse lab is a proxy. Set the308three thresholds as Lighthouse-CI gates. See `doctrine/references/web-performance-budgets-2026.md`309for per-archetype asset budgets.310311---312313## 3. Report Structure314315### Header316317```318# Design Audit Report319**Date:** [Date]320**Auditor:** Codex (AI-assisted)321**Target:** [Screen/feature name]322**Platform:** [Web/Android/iOS]323**Context:** [Brief description of purpose and users]324```325326### AI Slop Verdict327328```329## AI Slop Verdict: [PASS / BORDERLINE / FAIL]330[1-2 sentence summary of why]331```332333### Executive Summary334335```336## Executive Summary337- **Overall Score:** [X/100]338- **Critical Issues:** [count]339- **High Issues:** [count]340- **Medium Issues:** [count]341- **Low Issues:** [count]342- **What's Working:** [1-3 bullet points of strengths]343- **Top Priority:** [The single most impactful fix]344```345346### Findings by Severity347348```349## Critical (Must Fix Before Ship)350### [Finding Title]351- **Dimension:** [Which of the 10 dimensions]352- **Location:** [Where in the interface]353- **Issue:** [What's wrong]354- **Impact:** [Who is affected and how]355- **Fix:** [Specific actionable fix]356- **Standard:** [Which standard it violates]357358## High (Fix Within Sprint)359[Same structure]360361## Medium (Fix Within Quarter)362[Same structure]363364## Low (Nice to Have)365[Same structure]366```367368### Severity Definitions369370| Severity | Meaning |371|---|---|372| **Critical** | Blocks users, fails accessibility law, data loss risk |373| **High** | Significant UX degradation, frequent user confusion |374| **Medium** | Noticeable quality issue, occasional friction |375| **Low** | Minor polish, edge case, aesthetic preference |376377### Positive Findings378379```380## What's Working Well381[List patterns and decisions that are effective and should be maintained]382```383384### Triage Queue & Recommendations385386Include the triage worksheet from `references/triage-and-prioritization.md` §2, then derive the387ordered recommendations from its **Order** column:388389```390## Triage Queue391[Triage worksheet: each finding scored red-route / hard / persistent → severity, impact×effort,392MoSCoW, and a final Order integer.]393394## Prioritised Recommendations (from the triage Order)3951. [Highest impact fix] — addresses [N] critical/high issues — [Must]3962. [Second priority] — addresses [N] issues — [Should]3973. [Third priority] — addresses [N] issues — [Could]398```399400Hand the ordered queue to `ux-remediation-and-redesign` to execute the fixes.401402---403404## 4. Scoring Guide405406For a defensible, repeatable score, use **`references/audit-rubric.md`** — it composes the AI407Slop, WCAG 2.2, and Core Web Vitals gates (which can cap the total) with the 0–4 dimension408scoring and the weights below. A worked, filled example is in `examples/design-audit-filled.md`.409410| Score | Meaning |411|---|---|412| 90-100 | Production-ready. Minor polish only. |413| 75-89 | Good foundation. Fix high-priority issues before shipping. |414| 60-74 | Significant issues. Needs focused remediation sprint. |415| 40-59 | Major redesign areas. Multiple dimensions failing. |416| < 40 | Fundamental problems. Start with structure and hierarchy. |417418### Dimension Weights419420| Dimension | Weight | Rationale |421|---|---|---|422| Accessibility | 20% | Legal requirement, blocks users |423| Visual Hierarchy | 15% | Foundation of usability |424| Interaction States | 12% | Functional completeness |425| Content & Microcopy | 12% | User comprehension |426| Typography | 10% | Readability |427| Colour | 8% | Communication and mood |428| Layout & Spacing | 8% | Structure and scannability |429| Performance | 6% | Speed and responsiveness |430| Motion | 5% | Polish and feedback |431| AI Slop | 4% | Distinctiveness (binary pass/fail) |432433---434435## 5. Quick Audit Checklist (10-Minute Version)436437For rapid checks when a full audit isn't needed:438439- [ ] **AI Slop**: Does this look machine-generated? (fonts, colours, layout)440- [ ] **Hierarchy**: Squint test passes — primary element is clear441- [ ] **Contrast**: Body text >= 4.5:1, UI components >= 3:1442- [ ] **Touch targets**: >= 44x44px on touch devices443- [ ] **Keyboard**: Tab through the page — focus visible, logical order444- [ ] **States**: Hover, focus, active, error, loading all defined445- [ ] **Buttons**: All use verb + noun labels446- [ ] **Errors**: All show what, why, how to fix447- [ ] **Empty states**: No blank screens448- [ ] **Responsive**: Works on mobile without horizontal scroll449- [ ] **Performance**: Loads in < 3s on mobile450- [ ] **Motion**: No bounce easing, reduced motion handled451452---453454---455456## 6. Hand-off — where the audit stops457458This skill ends at a **triaged, ordered fix queue** (Workflow Step 3 + the Triage Queue report459section). It deliberately does **not** redesign, re-prototype, or re-test.460461| Stage | Owner |462|---|---|463| Detect (10 dimensions + `interaction-anti-patterns.md`) | **`design-audit`** (this skill) |464| Score (rubric, gates, caps) | **`design-audit`** |465| Triage → ordered fix queue (`triage-and-prioritization.md`) | **`design-audit`** |466| Redesign lo-fi → hi-fi, validate (5-user / A/B / tree test), measure uplift | `ux-remediation-and-redesign` |467| Ship go/no-go | `design-qa-and-pre-launch-review` |468469Pass the triage worksheet + Prioritised Recommendations to `ux-remediation-and-redesign` as its470input contract. That closes the loop: **audit → fix → re-validate → ship.**471472---473474*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).*
Run npx skillmds@latest add peterbamuhigire/design-audit in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
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. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
peterbamuhigire (@peterbamuhigire) published this skill. Their other Agent Skills are listed on their SkillMD profile.
peterbamuhigire