---
name: ecc-design-system
description: Generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when starting a new project, auditing codebase for visual consistency, or redesigning.
---

# Design System — Generate & Audit Visual Systems

## When to Use
- Starting a new project that needs a design system
- Auditing an existing codebase for visual consistency
- Before a redesign — understand what you have
- When the UI looks "off" but you can't pinpoint why

## Mode 1: Generate Design System

Analyzes your codebase and generates a cohesive design system:

1. Scan CSS/Tailwind/styled-components for existing patterns
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
3. Research 3 competitor sites for inspiration
4. Propose a design token set (JSON + CSS custom properties)
5. Generate DESIGN.md with rationale for each decision
6. Create an interactive HTML preview page

Output: `DESIGN.md` + `design-tokens.json` + `design-preview.html`

## Mode 2: Visual Audit

Scores your UI across 10 dimensions (0-10 each):

1. **Color consistency** — using palette or random hex values?
2. **Typography hierarchy** — clear h1 > h2 > h3 > body > caption?
3. **Spacing rhythm** — consistent scale (4px/8px/16px) or arbitrary?
4. **Component consistency** — do similar elements look similar?
5. **Responsive behavior** — fluid or broken at breakpoints?
6. **Dark mode** — complete or half-done?
7. **Animation** — purposeful or gratuitous?
8. **Accessibility** — contrast ratios, focus states, touch targets
9. **Information density** — cluttered or clean?
10. **Polish** — hover states, transitions, loading states, empty states

## Mode 3: AI Slop Detection

Identifies generic AI-generated design patterns:
- Gratuitous gradients on everything
- Purple-to-blue default palettes
- "Glass morphism" cards with no purpose
- Rounded corners on everything
- Generic hero with centered text over stock gradient
- Sans-serif font stack with no personality
