Design System
Skill Verified ActiveBuild 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.
To provide a structured, repeatable methodology for creating and maintaining robust design systems that ensure consistency across products and teams.
Features
- Build or audit design systems
- Define design tokens and naming conventions
- Structure component libraries
- Establish contribution models and governance
- Generate design system documentation
Use Cases
- Building a new design system from scratch
- Auditing an existing system for gaps and fragmentation
- Structuring a component library and defining its foundations
- Setting up governance for design system contributions and evolution
Non-Goals
- Designing a single page or component in isolation
- Brand identity work unrelated to the system's visual language
- Component-level frontend implementation
- Pure design documentation for marketing purposes
Workflow
- Inventory existing UI and identify duplicates
- Define foundations (tokens)
- Audit and define elements (primitives)
- Identify and build priority components
- Document patterns and templates
- Establish governance and contribution model
- Roll out and migrate existing surfaces
Practices
- Design system architecture
- Component governance
- Token management
- Documentation standards
Installation
npx skills add rampstackco/claude-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
Figma Generate Library
100Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
UI Design System Toolkit
99UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Ui
96Use this skill when contributing to InsForge's reusable UI package. This is for maintainers editing design-system primitives, exports, styles, and package-level component behavior in the InsForge monorepo.
Figma Generate Library
95Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Figma Create Design System Rules
95Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.