Llevo semanas, o mejor dicho meses, postergando y trabajando en el rediseño de uiFromMars. No es por falta de ganas, sino porque cada vez que abría Figma y pensaba “tengo que definir la paleta de colores” me bloqueaba.
He escrito sobre cómo crear paletas con HSL o en solo dos pasos, pero ahora necesitaba algo más complejo: escalas, tokens semánticos, estados interactivos…
Así que decidí probar con algo diferente: utilizar la inteligencia artificial para guiar el proceso.
Este artículo es el paso a paso completo que seguí, con los prompts reales que usé y el resultado.
El prompt para generar la escala de colores
El primer prompt es el más importante. Si le dices «hazme una paleta de colores», obtendrás algo genérico que no te funcionará. Si le das contexto y límites, obtendrás algo útil.
Este fue mi prompt inicial:
Necesito crear la paleta de colores para mi página web. El color principal es
#EF3F2C.Toma como referencia Tailwind, y dame una paleta de color para los colores neutros que utilizaré para el fondo, textos, cards, etc. y una que tome como referencia mi color principal.
Para las variables, utiliza inicialmente la nomenclatura de Tailwind.
Elegí Tailwind como referencia porque sus escalas de color (50-950) son un estándar de facto y facilitan la comunicación con desarrollo. Claude me devolvió once colores neutros y once para escalar el color de marca.
Combinaciones de color accesibles
Antes de saltar a los tokens semánticos, le pedí a Claude las combinaciones de colores accesibles. Esto me permitiría saber cómo combinarlos para botones, cards, tooltips, etc.
Para el siguiente paso, ten en cuenta la accesibilidad y propón combinaciones de colores de fondo y texto para los elementos más comunes de una interfaz.
El resultado debe ser una tabla con las diferentes combinaciones, la descripción, e información sobre la accesibilidad.
Claude analizó todas las combinaciones y calculó los ratios de contraste para asegurar que cumplan con WCAG. Si necesitas un recordatorio sobre los niveles de accesibilidad, escribí sobre ello en profundidad.
Lo interesante fueron las recomendaciones adicionales que me dio:
- Para los botones primarios, mi color
#EF3F2Cqueda justo en el límite de accesibilidad. Las opciones: usarprimary-600como base del botón, mantenerprimary-500con texto bold de al menos 16px, o reservarprimary-500para elementos decorativos. - Para links en texto, evitar
primary-500y usarprimary-600como mínimo, conprimary-700para el hover.
De escala de colores a tokens semánticos
Aquí viene lo importante. Los tokens semánticos son nombres que describen la función del color, no su valor. En lugar de usar neutral-100, usas bg-surface. Esto hace que el sistema sea más fácil de mantener y de adaptar a modo oscuro.
El prompt fue sencillo porque toda la conversación ya giraba alrededor del tema:
Dame ahora los tokens semánticos en forma de tabla.
El resultado incluye el nombre del token, el valor en modo claro, el equivalente para modo oscuro, y el uso recomendado.
Fondo
El token empieza siempre con --bg- y dónde se aplica:
Texto
Siguiendo la lógica de los fondos, todos los tokens que equivalen a colores empiezan por --text-
Border
Personalmente me pareció muy útil cómo Claude diferenció los tokens de los bordes para describir de forma clara y concisa dónde se utiliza cada uno:
Iconos, enlaces y focus
Claude también especificó el detalle de qué color deberían tener los iconos, los enlaces, y hasta el foco, esencial para la accesibilidad:
Cómo implementar los tokens en Figma
Con el sistema documentado, el último paso es implementarlo en Figma creando variables locales. He definido primero una colección, Primitives, que contiene la escala de colores (neutros y primarios). Después, he creado la colección Semantic, que referencia las variables de Primitives:
Utilizar variables locales te permite seleccionar fácilmente el color de cada componente, con el beneficio añadido de actualizar un token primitivo y que cambie automáticamente en todas partes 🪄
Apuntes finales
Todo este proceso me llevó menos de una hora. Sin la inteligencia artificial probablemente habría pasado días iterando las diferentes combinaciones de colores, la escala cromática, y calculando los contrastes utilizando herramientas externas.
Estos son los tres aprendizajes clave que me llevo:
- Escribir prompts es un arte. Descubrí que cuanto más contexto le das a la inteligencia artificial, más útil será el resultado… pero también aprendí que si le das demasiado contexto no obtienes el resultado esperado 🤷🏼♀️
- La accesibilidad es importante. Esto es independiente a utilizar o no IA, pero quiero reforzarlo: considerar la accesibilidad de inicio permite ir más rápido después, porque ya sabes qué funciona.
- Tokens semánticos. Siempre he tenido problemas poniendo nombres a los tokens, o recordando qué utilizaba dónde. Usar
bg-surfaceen lugar deneutral-50hace que el sistema sea más fácil de utilizar y más mantenible.
El caso de uso de este artículo ejemplifica cómo la IA puede acelerar tu trabajo sin reemplazarte: tú defines el contexto, las restricciones y tomas las decisiones finales. Si te interesa profundizar en cómo mantener tu relevancia como diseñador/a en esta era, escribí sobre cómo no ser reemplazado por la IA.
Por último: Si quieres profundizar en sistemas de color, te recomiendo leer Qué es HSL y por qué deberías usarlo: es la base teórica detrás de cómo funcionan estas escalas.
