Style Dictionary
Herramienta open source (origen Amazon, 2017) que compila design tokens desde JSON canónico a cualquier formato de salida: CSS custom properties, Swift, Android XML, documentación. Desde la versión 4 acepta el formato W3C DTCG de forma nativa.
En una analogía · Es el traductor simultáneo de las decisiones de diseño: escribes una vez en un idioma y él lo dobla a CSS, iOS, Android o lo que necesites.
También conocido como: SD · style-dictionary · Amazon Style Dictionary
Qué hace
Style Dictionary resuelve el problema de tener una sola fuente de verdad de tokens y muchos destinos. El flujo:
tokens.json (fuente canónica)
│
▼
Style Dictionary (transforms + formats)
│
├── variables.css (web)
├── Tokens.swift (iOS)
├── tokens.xml (Android)
└── tokens-flat.json (documentación, agentes)Dos conceptos definen su API: transforms (funciones que convierten cada token: #2563EB a UIColor, 16 a 1rem) y formats (plantillas que escriben el archivo de salida). Ambos son extensibles: cada sistema registra los suyos.
Por qué importa en un sistema agéntico
La salida de Style Dictionary es la interfaz pública de los tokens. Si el build emite un JSON aplanado con $type y $description, cualquier agente lo consume sin conocer la estructura interna del sistema. Si solo emite CSS, el agente tiene que parsear variables sin semántica.
La práctica recomendada hoy: añadir al build un format específico para consumo agéntico (JSON plano con tipos, descripciones y $extensions intactas) que es el que expone el servidor MCP del sistema.
Versión 3 frente a versión 4
La diferencia estructural es el soporte del formato W3C DTCG ($value, $type, $extensions) que la versión 4 trae nativo, junto con API async y transforms con nueva firma. El detalle completo, con path de migración paso a paso, está en Style Dictionary 3 vs 4.
Alternativas y cuándo elegirlas
- Terrazzo (antes Cobalt): nacido ya DTCG-first, buena elección para sistemas nuevos sin legacy.
- Tokens Studio: si la fuente de verdad vive en Figma y el equipo es diseño-céntrico; suele combinarse con Style Dictionary en el build.
- Script propio: para menos de 50 tokens y una sola salida, una página de Node hace lo mismo sin dependencia.
Style Dictionary sigue siendo la opción por defecto cuando hay múltiples plataformas de salida y necesidad de transforms custom.
Ver también
El build completo (tokens DTCG + Style Dictionary 4 + format agéntico) se monta en directo en la mini-formación de tokens.
Lecturas de referencia
A seguir