design-system

Name: design-system
Availability: InStock
Author: sun2443

Audit UI design systems for naming consistency and token coverage.

Updated Apr 8, 2026

Search Tags:#accessibility #design system #design tokens #pattern design #ui documentation #component variants #consistency audit

Ready to run

npx skills add https://github.com/sun2443/designer-skills --skill design-system-sun2443

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/sun2443/designer-skills/tree/main/design/skills/design-system
Command: npx skills add https://github.com/sun2443/designer-skills --skill design-system-sun2443

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design systems often drift out of sync, with inconsistent naming, hardcoded values, missing states/variants, and undocumented accessibility behavior that leads to UI bugs and slower product delivery.

Core Features & Use Cases

Design system audit: Identify naming inconsistencies, token coverage gaps (including hardcoded values), and incomplete component documentation across states and variants.
Component documentation: Produce clear, reusable docs for a component’s variants, props, states, and accessibility guidance, so teams implement it correctly.
Pattern extension: Design a new component or pattern that fits existing principles, reuses tokens, and defines API, variants, states, and accessibility.

Quick Start

Use the command "/design-system audit" to run a full consistency and documentation review of your design system.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit a design system for inconsistent naming and hardcoded values?▼

To audit a design system for inconsistent naming and hardcoded values, run a consistency review that checks component variants, states, and token coverage. This identifies undocumented accessibility behavior and produces structured outputs with prioritized next actions.

What is design token coverage and why does it matter for UI components?▼

Design token coverage is the extent to which UI components use centralized variables instead of hardcoded values. Checking token coverage prevents UI bugs and ensures visual consistency, solving the problem of design systems drifting out of sync during product delivery.

How do I document component variants, props, and accessibility guidance?▼

Documenting component variants, props, and states involves generating structured UI documentation that includes accessibility behavior. This ensures teams implement components correctly by providing clear, reusable docs that align with existing design system principles.

Can I use a design system audit to check for missing component states and variants?▼

Yes, a design system audit verifies component completeness by checking for missing states and variants across your UI. It produces a structured output covering naming consistency and token gaps, then proposes prioritized next actions to fix incomplete documentation.

What is the best way to design a new component pattern that fits existing design tokens?▼

The best way to design a new component pattern is to apply pattern extension, which matches existing principles and reuses current design tokens. This defines the API, variants, states, and accessibility guidance for the new pattern.

When should I run a consistency audit on my design system?▼

You should run a consistency audit when your design system drifts out of sync, causing UI bugs and slower product delivery. This process identifies undocumented tokens, verifies variants and props, and produces prioritized next actions to restore system consistency.