Design System

Scans your codebase to either generate a design system from scratch or audit what you already have. It extracts tokens from your CSS/Tailwind, checks competitor sites for inspiration, and outputs a complete design.md with rationale plus an interactive preview page. The audit mode is the real gem: scores your UI across 10 dimensions like color consistency and spacing rhythm, then flags exact file and line numbers where things break down. There's also a "slop detection" mode that calls out generic AI patterns like gratuitous purple gradients and pointless glassmorphism. Honest take: most codebases accumulate visual inconsistency over time, and this gives you a structured way to see the damage before a refactor.

Install to Claude Code

npx -y skills add affaan-m/ecc --skill design-system --agent claude-code