Sistemas de Diseño en la era de la IA

A continuación una breve reseña sobre Sistemas de Diseño en la era de la IA. Probablemente ya tienes una guía de marca, pero pocos en tu empresa la siguen. Colores definidos, tipografías correctas, reglas de uso del logo. Todo en un PDF que nadie lee pero que existe. Durante años, eso fue suficiente para intentar mantener la armonía en las comunicaciones de la empresa. 

El problema no es que tu equipo no siga el manual de marca. Es que no tiene tiempo para verificarlo ni las instrucciones cargadas en su chat de IA para hacerlo correctamente

El nuevo aliado de tu sistema de diseño

Cuando un equipo de diseño construye un design system, siempre piensa en dos audiencias: los diseñadores, que necesitan saber qué componente usar y cuándo, y los desarrolladores, que necesitan saber cómo implementarlo. Esas dos audiencias siguen existiendo.

Pero en los últimos dos años apareció una tercera audiencia: los agentes de IA. Herramientas como Claude Code, Cursor o v0 generan interfaces y componentes de UI a partir de instrucciones en lenguaje natural. Lo hacen bien y rápido pero tienen un problema: cuando nadie les dice cómo debe verse el producto, tiran el diseño por “default” con una estética genérica que todos reconocemos de inmediato: esquinas redondeadas, gradientes en azul pálido, sombras suaves. Es el promedio de todo lo que vieron en su entrenamiento, y es la “mediocridad” de la IA.

Cada vez que le pides a un agente que construya una pantalla sin darle contexto de tu sistema visual, estás iniciando desde cero. El agente no recuerda la sesión anterior. No sabes que tu marca usa Inter y no Roboto. No sabe que tu color primario es el azul oscuro del Andino, no el azul de WhatsApp.

¿Qué es un design system y por qué la documentación lo sostiene?

Un design system es una librería de componentes más el conjunto de decisiones, principios y reglas que explican cuándo y cómo usarlos. La diferencia parece sutil hasta que llega alguien nuevo al proyecto.

Con una librería, esa persona encuentra botones y los copia. Con un sistema, esa persona encuentra botones, lee cuándo usar el primario versus el secundario, y los aplica de forma coherente.

La parte más contraintuitiva: el código del sistema importa menos que la documentación. El código lo lee la máquina. La documentación la lee la persona o el agente que decide si adoptar el sistema planteado o construir algo paralelo. Sin documentación viva, el sistema muere. No porque el código falle, sino porque nadie sabe cuándo o por qué usarlo.

El archivo DESIGN.md como sistema de diseño

DESIGN.md es un archivo de texto estructurado que codifica las preguntas de valor discreto en un formato que los agentes pueden leer y aplicar directamente. No reemplaza la documentación para humanos. La complementa.

En la práctica, un DESIGN.md básico incluye:

• Tokens de color: los hex exactos de tu paleta, con nombres semánticos (color-marca-primaria)
• Tipografía: familias, tamaños y pesos para cada nivel jerárquico
• Espaciado: los valores de padding y margin que usa tu sistema
• Border radius: qué tan redondeados van los componentes
• Reglas de componentes: instrucciones específicas con el formato ‘nunca hagas esto’

Tres errores frecuentes al construir sistemas de diseño para la IA

• El primero: empezar por los componentes. El orden correcto es principios, tokens, componentes, patrones y documentación. Si construyes componentes antes de tener tokens definidos, terminas con veinte variaciones del mismo azul.
• El segundo: usar nombres literales para los tokens. ‘azul-oscuro: #1B3068’ es un problema esperando a suceder. Si en seis meses cambias el color primario a verde, el nombre miente. ‘color-marca-primaria: #1B3068’ sigue siendo verdadero sin importar el valor.
• El tercero: asumir que la documentación es suficiente una vez escrita. Una documentación actualizada hace tres meses se percibe como abandonada, aunque sea técnicamente correcta. Los agentes y los equipos adoptan lo que ven vivo — con changelog visible, fecha de última actualización, y estado de cada componente.

El diseño siempre fue una disciplina de decisiones codificadas. Lo que cambió es que hoy hay más consumidores de esas decisiones, y algunos de ellos no pueden inferir lo que no está escrito. Construir un sistema que sirva bien a personas y agentes al mismo tiempo es la habilidad que diferencia a los equipos que escalan con IA de los que producen inconsistencia sin darse cuenta.

En el AI Innovation Academy de Innovaitors trabajamos exactamente este tipo de habilidades: aplicaciones reales de IA para negocios latinoamericanos, en clases semanales prácticas. Si quieres llevar esto a la acción, te invitamos a ver la clase completa de Claude Design:

https://academy.innovaitors.co/lesson/432bdc69-776d-4c76-8dee-e9a75550ee16