Design System
Build or audit a design system including component library, design tokens, naming...
Install
npx skills add rampstackco/claude-skills --skill design-system -g -a claude-code -y- Repository
- rampstackco/claude-skills1k
- Category
- Design
- Updated
- 9d ago
- License
- MIT
- Context cost
- Mediumabout 2,246 tokens
- Runs scripts
- No, instructions only
What it does
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 and a system is the answer.
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)
- Existing components, even if undocumented
- Constraints (accessibility requirements, performance targets, browser support)
If brand identity is undefined, run brand-identity first.
The framework: 5 layers
A complete design system has five layers, stacked. Each layer feeds the layer above.
1. Foundations (tokens)
The atomic decisions. Color, type, spacing, radius, shadow, motion, breakpoints.
Why this layer matters:
- Tokens are the source of truth for everything above
- Token changes propagate everywhere automatically
- Without tokens, the system has no foundation
