Design Consistency Auditor
Before auditing, discover the project's frontend structure from documentation.
Ensures:
- Color palettes are used consistently through semantic tokens
- Spacing stays on the project's scale
- Components maintain visual harmony across screens
- The design system is applied instead of duplicated
- No design debt accumulates
When to Use
- Auditing design-token consistency across apps
- Reviewing color palette usage and hunting hardcoded hex values
- Checking UI/UX patterns for screen-to-screen divergence
- Spotting one-off classes that duplicate a design-system component
- Reviewing new features against the established design standards
Accessibility conformance is a separate pass — use accessibility for WCAG, ARIA,
keyboard access, and contrast.
Quick Reference
Color Rules
DO: Use semantic tokens (bg-primary, text-base-content, bg-base-100)
DON'T: Hardcode hex colors (#000000) or arbitrary values (bg-[#123456])
Component Patterns
Discover the project's component class conventions from its design system or existing codebase. Common patterns to look for:
- Cards: project-specific card class or component (e.g.
card, .card, design-system Card component)
- App shells / layouts: project-specific shell wrapper class
- Modals / dialogs: project dialog component pattern
- Inputs: project form input class or component
- Buttons: project button variants (primary, secondary, ghost)
Identify the actual class names from the codebase before auditing — do not assume a specific naming convention.
Spacing
DO: Use Tailwind scale (p-4, m-6, gap-4)
DON'T: Use arbitrary values (p-[17px])
Accessibility
- Semantic HTML (
<button>, <nav>, <main>)
- ARIA labels on interactive elements
- 4.5:1 contrast for text, 3:1 for UI
- Focus states:
focus:outline-none focus:ring-2 focus:ring-primary
Responsive
- Mobile-first with
sm:, md:, lg:, xl: modifiers
- Responsive typography:
text-3xl sm:text-4xl
Audit Phases
- Color Palette - Scan for hardcoded colors, verify theme tokens
- Component Patterns - Check cards, buttons, forms use theme classes
- Spacing & Layout - Verify consistent spacing scale
- Typography - Check heading hierarchy and text styles
- Accessibility - Run automated checks, keyboard testing
AI Slop Prevention
Audit for generic "AI-generated" aesthetics:
- Generic fonts (Inter, Roboto everywhere)
- Purple gradients on white
- Predictable layouts without character
- Safe, boring color choices
Push for distinctive, branded designs with personality.
For detailed checklists, examples, reporting templates, and audit commands, see: references/full-guide.md
Related
audit — a scored 0-4 sweep across accessibility, performance, theming, responsive design, and anti-patterns when no single dimension is named.accessibility — WCAG 2.1 AA conformance, ARIA, keyboard access, and screen-reader verification.
1---
2name: design-consistency-auditor
3description: Hunts design-token drift across a frontend — hardcoded hex values where semantic tokens belong, arbitrary spacing outside the scale, one-off classes duplicating a design-system component, and patterns that diverge screen to screen. Measures against the project's own tokens and class conventions, discovered from the codebase first rather than assumed. Triggers on audit design consistency, review component styling, check color palette usage, find hardcoded colors, or identify design debt. For a scored multi-dimension quality report, use `audit`; for WCAG conformance, use `accessibility`.
4metadata:
5 version: "1.0.1"
6 tags: "design, ux, ui, consistency, design-tokens, design-debt, tailwind"
7---
8
9# Design Consistency Auditor
10
11Before auditing, discover the project's frontend structure from documentation.
12
13Ensures:
14
15- Color palettes are used consistently through semantic tokens
16- Spacing stays on the project's scale
17- Components maintain visual harmony across screens
18- The design system is applied instead of duplicated
19- No design debt accumulates
20
21## When to Use
22
23- Auditing design-token consistency across apps
24- Reviewing color palette usage and hunting hardcoded hex values
25- Checking UI/UX patterns for screen-to-screen divergence
26- Spotting one-off classes that duplicate a design-system component
27- Reviewing new features against the established design standards
28
29Accessibility conformance is a separate pass — use `accessibility` for WCAG, ARIA,
30keyboard access, and contrast.
31
32## Quick Reference
33
34### Color Rules
35
36**DO:** Use semantic tokens (`bg-primary`, `text-base-content`, `bg-base-100`)
37**DON'T:** Hardcode hex colors (`#000000`) or arbitrary values (`bg-[#123456]`)
38
39### Component Patterns
40
41Discover the project's component class conventions from its design system or existing codebase. Common patterns to look for:
42
43- Cards: project-specific card class or component (e.g. `card`, `.card`, design-system Card component)
44- App shells / layouts: project-specific shell wrapper class
45- Modals / dialogs: project dialog component pattern
46- Inputs: project form input class or component
47- Buttons: project button variants (primary, secondary, ghost)
48
49Identify the actual class names from the codebase before auditing — do not assume a specific naming convention.
50
51### Spacing
52
53**DO:** Use Tailwind scale (`p-4`, `m-6`, `gap-4`)
54**DON'T:** Use arbitrary values (`p-[17px]`)
55
56### Accessibility
57
58- Semantic HTML (`<button>`, `<nav>`, `<main>`)
59- ARIA labels on interactive elements
60- 4.5:1 contrast for text, 3:1 for UI
61- Focus states: `focus:outline-none focus:ring-2 focus:ring-primary`
62
63### Responsive
64
65- Mobile-first with `sm:`, `md:`, `lg:`, `xl:` modifiers
66- Responsive typography: `text-3xl sm:text-4xl`
67
68## Audit Phases
69
701. **Color Palette** - Scan for hardcoded colors, verify theme tokens
712. **Component Patterns** - Check cards, buttons, forms use theme classes
723. **Spacing & Layout** - Verify consistent spacing scale
734. **Typography** - Check heading hierarchy and text styles
745. **Accessibility** - Run automated checks, keyboard testing
75
76## AI Slop Prevention
77
78Audit for generic "AI-generated" aesthetics:
79
80- Generic fonts (Inter, Roboto everywhere)
81- Purple gradients on white
82- Predictable layouts without character
83- Safe, boring color choices
84
85Push for distinctive, branded designs with personality.
86
87---
88
89**For detailed checklists, examples, reporting templates, and audit commands, see:** `references/full-guide.md`
90
91## Related
92
93- `audit` — a scored 0-4 sweep across accessibility, performance, theming, responsive design, and anti-patterns when no single dimension is named.
94- `accessibility` — WCAG 2.1 AA conformance, ARIA, keyboard access, and screen-reader verification.
shipshitdev