Design System

by anthropicsae1513ea94dcNo license27K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

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.

FeaturedInstructions onlyDesign & Creative
AI-generated overview

Audits, documents, or extends a design system, covering tokens, components, and patterns.

What it does
This skill manages a design system in three modes: audit, document, and extend. Audits check naming consistency, token coverage, and component completeness and produce a scored report with priority actions. Documentation mode produces component references covering variants, props, states, accessibility, and do's and don'ts, while extend mode proposes a new component or pattern with API, tokens, and open questions.
When to use it
Use it when checking a design system for naming inconsistencies or hardcoded values across components, when writing documentation for a component's variants, states, and accessibility notes, or when designing a new pattern that should fit the existing system.
Requirements
No scripts are shipped; it is instructions only. Optional connectors for a design tool and a knowledge base are mentioned for auditing components and publishing documentation.

/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

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

Output — Audit

markdown
## 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 Actions1. [Most impactful improvement]2. [Second priority]3. [Third priority]

Output — Document

markdown
## 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

markdown
## 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

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

Source and attribution

Source:anthropics/knowledge-work-pluginsindesign/skills/design-systemat commitae1513e

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from anthropics/knowledge-work-plugins

Ticket Deflector

anthropics

Featured

Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says "draft a response," "answer this customer," "where's my order," "I want a refund," "check my orders," or "anything about to blow up."

Awaiting classification27Kupdated today

Tax Season Organizer

anthropics

Featured

Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags. Any tax request routes first to /tax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: "books are closed, now do the 1099s," "run the quarterly estimate off the closed numbers," or "just the contractor W-9 list."

Awaiting classification27Kupdated today

Tax Prep

anthropics

Featured

Prepares tax materials from closed books: a quarterly estimated payment breakdown or a year-end 1099-NEC list and accountant packet.

Business & Finance27Kupdated today

Smb Onboard

anthropics

Featured

Guides a small-business owner through first-time setup: connecting tools, running a value-proof recipe, capturing business context, and setting a weekly…

Productivity & Workflow27Kupdated today

Smb Router

anthropics

Featured

Routes a small-business owner's request to the right plugin skill or command and explains what is available.

Productivity & Workflow27Kupdated today

Month End Prep

anthropics

Featured

Reconciles the accounting ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books) against PayPal, Shopify, Square, and Stripe settlements, flags transactions that need attention, suspicious duplicates, and missing receipts, then writes a plain-English P&L narrative and exports a close packet (xlsx + one-page PDF). This is the first link of the /close-month command; a request to close the month or the books routes there, and the command runs this skill before refreshing the forecast and distributing the packet. Use this skill directly only when the owner wants the reconciliation alone, with no forecast refresh and no distribution: "just reconcile, no packet," "what's missing from the books," "flag the duplicates and missing receipts," or "write the P&L narrative for this month."

Awaiting classification27Kupdated today

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today