Diseñar para agentes que miran
Los agentes de IA ya son usuarios de primera clase de tu producto. La restricción de diseño de 2026: toda superficie necesita un plano humano y un plano máquina, o pierdes la próxima integración con un agente.
El usuario ya no está solo frente a la pantalla. Mientras el humano lee el titular, un agente de IA está analizando el DOM, nombrando los botones, juzgando los selectores y decidiendo si tu producto es algo que puede manejar en nombre de otra persona. Diseñar para un solo usuario fue un lujo de 2024.
El cambio es estructural, no cosmético. Cursor llama a tus botones. Claude lee tus capturas de pantalla. Computer Use de Anthropic recorre tus formularios a golpe de clic. OpenAI Operator compra cosas en tu checkout. Cada superficie que toca un humano, ahora la toca también un agente, con criterios distintos sobre qué es "bueno".
Dos audiencias, una pantalla
Toda superficie de producto en 2026 tiene un plano humano y un plano máquina apilados en el mismo DOM.
El plano humano es lo que los diseñadores siempre han entregado. Flujo, gusto, jerarquía, la confianza que siente el usuario cuando un botón hace lo que promete su etiqueta. El plano máquina es la misma superficie leída por otro usuario. Selectores estables, affordances con nombre, HTML semántico, estado legible por máquinas, una estructura que un agente pueda analizar sin ambigüedad.
El error que cometen la mayoría de los equipos es asumir que los dos planos son el mismo plano con prioridades distintas. No lo son. Un botón puede verse perfecto para un humano y ser invisible para un agente si su nombre accesible es "haz clic aquí" o si su nodo del DOM es un div con un manejador de clic.
Cinco capas donde se nota que los agentes miran
El diseño con agentes mirando es una pila. Cinco capas, cada una un lugar donde el plano humano y el plano máquina se alinean o se pelean: superficies de herramientas, estabilidad de selectores, estructura legible por máquinas, legibilidad de estado, señales de confianza. Todo producto que diseña para el doble usuario toma decisiones en las cinco, aunque no las llame por estos nombres.
Capa 1: las superficies de herramientas son los botones con nombre que llaman los agentes
Una superficie de herramienta es cualquier capacidad del producto que un agente puede invocar por su nombre. Las llamadas a herramientas de Cursor, el uso de herramientas de Claude, las acciones de pantalla de Anthropic Computer Use, los comandos de ejecución de Vercel Sandbox. El agente no piensa en píxeles, piensa en verbos con nombre.
Cada acción principal de tu producto es una candidata a superficie de herramienta. Stripe es el estándar de oro, décadas anterior al momento de los agentes: cada acción tiene un affordance con nombre, documentado y predecible. customers.create hace lo que dice su nombre. Un producto cuyas acciones principales están enterradas en botones sin etiqueta es un producto que un agente no puede manejar sin adivinar.
La jugada de diseño es tratar cada acción importante como una herramienta con nombre. La etiqueta, la descripción ARIA, la ruta, el endpoint de la API y el handler del Model Context Protocol deberían llevar todos el mismo verbo. Agentes y humanos llegan al mismo affordance por puertas distintas.
Capa 2: la estabilidad de selectores es el contrato del diseñador con el agente
En 2024 un diseñador podía entregar <div onClick={handle}> y dar el trabajo por terminado. En 2026 ese mismo div rompe todas las integraciones con agentes el día que alguien refactoriza el contenedor.
La estabilidad de selectores consiste en asegurarse de que los affordances que un agente aprendió ayer sigan funcionando mañana. Tres decisiones. Usa HTML semántico donde exista, <button> y no <div>. Añade data-testid a todo lo que un agente o un test runner necesite encontrar. Mantén estables los nombres accesibles entre versiones, igual que mantienes estables los nombres de campos de tu API.
Linear es inusualmente bueno en esto porque se construyó primero como API y la UI es una superficie más entre muchas. Cada acción principal tiene un selector estable y un nombre estable. La mayoría del SaaS empresarial cambia el nombre de una clase en un refactor y rompe en silencio todas las integraciones que la tocaban. El agente no recibe un aviso de obsolescencia. Simplemente deja de funcionar.
Capa 3: la estructura legible por máquinas es el artefacto de diseño que solías saltarte
El agente que lee tu producto también lee tus etiquetas Open Graph, tu JSON-LD, tu sitemap y, cada vez más, tus archivos llms.txt y AGENTS.md. Cada uno de ellos es un artefacto de diseño en 2026, no una tarea de desarrollo.
AGENTS.md es el nuevo README, solo que la audiencia es un modelo. Le dice al agente qué hace tu producto, qué superficies son seguras y qué convenciones importan. JSON-LD le dice al agente qué es cada página. El endpoint del Model Context Protocol le dice al agente qué herramientas expone tu producto y cómo llamarlas.
Los diseñadores que creen que esto es territorio de ingeniería están desperdiciando la palanca. La jerarquía de lo que el agente ve primero, los nombres que das a tus herramientas, las descripciones que escribes para cada superficie, todo eso fija el modelo mental que el agente tiene de tu producto, igual que los encabezados y el microcopy fijan el del humano.
Capa 4: legibilidad de estado significa que una máquina puede saber qué acaba de pasar
Un spinner de carga está bien para un humano y es invisible para un agente sin ojos en la pantalla. Un estado de éxito comunicado solo con un destello verde es ilegible para cualquiera que no pueda ver el verde. Un modal que se cierra en silencio es un cambio de estado que no ocurrió, hasta donde el agente puede saber.
La legibilidad de estado hace que cada estado sea detectable por una máquina. La API de Linear devuelve un objeto de respuesta estable para cada acción. La máquina de estados de despliegue de Vercel tiene estados con nombre, READY, BUILDING, ERROR, con un payload estructurado en cada transición. Claude Code transmite cada llamada a herramienta y cada resultado como texto estructurado que el agente puede analizar.
La jugada de diseño es una capa de estado que el agente lee junto a la visual. Una región ARIA live que anuncia el nuevo estado. Un toast con un role="status" estructurado. Un objeto de respuesta que el agente recibe cuando llamó a la herramienta. El humano conserva el spinner, el agente recibe el evento estructurado. La misma postura que al diseñar para la latencia de la IA, que tiene que leerse en ambos planos a la vez.
Capa 5: las señales de confianza cierran el bucle después de que el agente actúa
Cuando un agente hace algo en nombre de un usuario, el usuario tiene que ver rápido qué hizo. La mayoría de los productos se saltan esta capa, y es la que decide si alguien confía lo bastante en la integración como para usarla dos veces.
La aprobación de diffs de Cursor es el ejemplo de manual. El agente edita archivos, el diff aparece en línea, el usuario acepta o rechaza por fragmento. Los artifacts de Claude entregan el mismo patrón con otra forma. GitHub Copilot Workspace es una superficie de doble panel de planificar y ejecutar con aceptar y rechazar en cada paso.
La señal de confianza no es decoración. Es la superficie que soporta la carga y hace sobrevivible la autonomía del agente. Un producto donde el agente actúa y el humano solo ve el estado posterior pierde la confianza la primera vez que algo sale mal.
Lo que realmente entregan los productos que lo hacen bien
El marco del doble usuario se ve mejor en productos ya lanzados. Análisis breves, cada uno concreto.
Cursor. La aprobación de diffs del agente es todo el bucle de confianza. Aceptar y rechazar en línea por fragmento, diff completo del archivo visible, el agente nunca hace commit sin consentimiento.
Claude artifacts. El panel de vista previa del artifact es el contrato entre agente y humano. El agente produce, el humano revisa, el artifact tiene una URL estable y una salida estructurada que el siguiente agente puede recoger.
Anthropic Computer Use. Las capturas de pantalla son el contrato entre el agente y el producto. Cada decisión de jerarquía visual y de etiquetas es ahora una decisión de legibilidad para agentes. Un botón de icono sin nombre accesible es un botón sobre el que el agente tiene que adivinar.
Vercel v0. El contrato entre el prompt humano y el render del agente es toda la superficie. El usuario describe, el agente renderiza, cada render es un artefacto revisable.
Linear y Stripe. Ambos nativos de IA en postura, con API primero por arquitectura. Cada acción principal tiene nombre, es estable y se puede llamar. Ambos entregaron esta disciplina antes de que llegara el momento de los agentes, por eso todo producto con agentes se integra con ellos sin fricción.
Replit Agent, Raycast y GitHub Copilot Workspace completan la alineación. Replit muestra el trabajo del agente como un espacio de trabajo editable en vivo. La paleta de comandos de Raycast es una superficie que humanos y agentes comparten de forma nativa. El patrón de doble panel de Copilot Workspace compromete el plan por escrito antes de actuar, lo que hace posible corregir a mitad de ejecución.
Para la biblioteca completa de patrones que comparten estos productos, el desglose de patrones de diseño de UI para agentes de IA la mapea, y la pieza sobre diseño de producto nativo de IA cubre la arquitectura de fondo.
Antipatrones que rompen las integraciones con agentes
Cinco modos de fallo aparecen una y otra vez. Cada uno es una decisión de diseño, no un descuido de ingeniería.
Sopa de divs. Todo lo clicable envuelto en <div> porque dar estilo es más fácil. Cada refactor rompe cada selector. Solución: HTML semántico por defecto con data-testid en todo lo que deba sobrevivir a un cambio de nombre de clase.
Affordances ocultos que requieren hover. El botón "editar" que solo aparece al pasar el ratón. Los agentes no hacen hover. Solución: affordances alcanzables por teclado que aparezcan en el DOM sin importar el estado del puntero.
Enlaces de "haz clic aquí". Cinco enlaces "haz clic aquí" en la misma página son cinco affordances idénticos para cualquier cosa que lea el DOM. Solución: texto de enlace que nombre el destino.
Estados de éxito transmitidos solo por color. Un borde verde, un destello verde, un icono verde. Nada de eso es detectable sin un modelo de visión. Solución: un evento estructurado, una región ARIA live o un objeto de respuesta junto a la señal visual.
Modales sin cierre localizable. La "X" que es un <svg> sin etiqueta. Solución: un botón de cierre con nombre accesible en cada modal y un comportamiento de escape documentado.
El patrón en los cinco: todo lo que depende de un ojo humano o de un puntero es invisible para la mitad de tus usuarios.
La auditoría de doble usuario
Pásala por cualquier superficie antes de lanzarla. Siete preguntas, tres minutos.
- Acción con nombre. Cada acción principal tiene un nombre accesible estable y un selector estable.
- Estado de máquina. Cada cambio de estado emite un evento estructurado.
- Diff visible. Cada cambio impulsado por un agente aparece como un artefacto revisable antes del commit.
- Ruta por teclado. Cada affordance solo con hover también es alcanzable sin puntero.
- Selector estable. Cada elemento interactivo tiene un
data-testido equivalente semántico que sobrevive a un refactor. - Humano en el bucle. Las acciones destructivas se bloquean con una confirmación, las catastróficas con doble confirmación, las reversibles se ejecutan con deshacer.
- Superficie documentada. El producto entrega un
AGENTS.mdo equivalente que le dice al agente qué hay aquí, qué es seguro y qué convenciones importan.
Una superficie que pasa siete de siete es completa para el doble usuario. Una superficie que falla tres o más se lanza con el agente encerrado fuera, por muy bueno que se vea el plano humano.
La auditoría es un hábito, no un ejercicio de una sola vez. Cada nueva superficie, cada refactor, cada rediseño de marca pasa por estas siete preguntas antes de lanzarse, igual que todo rediseño pasa por accesibilidad. La legibilidad para agentes es la nueva accesibilidad, y se acumula de la misma manera.
Para la versión de esta disciplina en la capa de entrada, mira superficies de prompt. Para el corolario de los estados vacíos, mira los estados vacíos son el producto. Para los cimientos, principios de diseño web explica por qué la estructura ahora es estética.
FAQ
¿Qué significa realmente diseñar para agentes de IA en 2026?
Tratar al agente como un usuario de primera clase de tu producto, no como un bot del que defenderse. El agente lee tu DOM, llama a tus botones y juzga tu interfaz con criterios que el humano nunca verá. Cada superficie necesita un plano humano y un plano máquina que compartan los mismos affordances, estado y vocabulario.
¿En qué se diferencia del diseño de accesibilidad?
La mayor parte se solapa. Nombres accesibles estables, HTML semántico, alcance por teclado, estado estructurado, todo eso es la disciplina de accesibilidad aplicada a un nuevo usuario. La capa nueva son las superficies de herramientas y la estructura legible por máquinas, incluidos endpoints MCP, archivos AGENTS.md y JSON-LD. Trata la accesibilidad como los cimientos y la legibilidad para agentes como el siguiente piso.
¿Necesito un servidor MCP para estar listo para agentes?
No el primer día. Un producto con un DOM limpio, acciones con nombre, selectores estables, estado estructurado y artefactos revisables ya está listo para agentes en un 80 por ciento. Un servidor MCP hace el trabajo del agente más rápido y fiable, pero entrega primero la estructura y el protocolo después.
Dos usuarios, una pantalla, un trabajo
El agente no es una amenaza para el diseño. Es un segundo usuario con necesidades distintas, y los productos que lo tratan así ya se están despegando de los que no.
La mayoría de los equipos sigue diseñando para un solo usuario. El brief de marca habla del humano, el moodboard retrata al humano, la investigación entrevista al humano. El agente aparece después del lanzamiento, cuando llega una solicitud de integración, y el equipo tiene que reconvertir selectores, nombres, estructura y confianza. Reconvertir siempre cuesta más que diseñar para ambos planos desde el primer día.
El cambio no es técnico, es una postura. Trata cada superficie como de doble usuario, pasa la auditoría antes de lanzar, dale al agente el mismo cuidado que le das al humano. Si te niegas, el producto de otro se llevará el tráfico de agentes, la alianza y los ingresos.
Si quieres un equipo que entregue marca y UI de producto con ambos planos diseñados al mismo tiempo en lugar de cosidos después, contrata a Brainy. Diseñamos el plano humano como siempre lo hemos hecho, y el plano máquina como el segundo usuario que realmente es.
Want a product where the agent loves your interface as much as the user does? Brainy ships AI-native product UI end to end, from the human plane to the machine plane and the trust handoff between them.
Get Started
