Design Consistency Auditor
Purpose
Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.
Ensures:
- Color palettes are used consistently
- UI/UX patterns follow best practices
- Components maintain visual harmony
- Accessibility standards are met
- Design system is properly applied
- No design debt accumulates
When to Use
- Auditing design consistency across apps
- Reviewing color palette usage
- Checking UI/UX patterns
- Validating component styling
- Ensuring accessibility compliance
- Identifying design inconsistencies
- Reviewing new features for design standards
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
- Cards:
.gf-card
- App shells:
.gf-app
- Modals:
.glass-modal
- Inputs:
.glass-input, .form-focus
- Buttons:
btn btn-primary, .btn-secondary, btn-ghost
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
1---2name: design-consistency-auditor3description: Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications4---5
6# Design Consistency Auditor
7
8## Purpose
9
10Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.
11
12Ensures:
13
14- Color palettes are used consistently
15- UI/UX patterns follow best practices
16- Components maintain visual harmony
17- Accessibility standards are met
18- Design system is properly applied
19- No design debt accumulates
20
21## When to Use
22
23- Auditing design consistency across apps
24- Reviewing color palette usage
25- Checking UI/UX patterns
26- Validating component styling
27- Ensuring accessibility compliance
28- Identifying design inconsistencies
29- Reviewing new features for design standards
30
31## Quick Reference
32
33### Color Rules
34
35**DO:** Use semantic tokens (`bg-primary`, `text-base-content`, `bg-base-100`)
36**DON'T:** Hardcode hex colors (`#000000`) or arbitrary values (`bg-[#123456]`)
37
38### Component Patterns
39
40- Cards: `.gf-card`
41- App shells: `.gf-app`
42- Modals: `.glass-modal`
43- Inputs: `.glass-input`, `.form-focus`
44- Buttons: `btn btn-primary`, `.btn-secondary`, `btn-ghost`
45
46### Spacing
47
48**DO:** Use Tailwind scale (`p-4`, `m-6`, `gap-4`)
49**DON'T:** Use arbitrary values (`p-[17px]`)
50
51### Accessibility
52
53- Semantic HTML (`<button>`, `<nav>`, `<main>`)
54- ARIA labels on interactive elements
55- 4.5:1 contrast for text, 3:1 for UI
56- Focus states: `focus:outline-none focus:ring-2 focus:ring-primary`
57
58### Responsive
59
60- Mobile-first with `sm:`, `md:`, `lg:`, `xl:` modifiers
61- Responsive typography: `text-3xl sm:text-4xl`
62
63## Audit Phases
64
651. **Color Palette** - Scan for hardcoded colors, verify theme tokens
662. **Component Patterns** - Check cards, buttons, forms use theme classes
673. **Spacing & Layout** - Verify consistent spacing scale
684. **Typography** - Check heading hierarchy and text styles
695. **Accessibility** - Run automated checks, keyboard testing
70
71## AI Slop Prevention
72
73Audit for generic "AI-generated" aesthetics:
74
75- Generic fonts (Inter, Roboto everywhere)
76- Purple gradients on white
77- Predictable layouts without character
78- Safe, boring color choices
79
80Push for distinctive, branded designs with personality.
81
82---
83
84**For detailed checklists, examples, reporting templates, and audit commands, see:** `references/full-guide.md`
majiayu000