design-systemby Anthropic

Design System Skill.

A Claude Code and Codex skill for brand and design-system work: audits, documents, or extends an existing design system.

Brand & Design Systems
Design system

Download OpenDesign View usage guide

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

Front matter and section headings read from the upstream file on 2026-09-14 · 5,552 characters in full

01 What it does

What the design-system Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A slash-command skill for working on an existing design system in three modes: audit, document or extend. The audit pass reports naming consistency, token coverage and component completeness, and scores the system out of 100. Document mode produces a component spec with description, variants, props, states, accessibility and do's and don'ts.

Extend mode proposes a new component or pattern against the system's existing ones, listing the tokens it would use and the open questions it raises. It covers design tokens, components and patterns, and can reach into a design tool or knowledge base when those are connected. Readers are designers and developers keeping a system coherent.

What it produces

A design system audit report ending in ranked priority actions
Component documentation with a props table of property, type, default and description
A new component proposal opening with the problem it solves

See the example prompt ↗

How It Works

01
Choose the Mode from the Argument
The command takes a mode plus a target: audit the whole system, or run a single component or pattern through document or extend.
02
Run the Audit Across Three Axes
The audit checks naming consistency, token coverage counted against hardcoded values, and how complete each component is, then names the priority actions.
03
Write the Component Specification
Document mode fills a template of description, variants, props with types and defaults, states, accessibility and a Do's and Don'ts table.
04
Propose the Extension Against What Exists
Extend mode compares the new idea to related components, then proposes an API, variants, states and the exact tokens the component would consume.
05
Pull from Connected Tools When Present
With a design tool connected the skill can pull component properties and layer structure for documentation, and check naming, variants and token usage in Figma.

02 Find your fit

When to Use the design-system Skill

Use the design-system skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

You suspect naming inconsistencies or hardcoded values have crept in across your components.
You need documentation for one component covering its variants, states and accessibility notes.
You are designing a new component or pattern and want it to fit the system you already have.
You want the skill to check what is already documented before writing more, using a connected knowledge base.

Know the Boundaries

One-off components that duplicate what the system already provides defeat the point of having the system.
An extension proposal does not settle the hard calls: it can end with decisions still needing design review.
Reading components directly out of Figma only happens when a design tool connector is available.

What to Provide

The mode and its targetGive the command a mode and the component, pattern or system it applies to, so the skill knows which template to fill.
Your existing components for comparisonAn extension proposal compares related components on what they share and why that is not enough, so those neighbours have to be known.

03 Inside the skill

Rules the design-system Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Report Naming Drift Against a Standard
Naming inconsistencies are not just flagged: each row names the components involved and the standard to adopt.
Count Hardcoded Values, Don't Eyeball Them
Token coverage puts a defined count against the number of instances found, such as hardcoded hex values, arbitrary spacing values, or custom fonts and sizes.
Document Everything
If a component, variant or rule is not written down, the skill treats it as not existing.
Stay Flexible Inside the Constraints
Components are meant to be composable rather than rigid, so the pattern set bends without being abandoned.
Version Breaking Changes
Any breaking change has to come with a migration path, not just a replacement component.
Start with an Audit
The default entry point is an audit of where the system stands before documenting or extending anything.
Coverage Beats Perfection
Eighty percent of components documented is treated as better than doing 10 components perfectly.

04 Put it to work

Install design-system in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-system to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

Generic skills CLI form for design/skills/design-system/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Read the audit summary: components reviewed, issues found and a score out of 100.
Check the completeness table per component, since states, variants and docs are marked separately and scored.
Confirm the accessibility block is filled in for the documented component.
On an extension, verify the states table covers default, hover and disabled behaviour before it goes to review.

In OpenDesign import design-system from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Skill file: design/skills/design-system/SKILL.md Content checksum recorded at verification; commit 8f877b6
License: Apache-2.0 From LICENSE.
Repository stars: 24,012 GitHub snapshot taken 2026-09-14 for the whole anthropics/knowledge-work-plugins repository, which contains 7 skills in this catalog. Not a rating or usage count for design-system.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

UsageThe three invocation forms: audit the system, document a component, extend a pattern.
Components of a Design SystemDefines design tokens, components and patterns with their sub-parts, states and ARIA concerns.
PrinciplesConsistency over creativity, flexibility within constraints, document everything, version and migrate.
Output — AuditAudit template: summary score, naming consistency, token coverage, completeness, priority actions.
Output — DocumentComponent template: description, variants, props, states, accessibility, do's and don'ts, code example.
Output — ExtendNew component template: problem, related patterns, API, variants, states, tokens, open questions.
If Connectors AvailableOptional design tool and knowledge base steps for auditing, documenting and publishing.
TipsStart with an audit, document as you build, favour coverage over perfection.

The Skill's Own Description

“Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.”

Front-matter description from SKILL.md. The full file is about 5,552 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-system Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Where does the documentation actually end up?

The work comes back as markdown templates in the conversation. If a knowledge base is connected, the skill can also publish the updated documentation to your wiki.

Can I use it to design something completely new?

Extend mode is for a new component or pattern that fits the system you already have. It starts from the problem and the gap in existing patterns, proposes API, variants, states and tokens, and closes with the decisions and edge cases that still need design review.

How do I invoke the different modes?

Type the slash command with a mode and a target. Audit runs against the whole system, while document and extend take a specific component or pattern, for example the extend form for a pattern you want to add.

Design System

Run design-system on a Real Brand and design-system Work Task.

Download OpenDesign, import design-system from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills