| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/design-system-creation
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
design-system-creation.SKILL.md
---name: design-system-creation
description: "| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency."
metadata:
keywords:
- design-tokens
- typography
- spacing
- color-palette
- components
- patterns
- variables
- dark-mode
- theming
- CSS-variables
- accessibility
- WCAG
- responsive
- grid-system
- breakpoints
- design-scale
- semantic-tokens
- component-library
- style-guide
- documentation
- Figma
- Storybook
- brand-consistency
- design-principles
license: MIT
---# Design System Creation
Build comprehensive design systems for consistent UI development across teams.
## Design System Layers
