Design System — Agent Skill by Anthropic

From the author

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.

— the description by Anthropic

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The design-system skill provides a structured framework for managing UI design systems. It enables users to perform systematic audits to identify inconsistencies, generate standardized documentation for components, and design new patterns that align with existing visual language and accessibility requirements. By focusing on tokens, component states, and clear documentation, it helps teams maintain a cohesive and scalable design environment.

What it does

Audits existing design systems for naming inconsistencies and hardcoded values.
Generates structured documentation for UI components, including variants and states.
Provides a template for designing new components or patterns within the system.
Defines accessibility requirements for components, including ARIA roles and keyboard behavior.
Tracks token usage across colors, typography, spacing, and other visual primitives.
Prioritizes design system improvements through actionable audit reports.

When to use it

When you need to identify and fix inconsistencies across your UI component library.
When onboarding new components that require standardized documentation.
When designing new UI patterns to ensure they fit the existing design language.
When preparing for a design system review or accessibility audit.
When you need to replace hardcoded values with design tokens.

Advantages

Promotes consistency by enforcing a unified visual language.
Reduces technical debt by identifying hardcoded values and naming issues.
Ensures accessibility is considered throughout the component lifecycle.
Standardizes the documentation process for better team collaboration.
Provides clear migration paths for breaking changes.

Usage examples

“/design-system audit”: Generates a comprehensive audit report detailing naming inconsistencies, hardcoded values, and a completeness score for existing components.
“/design-system document Button”: Produces a structured documentation page for the Button component, covering variants, props, states, accessibility, and usage guidelines.
“/design-system extend DataGrid”: Creates a design proposal for a new DataGrid component, including API definitions, variant logic, state behaviors, and token usage.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/anthropics/design-system/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip design-system.zip -d .agents/skills

Documentation by Anthropic

/design-system

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Manage your design system — audit for consistency, document components, or design new patterns.

Usage

/design-system audit                    # Full system audit
/design-system document [component]     # Document a component
/design-system extend [pattern]         # Design a new component or pattern

Components of a Design System

Design Tokens

Atomic values that define the visual language:

Colors (brand, semantic, neutral)
Typography (scale, weights, line heights)
Spacing (scale, component padding)
Borders (radius, width)
Shadows (elevation levels)
Motion (durations, easings)

Components

Reusable UI elements with defined:

Variants (primary, secondary, ghost)
States (default, hover, active, disabled, loading, error)
Sizes (sm, md, lg)
Behavior (interactions, animations)
Accessibility (ARIA, keyboard)

Patterns

Common UI solutions combining components:

Forms (input groups, validation, submission)
Navigation (sidebar, tabs, breadcrumbs)
Data display (tables, cards, lists)
Feedback (toasts, modals, inline messages)

Principles

Consistency over creativity — The system exists so teams don't reinvent the wheel
Flexibility within constraints — Components should be composable, not rigid
Document everything — If it's not documented, it doesn't exist
Version and migrate — Breaking changes need migration paths

Output — Audit

## Design System Audit

### Summary
**Components reviewed:** [X] | **Issues found:** [X] | **Score:** [X/100]

### Naming Consistency
| Issue | Components | Recommendation |
|-------|------------|----------------|
| [Inconsistent naming] | [List] | [Standard to adopt] |

### Token Coverage
| Category | Defined | Hardcoded Values Found |
|----------|---------|----------------------|
| Colors | [X] | [X] instances of hardcoded hex |
| Spacing | [X] | [X] instances of arbitrary values |
| Typography | [X] | [X] instances of custom fonts/sizes |

### Component Completeness
| Component | States | Variants | Docs | Score |
|-----------|--------|----------|------|-------|
| Button | ✅ | ✅ | ⚠️ | 8/10 |
| Input | ✅ | ⚠️ | ❌ | 5/10 |

### Priority Actions
1. [Most impactful improvement]
2. [Second priority]
3. [Third priority]

Output — Document

## Component: [Name]

### Description
[What this component is and when to use it]

### Variants
| Variant | Use When |
|---------|----------|
| [Primary] | [Main actions] |
| [Secondary] | [Supporting actions] |

### Props / Properties
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |

### States
| State | Visual | Behavior |
|-------|--------|----------|
| Default | [description] | — |
| Hover | [description] | [interaction] |
| Active | [description] | [interaction] |
| Disabled | [description] | Non-interactive |
| Loading | [description] | [animation] |

### Accessibility
- **Role**: [ARIA role]
- **Keyboard**: [Tab, Enter, Escape behavior]
- **Screen reader**: [Announced as...]

### Do's and Don'ts
| ✅ Do | ❌ Don't |
|------|---------|
| [Best practice] | [Anti-pattern] |

### Code Example
[Framework-appropriate code snippet]

Output — Extend

## New Component: [Name]

### Problem
[What user need or gap this component addresses]

### Existing Patterns
| Related Component | Similarity | Why It's Not Enough |
|-------------------|-----------|---------------------|
| [Component] | [What's shared] | [What's missing] |

### Proposed Design

#### API / Props
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| [prop] | [type] | [default] | [description] |

#### Variants
| Variant | Use When | Visual |
|---------|----------|--------|
| [Variant] | [Scenario] | [Description] |

#### States
| State | Behavior | Notes |
|-------|----------|-------|
| Default | [Description] | — |
| Hover | [Description] | [Interaction] |
| Disabled | [Description] | Non-interactive |
| Loading | [Description] | [Animation] |

#### Tokens Used
- Colors: [Which tokens]
- Spacing: [Which tokens]
- Typography: [Which tokens]

### Accessibility
- **Role**: [ARIA role]
- **Keyboard**: [Expected interactions]
- **Screen reader**: [Announced as...]

### Open Questions
- [Decision that needs design review]
- [Edge case to resolve]

If Connectors Available

If ~~design tool is connected:

Audit components directly in Figma — check naming, variants, and token usage
Pull component properties and layer structure for documentation

If ~~knowledge base is connected:

Search for existing component documentation and usage guidelines
Publish updated documentation to your wiki

Tips

Start with an audit — Know where you are before deciding where to go.
Document as you build — It's easier to document a component while designing it.
Prioritize coverage over perfection — 80% of components documented beats 100% of 10 components.

Files

ATTRIBUTION.mdAdded by AutoGineer899 B
LICENSELicence file added by AutoGineer11.3 KiB
SKILL.md5.5 KiB

ATTRIBUTION.md

Attribution

This folder is an unmodified copy of the Agent Skill "design-system", distributed by AutoGineer (https://autogineer.com/agent-skills).

Source: https://github.com/anthropics/knowledge-work-plugins/tree/e050c2ec856373787143d7057663a6ebd1277df3/design/skills/design-system
Commit: e050c2ec856373787143d7057663a6ebd1277df3
Published by: Anthropic (https://github.com/anthropics)
Publisher: Anthropic (https://github.com/anthropics)
Licence: Apache License 2.0 (https://github.com/anthropics/knowledge-work-plugins/blob/e050c2ec856373787143d7057663a6ebd1277df3/LICENSE)
Licence evidence: repository licence LICENSE
Retrieved: 2026-11-07

The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.

Files added by AutoGineer

ATTRIBUTION.md: this file, written by AutoGineer
LICENSE: copied from LICENSE

Requirements and compatibility

Written for: Claude Code, Claude apps

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Claude Code frontmatter

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository65.6k
Choreograph
Emil Kowalski· Community
A systematic approach to coordinating multi-element animations into intentional, cohesive motion.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download design-system.zip