description: Audit current design system for consistency and debt

DESIGN-AUDIT

What This Does

1. Inventory tokens — Colors, typography, spacing, shadows
2. Check consistency — Are tokens used consistently?
3. Find violations — Hardcoded values, magic numbers
4. Assess accessibility — WCAG compliance
5. Report debt — Design debt that's accumulated

Process

1. Load Design Skills

Skill("design-tokens")        # Token patterns
Skill("ui-skills")            # Implementation constraints
Skill("web-interface-guidelines")  # Vercel standards

2. Extract Current Tokens

• Tailwind config (

  tailwind.config.ts

  ,

  globals.css

  )
• CSS variables
• Theme files
• Component defaults

3. Audit Token Usage

• Are colors from the palette? Or hardcoded hex?
• Is there semantic naming (primary, error, success)?
• Dark mode support?

• Font scales defined?
• Consistent heading hierarchy?
• Line heights appropriate?

• Spacing scale in use?
• Magic numbers in margins/padding?

• Consistent component patterns?
• Reusable primitives?
• Duplicated styles?

4. Accessibility Check

/rams — Score current state

• Color contrast (WCAG AA minimum)
• Focus states
• Touch targets
• Screen reader support

5. Report Findings

## Design Audit: [Project Name]

### Token Inventory
- Colors: [count] defined, [violations] hardcoded
- Typography: [count] scales, [violations] magic sizes
- Spacing: [count] values, [violations] arbitrary

### Consistency Score: [X]/100

### Critical Issues
- [ ] [Issue] - [location] - [fix]

### Debt Items
- [ ] [Tech debt] - [impact] - [effort]

### RAMS Score: [X]/100

### Recommendations
1. [Priority fix]
2. [Improvement]

Diagram Documentation

/beautiful-mermaid

Output

/design-catalog

/design-theme