Score
8.5
/ 10
Installs
23K
Repo Stars
243.8K
Last Updated
0d ago
Quality Ratio
89%
Description
Verified
Language
JavaScript
First Published
Jun 2026
Summary
The Design System agent skill guides developers and teams through building, evolving, or auditing a design system, covering everything from design tokens and component libraries to governance and documentation. This skill is essential for product teams, UI/UX designers, and front-end developers aiming to standardize their UI, reduce inconsistency across products, or create a scalable component architecture. It is a skill with 3K installs, indicating a solid adoption rate among users focused on systematic design. The skill provides a detailed five-layer framework, from foundational design tokens and elements to higher-level components, patterns, and system governance. It guides the AI to implement best practices like two-tier token systems and establish clear contribution models. Additionally, it outlines structured workflows for new system creation or auditing existing ones, while explicitly detailing and warning against common failure patterns such as stale documentation or lack of system ownership.
Skill Definition
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