KEYNOTEAngel Arrieta

De UIs estáticasa UIs agénticas.

Como estoy diseñando interfaces que se sientan diferentes.

Ayudo a las personas con cuidado personal (healthcare + mindfulness) a través de la tecnología, usando la IA no solo como herramienta, sino como un medio para entender mejor los usuarios rápidamente y darles más valor.

Presentador

Angel Arrieta

Founding Tech Lead • The School of Breath

El desafío de hoy:diseñar UI/UX que realmente resuelva el dolor del usuario.

•

Hoy todavía diseñamos muchas UIs como si fueran catálogos de botones.

•

Preguntamos: ¿dónde pongo este botón?, ¿cómo hago este flujo?, pero no: ¿cuánto tardamos en resolver el dolor real del usuario?

•

Mi objetivo hoy: mostrar cómo pasé de pantallas estáticas a una UI agéntica que actúa como copiloto y resuelve problemas en minutos, no en clicks.

Diseñador evaluando UI agéntica con interfaces holográficas y copiloto JARVIS

De UI estáticaa UI agéntica.

•

Interacción Tradicional: Es de naturaleza imperativa. El usuario manipula elementos visuales estáticos y el servidor responde de manera pasiva a peticiones directas.

•

Interacción Agéntica y Voz Generativa: Es proactiva. Existe un loop bidireccional y continuo mediante voz generativa integrada en tiempo real. La UI se autoconstruye y se adapta progresivamente al contexto de forma dinámica.

•

Protocolos de Generative UI como AG-UI, A2UI y MCP-UI unifican la capa de modelos con el renderizado dinámico de componentes React interactivos y flujos de voz en tiempo real en el cliente.

STATIC MODEL

Estructura Pasiva

Es de naturaleza imperativa. El usuario manipula elementos visuales estáticos y el servidor responde de manera pasiva a peticiones directas.

GENERATIVE UI MODEL

Estructura Proactiva

Composición dinámica en tiempo real. Ejemplo: Un agente de Claude aplicando MCP-UI para renderizar un dashboard de estadísticas de MongoDB directamente en el chat bajo demanda.

Claude Agent rendering MongoDB Dashboard via MCP-UI in Chat

Pilares de laUI Agéntica.

En *The School of Breath*, el flujo agéntico interactúa de extremo a extremo con nuestra arquitectura de producto:

Context-Aware (Consciencia de Contexto)

Reconoce de manera adaptativa el perfil del usuario, hábitos históricos de sueño, nivel de estrés detectado y condiciones ambientales temporales.

Tool-Oriented (Orientada a Herramientas)

Orquesta de forma nativa e invisible la base de datos interna, indexadores semánticos de playlists y el reproductor de sonido sin requerir navegación manual.

Real-time / Generative (Tiempo real generativo)

Compone vistas dinámicas y personalizadas (Generative UI) bajo demanda, respondiendo de inmediato a los parámetros emocionales de la sesión.

Capa de Orquestación - Pilares de la UI Agéntica

Spec-Driven AI UI Design Pipeline Workflow Diagram

Capa de Integración y Flujo de Datos

Energy OS — CopilotKit + Google ADK Architecture

Sincronización continua en tiempo real y bidireccional entre la capa de componentes adaptativos en React y la orquestación inteligente de agentes.

Demo & Aprendizajes.

Primero el producto, no la IA

Identifica si realmente necesitas un agente completo o si un simple componente estático optimizado resuelve el problema. No sobre-diseñes flujos innecesarios.

Control y transparencia al usuario

El usuario siempre debe tener el control de detener, editar o cancelar cualquier sugerencia generativa. Un agente es un copiloto, no un piloto sin control.

Uso estratégico de la interfaz generativa

Evita automatizar flujos estables y predecibles. Limita la renderización generativa a momentos de alta fricción o decisiones contextuales del usuario.

Lanzar, evaluar e iterar

El 90% de la lógica inicial se construye rápido con IA, pero perfeccionar el 10% restante para que se sienta humano, cálido y consistente requiere pruebas con usuarios reales.

"Diseñar interfaces agénticas no es solo programar IA, sino darle a la interfaz la capacidad de adaptarse dinámicamente y con propósito humano."

1 / 7