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.

skills.sh installs: 6K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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