What does the design-system skill do?
The design-system skill is a slash command skill in Anthropic's knowledge-work-plugins repository. It runs in three modes: audit a system for naming gaps and hardcoded values, document a component's variants, states and accessibility, or extend the system with a new pattern that fits what already exists.
The skill answers to /design-system and takes one of three modes, audit, document or extend, followed by a component or system name. Each mode returns a differently shaped markdown report, so you pick the job before the agent starts.
It lives in the design folder of knowledge-work-plugins as a single SKILL.md. Beyond the three modes it defines what counts as a design system: tokens, components and patterns, with four principles that put consistency ahead of creativity.
The three report shapes
- Audit: a summary line, a naming consistency table, token coverage by category and a component completeness table, ending in three priority actions.
- Document: description, variants, props, states, accessibility notes, do and don't pairs and a code example for one component.
- Extend: the problem, related components and why they fall short, a proposed API, variants, states, tokens used and open questions.
Four principles in the file
- Consistency over creativity.
- Flexibility within constraints.
- Document everything, because undocumented parts effectively do not exist.
- Version and migrate, with a path for every breaking change.
Where it helps and where it stops
Good for
- Finding hex values, arbitrary spacing and custom fonts that bypass tokens.
- Writing consistent component docs. Related: tailwind-design-system.
- Proposing a new component without duplicating an existing one.
Not for
- Generating tokens from a live site. Related: extract-design-system.
- Building screens, since every output is a markdown report.
- Exact scores. The audit template uses placeholders, so numbers depend on what your agent can inspect.
Use it with UiChemy
A documented system gives your Elementor or Gutenberg build a checklist for tokens and components. UiChemy Figma to WordPress converts Figma designs into editable pages, and this skill's audit mode can review the Figma source first. Click Get Started on uichemy.com.
How to install Design System Skill: Audit, Document and Extend
git clone https://github.com/anthropics/knowledge-work-plugins.gitClone the repository
Run
git clone https://github.com/anthropics/knowledge-work-plugins.git. The skill sits in design/skills/design-system.Copy the skill folder
Copy design/skills/design-system into the folder your agent reads skills from. The pack shows a single SKILL.md in it.
Optional marketplace route
The README documents
claude plugin marketplace add anthropics/knowledge-work-pluginsfor Claude Code, then installing a plugin from that marketplace.Run a mode
Type
/design-system auditto review a system, or/design-system documentfollowed by a component name.
Check that it loaded
Run /design-system document Button. The reply should be a markdown component page with variants, properties, states, accessibility and do and don't sections.
Key features
- Three modes in one commandThe argument hint takes audit, document or extend plus a component or system, so a single slash command covers review, writing and design.
- Token modelDefines tokens as colors, typography, spacing, borders, shadows and motion, giving the audit a clear list of what should be tokenized.
- Naming consistency tableThe audit report lists each naming issue with the components involved and a standard to adopt.
- Token coverage checkCounts hardcoded hex colors, arbitrary spacing values and custom fonts or sizes against what the system defines.
- Component completeness gridRates each component on states, variants and docs, so gaps such as a missing disabled state become visible.
- Component documentation templateCovers description, variants, properties, states, accessibility with role and keyboard behavior, do and don't pairs and a code example.
- Extend templateAsks for the user need, related components, a proposed API, tokens used and open questions that need design review.
- Pattern vocabularyNames forms, navigation, data display and feedback as the common patterns a system should cover.
- Connector hooksWith a design tool connected it audits components in Figma, and with a knowledge base connected it searches existing docs and publishes updates to a wiki.
Frequently asked questions
What is the design-system skill?
It is a skill in Anthropic's knowledge-work-plugins repository for managing a design system. You can audit it for naming and token problems, document one component in a fixed template, or design a new component that fits the existing system.
How do I install it?
Clone anthropics/knowledge-work-plugins and copy the design/skills/design-system folder to where your agent loads skills. The README also documents a marketplace route for Claude Code, using claude plugin marketplace add anthropics/knowledge-work-plugins and then a plugin install.
Does it need Figma?
No. It works from what you describe or paste. If a design tool is connected, the skill can audit components in Figma directly and pull component properties and layer structure for the docs, which gives it real data to check.
Which agents does it work with?
The repository says it is built for Claude Cowork and also compatible with Claude Code. The skill is a plain markdown file, so other agents that read SKILL.md may load it, but the repository does not list them.
What does the audit measure?
It reports naming consistency, token coverage by category and component completeness for states, variants and docs. Hardcoded colors, arbitrary spacing and custom type sizes are counted, and the report closes with three priority actions.
Can it generate a design system from a website?
No, it reviews and documents a system you already have, or proposes additions. Its modes are audit, document and extend, and an audit checks for naming inconsistencies and hardcoded values across components. Related: extract-design-system.
What license does it use?
The repository metadata lists Apache-2.0. The README describes the plugins as markdown and JSON files with no build steps, which you can fork, edit for your own terminology and share with your team.