Los prototipos creados mediante inteligencia artificial suelen presentar resultados inconsistentes debido a pequeñas incoherencias que se acumulan en un sistema de diseño. Estas inconsistencias pueden estar originadas por decisiones no documentadas, valores codificados directamente o una excesiva dependencia de la IA para interpretar por sí sola los bocetos y flujos de diseño.
Recientemente, Hardik Pandya, de Atlassian, compartió una guía práctica sobre cómo minimizar estas desviaciones, evitar errores comunes, mantener el contexto y mejorar la calidad de los prototipos generados por IA. A continuación, analizamos sus principales recomendaciones:
1. Las decisiones de diseño como parte fundamental de la infraestructura
Para que los prototipos generados por IA sean mejores, es imprescindible contar con datos correctos y, sobre todo, con una guía humana definida. No se debe suponer que la inteligencia artificial puede por sí sola seleccionar el componente adecuado o diseñar teniendo en cuenta la accesibilidad. La IA necesita de prioridades claras, principios de diseño, ejemplos concretos, normas y contraejemplos.
Por ello, las decisiones de diseño deben tratarse como una infraestructura. Cada vez que se toma una decisión, ya sea sobre prioridades o criterios de diseño, debe quedar reflejada en archivos de especificación destinados a alimentar directamente a la IA.
2. Auditoría con FigmaLint para mantener la calidad
Una herramienta eficaz para auditar un sistema de diseño es FigmaLint, un plugin gratuito para Figma que ayuda a revisar tokens, estados, accesibilidad, capas, detecta valores codificados, estados interactivos faltantes y prepara la documentación de diseño.
More Read
Es especialmente útil cuando se trabaja con proveedores externos que aportan sus propios sistemas y librerías de componentes, pues ayuda a mejorar la calidad de prototipos, códigos generados automáticamente y documentación elaborada por IA.
3. Tres capas para un sistema de diseño listo para IA: Archivos de especificación, tokens y auditoría
Para garantizar la calidad, es fundamental definir principios, pautas y reglas en forma de archivos de especificación o «spec files». Estos son archivos de texto estructurados (Markdown) que incluyen reglas de espaciado, paletas de color, guías de uso de componentes y prioridades. La IA lee estos documentos cada vez que genera un prototipo, aportando precisión y eliminando ambigüedades.
Los archivos de especificación son más económicos y fiables que depender únicamente de la IA para interpretar patrones en bocetos, ya que proporcionan pautas específicas y actualizadas.
More Read
La capa de tokens mantiene actualizados todos los tokens utilizados en el sistema de diseño. La IA selecciona los valores a partir de este conjunto cerrado de variables nombradas, evitando así la invención de valores aleatorios.
Por último, un script de auditoría identifica errores de la IA en el prototipo, detectando valores codificados de manera incorrecta o inconsistencias. Estos scripts pueden ejecutarse de forma automática y devolver feedback para corregir los fallos.
Además, cada vez que se actualiza el sistema de diseño, un proceso de sincronización indica qué archivos de especificación deben revisarse para que la IA siempre trabaje con información actualizada, evitando trabajar con versiones obsoletas.
4. Ejemplos de sistemas de diseño preparados para IA
- Atlassian: https://atlassian.design/llms.txt
- Carbon (IBM): https://carbondesignsystem.com/llms.txt
- CMS Design System: https://design.cms.gov/llms.txt
- Nordhealth: https://nordhealth.design/ai/
Reflexiones finales
La inteligencia artificial no puede resolver de forma mágica la deuda técnica o de diseño sin una dirección clara. Depende del rigor humano para establecer prioridades, principios y decisiones precisas.
Cuanto más cuidadosos y detallados sean los diseñadores al guiar a la IA, mejores serán los resultados obtenidos. Esto implica no solo limpiar y mejorar los sistemas de diseño existentes, sino mantenerlos actualizados y documentados de forma constante para que las decisiones fluyan hacia archivos accesibles para la IA. Este es un trabajo a largo plazo que seguirá evolucionando en los próximos años.
Curso recomendado: Patrones de diseño para interfaces de IA
Aquellos interesados en profundizar en el diseño para IA pueden explorar «Design Patterns For AI Interfaces», un curso en vídeo con cientos de ejemplos reales y directrices UX para crear funciones de IA que los usuarios realmente utilicen. Además, este año contará con formación en vivo para experiencia de usuario.
More Read
Recursos útiles
- FigmaLint — plugin para auditoría de sistemas de diseño
- Ejemplo de sistema de diseño AI-Ready de Atlassian
- Ejemplo Carbon AI-Ready de IBM
- Ejemplo CMS AI-Ready
- Ejemplo Nordhealth AI-Ready
