Patrones de diseño de interfaz de usuario para agentes de IA: Cómo construir interfaces para herramientas autónomas
Una biblioteca de patrones de trabajo para el diseño de interfaces de usuario de agentes de IA. Ocho análisis detallados de productos reales de Claude Code, Cursor, Devin, Linear, ChatGPT Operator, Replit Agent, Bolt y v0, además de los siete patrones que toda interfaz de agente necesita.
El diseño de la interfaz de usuario de un agente de IA no es un simple diseño de chat con autonomía añadida. Un agente es un trabajador autónomo que define un objetivo, planifica una ruta y ejecuta herramientas sin solicitar autorización para cada paso. La interfaz de este trabajador es una superficie de control, no una conversación. Los productos que ofrecen las interfaces de usuario de agente más limpias lo abordan de esta manera desde el primer prototipo.
Siete patrones se encuentran presentes en toda interfaz de usuario de agente que valga la pena usar: la definición de tareas, los controles de autonomía, la superficie de planificación, el flujo de progreso, las puertas de confirmación, la recuperación de errores y las transferencias de agentes. La mayoría de los productos actuales implementan cuatro de estos siete patrones y dan por sentado que los otros tres no importan. El resultado es una interfaz que funciona bien en las demostraciones, pero que falla en el uso real.
Esta pieza ofrece la solución operativa. Los siete patrones, ocho análisis de componentes de Claude Code, Cursor, Devin, Linear AI, ChatGPT Operator, Replit Agent, Bolt y v0, tres errores comunes y su solución exacta, y una lista de verificación previa al lanzamiento de quince minutos que cualquier diseñador puede ejecutar antes de que la interfaz de usuario llegue a un usuario real.
Las interfaces de agente son superficies de control, no ventanas de chat
La interfaz de un agente de IA es la interfaz de un trabajador autónomo. El problema de diseño se asemeja más a una cabina de vuelo que a una conversación de chat. El usuario ya no intercambia mensajes, sino que define un objetivo y supervisa un proceso.
Una interfaz de chat optimiza la gestión de turnos. La interfaz de agente optimiza la claridad de los objetivos, la visibilidad del plan, la telemetría del progreso y las opciones de anulación. La mayoría de los primeros productos de agentes cometieron este error al extender el chat con algunos indicadores de "pensamiento" y un registro de uso de herramientas. El usuario se quedó mirando fijamente un hilo de chat sin poder ver el plan, ni pausar la ejecución, ni recuperarse cuando el agente fallaba. Al tratar la interfaz de usuario del agente como una superficie de control, los siete patrones que se describen a continuación dejan de ser opcionales y se convierten en elementos fundamentales.
Los siete patrones que toda interfaz de usuario de agente necesita
Definición de la tarea, control deslizante de autonomía, superficie del plan, flujo de progreso, puerta de confirmación, recuperación de errores y transferencia de agente. Todas las interfaces de usuario de agente actuales combinan estos siete elementos.
La definición de la tarea es la forma en que el usuario establece el objetivo. Los controles de autonomía permiten al usuario determinar el nivel de autonomía del agente. La superficie del plan es donde el agente se compromete con una secuencia de pasos antes de actuar. El flujo de progreso muestra en tiempo real lo que el agente está haciendo. La puerta de confirmación es el momento de espera antes de una acción destructiva. La recuperación de errores permite volver a la normalidad tras un paso fallido. La transferencia de agente es el volcado de estado que transfiere una tarea de un agente a un humano o de un agente a otro sin perder el contexto.
Los siete elementos no tienen la misma importancia, pero todos son necesarios. Un producto que incluye la definición de tareas sin una superficie de planificación es un juego de adivinanzas. Un producto que incluye todo excepto las puertas de confirmación es un desastre inminente. Los patrones se acumulan. Omitir uno debilita a los demás.
La definición de tareas establece el contrato
Una mala definición de tareas es un cuadro de chat genérico donde el usuario escribe una frase vaga y el agente completa el resto con suposiciones. Una buena definición de tareas es una entrada estructurada que solicita la información específica que el agente necesita.
Las funciones de IA de Linear lo hacen bien. El usuario escribe una breve descripción y la IA la analiza para crear una incidencia estructurada con título, descripción, etiquetas y una asignación de proyecto que el usuario puede editar antes de confirmar. La definición está restringida, la salida está estructurada y existe una clara opción de edición antes de confirmar.
La superficie de definición debe ser tan estructurada como la propia tarea. Una tarea de codificación requiere un objetivo, un archivo de destino y un criterio de aceptación. Una tarea de automatización web requiere una URL de inicio, una acción de destino y una condición de parada. La entrada de chat genérica es adecuada para la exploración, pero problemática para la producción.
Los controles de autonomía permiten al usuario elegir el nivel de control
La confianza no es constante y una sola configuración no cubre todas las tareas.
Claude Code lo logra con su sistema de permisos. El usuario puede operar en un modo donde cada llamada a una herramienta requiere aprobación, las herramientas comunes se aprueban automáticamente y las riesgosas aún requieren control, o en modo de autonomía total. El modo es visible, se puede cambiar durante la sesión y el usuario sabe exactamente qué nivel de control está utilizando el agente.
La mayoría de los productos incluyen una configuración de autonomía integrada, sin control por tarea ni estado visible. El usuario desconoce si el agente solicitará autorización antes de implementar, eliminar o enviar un correo electrónico. Esta incertidumbre acostumbra a los usuarios a una supervisión excesiva o a una confianza ciega. Ambas opciones son erróneas.
La superficie del plan es la primera promesa del agente
Antes de que el agente actúe, debe mostrar lo que pretende hacer. El plan debe ser legible, editable y rechazable.
Devin implementó una de las primeras superficies de plan que funcionaban. El agente genera un plan, el usuario edita cualquier paso directamente, elimina pasos, añade pasos o rechaza el plan completo. Una vez aprobado, el plan se convierte en el registro de ejecución, donde cada paso se ilumina a medida que el agente trabaja en él. La superficie del plan y el flujo de progreso son la misma superficie en dos estados: antes de la ejecución y durante la ejecución, lo cual es la decisión arquitectónica correcta.
Un error común: productos que muestran un plan como un párrafo de prosa en lugar de una lista estructurada. El plan no es realmente editable, lo que significa que el usuario lo aprueba sin revisarlo o solicita nuevas indicaciones. La solución es una estructura automatizada: una lista de pasos discretos, cada paso una fila, y cada fila es editable.
El flujo de progreso es el bucle de confianza
El agente está trabajando y el usuario espera, por lo que el flujo de progreso es lo único que separa al usuario de la decisión de cancelar la ejecución.
La interfaz del agente de Cursor lo hace bien. Mientras el agente edita archivos, las diferencias aparecen en tiempo real en el editor. Al ejecutar comandos, la salida de la terminal se muestra en tiempo real. El usuario puede dejar de observar en cualquier momento y volver a un registro completo. La confianza es breve porque el flujo es honesto.
Compárese con un agente que muestra un resumen tipo chat, como "Ahora estoy considerando el siguiente paso", mientras ejecuta discretamente diez llamadas a herramientas en segundo plano. El resumen es una cortina de humo. Se debe registrar cada llamada a herramienta y edición de archivo en un registro estructurado, y comprimir el razonamiento del modelo en un resumen de una línea por paso. Confundir ambos aspectos destruye la confianza.
Las puertas de confirmación protegen las acciones destructivas
Algunas acciones no se pueden deshacer, y la interfaz de usuario debe ralentizar esos momentos a propósito.
ChatGPT El operador gestiona esto en la web abierta. Cuando el agente está a punto de enviar un formulario, completar información de pago o realizar una acción que afecte a la cuenta, se detiene y solicita al usuario que apruebe, modifique o cancele. La pausa es visible, la acción se describe en texto plano y el usuario puede retomar el control de la sesión del navegador manualmente.
El error que cometen la mayoría de los productos es tratar todas las acciones con la misma prioridad de confirmación. O bien se bloquea todo, acostumbrando a los usuarios a hacer clic sin leer, o bien no se bloquea nada, permitiendo que el agente cause daños irreversibles. Clasifique las acciones en tres niveles de intensidad. Bloqueo suave para escrituras reversibles (un banner de deshacer de treinta segundos). Bloqueo estricto para acciones destructivas (una ventana modal de confirmación). Bloqueo en dos pasos para acciones catastróficas (una ventana modal más una frase de confirmación escrita).
La recuperación de errores es la mitad del producto
Los agentes fallan constantemente, y los productos que se perciben como fiables son aquellos con las superficies de recuperación más limpias, no los que tienen las tasas de éxito más altas.
Bolt y v0 lo hacen bien. Cuando falla una compilación, el error aparece en línea, el agente intenta solucionarlo y el usuario puede dejar que itere o intervenir y editar el código directamente. El estado se conserva entre intentos.
La mayoría de los productos fallan aquí. Ocurre un error, el agente se detiene y el usuario recibe el mensaje "Algo salió mal, ¿quieres que lo intente de nuevo?" sin saber en qué estado se encuentra el sistema. Cada error necesita un estado claro, un conjunto de opciones de recuperación (reintentar, editar, tomar el control, abandonar) y una garantía de conservación del estado. Los errores son la experiencia habitual de un agente en uso real, no un evento aislado.
Las transferencias entre agentes necesitan un registro escrito
Cuando una tarea pasa de un agente a un humano, o de un agente a otro, quien la recibe necesita el estado completo sin tener que preguntar.
Las funciones de IA de Linear gestionan esto escribiendo actualizaciones estructuradas en la incidencia. El siguiente compañero de equipo tiene el contexto completo en línea. Sin un panel de control aparte, sin herramientas adicionales. Cada transferencia debe generar un archivo de estado (un comentario estructurado, un resumen generado, un punto de control guardado) que el receptor pueda leer en menos de treinta segundos. Si el receptor tiene que preguntar "¿dónde te quedaste?", la transferencia falló. La misma disciplina que exige Ingeniería rápida para diseñadores para cualquier flujo de trabajo reutilizable.
Ocho interfaces de usuario de agente reales, anotadas
Los patrones solo importan si se mantienen en contacto con los productos lanzados. Ocho están en producción actualmente, cada una breve, ninguna perfecta.
Claude Code, interfaz de usuario de agente como terminal transparente
Claude Code es la interfaz de usuario de agente más limpia lanzada hasta la fecha, ya que trata la terminal como la superficie y se niega a ocultar lo que hace el agente. Cada llamada a una herramienta se transmite a la terminal, cada edición de archivo muestra una diferencia, cada comando muestra su salida. La ventaja es la transparencia. La desventaja: la superficie del plan es Markdown, no editable como una lista estructurada.
Cursor, interfaz de agente como programador en pareja ambiental
El agente de Cursor se siente invisible hasta que lo necesitas, lo que representa la máxima expresión de la excelencia en la interfaz de agente. Las pequeñas ediciones se realizan automáticamente y muestran una diferencia. Las refactorizaciones de varios archivos muestran un plan. La ventaja reside en la calibración de la presencia: Cursor ajusta la visibilidad del agente a la tarea. Su punto débil: la superficie del plan para refactorizaciones complejas se asemeja más a un chat que a una lista de tareas editable.
Devin, interfaz de agente como espacio de trabajo interactivo
Devin muestra el espacio de trabajo completo del agente, incluyendo un navegador en vivo, una terminal y un editor. La apuesta es que la transparencia genera confianza más rápidamente que la abstracción. Un plan estructurado y editable es visible desde el principio. Todo el espacio de trabajo es el flujo de progreso. El usuario toma el control en cualquier nivel. La ventaja reside en la visibilidad total. Su punto débil: el espacio de trabajo resulta pesado para tareas sencillas.
Linear IA, interfaz de agente como asistente integrado
Las funciones de IA de Linear se integran en la interfaz existente de Linear, lo cual es ideal para agentes integrados que deben sentirse como un compañero de equipo, no como una aplicación independiente. La IA devuelve un artefacto estructurado (un problema, un comentario, una actualización de estado) que se integra en el flujo existente. La ventaja reside en la integración. La limitación: las tareas autónomas de varios pasos requieren una interfaz de planificación y un flujo de progreso que Linear aún no ha implementado.
ChatGPT Operador, interfaz de agente como navegador supervisado
Operator se ejecuta en un navegador aislado que el usuario puede observar, pausar y controlar, lo cual es ideal para agentes que interactúan con la web abierta. El navegador en vivo es el flujo de progreso. Los pagos y las acciones que afectan a la cuenta son el control. La ventaja reside en el propio patrón de navegador supervisado, que prioriza la confianza sobre la velocidad. ¿Dónde se queda la ventaja? La interfaz del plan se muestra en el chat, desacoplada del flujo de progreso, lo que dificulta las correcciones durante la ejecución.
Replit Agent, Bolt y v0: la interfaz del agente como lienzo de compilación
Replit Agent, Bolt y v0 siguen el mismo patrón: mensaje a la izquierda, vista previa en vivo a la derecha, y el agente trabaja entre ambos. El usuario describe qué compilar y el agente se ejecuta hasta mostrar una vista previa. La ventaja reside en el lienzo de compilación, que hace que la tarea abstracta de "crear una aplicación" se sienta concreta. ¿Dónde se queda la ventaja? Replit Agent oculta demasiado estado dentro de su hilo de agente. La interfaz del plan de Bolt para aplicaciones complejas es escasa. El bucle de iteración de v0 para ediciones de múltiples componentes se asemeja más a un chat que a un plan estructurado. Lovable, en la misma línea, ofrece una interfaz de plan más sólida, pero un flujo de progreso más débil.
¿Quieres una interfaz de agente que genere confianza desde el primer uso, no al décimo? Contratar Brainy. AppBrainy ofrece interfaces de usuario para agentes destinadas a equipos que desarrollan herramientas autónomas. ClaudeBrainy incluye Claude Habilidades y bibliotecas de avisos que optimizan la capa del agente antes de que la interfaz de usuario tenga que compensarlo.
Tres errores comunes en las interfaces de usuario de los agentes y su solución
La mayoría de las interfaces de usuario de los agentes presentan los mismos tres errores, y las soluciones no son sutiles.
Primero: El agente que oculta el plan. El producto toma un objetivo, se ejecuta en segundo plano e informa un resultado. El usuario no tiene un plan que revisar, ni un progreso que observar, ni forma de detener la ejecución. Solución: mostrar un plan estructurado y editable antes de la ejecución, aunque solo sean dos líneas. El coste es de veinte píxeles de interfaz. La ventaja es que el usuario puede corregir al agente antes de que envíe algo incorrecto.
Segundo: El agente que lo confirma todo. El producto bloquea cada acción con una ventana modal, acostumbrando al usuario a hacer clic sin leer. Cuando llega una acción destructiva, el usuario también la confirma. Solución: clasificar las acciones en reversibles, destructivas y catastróficas. Limita solo las dos últimas opciones y permite que las acciones reversibles se ejecuten con un banner de deshacer de treinta segundos.
Tercero. El agente que oculta el fallo. El producto reintenta silenciosamente, ignora los errores o informa de un "error" sin especificar cuál. Solución: muestra cada error con el punto de fallo, el estado del sistema y opciones de recuperación concretas. La confianza se basa en fallos honestos, no en fallos ocultos.
Cada solución no implica un rediseño. Consiste en añadir o eliminar una única superficie hasta que los patrones funcionen correctamente. La mayoría de los errores de la interfaz de usuario del agente son problemas de patrones disfrazados de problemas de diseño.
Lista de verificación previa al lanzamiento (quince minutos)
Ejecuta esta lista en cualquier interfaz de usuario del agente antes de que llegue a un usuario real y detectarás los patrones que fallan en producción.
-
Definición de la tarea. Escribe un objetivo típico. ¿La entrada proporciona la estructura suficiente para que el agente pueda actuar en consecuencia?
-
Visibilidad de la autonomía. ¿Puedes saber en un segundo qué hará el agente sin preguntarle?
-
Superficie del plan. Ejecuta una tarea no trivial. ¿El agente muestra un plan estructurado y editable antes de actuar?
-
Transparencia en el progreso. ¿Son visibles las llamadas a herramientas y las ediciones de archivos, o el flujo es un resumen tipo chat?
-
Posibilidad de pausar. Intente pausar un agente en ejecución. ¿El botón de pausa es visible e inmediato?
-
Clasificación de confirmación. ¿Las acciones reversibles se ejecutan libremente, las acciones destructivas se bloquean con una ventana modal y las acciones catastróficas requieren una confirmación escrita?
-
Visibilidad de errores. Provocar un fallo. ¿La interfaz de usuario muestra el error con un estado y opciones de recuperación?
-
Posibilidad de deshacer. ¿Existe una ruta de deshacer clara dentro de los treinta segundos posteriores a una acción reversible?
-
Preservación del estado. Si falla un paso, reinténtelo. ¿Se conserva el trabajo anterior?
-
Registro de transferencia. Detenga una tarea a mitad de su ejecución. ¿Existe un volcado de estado que la siguiente persona pueda consultar?
-
Registro de uso de herramientas. ¿El registro está estructurado y es legible por máquina, o mezcla razonamientos y acciones?
-
Interruptor de apagado. ¿Siempre está visible o se oculta en un menú de configuración?
Un producto que cumple con estos doce requisitos tiene una interfaz de usuario funcional para el agente. El usuario sabrá qué está haciendo el agente y cómo detenerlo.
Preguntas frecuentes
¿Qué es el diseño de la interfaz de usuario para agentes de IA?
El diseño de la interfaz de usuario para agentes de IA es la disciplina que se encarga de crear interfaces para trabajadores de IA autónomos que reciben un objetivo, planifican los pasos y ejecutan herramientas sin necesidad de aprobación paso a paso. A diferencia de las interfaces de chat, las interfaces de agente son superficies de control con siete patrones principales: definición de tareas, controles de autonomía, superficies de planificación, flujos de progreso, puntos de confirmación, recuperación de errores y transferencias de agente.
¿En qué se diferencia la interfaz de usuario de un agente de IA de la de un chatbot?
La interfaz de un chatbot presupone una conversación paso a paso. La interfaz de un agente presupone que el agente se ejecuta en segundo plano, realiza múltiples llamadas a herramientas, modifica el estado e informa cuando se requiere la intervención humana. Las interfaces de agente necesitan superficies de planificación, flujos de progreso en tiempo real, puntos de confirmación e interruptores de parada, elementos que las interfaces de chat no requieren.
¿Cuáles son los patrones clave para diseñar interfaces de agentes de IA?
Siete patrones: definición de tareas, controles de autonomía, superficie de planificación, flujo de progreso, puntos de confirmación, recuperación de errores y transferencias de agentes. Adaptados a la tarea, calibrados para generar confianza y respaldados por una sólida integración de eficiencia del contexto en la capa del modelo.
¿Qué productos de agentes de IA tienen el mejor diseño de interfaz de usuario?
Claude Code destaca por su transparencia. Cursor destaca por su calibración de presencia. Devin destaca por su visibilidad del espacio de trabajo. Linear AI destaca por su integración. ChatGPT Operator destaca por su ejecución supervisada. Replit Agent, Bolt y v0 destacan por el patrón de lienzo de construcción. Ninguno implementa los siete patrones en su totalidad, por lo que la categoría aún está abierta.
¿Cómo se equilibra la autonomía y el control en la interfaz de usuario de un agente?
Haga de la autonomía una configuración visible y ajustable por sesión, por tarea y por herramienta. Clasifica las acciones en reversibles (ejecución libre con opción de deshacer), destructivas (bloqueo con ventana modal) y catastróficas (bloqueo con confirmación escrita). Visualiza el plan antes de la ejecución y el progreso durante la misma. Permite al usuario pausar, retomar el control o cancelar la ejecución en cualquier momento. La confianza se basa en la capacidad de anulación, no en la complejidad oculta.
El cambio que realmente impulsa las interfaces de usuario de los agentes
Una interfaz de usuario de agente no es un producto de chat con autonomía añadida, sino un nuevo modelo de interacción, y los productos que lo abordan de esta manera son los que triunfan.
La mayoría de los equipos tratan la interfaz de usuario de agente como una función adicional al chat. Toman un hilo de chat, añaden un indicador de "pensamiento", incorporan algunas burbujas de uso de herramientas y lo llaman agente. El resultado es un chatbot con latencia adicional. Cada fallo del chat se agrava porque el agente ahora se ejecuta durante más tiempo y causa más daño cuando falla.
El cambio consiste en tratar al agente como un trabajador autónomo y a la interfaz de usuario como su superficie de control. El hilo de chat se convierte en un elemento dentro de una interfaz más amplia con un tablero de planificación, un flujo de progreso, un interruptor de autonomía, una ventana modal de confirmación, una consola de errores y un artefacto de transferencia. El usuario ya no es el interlocutor del agente, sino su supervisor.
Si tu equipo está implementando un agente en el que los usuarios lo supervisan obsesivamente o confían ciegamente en él, el problema casi siempre radica en un patrón de comportamiento. La solución consiste en los siete patrones mencionados anteriormente, adaptados a la tarea, calibrados para generar confianza e integrados en una interfaz real (flujo de trabajo de diseño de IA) en lugar de añadidos superficiales.
Si deseas una interfaz de agente que genere confianza desde el primer uso, en lugar de a la décima, consulta la interfaz (contratar Brainy). AppBrainy ofrece interfaces de usuario completas para agentes, ideales para equipos que desarrollan herramientas autónomas. ClaudeBrainy ofrece flujos de trabajo (⟦MARCA0⟧), paquetes de habilidades y bibliotecas de indicaciones que optimizan la capa del agente para que la interfaz de usuario no tenga que compensar.
Want an agent UI that earns trust on the first run, not the tenth? Brainy ships ClaudeBrainy as a Skill pack and prompt library, and AppBrainy ships full agent product UI for teams building autonomous tools they want their users to actually use.
Get Started
