design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
About this skill
This skill empowers an AI agent to comprehensively manage design systems. It can analyze your codebase (supporting CSS, Tailwind, and styled-components) to generate a new, cohesive design system, extracting key design tokens like colors, typography, spacing, border-radius, shadows, and breakpoints. Beyond generation, it excels at auditing existing codebases for visual inconsistencies, providing insights before a redesign, or diagnosing 'off' UI elements. Furthermore, it can critically review pull requests that modify styling, ensuring adherence to established design principles and consistency. Rooted in the 'everything-claude-code' repository, this skill adheres to robust software development best practices, making it suitable for production-grade system design and maintenance.
Best use case
Automating the creation of new design systems; Identifying and rectifying visual inconsistencies in existing UIs; Streamlining styling-related code reviews; Preparing for major UI/UX overhauls; Maintaining design consistency across large projects.
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
A structured design system (e.g., JSON, Markdown) with extracted design tokens; a detailed report on visual inconsistencies with actionable recommendations; precise feedback on styling changes in pull requests; a clearer, more consistent user interface.
Practical example
Example input
Generate a design system for my new e-commerce frontend. Analyze the provided SCSS files and research 3 popular e-commerce sites like Shopify, Etsy, and Amazon for inspiration. Audit the attached React component library for visual consistency across its buttons and forms. Review this pull request (link provided) for any styling inconsistencies or deviations from our brand guidelines.
Example output
### Design System Report: **Colors:** - Primary: #007bff (Blue) - Secondary: #6c757d (Gray) - Success: #28a745 (Green) **Typography:** - H1: 'Inter Bold', 48px, 1.2 line-height - Body: 'Inter Regular', 16px, 1.5 line-height **Spacing Scale:** 4px, 8px, 16px, 24px, 32px ... ### Visual Consistency Audit - Buttons: **Inconsistency detected:** Button border-radius varies by 2px between `PrimaryButton` and `SecondaryButton`. `PrimaryButton` uses 4px, `SecondaryButton` uses 6px. Recommend standardizing to 4px. ### PR Review - Styling: **Line 42 (components/Card.css):** The `box-shadow` property here does not match the `$shadow-level-2` token defined in our design system. Please update to `0 4px 6px rgba(0,0,0,0.1)` for consistency.
When to use this skill
- 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
When not to use this skill
- When a fully manual, highly bespoke visual design is required without any existing code base or system to inform it.
- For purely creative, non-technical graphic design tasks that don't involve code analysis or systemization.
- If the project strictly adheres to a completely different, non-code-based design process (e.g., purely Fimga-centric with no code integration).
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/design-system/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How design-system Compares
| Feature / Agent | design-system | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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 ```
Related Skills
api-design
REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.
workspace-surface-audit
Audit the active repo, MCP servers, plugins, connectors, env surfaces, and harness setup, then recommend the highest-value ECC-native skills, hooks, agents, and operator workflows. Use when the user wants help setting up Claude Code or understanding what capabilities are actually available in their environment.
safety-guard
Use this skill to prevent destructive operations when working on production systems or running agents autonomously.
repo-scan
Cross-stack source code asset audit — classifies every file, detects embedded third-party libraries, and delivers actionable four-level verdicts per module with interactive HTML reports.
project-flow-ops
Operate execution flow across GitHub and Linear by triaging issues and pull requests, linking active work, and keeping GitHub public-facing while Linear remains the internal execution layer. Use when the user wants backlog control, PR triage, or GitHub-to-Linear coordination.
manim-video
Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.
laravel-plugin-discovery
Discover and evaluate Laravel packages via LaraPlugins.io MCP. Use when the user wants to find plugins, check package health, or assess Laravel/PHP compatibility.
click-path-audit
Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state. Use when: systematic debugging found no bugs but users report broken buttons, or after any major refactor touching shared state stores.
ck
Persistent per-project memory for Claude Code. Auto-loads project context on session start, tracks sessions with git activity, and writes to native memory. Commands run deterministic Node.js scripts — behavior is consistent across model versions.
canary-watch
Use this skill to monitor a deployed URL for regressions after deploys, merges, or dependency upgrades.
benchmark
Use this skill to measure performance baselines, detect regressions before/after PRs, and compare stack alternatives.
swiftui-patterns
SwiftUI 架构模式，使用 @Observable 进行状态管理，视图组合，导航，性能优化，以及现代 iOS/macOS UI 最佳实践。