Best use case
design-system is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate and audit visual design systems for consistency
Teams using design-system should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
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 | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generate and audit visual design systems for consistency
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.
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 /egc-docs ``` **Check for AI slop:** ``` /design-system slop-check ```
Related Skills
liquid-glass-design
iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
api-design
REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.
x-api
X/Twitter API integration for posting tweets, threads, reading timelines, search, and analytics. Covers OAuth auth patterns, rate limits, and platform-native content posting. Use when the user wants to interact with X programmatically.
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 Gemini CLI or understanding what capabilities are actually available in their environment.
visa-doc-translate
Translate visa application documents (images) to English and create a bilingual PDF with original and translation
videodb
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, video), and create real time alerts for events from live streams or desktop capture.
video-editing
AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.
verification-loop
Comprehensive verification system for code changes
unified-notifications-ops
Operate notifications as one ECC-native workflow across GitHub, Linear, desktop alerts, hooks, and connected communication surfaces. Use when the real problem is alert routing, deduplication, escalation, or inbox collapse.
ui-demo
Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.
token-budget-advisor
Offers the user an informed choice about how much response depth to consume before answering. Use this skill when the user explicitly wants to control response length, depth, or token budget. TRIGGER when: "token budget", "token count", "token usage", "token limit", "response length", "answer depth", "short version", "brief answer", "detailed answer", "exhaustive answer", "respuesta corta vs larga", "cuántos tokens", "ahorrar tokens", "responde al 50%", "dame la versión corta", "quiero controlar cuánto usas", or clear variants where the user is explicitly asking to control answer size or depth. DO NOT TRIGGER when: user has already specified a level in the current session (maintain it), the request is clearly a one-word answer, or "token" refers to auth/session/payment tokens rather than response size.