Barandillas de interfaz de usuario generativas: diseño según la intención sin romper su sistema de diseño

Desde diseños fijos hasta diseños con intención

En un diseño fijo, los diseñadores deciden cada pantalla de antemano. Con la interfaz de usuario generativa, un modelo de IA decide qué interfaz mostrar para una solicitud específica. Google describe la interfaz de usuario generativa como un modelo que genera no solo contenido sino una experiencia completa, y ahora ofrece experimentos basados ​​en esto en la aplicación Gemini y en el modo AI en la Búsqueda de Google. En las herramientas de desarrollo, Vercel AI SDK describe una versión más simple: el modelo llama a una herramienta y el resultado de esa llamada a la herramienta se representa como un componente React.

¿Qué cambia para UX?

Los diseñadores dejan de dibujar cada pantalla y comienzan a diseñar las reglas: qué componentes existen, cuándo es apropiado cada uno y qué no debe cambiar nunca. El marco alrededor del contenido generado, como la navegación, la entrada, la deshacer y la configuración, debe permanecer fijo para que las personas nunca pierdan su lugar. Las áreas generadas deben estar claramente marcadas y las personas deben poder cambiar a una vista sencilla y predecible.

Guardrail 1: un catálogo de componentes aprobado

El patrón más seguro es dejar que el modelo elija y complete los componentes, no inventarlos. A2UI, un protocolo abierto creado por Google, funciona de esta manera: los agentes envían descripciones de componentes declarativas y el cliente las representa con sus propios widgets nativos, sin ejecutar código arbitrario desde el agente. Su catálogo puede ser pequeño: tablas, tarjetas, gráficos, formularios, listas, cada uno de ellos creado y probado por su equipo.

Guardrail 2: tokens en lugar de valores brutos

Proporcione tokens semánticos al modelo, como color.text.primary o space.4, y rechace la salida que utilice valores hexadecimales sin formato o tamaños de fuente arbitrarios. Esto mantiene el contraste, la tipografía y el espaciado dentro del sistema, y ​​temas como el modo oscuro o el alto contraste siguen funcionando automáticamente.

Guardrail 3: validar antes de renderizar

Ejecute comprobaciones automáticas en la salida generada antes de mostrarla: campos obligatorios presentes, contraste de color, orden de encabezado, etiquetas en las entradas, orden de enfoque, tamaño del objetivo táctil y compatibilidad con movimiento reducido. Si falla una verificación, recurra a un diseño simple y en buen estado en lugar de mostrar una interfaz de usuario defectuosa.

• Validación de esquema: solo componentes y propiedades conocidos
• Accesibilidad: contraste, etiquetas, roles, orden de enfoque.
• Límites de contenido: elementos máximos, longitud del texto, tamaños de imagen
• Alternativa: una lista simple o una respuesta de texto si falla la validación