Claude MarketplacesSubmit
anthropics avatar

Design System

anthropics/knowledge-work-pluginsOfficial

A structured way to keep your design system from becoming a mess of one-off components and hardcoded values. You can audit the whole system for inconsistencies, document a component's variants and states with proper tables, or design a new pattern that actually fits what you already have. The output templates are comprehensive, covering everything from token coverage to accessibility requirements to migration paths. What I like is that it pushes you to think in terms of the system, not just isolated components. If you're maintaining a component library or trying to wrangle legacy UI code into something coherent, this gives you a repeatable process instead of reinventing documentation formats every time.

skills.sh installs
4.5K
GitHub stars
35.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add anthropics/knowledge-work-plugins --skill design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

/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)
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/anthropics/knowledge-work-plugins
Categories
Frontend Development, Documentation, Code Review & Quality, Design & UI/UX
First seen
May 16, 2026

More from anthropics/knowledge-work-plugins

All 198

Recommended

More Frontend Development
1grafana avatarfleet-managementgrafana/skillsManage a fleet of Grafana Alloy collectors with Fleet Management — author Alloy pipelines once, target them via attribute matchers (`env="production"`, regex `r4.5Kskills.sh installs
2dpearson2699 avatarios-localizationdpearson2699/swift-ios-skillsImplement, review, or improve localization and internationalization in iOS/macOS apps — String Catalogs (.xcstrings), generated localizable symbols, stable key 4.5Kskills.sh installs
3grafana avatarplugin-bundle-sizegrafana/skillsOptimise Grafana app plugin bundle size using React.lazy, Suspense, and webpack code splitting. Use when the user asks to reduce plugin bundle size, optimise mo4.5Kskills.sh installs
4agricidaniel avatarads-creativeagricidaniel/claude-adsAudit paid-ad copy, images, video, hooks, concepts, format coverage, platform-native fit, message match, creative fatigue, accessibility, and policy across supp4.4Kskills.sh installs
5anthropics avatarsession-reportanthropics/claude-plugins-officialGenerate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.4.3Kskills.sh installs
6softaworks avatarc4-architecturesoftaworks/agent-toolkitGenerate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize sof4.3Kskills.sh installs