Design Systems
Consistent, reusable components across products.
Install 安装
curl -sSL https://updating.cc/skills/design/design-systems/SKILL.md -o ~/.agents/skills/design__design-systems/SKILL.mdSKILL.md Preview 技能内容预览
---
name: Design Systems
description: Consistent, reusable components across products.
---
# Design Systems
A design system is the single source of truth for the components and tokens a product is built from. Its purpose is consistency at scale: a button looks and behaves the same everywhere, so teams move fast and the product feels coherent.
## Foundations
- **Tokens first.** Define color, spacing, type scale, radius, shadow, and motion as named tokens (e.g. `color.surface.primary`), not raw values. Components consume tokens; themes swap token values.
- **Document states.** Every component has default, hover, active, focus, disabled, loading, and error states. An undocumented state becomes an inconsistent one.
- **Document props and variants.** What can a caller change, and what are the valid combinations? Invalid combinations should be impossible to express.
## Governance
- Version it. A change to a token ripples everywhere; treat releases like code releases with a changelog.
- Contribution over dictatorship. Let teams propose additions, but route them through review so the system stays coherent instead of fragmenting.