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。