What is the rampstack design-system skill?
The rampstack design-system skill is one of 103 skills in the rampstackco repository. It has your AI coding agent either build a design system or audit an existing one. It works through five layers, from tokens to governance, and an audit ends as a markdown report you can hand to a team.
Rampstack publishes a catalog of 103 skills in one repository. The one named design-system builds or audits a design system. It wakes when you mention a design system, component library, design tokens, atomic design, Storybook, a Figma library or governance.
The five layers it works through
- Foundations: the tokens, meaning the raw values everything else draws from.
- Elements: the atoms built from those tokens.
- Components: elements combined into reusable parts.
- Patterns: templates that arrange components into page structures.
- Documentation and governance: how the system is described, owned and kept current.
The skill's two-tier token example pairs a base token, color-blue-600, with a semantic token, color-text-link. Naming the purpose separately from the raw value is the idea behind the split, and the foundations layer is where it lives.
Build mode and audit mode
- A new system follows a nine step workflow.
- An existing system follows a six step audit workflow.
- The audit result is a markdown report called design-system-audit.md, written in six sections.
- A dedicated section covers what to do when required data is unavailable, so the agent has a defined fallback.
Who the rampstack skill is for
Best for
- Teams starting a component library who want layers and governance decided before screens multiply.
- A design system that has drifted and needs a structured audit with a written report.
- Any stack. The README names Next.js, WordPress, Shopify, Webflow and plain HTML.
Not for
- Pulling tokens out of a live site. For that, see extract-design-system.
- A one-off critique of a single screen. critique fits that job better.
- Writing component code. The repo lists a separate frontend-component-build skill for that.
Use it with UiChemy
Decide your tokens and component layers here, then build in Figma. UiChemy Figma to WordPress converts that Figma design into a WordPress site, and Composer edits HTML, CSS and JS in Elementor or Gutenberg. Click Get Started on uichemy.com. Token naming is covered in design-token.
How to install Rampstack Design System Skill: Build or Audit One
/plugin marketplace add rampstackco/claude-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add rampstackco/claude-skills. The README also mentions an alternate marketplace, rampstackco/plugins.Install a bundle
Run
/plugin install rampstack-skills@rampstackfor the full catalog. The README also lists smaller subsets named rampstack-starter, rampstack-seo and rampstack-pm.Let it load on demand
The README says skills load on demand, so no extra setup is needed once the bundle is installed.
Ask for the job
Use words from the skill description, for example asking your agent to audit a design system or set up design tokens and a component library.
Check that it loaded
Ask the agent to audit a small design system. It should follow the audit workflow and write design-system-audit.md with six sections.
Key features
- Two modes in one skillThe skill builds a new design system or audits an existing one, so the same trigger words cover both a fresh start and a cleanup.
- Five layer frameworkFoundations (tokens), Elements (atoms), Components, Patterns (templates) and Documentation and governance give the agent a fixed structure to work through.
- Two tier tokensIts example pairs a base token, color-blue-600, with a semantic token, color-text-link, so the purpose of a value is named apart from the value.
- Nine step build workflowCreating a new system follows nine ordered steps, so the agent does not jump straight to components before the foundations exist.
- Six step audit workflowAuditing an existing system follows its own six step path, separate from the build path.
- Nine failure patternsThe skill names nine ways design systems go wrong, including token explosion, the one-person system, stale docs and atomic dogmatism.
- Audit report fileAn audit produces design-system-audit.md, a markdown report with six sections that a team can review and track.
- Reference filesThree references sit beside SKILL.md: system-architecture.md, system-audit-template.md and governance-playbook.md.
- Missing data fallbackAn If required data is unavailable section tells the agent how to proceed when inputs such as a token list or component inventory are not provided.
- Related sibling skillsThe same repo has design-standards, brand-identity, frontend-component-build and brand-style-guide for neighbouring work.
Frequently asked questions
What is the rampstack design-system skill?
It is a skill from the rampstackco repository, which holds 103 skills in total. The skill builds a new design system or audits an existing one. It organises the work into five layers, from foundation tokens to documentation and governance, and it can produce a written audit report.
How do I install the rampstack design-system skill?
Add the marketplace with /plugin marketplace add rampstackco/claude-skills, then install the bundle with /plugin install rampstack-skills@rampstack. The README also names smaller subsets called rampstack-starter, rampstack-seo and rampstack-pm. Skills load on demand after installation.
What does the audit report contain?
An audit produces a markdown file called design-system-audit.md with six sections. The skill folder also has reference files for system architecture, an audit template and a governance playbook, so the report follows a defined shape rather than free-form notes.
Which design system problems does it look for?
The skill lists nine failure patterns. Four of them are token explosion, a one-person system, stale documentation and atomic dogmatism. Naming the patterns gives the agent concrete things to check for, which is more useful than a general request to review the system.
Does it depend on a front-end framework?
No. The README describes the skills as stack-agnostic and says they can be used on Next.js, WordPress, Shopify, Webflow and plain HTML. The design-system skill works at the level of layers, tokens and governance, not one framework's component syntax.
Which AI coding agents does the rampstack skill work with?
The README says the catalog works across Claude.ai, Claude Code and the Anthropic API. The repo also holds a dist/codex folder, which is where this skill's path sits. The README does not list other agents, so check before relying on a different one.
What other skills sit next to design-system?
The same repository includes design-standards, brand-identity, frontend-component-build and brand-style-guide. They cover neighbouring work such as brand identity and building front-end components, so you can pair them with the design-system skill when a project needs both.
What license does the rampstack skill use?
GitHub lists the repository license as MIT. As with any skill folder, read the license file in the repository before you redistribute the skill inside a product, and recheck it when you update because the repo is actively pushed to.