Agent skill · design visual · anthropics
design-system
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.
Why this skill is useful
Provides specific documentation templates and audit procedures for design systems that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 23,345 stars on the source repository.
What this skill does
/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 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 Output — Document Output — Extend 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills anthropics/design-system