design-system
Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products an
Profile →npx skills add rampstackco/claude-skills --skill design-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design System Build, evolve, or audit a design system. Stack-agnostic in principle. Implementation is stack-specific (Figma, Storybook, code library, etc.) but the structure and governance principles transfer. This skill is for building the system. For applying a system to specific pages or components, use `design-standards`. For brand visual identity, use `brand-identity`. --- ## When to use - Building a design system from scratch - Auditing an existing system for gaps or fragmentation - Defining design tokens at the system level - Structuring a component library - Establishing contribution and governance models - Migrating from ad-hoc components to a documented system ## When NOT to use - Designing a single page or component (use `design-standards`) - Brand identity work (use `brand-identity`) - Component-level frontend implementation (use `frontend-component-build`) - Pure design documentation for marketing (use `brand-style-guide`) --- ## Required inputs - The brand identity (tokens, voice, imagery direction) - The product surfaces the system needs to support (web, mobile, marketing, app, internal tools) - The team and its working tools (Figma, code framework, doc platform) -
- When to use
- When NOT to use
- Required inputs
- The framework: 5 layers
- 1. Foundations (tokens)
- 2. Elements (atoms)
- 3. Components (molecules + organisms)
- 4. Patterns (templates)
- 5. Documentation and governance
- Workflow
- For a new design system
- For an existing design system audit
- Failure patterns
- Output format
What does the design-system skill do?
Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products an
How do I install it?
Run `npx skills add rampstackco/claude-skills --skill design-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rampstackco/claude-skills, a repository with 515 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.