# Design System

Build or audit a design system including component library, design tokens, naming...

- Repository: https://github.com/rampstackco/claude-skills (1014 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rampstackco/claude-skills --skill design-system -g -a claude-code -y`
Codex: `npx skills add rampstackco/claude-skills --skill design-system -g -a codex -y`
Cursor: `npx skills add rampstackco/claude-skills --skill design-system -g -a cursor -y`
Gemini CLI: `npx skills add rampstackco/claude-skills --skill design-system -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rampstackco/claude-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/rampstackco/claude-skills/blob/HEAD/dist/codex/.agents/skills/design-system/SKILL.md