Sistema de diseño para agentes de IA: preparación e implementación

La preparación de una sistema de diseño para agentes de IA implica convertir los elementos visuales estáticos en datos estructurados y con nombre, además de reglas claras que la inteligencia artificial pueda entender y utilizar. Esto permite que la IA genere diseños alineados con la marca, la funcionalidad y la accesibilidad, reduciendo la necesidad de intervención manual.

¿Cómo interpretan los agentes de IA los sistemas de diseño?

Los agentes de IA necesitan datos claramente definidos para funcionar con eficacia. A diferencia de las personas, que pueden entender de forma intuitiva las pistas visuales y el contexto, la IA requiere información estructurada. Un sistema de diseño se convierte en el lenguaje con el que los diseñadores se comunican con la IA, proporcionándole los “bloques de construcción” necesarios y las reglas para usarlos.

¿Por qué los design tokens son la base para la IA?

Los design tokens son las unidades atómicas del lenguaje visual: colores, tipografía, espacios, radios, sombras y animación. Asignarles nombres, por ejemplo, color.primary.600 o space.4, permite a la IA identificar y aplicar con precisión los elementos de diseño. Las herramientas de IA pueden trabajar de forma fiable con valores con nombre, a diferencia de intentar analizar paletas a partir de capturas de pantalla, lo que a menudo provoca imprecisiones.

• Propósito de los tokens:

  • Color: color.background.default, color.text.primary;
  • Tipografía: font.family.heading, font.size.body;
  • Espaciado: space.xs, space.md;
  • Radio: radius.sm, radius.lg;
  • Sombras: shadow.medium;
  • Animación: motion.duration.fast.

• Organización de tokens:

  • Tokens primitivos: Valores básicos (por ejemplo, un tono concreto de gris #CCCCCC).
  • Tokens semánticos: Describen el propósito (por ejemplo, color.border.disabled, color.background.interactive).

Organizar los tokens en capas primitivas y semánticas aporta flexibilidad y escalabilidad. Los tokens semánticos vinculan los valores primitivos a un contexto de uso específico, lo que permite cambiar fácilmente el aspecto de la marca actualizando solo los tokens primitivos. La sincronización de tokens entre los archivos de diseño (por ejemplo, Figma Variables) y el código (variables CSS) es fundamental para mantener la consistencia.

¿Cómo estructurar los componentes para agentes de IA?

La estructuración de los componentes debe ser intuitiva tanto para los diseñadores como para la IA. Esto implica usar nomenclaturas coherentes, expresar las variaciones mediante variantes en lugar de copias separadas y construir con Auto Layout para dar claridad a la estructura.

• Nomenclatura: Usa nombres claros y universales para los componentes y sus variaciones, acordes con su función (por ejemplo, Button, TextField, Card).
• Variaciones: Presenta los distintos estados (hover, focus, disabled, loading) y propiedades (size, color, shape) del componente como variantes dentro de un único componente maestro, no como copias separadas. Esto permite a la IA elegir la variante correcta en lugar de crear una nueva.
• Estructura: Usa Auto Layout en Figma para definir relaciones explícitas entre los elementos dentro del componente. Esto ayuda a la IA a entender la lógica interna y el espacio.
• Completitud: Incluye todos los estados posibles del componente (hover, focus, disabled, loading, error, empty). Si un estado no está definido, la IA puede inventarlo, lo que generará incoherencias de diseño.
• Evitación de sobrescrituras: No crees sobrescrituras únicas de un solo uso, ya que esto oculta el componente real y sus variantes para la IA.

¿Cómo vincular los componentes de diseño con el código?

Herramientas como Code Connect de Figma permiten asociar cada componente de diseño con su equivalente en el código. Cuando un agente de IA lee el diseño a través de Figma MCP (Multi-Component Platform), sabe qué componente exacto de la base de código debe utilizar, en lugar de intentar escribirlo desde cero.

• Automatización del vínculo: Las herramientas que asocian los componentes de diseño con su representación en código son clave. Esto permite a la IA “ver” y utilizar los componentes existentes.
• Mantenimiento de la actualidad: El vínculo entre diseño y código debe mantenerse actualizado. Actualiza regularmente los mapas de componentes cuando cambien.
• Pruebas: Verifica el vínculo pidiendo al agente de IA que cree una pantalla o una funcionalidad. Esto ayudará a detectar discrepancias.

¿Cómo escribir reglas para los agentes de IA?

Las reglas deben ser accesibles para la IA y estar almacenadas en un lugar donde pueda leerlas fácilmente. Pueden ser archivos Markdown en el repositorio o secciones específicas dentro de la documentación del sistema de diseño.

• Lugar de almacenamiento:

  • Repositorio de código (por ejemplo, CLAUDE.md, AGENTS.md).
  • Figma (en conjuntos especiales de componentes o documentación).
  • Sitios de documentación (páginas de texto).

• Formato:

  • Usa reglas breves y concretas.

  • Incluye ejemplos de “haz” y “no hagas” en formato textual, no solo visual.

  • Ejemplo de regla:
    markdown

    Reglas de UI

    • Los componentes se importan desde @/components/ui. Nunca crees botones, campos de entrada o diálogos desde cero.
    • Los colores, el espaciado, los radios y la tipografía usan tokens de src/styles/tokens.css.
    • No uses valores “en bruto” de hex, rgb o px en los componentes.
    • Si el sistema de diseño no contiene lo necesario, detente y pregunta. No crees una solución puntual.

¿Cómo hacer que un sistema de diseño existente esté listo para IA?

La transición hacia la preparación para IA requiere auditoría y refinamiento del sistema existente.

1. Auditoría y tokenización de valores codificados de forma fija

• Detección: Revisa los archivos de diseño y el código en busca de colores, tamaños y distancias que no estén vinculados a tokens de diseño. Estos son valores “codificados de forma fija”.
• Tokenización: Sustituye esos valores por tokens con nombre en el diseño y en el código. Esta es la base para una aplicación coherente de estilos por parte de la IA.

2. Limpieza y ampliación de componentes

• Unificación de duplicados: Encuentra y fusiona componentes que dupliquen funcionalidad o apariencia.
• Adición de estados: Asegúrate de que todos los componentes tengan definidos sus estados (hover, focus, disabled, error).
• Uso de variantes: En lugar de componentes separados para distintos tamaños o colores, usa un sistema de variantes.

3. Mapeo del diseño al código

• Vínculo: Establece una relación clara entre cada componente de diseño y su equivalente correspondiente en código.
• Automatización: Usa herramientas que simplifiquen este mapeo y lo mantengan actualizado.

4. Convertir las reglas en texto

• Documentación: En lugar de diagramas complejos o descripciones extensas, convierte las recomendaciones clave del sistema de diseño en archivos de texto breves y claros (por ejemplo, en formato Markdown).
• Accesibilidad: Guarda estos archivos en lugares donde los agentes de IA puedan encontrarlos fácilmente (repositorio, documentación).

5. Pruebas con herramientas de IA

• Verificación práctica: Usa herramientas de IA (por ejemplo, Figma Make, agentes de código) para crear pantallas o prototipos basados en tu sistema de diseño preparado.
• Análisis de resultados: Revisa cuidadosamente los resultados para detectar discrepancias, incoherencias o errores que la IA haya podido cometer por reglas o datos poco claros.

¿Cómo ayuda la IA a entender la “intención” del usuario?

La IA puede ayudar a comprender la intención del usuario, pero esto requiere una formulación correcta de la tarea y aportar contexto. La IA no puede “sentir” ni “adivinar” intenciones como lo hace una persona.

1. Concretar los requisitos mediante diálogo

• Preguntas de la IA: La IA puede hacer preguntas aclaratorias al usuario para ayudarle a formular mejor sus necesidades. Esto es especialmente útil cuando el usuario no sabe con exactitud qué quiere.
• Aclaración iterativa: En lugar de esperar una tarea completa y precisa desde el primer intento, el proceso debe ser iterativo, permitiendo al usuario concretar progresivamente sus requisitos.

2. Comparación de opciones

• Selección visual: Si el usuario no puede describir con claridad sus preferencias, la IA puede proponer varias opciones de diseño. Al compararlas, el usuario comprende mejor lo que prefiere.
• Retroalimentación: Ofrecer la posibilidad de comparar distintas soluciones ayuda a evitar situaciones en las que la IA genera algo que no encaja en absoluto con las expectativas.

3. Retroalimentación sobre elementos concretos

• Feedback selectivo: La posibilidad de señalar una parte concreta de la pantalla y dar retroalimentación (por ejemplo, “cambia el color de este botón”) permite que la IA y el usuario “hablen de lo mismo”.
• Contextualidad: Esto garantiza que la IA entienda a qué elemento concreto se aplican las instrucciones.

4. Expresión visual de las intenciones

• Bocetos: Los usuarios pueden dibujar bocetos o crear prototipos visuales simples para transmitir sus ideas.
• Iteración rápida: Un ciclo rápido de generación y revisión de resultados (streaming) permite al usuario corregir la dirección del diseño en tiempo real.

¿Qué contexto necesita la IA para diseñar?

La IA necesita información diversa para generar diseños con éxito.

1. Gestión del conocimiento para la IA

• Principios generales: Sistemas de diseño, estándares de accesibilidad, guías de marca. Este es el “conocimiento base” que la IA debe tener siempre disponible.
• Requisitos específicos del proyecto: Tareas concretas, limitaciones y público objetivo del proyecto. Estos datos se proporcionan cuando se necesitan.
• Contexto actual: Diálogos activos, cambios en pantalla, instrucciones recientes. Es información temporal y relevante para una sesión concreta.

La eficacia de la IA no depende de la cantidad de datos, sino de su capacidad para seleccionar el conocimiento adecuado en el momento adecuado.

2. Uso de productos reales como referencias

• Valor de las referencias: En lugar de descripciones verbales, mostrar pantallas o componentes similares de un producto real es una forma mucho más eficaz de transmitir el resultado deseado.
• Recopilación automatizada: Los sistemas que recopilan automáticamente capturas de pantalla de interfaces durante el proceso de CI permiten disponer de una base de referencias actualizada.
• Información adicional: Recopilar no solo imágenes, sino también datos sobre los componentes utilizados, texto, tokens, estructura DOM e información de accesibilidad hace que las referencias sean más valiosas para la IA.
• Búsqueda por criterios: La IA debe poder buscar las pantallas adecuadas por componentes, texto u otros atributos.

3. El sistema de diseño como “compresión de decisiones”

• Toma de decisiones: Los componentes del sistema de diseño ya incorporan los resultados de numerosas decisiones de diseño (tamaño, color, estado, espaciado). La IA puede utilizar esta “experiencia” en lugar de tomar esas decisiones desde cero cada vez.
• Extensión a patrones: El uso eficaz del sistema de diseño por parte de la IA requiere pasar de componentes a patrones más complejos. Los patrones incluyen:

  • Contexto de uso: Cuándo y por qué debe usarse este patrón.
  • Estructura: Qué componentes, estados y estilo visual se utilizan.
  • Ejemplos: Pantallas y flujos reales que ilustran el patrón.

Esto permite a la IA entender no solo “cómo se ve un botón”, sino también “cómo construir un formulario de registro” o “cómo manejar un estado de carga”.

¿Cómo construir patrones para IA a partir de componentes del sistema de diseño?

La IA suele generar componentes aleatorios si no se le proporciona una estructura clara del patrón.

1. Definición de la estructura del patrón

• Especificación: Crea un documento que describa los componentes necesarios y su organización.

• Ejemplo de especificación:

  Patrón: Formulario de feedback

  Componentes a utilizar:

  • Input (carpeta XY)
  • Checkbox (carpeta XY)
  • Button (carpeta XY)
  • Dropdown (carpeta XY)

  Funcionalidad:

  • Recopilación de datos: nombre, email, consentimiento.
  • Validación del formato del email.
  • Visualización de errores en tiempo real.
  • Envío de datos al endpoint.
  • Visualización del estado de éxito.

  Restricciones:

  • No crear nuevos componentes.
  • No modificar los componentes existentes.
  • Usar solo los espacios definidos en el sistema.

2. Mostrar todos los estados del patrón

• Completitud: La IA debe entender todos los estados posibles en los que puede encontrarse el patrón.

• Ejemplo de estados:

  • ✅ Vacío: Formulario en su primera visualización.
  • ✅ Entrada: El usuario está introduciendo datos.
  • ✅ Validación: El sistema está comprobando los datos.
  • ✅ Error: Hay datos incorrectos.
  • ✅ Envío: Los datos se están enviando.
  • ✅ Éxito: Los datos se han enviado correctamente.

Para cada estado se debe describir: la representación visual, el estado de los botones, el foco y los mensajes de error.

3. Definición de flujos de interacción

• Escenario: Describe en detalle qué ocurre cuando el usuario interactúa con el patrón.

• Ejemplo de flujo:

  Al hacer clic en el botón “Enviar”:

  1. Validar todos los campos.
  2. Si hay errores:

     • Mostrar bordes rojos alrededor de los campos inválidos.
     • Mostrar mensajes de error debajo de los campos.
     • Mover el foco al primer campo con error.
     • El botón “Enviar” permanece activo.

  3. Si los datos son válidos:

     • Desactivar el botón “Enviar”.
     • Mostrar un indicador de carga en el botón.
     • Enviar los datos al endpoint.
     • Esperar la respuesta.

  4. En caso de éxito:

     • Ocultar el formulario.
     • Mostrar un mensaje de éxito.
     • Añadir un botón “Enviar de nuevo”.

  5. En caso de error del servidor:

     • Mostrar un mensaje de error en la parte superior de la página.
     • Habilitar el botón “Enviar” para reintentar.

4. Especificación del comportamiento adaptable

• Correspondencia con dispositivos: Describe cómo debe verse y funcionar el patrón en distintos dispositivos.

• Ejemplo:

  Móvil (hasta 640px):

  • Formulario a ancho completo.
  • Todos los campos dispuestos verticalmente.
  • Botón a ancho completo.
  • Tamaño mínimo de los objetivos táctiles de 48px.

  Escritorio (más de 640px):

  • Ancho máximo de 480px.
  • Posición centrada.
  • Botón alineado a la derecha.
  • Espaciados estándar.

¿Existe un “lenguaje de diseño” para la IA?

La IA puede beneficiarse de una forma más formalizada de representar el diseño que no se limite a los elementos visuales.

1. Evitar el exceso de información

• Problema: Pasar todo el contenido del lienzo a la IA la obliga a procesar información innecesaria, lo que aumenta la carga y el tiempo de procesamiento.
• Solución: Se necesita una forma de transmitir solo la información relevante, reduciendo el volumen de datos.

2. Seguimiento de cambios

• Problema: En el código, los cambios se rastrean mediante sistemas de control de versiones. En el diseño, la comparación visual no es suficiente para determinar con precisión qué información ha cambiado.
• Solución: Desarrollar un “lenguaje de diseño” que permita rastrear cambios de forma similar a un “diff” en el código es un paso importante. Esto puede incluir la representación de los cambios de diseño en un formato comprensible para la IA, facilitando la iteración y la colaboración.

Preparar un sistema de diseño para agentes de IA es el proceso de convertir el diseño de un arte visual en un sistema estructurado y legible por máquina que garantice consistencia, eficiencia y accesibilidad en el proceso de generación de diseños.