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