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 |

Wird beim Aufbau oder der Wartung eines Designsystems verwendet – der koordinierte Satz von Design-Tokens, Komponentenbibliotheken, Dokumentationen und Tools, die die visuelle und verhaltensbezogene Konsistenz aller Produkte gewährleisten. VERWENDUNG FÜR: Design-Systemarchitektur, Auswahl von Token-Formaten gegenüber Komponenten-Frameworks, Verbindung von Figma mit Code, Design-zu-Entwicklungs-Workflows, Multiplattform-Konsistenz NICHT VERWENDEN FÜR: spezifisches Token-Authoring (Design-Tokens verwenden), Figma-Workflows (Figma verwenden), Komponentenkatalogisierung (Storybook verwenden), Token-Transformation (Style-Dictionary verwenden), Framework-übergreifende Komponenten (Mitose verwenden) Quelle: tyler-r-kendrick/agent-skills.