ÍNDICE
¿Cómo preparar tu sistema de diseño para la era de la inteligencia artificial?
¿Cómo preparar tu sistema de diseño para la era de la inteligencia artificial?
Respuesta directa: Los prototipos generados por IA fallan no por falta de inteligencia, sino por falta de contexto estructurado. La solución no es mejor prompting — es transformar tu sistema de diseño en algo que una IA pueda leer, interpretar y reutilizar. Esto se logra con tres capas: (1) archivos de especificación (spec files) en Markdown que documentan cada decisión de diseño, (2) una capa de tokens que lista todas las variables que la IA puede usar, y (3) scripts de auditoría que detectan lo que la IA hizo mal. Hardik Pandya, diseñador de sistemas en Atlassian, documentó este enfoque y los resultados son contundentes: los equipos que estructuran sus sistemas de diseño para consumo de IA reducen drásticamente las inconsistencias en prototipos generados. Empresas como Atlassian, IBM (Carbon) y Nordhealth ya publican sus sistemas de diseño en formatos que las IAs pueden leer directamente.
El problema: por qué la IA produce prototipos inconsistentes
Vitaly Friedman, editor de Smashing Magazine y experto en UX, identificó el patrón en junio de 2026: los prototipos generados por IA no entregan resultados consistentes porque los sistemas de diseño están llenos de pequeñas inconsistencias que un humano pasa por alto pero una máquina amplifica:
- Decisiones de diseño tomadas pero nunca documentadas
- Valores hard-codeados que nunca se limpiaron
- Dependencia excesiva en que la IA “descifre” mockups o flujos visuales por sí sola
- Falta de contexto sobre cómo y por qué se tomaron ciertas decisiones
El resultado: prototipos que se ven bien pero violan las reglas del sistema, componentes con espaciados inventados, colores que no existen en la paleta, y estados interactivos ausentes.
El cambio de mentalidad: las decisiones de diseño son infraestructura
El principio fundamental que propone Pandya desde Atlassian es simple pero transformador: trata cada decisión de diseño como infraestructura.
Esto significa que cada vez que tomas una decisión — no solo de diseño, sino incluso sobre cómo priorizar trabajo o cómo se toman las decisiones en tu equipo — esa decisión debe existir en un archivo de especificación que la IA pueda consumir.
No basta con que esté en la cabeza del diseñador líder. No basta con que esté en un Slack. No basta con que esté implícita en el Figma. Tiene que estar documentada en texto estructurado que alimente a la IA.
Las tres capas de un sistema de diseño AI-Ready
Basado en el trabajo de Hardik Pandya (Atlassian) documentado en Smashing Magazine, un sistema de diseño preparado para IA se construye sobre tres capas:
Capa 1: Archivos de especificación (Spec Files)
Son archivos Markdown estructurados que contienen:
- Reglas de espaciado y composición
- Decisiones sobre color (cuándo usar cada token, no solo la lista)
- Guías de uso de componentes (no solo qué componente existe, sino cuándo y por qué usarlo)
- Prioridades y principios de diseño
- Ejemplos de lo que SÍ y lo que NO hacer (do’s and don’ts)
- Contexto sobre cómo se toman las decisiones en el equipo
Por qué Markdown y no Figma: los archivos de texto son más baratos de procesar para una IA y mucho más precisos. Cuando la IA lee un spec file, recibe instrucciones explícitas. Cuando la IA intenta decodificar un mockup de Figma, está adivinando.
Ejemplo de estructura de spec files (inspirado en Atlassian):
design-system/
├── principles.md # Principios y prioridades
├── spacing.md # Reglas de espaciado
├── color.md # Tokens de color y cuándo usarlos
├── typography.md # Escalas tipográficas
├── components/
│ ├── button.md # Guía de uso del componente Button
│ ├── card.md # Guía de uso del componente Card
│ └── form.md # Patrones de formularios
├── accessibility.md # Requisitos de accesibilidad
└── decision-log.md # Registro de decisiones y su contextoCapa 2: Capa de tokens (Token Layer)
Lista y mantiene actualizados todos los tokens usados en el sistema de diseño. La IA siempre elige de un conjunto cerrado de variables con nombre en lugar de inventar valores plausibles sobre la marcha.
Qué debe incluir esta capa:
- Tokens de color (primarios, secundarios, semánticos)
- Tokens de espaciado (escala fija, nunca valores arbitrarios)
- Tokens tipográficos (familias, tamaños, pesos, line-heights)
- Tokens de sombra, borde, radio
- Tokens de breakpoint
El principio: si un valor no tiene nombre, la IA lo va a inventar. Y lo va a inventar mal.
Capa 3: Scripts de auditoría (Audit Layer)
Un script — que puede ser software tradicional, no necesariamente IA — escanea el prototipo generado y detecta:
- Valores hard-codeados (colores, espaciados, fuentes que no vienen de tokens)
- Instancias desvinculadas del sistema
- Estados interactivos faltantes (hover, focus, active, disabled)
- Violaciones de accesibilidad
- Inconsistencias con las reglas definidas en los spec files
El flujo ideal es: la IA genera → el script audita → la IA recibe el feedback y corrige → vuelve a auditar. Es un ciclo de mejora continua automatizado.
Además, cuando el sistema de diseño recibe actualizaciones, una rutina de sincronización marca qué spec files necesitan actualizarse. El objetivo: que la IA siempre lea especificaciones vigentes, no documentos escritos contra una versión obsoleta.
Herramienta clave: FigmaLint
TJ Pitre creó FigmaLint, un plugin gratuito para Figma que automatiza gran parte de la auditoría de un sistema de diseño:
- Audita tokens, estados y accesibilidad
- Vincula tokens a componentes
- Renombra capas automáticamente
- Detecta instancias desvinculadas
- Identifica estados interactivos faltantes
- Encuentra valores hard-codeados
- Prepara la documentación de diseño
Para equipos que trabajan con proveedores externos o agencias tercerizadas que entregan sus propios sistemas de diseño y librerías de componentes, FigmaLint es invaluable: permite validar la calidad de lo que recibes antes de integrarlo.
Context Engineering: los 5 niveles que necesitas conocer
Matthew Alverson, referenciado por Addy Osmani (Google), propone un modelo de cinco niveles de ingeniería de contexto para trabajar con IA. Cuanto más contexto estructurado le des al modelo, mejores resultados obtendrás:
| Nivel | Qué incluye | Ejemplo |
|---|---|---|
| 1. Prompt básico | Instrucción simple | ”Diseña un botón” |
| 2. Prompt + ejemplos | Instrucción con referencias | ”Diseña un botón como los de Atlassian” |
| 3. Prompt + reglas | Instrucción con constraints | ”Diseña un botón usando solo tokens del sistema” |
| 4. Prompt + spec files | Instrucción con documentación completa | La IA lee spacing.md + color.md + button.md antes de generar |
| 5. Prompt + spec + auditoría | Ciclo completo con feedback | La IA genera, el script audita, la IA corrige |
La mayoría de los equipos opera en el nivel 1 o 2. Los sistemas de diseño AI-ready operan en el nivel 4 o 5.
Ejemplos reales de sistemas de diseño AI-Ready
Varias organizaciones ya publican sus sistemas de diseño en formatos legibles por IA. Estos son los casos documentados por Vitaly Friedman en Smashing Magazine:
| Organización | Sistema | URL del spec AI-ready |
|---|---|---|
| Atlassian | Atlassian Design System | atlassian.design/llms.txt |
| IBM | Carbon Design System | carbondesignsystem.com/llms.txt |
| CMS (EE.UU.) | CMS Design System | design.cms.gov/llms.txt |
| Nordhealth | Nordhealth Design | nordhealth.design/ai/ |
El patrón común: todas usan /llms.txt o /ai/ como punto de entrada para que cualquier IA pueda consumir el sistema.
¿Qué significa esto para agencias y estudios de diseño en Latinoamérica?
En mercados como el dominicano, donde las agencias y estudios de diseño operan con equipos pequeños y múltiples proyectos simultáneos, la tentación es pensar “esto es para enterprises como Atlassian, no para nosotros”. Es un error.
La realidad es que los equipos pequeños son los que más se benefician de tener un sistema de diseño AI-ready:
- Menos tiempo corrigiendo prototipos generados por IA. Si tu equipo usa herramientas como Relume, V0, Galileo AI o el generador de Wix, tener spec files estructurados reduce el retrabajo drásticamente.
- Onboarding más rápido. Un diseñador nuevo (o un freelancer) puede consultar los spec files en lugar de preguntarle al diseñador senior cada 10 minutos.
- Consistencia entre proyectos. Si manejas 5 clientes simultáneos, los spec files evitan que cada proyecto derive en decisiones inconsistentes.
- Ventaja competitiva en pitching. Poder decir “nuestro sistema de diseño es AI-ready” te diferencia del 95% de agencias en Santo Domingo que no tienen ni sistema de diseño documentado.
- Preparación para GEO. Las mismas técnicas de estructuración que hacen tu sistema de diseño legible para IA (Markdown, tokens, reglas explícitas) son las que hacen tu contenido web legible para ChatGPT, Perplexity y Google AI Overviews.
Plan de acción: De 0 a AI-Ready en 60 días
Semanas 1-2: Auditoría inicial
- Instala FigmaLint y ejecuta una auditoría completa de tu sistema de diseño actual
- Identifica valores hard-codeados, tokens inconsistentes y estados faltantes
- Documenta el “estado actual” para tener una línea base
Semanas 3-4: Spec files fundamentales
- Crea
principles.mdcon los principios de diseño de tu equipo - Crea
color.mdyspacing.mdcon los tokens y las reglas de uso - Crea
accessibility.mdcon los requisitos mínimos (contraste, focus, labels)
Semanas 5-6: Componentes y contexto
- Documenta los 5 componentes más usados en archivos Markdown individuales
- Incluye en cada uno: propósito, cuándo usarlo, cuándo NO usarlo, variantes, estados
- Agrega ejemplos de do’s and don’ts
Semanas 7-8: Auditoría y sincronización
- Configura un script (puede ser un checklist manual al inicio) para auditar prototipos generados por IA
- Establece una rutina: cada vez que el sistema de diseño cambia, actualiza los spec files correspondientes
- Publica tu
/llms.txto/ai/como punto de entrada
Conclusión
La IA no va a resolver mágicamente la deuda técnica ni la deuda de diseño sin la guía adecuada. Depende de decisiones claras, prioridades establecidas y principios bien definidos.
Cuanto más deliberados y precisos seamos al guiar a la IA, mejores serán los resultados. Esto requiere no solo limpiar y mejorar los sistemas de diseño, sino también mantenerlos en el tiempo: cada decisión debe traducirse en un archivo Markdown que la IA pueda consumir.
No es un proyecto de una semana. Pero cada spec file que escribes hoy es una hora de retrabajo que te ahorras mañana.
Preguntas Frecuentes
En By Enki combinamos estrategia, diseño e inteligencia artificial para ayudar a negocios en Santo Domingo y toda República Dominicana a construir sistemas de diseño y presencia digital preparados para el futuro. ¿Hablamos de tu proyecto? Cotiza aquí y recibe una propuesta en 24 horas.