design-system

Overview A design system is the single source of truth for an organization's UI — combining design tokens, component libraries, documentation, and tooling into a cohesive ecosystem. It ensures consistency, accelerates development, and bridges the gap between design and engineering.

Token Architecture Design tokens are the atomic values of a design system — colors, spacing, typography, elevation, motion. They flow through three tiers:

| Global | blue-500: #3b82f6 | Raw palette values | | Alias / Semantic | color-primary: {blue-500} | Intent-based references | | Component | button-bg: {color-primary} | Scoped to a specific component |

在构建或维护设计系统时使用 - 一组协调的设计令牌、组件库、文档和工具，可确保产品之间的视觉和行为一致性。 用途：设计系统架构、选择令牌格式与组件框架、将 Figma 连接到代码、设计到开发工作流程、多平台一致性 请勿用于：特定令牌创作（使用设计令牌）、Figma 工作流程（使用Figma）、组件编目（使用故事书）、令牌转换（使用样式字典）、跨框架组件（使用有丝分裂） 来源：tyler-r-kendrick/agent-skills。