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.