Cómo darle tu sistema de diseño a una herramienta de IA para programar

Para darle tu sistema de diseño a una herramienta de IA para programar, entrégale un archivo de tokens: exporta el sistema como propiedades personalizadas de CSS o como un tema de Tailwind —formatos que los agentes de programación leen de forma nativa—, coloca el archivo en el proyecto e indícale a la herramienta que use los nombres de rol como --color-accent en lugar de escribir valores en crudo. El archivo sigue siendo la única fuente de los valores de diseño, y la IA lo consume igual que consume el resto de tu base de código.

Los pasos siguientes nombran a Cursor, v0 y herramientas de la clase de Claude Code como ejemplos, pero los nombres son ilustrativos más que una lista: el mecanismo es un archivo en el repositorio más una instrucción permanente, y funciona en cualquier herramienta que lea archivos de proyecto. Es la mitad práctica del arreglo que describe nuestra guía sobre IA y sistemas de diseño: la IA construye, mientras que una fuente determinista guarda los valores.

¿En qué formato debe estar el archivo de tokens?

Tres formatos cubren los casos prácticos, y pueden llevar los mismos nombres:

• Propiedades personalizadas de CSS. Neutrales respecto al framework y leídas directamente por cualquier herramienta que escriba CSS; la guía de propiedades personalizadas de MDN explica cómo se propagan y se resuelven. La opción por defecto más segura cuando no estás seguro de qué generará la IA.
• @theme de Tailwind v4. Si el proyecto usa Tailwind, el bloque de tema convierte tus tokens en clases de utilidad: el agente escribe entonces bg-accent y text-accent en lugar de valores arbitrarios, que es la misma disciplina expresada en la gramática de Tailwind.
• DTCG JSON. El formato de intercambio neutral respecto a la herramienta: no es con lo que un agente aplica estilos directamente, sino la fuente a partir de la cual se generan los otros dos, y la forma que tus tokens conservan cuando se mueven entre herramientas. Nuestro artículo sobre el formato DTCG lo explica.

Elige según lo que escriba la IA: un proyecto con Tailwind recibe el bloque @theme, cualquier otra cosa recibe propiedades personalizadas, y el archivo DTCG viaja al lado como fuente de ambos.

¿Cómo se configura, paso a paso?

1. Exporta el sistema. En Scale Composer, una sola sesión exporta los cuatro formatos —DTCG JSON, propiedades personalizadas de CSS, @theme de Tailwind y Figma Variables— desde el mismo estado, de modo que los nombres coinciden en todos ellos. Si tus tokens ya viven en otro sitio, importa el archivo primero; el viaje de ida y vuelta preserva lo que entró.
2. Pon el archivo en el repositorio. Para las propiedades personalizadas, en algún lugar corriente como src/styles/tokens.css; para Tailwind, el bloque @theme va en la hoja de estilos de entrada. Lo que importa es que el archivo esté dentro del proyecto que la herramienta puede ver.
3. Escribe la regla permanente. La mayoría de las herramientas de IA para programar leen un archivo de instrucciones a nivel de proyecto: el nombre varía según la herramienta, la idea no. Añade una regla del estilo de: todos los colores, tamaños de fuente y espaciados vienen de tokens.css; usa las propiedades personalizadas por su nombre; no introduzcas nuevos valores hex ni literales de píxeles.
4. Formula el prompt en términos de roles. Pide “el rol de acento en la acción primaria”, no “un azul bonito”. El vocabulario del prompt debe coincidir con el vocabulario del archivo.
5. Revisa los diffs en busca de valores en crudo. Un nuevo código hex o un valor de píxeles fijo que aparece en un diff es la señal de que se saltó la fuente. La corrección no es “cambia el color”, sino “usa el rol”.

Para ver lo que el agente leería en realidad, abre un tema de Tailwind v4 generado en Scale Composer: un bloque @theme donde las rampas de color, los tamaños tipográficos y los pasos de espaciado descienden todos de una única escala global, listo para pegarse en un proyecto.

¿Por qué usar roles en lugar de valores en crudo?

Hay una razón para el código y otra para el modelo.

Para el código: un valor en crudo copiado dentro de un componente es una bifurcación —correcto hoy, huérfano en el primer cambio de marca—. Un rol referenciado es un enlace vivo: cambia lo que guarda --color-accent y cada consumidor se actualiza, incluido el código que la IA escribió hace meses. La indirección por roles es también lo que hace viable un tema oscuro: Scale Composer deriva su tema oscuro como un conjunto de valores aparte bajo los mismos nombres de rol —una derivación, no una inversión—, de modo que el código que hace referencia a roles adopta valores oscuros bien pensados sin una sola edición.

Para el modelo: los nombres restringen el espacio de elección. Si le pides “un azul”, un modelo muestrea de un conjunto de valores plausibles prácticamente ilimitado. Si le pides elegir entre una docena de nombres de rol en un archivo que puede ver, la respuesta correcta está presente en su contexto, y la tarea se reduce de generación a búsqueda. Esa reducción es de donde viene la consistencia, y su ausencia es la razón por la que las interfaces generadas por IA se desvían de la marca.

¿Cómo mantienes el archivo como fuente única?

Dos hábitos. Primero, no edites las exportaciones a mano: un valor editado en tokens.css lo bifurca de la fuente DTCG, y la siguiente exportación lo reemplaza. Cuando un valor necesite cambiar, cámbialo en la fuente: reimporta el archivo DTCG en Scale Composer, ajústalo, vuelve a exportar; el viaje de ida y vuelta no tiene pérdidas, así que el archivo puede circular entre fuente y exportación sin degradarse. Segundo, pon la misma expectativa en las instrucciones de la IA: el archivo de tokens es generado, así que la herramienta debería proponer cambios a la fuente en lugar de editar valores en línea.

¿Funciona esto fuera de Cursor?

El mecanismo se generaliza a cualquier herramienta que lea archivos de proyecto: agentes integrados en el editor, agentes de CLI y generadores web que aceptan contexto de proyecto. Para las herramientas que solo funcionan por chat, el mismo principio aplica de forma más tosca: pega el bloque de tokens al inicio de la conversación y vuelve a suministrarlo en cada sesión, ya que la fuente vive entonces en la conversación en lugar de en el repositorio. Los nombres y las funciones de las herramientas cambian rápido; el patrón de archivo más instrucción se ha mantenido estable porque se apoya en lo único que todas estas herramientas comparten: leen lo que tienen delante.

Empieza desde la exportación

Si el proyecto no usa Tailwind, el mismo sistema sale como CSS plano: exporta la misma escala como propiedades personalizadas de CSS: nombres de rol idénticos en una forma neutral respecto al framework. El formato es una representación; los nombres son el contrato. Cambia la representación para que encaje con tu stack, y la instrucción que le das a la IA se mantiene palabra por palabra igual.