design-system

name design-system description Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling. metadata {"origin":"ECC"} 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 Reviewing PRs that touch styling How It Works 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 (via browser MCP) 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 (self-contained, no deps) 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 — are you using your 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 Each dimension gets a score, specific examples, and a fix with exact file:line. Mode 3: AI Slop Detection Identifies generic AI-generated design patterns: - Gratuitous gradients on everything - Purple-to-blue defaults - "Glass morphism" cards with no purpose - Rounded corners on things that shouldn't be rounded - Excessive animations on scroll - Generic hero with centered text over stock gradient - Sans-serif font stack with no personality Examples Generate for a SaaS app: /design-system generate --style minimal --palette earth-tones Audit existing UI: /design-system audit --url http://localhost:3000 --pages / /pricing /docs Check for AI slop: /design-system slop-check