Design System

This does two things well: it can scan your codebase to extract design patterns and generate a proper design token system with competitor research, or it can audit your UI across ten dimensions like color consistency, spacing rhythm, and accessibility with specific file-level fixes. The visual audit scoring is genuinely useful when something feels off but you can't articulate why. Mode 3 is funny but real: it flags AI slop like gratuitous purple gradients and pointless glassmorphism. Best used when starting a project that needs design foundations or when reviewing styling PRs where inconsistencies creep in. The HTML preview it generates is self-contained, which means you can actually share it with designers without dependency hell.

skills.sh installs: 4.4K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --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