Los design tokens son la interfaz entre el diseño y la IA

Los design tokens funcionan como la interfaz entre el diseño y la IA porque almacenan las decisiones de diseño como datos: cada token empareja un nombre — accent, space-4 — con un valor exacto, en un archivo que ambos lados pueden leer. La IA se convierte en un consumidor más de la misma fuente que ya alimenta CSS, Figma y el código nativo; en lugar de adivinar qué pretende tu diseño, lo lee.

Esa frase contiene tres afirmaciones — los tokens son un contrato, la IA es un consumidor, y la referencia es lo que hace dirigible la salida de la IA — y este artículo, la pieza conceptual de nuestra guía sobre la IA y los sistemas de diseño, las aborda una a una.

¿Qué hace que un archivo de tokens sea un contrato?

Un contrato, en el sentido que la palabra tiene en el software: un acuerdo sobre nombres que permite que dos lados cambien de forma independiente. Los nombres son estables; los valores que hay detrás pueden cambiar. El lado del diseño es libre de cambiar lo que almacena accent — un cambio de marca, un tema de temporada, una variante oscura — y cada consumidor que referenció el nombre se actualiza sin que nadie lo toque. El lado del consumidor es libre de usar accent en mil lugares sin ser dueño del valor que hay detrás, ni siquiera conocerlo.

Esto solo funciona porque los tokens son decisiones almacenadas como datos — nuestra introducción a los design tokens construye esa idea desde cero. Una guía de estilo en PDF enuncia las mismas decisiones para un lector humano; un archivo de tokens las enuncia en una forma sobre la que puede actuar un paso de compilación, una herramienta de diseño o un modelo de lenguaje. En el momento en que una decisión tiene un nombre legible por una máquina, cualquier cosa que lea archivos puede respetarla.

¿Por qué la IA es solo un consumidor más?

Porque la lista de consumidores siempre estuvo abierta. Una fuente de tokens nunca se ha consumido directamente: las hojas de estilo consumen un conjunto generado de custom properties, Figma consume Variables generadas, las plataformas nativas consumen recursos generados. Cada consumidor recibe una representación de las mismas decisiones en el formato que mejor lee. Una herramienta de programación con IA encaja en esa lista sin ceremonia — lee la representación que viva en el repositorio, normalmente las custom properties de CSS o un tema de Tailwind; la configuración en sí se cubre en cómo darle tu sistema de diseño a una herramienta de programación con IA.

No hubo que inventar nada específico de la IA para esto: ningún formato nuevo, ningún plugin, ningún protocolo. El mismo archivo que sigue la especificación del formato DTCG para el intercambio entre herramientas de diseño es también, desde el punto de vista del modelo, simple contexto legible. La disciplina que la industria adoptó para mantener en sintonía los archivos de diseño y el código que se publica se extiende sin cambios al participante más reciente.

¿Qué hace posible «referencia, no valor»?

La capacidad de dirigirlo. Cuando un modelo escribe un valor crudo dentro de un componente, ese valor es una instantánea de una suposición — plausible en el momento de la generación, desconectada de todo lo que venga después. Cuando escribe una referencia, la salida queda ligada a la fuente. De ahí se derivan dos consecuencias, una por cada dirección del tiempo:

• Hacia atrás: la salida pasada sigue siendo correcta. El código que la IA generó en marzo sigue diciendo --color-accent; cambia lo que almacena el token en septiembre y ese código representa la nueva decisión sin que haya que revisarlo.
• Hacia adelante: la generación queda acotada. Si le pides que elija un color, un modelo escoge de un espacio prácticamente ilimitado de valores plausibles. Si le pides que elija un rol de un archivo que tiene en su contexto, escoge de una docena de nombres visibles. Revisar cada valor que un generador inventa no escala; exigirle que no invente ninguno sí.

Abre el archivo DTCG que genera Scale Composer para ver el contrato en su forma cruda — tokens primitivos que contienen valores OKLCH exactos, y roles semánticos como background, text y accent que los referencian en lugar de repetirlos. La sintaxis de referencia es toda la idea en una línea de JSON.

¿Qué pasa cuando una decisión cambia?

Se propaga — esa es la recompensa de mantener las decisiones en un solo lugar. En Scale Composer, una única escala global (base, ratio, pasos) impulsa a la vez las rampas de color, los tamaños tipográficos y el espaciado de la rejilla, y los roles semánticos se derivan de las rampas con un suelo de contraste. Cambia un parámetro y todo lo que hay aguas abajo se vuelve a derivar; cada exportación — DTCG, custom properties de CSS, tema de Tailwind, Variables de Figma — incorpora el cambio, porque cada una es una representación del mismo estado.

Para un consumidor de IA esto significa que la corrección tiene una sola dirección. Cuando el color de marca cambia, no vuelves a hacer prompts en cada pantalla que el modelo produjo alguna vez; cambias la fuente, y la siguiente generación — junto con cada representación de las generaciones pasadas — lee la nueva respuesta a través de los mismos nombres.

¿Por qué esta división encaja tanto con las personas como con las máquinas?

Para las máquinas, las dos mitades son complementarias. Un modelo generativo es fuerte en estructura, composición y variación, y débil a la hora de mantener estables muchos valores exactos, porque cada respuesta se muestrea de nuevo. Un archivo de tokens es la imagen especular: contiene los valores con exactitud y no genera nada. Cada uno es la mitad que le falta al otro, y por eso la pareja funciona mejor que cualquiera de los dos por separado.

Para las personas, el argumento es perceptivo. La gente aprende una interfaz por repetición: un botón visto cinco veces con idéntico color y grosor deja de costar atención, y ese reconocimiento se construye a partir de señales que son iguales, no meramente parecidas. Un consumidor que lee valores nunca introduce ruido casi idéntico; un consumidor que los recuerda o los adivina siempre acaba haciéndolo. El contrato, dicho de otro modo, no es burocracia — es la forma en que la interfaz sigue siendo reconocible mientras un generador ilimitado trabaja sobre ella.

Observa el contrato en movimiento

La afirmación sobre la interfaz es más fácil de sentir cambiando uno de sus lados: abre la escala global en Scale Composer y mueve el ratio un paso. Los tamaños tipográficos, los pasos de espaciado y las rampas se vuelven a derivar; los nombres se mantienen quietos. Valores en movimiento bajo nombres estables es el contrato en acción — y la razón por la que una IA que lee esos nombres se mantiene fiel a la marca incluso mientras el diseño evoluciona por debajo.