Actualizado 15 de julio de 2026

La IA y los sistemas de diseño: la guía práctica

Las herramientas de IA generan interfaces, código e imágenes rápido, pero no sostienen un sistema de diseño. Cada respuesta se muestrea desde cero, así que los colores, los tamaños y el espaciado se desvían a menos que la IA lea de una fuente determinista: design tokens para el código, una paleta con nombres para las imágenes. Esa división —la IA construye, el sistema sostiene— es la premisa de trabajo detrás de cada guía de este hub. La versión de una sola pantalla es un sistema compuesto exportado como los archivos que lee un asistente de IA.

Los dos flujos de trabajo

La IA se encuentra con un sistema de diseño en dos lugares, y la disciplina es la misma en ambos. Cuando una IA construye tu interfaz —un asistente de código, una herramienta de prompt-a-app— inventará valores plausibles allí donde el proyecto no los fije, así que la solución es un archivo de tokens al que pueda hacer referencia en su lugar: roles como --color-accent en vez de conjeturas de hex nuevas. Cuando una IA genera tus imágenes, no puede leer un archivo de tokens en absoluto, pero responde con fuerza a una paleta escrita como nombres descriptivos emparejados con valores hex. En ambos casos el sistema se decide una vez, de forma determinista, y la IA lo consume.

Cada flujo de trabajo tiene su propio par de guías. Para código, Cómo darle tu sistema de diseño a una herramienta de código con IA es la configuración práctica, y Los design tokens son la interfaz entre el diseño y la IA desarrolla el argumento de fondo. Para imágenes, Por qué los generadores de imágenes de IA fallan con tus colores de marca explica la limitación con honestidad, y Cómo hacer prompts de imágenes de IA con una paleta de colores completa convierte una paleta en un lenguaje de prompt que trabaja con el modelo en lugar de en su contra.

Lo que la IA hace bien y dónde toman el relevo las matemáticas

Las guías de aquí no son advertencias contra la IA; trazan un límite de trabajo. Los modelos son buenos en aquello en lo que el muestreo es bueno: dirección, variación, andamiaje, nombres. No son fiables en lo que hay que calcular: ratios de contraste frente a un mínimo, pasos de luminosidad perceptualmente uniformes, tamaños de texto que sigan de verdad la razón, temas oscuros derivados en lugar de invertidos. Trata al modelo como un colaborador rápido sin memoria para los valores, y ambas mitades del flujo de trabajo se vuelven más fáciles de razonar.

El límite se pone a prueba caso por caso en lugar de darse por sentado: ¿Puede ChatGPT construir un sistema de diseño? lleva el experimento de principio a fin, Por qué la IA se equivoca en las matemáticas de la escala tipográfica y Generadores de paletas de color con IA localizan el punto de traspaso para el texto y el color respectivamente, y Por qué los modos oscuros de la IA se ven mal muestra lo que ocurre cuando un modelo inventa valores que deberían haberse derivado.

Dónde este hub se cruza con el resto

Las guías de IA se apoyan en el resto de la biblioteca: los design tokens son el contrato que lee un asistente de código, las escalas de color aportan las rampas uniformes que a las paletas de IA les faltan, el contraste cubre los mínimos que hay que calcular, el modo oscuro desarrolla por completo el argumento de derivar-no-invertir, y los colores de marca y las escalas tipográficas definen los valores con nombre y las matemáticas de escala a las que todo lo anterior hace referencia.

Por dónde empezar

Si el problema que tienes sobre la mesa es la deriva —pantallas que por separado parecen plausibles y nunca acaban de encajar— empieza con Por qué las interfaces generadas por IA se desvían de la marca: es el diagnóstico que trata cualquier otra guía de este hub. A partir de ahí, sigue tu flujo de trabajo: el camino del asistente de código pasa por las dos guías de tokens, el camino de las imágenes por el par de prompting, y las guías que ponen a prueba el límite responden con pruebas a la pregunta recurrente de “¿no podría el modelo hacer también esta parte?”. La fuente determinista que ambos caminos necesitan es lo que produce Scale Composer: una sola escala compuesta en paleta, tipografía y rejilla, exportada como las variables CSS, el tema de Tailwind o el archivo DTCG que las guías te muestran entregando al modelo.

Guías de este hub

Dale un sistema a tu IA

El flujo de trabajo se comprime en un solo bucle: compón la paleta y la escala, luego abre la paleta con nombres: cada tono con un rol y un hex — y ese vocabulario es lo que pegas en un proyecto de código como tokens o en un prompt de imagen como lenguaje de color. La IA sigue siendo rápida; los valores dejan de moverse.

Preguntas frecuentes

¿Puede la IA construir un sistema de diseño?

Puede armar el andamiaje: convenciones de nombres, capas de tokens, una estructura sensata. Lo que no puede garantizar es la aritmética: los mínimos de contraste, pasos de color perceptualmente uniformes, valores de escala que sigan la razón. El flujo de trabajo fiable es IA para la dirección y una fuente determinista para los valores.

¿Cómo le doy mis colores de marca a una herramienta de IA?

Para código, exporta tu sistema como design tokens —propiedades personalizadas de CSS o un tema de Tailwind—, pon el archivo en el proyecto y pídele a la IA que haga referencia a roles en lugar de inventar valores. Para imágenes, usa tu paleta como vocabulario del prompt: cada tono como un nombre descriptivo emparejado con su hex.

¿Por qué las interfaces generadas por IA parecen inconsistentes?

Cada respuesta se muestrea desde cero. Sin una fuente fija, cada color y cada tamaño es una nueva conjetura: plausible por sí sola, distinta de la anterior. La deriva es el comportamiento por defecto, no un fallo, y por eso la solución es una fuente de verdad y no un prompt mejor.

¿Entienden los generadores de imágenes de IA los códigos hex?

De forma poco fiable para un único valor exacto: ningún generador es un sistema de gestión de color. Una paleta entera escrita como nombres más hex es una señal mucho más fuerte. Las coincidencias exactas de color de marca vienen de imágenes de referencia y de ajustes posteriores, no del texto del prompt por sí solo.

¿En qué formato deben estar los design tokens para las herramientas de IA?

Los asistentes de código leen directamente las propiedades personalizadas de CSS y los temas de Tailwind, porque aparecen en el código que el modelo ya ve. El formato JSON de DTCG es el intercambio neutral respecto a la herramienta: una sola fuente que también exporta a Figma Variables y a cualquier pipeline de build.

¿Debería dejar que la IA elija mi paleta de colores?

Como dirección, sí: los modelos son genuinamente útiles para el ánimo y los puntos de partida. Como sistema, no. El contraste hay que calcularlo, los pasos tienen que ser perceptualmente uniformes y el modo oscuro hay que derivarlo. Toma la dirección y luego deja que las matemáticas produzcan los valores.