Design System
Generate design tokens and DESIGN.md from your codebase or score UI consistency across ten audit dimensions before shipping styled work.
Overview
design-system is an agent skill most often used in Build (also Ship) that generates or audits design systems and reviews styling consistency for solo-builder UIs.
Install
npx skills add https://github.com/affaan-m/everything-claude-code --skill design-systemWhat is this skill?
- Two modes: Generate Design System and Visual Audit
- Generate flow scans CSS/Tailwind/styled-components and outputs DESIGN.md, design-tokens.json, and design-preview.html
- Visual Audit scores UI across 10 dimensions on a 0–10 scale each
- Generate mode can research three competitor sites for inspiration via browser MCP
- Use before redesigns, when UI feels off, or when reviewing styling PRs
- Visual Audit uses 10 scored dimensions (0–10 each)
- Generate mode researches 3 competitor sites when browser MCP is used
Adoption & trust: 3.8k installs on skills.sh; 210k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your interface mixes ad-hoc hex values and spacing and you cannot defend a redesign or pass a styling PR review with objective criteria.
Who is it for?
Indie SaaS or content sites starting a design system, prepping a redesign, or auditing Tailwind/CSS drift before launch.
Skip if: Headless API-only services with no UI, or teams that already enforce a frozen enterprise token package with no repo-level drift.
When should I use this skill?
Starting a new project that needs a design system, auditing visual consistency, before a redesign, when the UI looks off, or reviewing PRs that touch styling.
What do I get? / Deliverables
You receive documented tokens, an optional live preview, and ten-dimension audit scores so styling changes are intentional and reviewable.
- DESIGN.md
- design-tokens.json
- design-preview.html
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
New products and UI refactors land in Build first; this skill is shelved under frontend because it targets styling systems and visual patterns in the app layer. Token extraction, Tailwind/CSS scans, and PR styling review map directly to frontend implementation—not backend APIs.
Where it fits
Scan an existing Next.js Tailwind app and emit design-tokens.json plus DESIGN.md before refactoring components.
Score a landing prototype across ten dimensions to decide if it is ready to promote to the main app theme.
Run Visual Audit checklist when a large PR touches global CSS variables and component spacing.
Confirm typography hierarchy and responsive breakpoints before publishing marketing pages that must match the product shell.
How it compares
Use for token generation and visual consistency scoring instead of one-off “make it prettier” chat prompts.
Common Questions / FAQ
Who is design-system for?
Solo builders shipping web or mobile-facing products who own CSS/Tailwind/styled-components and need tokens, documentation, or a structured UI audit.
When should I use design-system?
Use it in Build when starting a project or implementing frontend styling; in Validate when scoping a prototype look-and-feel; in Ship when reviewing PRs that touch styles or when the UI looks wrong but causes are unclear.
Is design-system safe to install?
Generate mode may read your repo and optionally fetch competitor pages via browser MCP; review the Security Audits panel on this page and limit network use if you work with sensitive unreleased UI.
Workflow Chain
Then invoke: commit work
SKILL.md
READMESKILL.md - Design System
# 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 ```