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。