¿Qué es Generative UI? Cinco decisiones de diseño antes de dejar que la IA construya la interfaz
¿Qué hay que decidir antes de convertir las respuestas de IA en tarjetas, formularios y pantallas comparativas? Cinco preguntas para diseñar el primer prototipo de Generative UI.
Si le dices a una IA «crea un itinerario de tres días y dos noches», puede generar en segundos varias pantallas plausibles. Pero el problema empieza en cuanto la persona cambia una sola fecha: desaparece la tarjeta de precios, cambian los filtros y el botón de reserva adquiere un significado distinto en cada pantalla.
Si esta escena te resulta familiar, no necesitas un prompt más largo. La clave de la Generative UI no es la velocidad con que la IA crea pantallas, sino diseñar sus límites para que el producto siga comportándose como tal aunque la interfaz cambie.
Este artículo explica qué es la interfaz generativa, dónde se diferencia de la UI de un chatbot y cinco preguntas que un diseñador que empieza con IA debería responder antes de su primer prototipo. Al terminar, podrás preparar un brief que examine edición, reversión y accesibilidad, no solo un mockup atractivo.
La Generative UI convierte una respuesta en la siguiente acción
Generative UI no significa que una IA produzca HTML arbitrario. Se parece más a mostrar, en el momento preciso, una combinación de componentes validados —tarjetas, formularios, tablas comparativas o gráficos— que se ajusta a la intención de la persona, el contexto actual y los datos obtenidos por herramientas.
Un chatbot convencional suele responder con el mismo campo de entrada y burbujas de texto aunque cambie la pregunta. En cambio, para comparar viajes puede presentar primero un selector de fechas y un control de presupuesto; para elegir entre varias opciones, tarjetas comparativas y filtros. Así, una tarea que exigiría tres repreguntas en frases se resuelve con una interacción en pantalla.
Vercel ha presentado un flujo de interfaz generativa que conecta el resultado de una llamada a herramientas con componentes de React. Flutter también presenta GenUI, un enfoque que compone interfaz dentro del catálogo de widgets y el modelo de datos que proporciona la aplicación. Es más preciso pensar que la IA elige la interacción necesaria y el producto la renderiza de forma segura, en vez de decir que «dibuja» una pantalla. Vercel AI SDK · Flutter GenUI
1. ¿La persona intenta terminar una sola tarea ahora?
Si el primer GenUI se plantea de forma amplia, como «una app de viajes con IA», se convierte rápido en una demo. Elige, en cambio, una escena concreta en la que la persona repite una pregunta tres veces o más: por ejemplo, «comparar tres itinerarios dentro de un presupuesto y elegir uno».
Con un objetivo claro, la pantalla también cambia. En lugar de un texto de recomendación largo, deben aparecer primero tarjetas que comparen precio, tiempo de desplazamiento y alternativas para lluvia, junto con controles para modificar una sola variable. La primera pregunta de Generative UI no es «¿qué generamos?», sino «¿qué decisión ayudamos a tomar más rápido?».
2. ¿Hasta dónde llegan los bloques que la IA puede combinar?
Dar a la IA permiso para generar código libre hace que la marca y la calidad se vuelvan inestables al mismo tiempo. Lo más realista es permitirle ensamblar solo dentro de la caja de Lego diseñada por el equipo.
Limita botones, campos, tarjetas de selección, tablas, avisos y estados de carga a componentes aprobados; fija también colores, espaciado, microcopy y mensajes de error con tokens y reglas. A2UI de Google también se centra en datos declarativos y un catálogo de componentes de confianza, en lugar de HTML o JavaScript ejecutables. Este enfoque reduce a la vez el riesgo de inyectar UI y la pérdida de coherencia de diseño. Google A2UI
3. ¿Dónde se ven en pantalla la evidencia y la incertidumbre?
Que un resultado recomendado por IA se vea bien no lo convierte automáticamente en información fiable. Los datos cambiantes, como precio, inventario o políticas, necesitan fuente y momento de comprobación; una propuesta de baja confianza necesita un estado que indique «requiere verificación».
Aquí el diseñador construye el fundamento de una decisión, no solo la forma de una tarjeta. En una herramienta que resume entrevistas con clientes, debe ser posible abrir las citas originales y el tamaño de la muestra bajo la tarjeta de conclusiones. El principio de la confianza es permitir que la persona no se limite a leer el resultado, sino que compruebe por qué se recomendó y pueda corregirlo.
4. ¿Editar, reintentar y deshacer están justo al lado?
Un resultado generado es una hipótesis, no la respuesta correcta. Por eso no basta con colocar «generar de nuevo». La persona debe ver qué condición cambió, editar directamente una parte del resultado y volver a un estado anterior.
En especial, las acciones difíciles de revertir —pagos, compartir o borrar— requieren confirmación aunque las proponga la IA. La guía de diseño de IA generativa de Apple también recomienda indicar claramente el uso de IA y permitir que las personas editen, reintenten o deshagan el resultado. Una buena GenUI hace más visible el control de la persona que la velocidad de la automatización. Apple HIG
5. ¿El producto sigue funcionando cuando falla la IA?
La latencia del modelo, los datos ausentes y las peticiones ambiguas no son excepciones: son escenarios básicos. Durante la carga, hay que comunicar el progreso real; cuando faltan datos, mostrar qué introducir a continuación; y conservar una interfaz fija que permita realizar la tarea esencial sin usar la función generativa.
La accesibilidad sigue el mismo principio. En vez de comprobarla después de generar, el contrato de cada componente debe incluir etiquetas, manejo de teclado, orden de foco, contraste y política de mensajes de error. Las pantallas que se pueden generar son muchas, pero los bloques y las reglas de interacción deben ser pocos y verificables.
Para el primer prototipo bastan estas cinco líneas
No hace falta hacer que todo se genere desde el primer día. Empieza con una página de brief como esta:
- Objetivo de la persona: la única decisión que intenta terminar ahora.
- Componentes permitidos: lista de tarjetas, entradas, tablas y gráficos que la IA puede combinar.
- Evidencia obligatoria: fuente, momento y grado de incertidumbre de los datos que hay que mostrar.
- Control de la persona: editar, reintentar, deshacer y confirmar acciones importantes.
- Ruta de fallo: interfaz fija cuando no haya datos, haya demora o se produzca un error.
Generative UI no es una tecnología que expulse al diseñador de producir pantallas. Al contrario: cuanto más fluida sea la interfaz, con mayor precisión hay que definir «¿cuál es la siguiente acción que esta persona necesita ahora?». No empieces por hacer el chatbot un poco más vistoso. Convierte una pregunta repetida en una tarjeta, un formulario o una pantalla comparativa. Ese pequeño cambio es el comienzo más realista.