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 |

Úselo al crear o mantener un sistema de diseño: el conjunto coordinado de tokens de diseño, bibliotecas de componentes, documentación y herramientas que garantiza la coherencia visual y de comportamiento en todos los productos. USO PARA: diseñar arquitectura de sistema, elegir formatos de token frente a marcos de componentes, conectar Figma al código, flujos de trabajo de diseño a desarrollo, coherencia multiplataforma NO UTILIZAR PARA: creación de tokens específicos (use tokens de diseño), flujos de trabajo de Figma (use figma), catalogación de componentes (use libro de cuentos), transformación de tokens (use diccionario de estilos), componentes entre marcos (use mitosis) Fuente: tyler-r-kendrick/agent-skills.