Projetando para Agentes que Estão Observando

O usuário não está mais sozinho atrás da tela. Enquanto o humano lê o título, um agente de IA está analisando o DOM, nomeando os botões, julgando os seletores e decidindo se o seu produto é algo que ele consegue operar em nome de outra pessoa. Projetar para um único usuário era um luxo de 2024.

A mudança é estrutural, não cosmética. O Cursor chama seus botões. O Claude lê seus screenshots. O Computer Use da Anthropic clica nos seus formulários. O OpenAI Operator compra coisas no seu checkout. Toda superfície que um humano toca, um agente agora toca também, com critérios diferentes para o que significa ser bom.

Dois públicos, uma tela

Toda superfície de produto em 2026 tem um plano humano e um plano de máquina empilhados no mesmo DOM.

O plano humano é o que designers sempre entregaram. Fluxo, bom gosto, hierarquia, a confiança que o usuário sente quando um botão faz o que o rótulo promete. O plano de máquina é a mesma superfície lida por outro usuário. Seletores estáveis, affordances nomeadas, HTML semântico, status legível por máquina, uma estrutura que um agente consegue interpretar sem ambiguidade.

O erro da maioria das equipes é assumir que os dois planos são o mesmo plano com prioridades diferentes. Não são. Um botão pode parecer perfeito para um humano e ser invisível para um agente se o nome acessível dele for "clique aqui" ou se o nó do DOM for uma div com um click handler.

Cinco camadas onde o agente observando aparece

Observação por agentes é uma pilha. Cinco camadas, cada uma um ponto onde o plano humano e o plano de máquina se alinham ou brigam: superfícies de ferramentas, estabilidade de seletores, estrutura legível por máquina, legibilidade de status, sinais de confiança. Todo produto que projeta para o usuário duplo toma decisões nas cinco, mesmo sem chamá-las por esses nomes.

Camada 1: superfícies de ferramentas são os botões nomeados que os agentes chamam

Uma superfície de ferramenta é qualquer capacidade do produto que um agente pode invocar pelo nome. As chamadas de ferramenta do Cursor, o tool use do Claude, as ações de tela do Computer Use da Anthropic, os comandos de execução do Vercel Sandbox. O agente não pensa em pixels, pensa em verbos nomeados.

Toda ação primária do seu produto é uma candidata a superfície de ferramenta. A Stripe é o padrão-ouro, décadas mais velha que o momento dos agentes: toda ação tem uma affordance nomeada, documentada e previsível. customers.create faz o que o nome diz. Um produto cujas ações primárias estão enterradas em botões sem rótulo é um produto que um agente não consegue operar sem chutar.

O movimento de design é tratar toda ação importante como uma ferramenta nomeada. O rótulo, a descrição ARIA, a rota, o endpoint da API e o handler do Model Context Protocol devem carregar o mesmo verbo. Agentes e humanos então alcançam a mesma affordance por portas diferentes.

Camada 2: estabilidade de seletores é o contrato do designer com o agente

Em 2024 um designer podia entregar <div onClick={handle}> e dar o trabalho por encerrado. Em 2026 essa mesma div quebra todas as integrações com agentes no dia em que alguém refatora o wrapper.

Estabilidade de seletores é garantir que as affordances que um agente aprendeu ontem ainda funcionem amanhã. Três decisões. Use HTML semântico onde ele existir, <button> e não <div>. Adicione data-testid a qualquer coisa que um agente ou test runner precise encontrar. Mantenha os nomes acessíveis estáveis entre releases, do mesmo jeito que você mantém estáveis os nomes de campos da API.

O Linear é excepcionalmente bom nisso porque foi construído API-first e a UI é só uma de várias superfícies. Toda ação primária tem um seletor estável e um nome estável. A maioria dos SaaS corporativos troca o nome de uma classe numa refatoração e quebra em silêncio todas as integrações que dependiam dela. O agente não recebe aviso de depreciação. Ele simplesmente para de funcionar.

Camada 3: estrutura legível por máquina é o artefato de design que você costumava pular

O agente que lê seu produto também lê suas tags Open Graph, seu JSON-LD, seu sitemap e, cada vez mais, seus arquivos llms.txt e AGENTS.md. Cada um deles é um artefato de design em 2026, não uma tarefa chata de dev.

AGENTS.md é o novo README, só que o público é um modelo. Ele diz ao agente o que seu produto faz, quais superfícies são seguras e quais convenções importam. O JSON-LD diz ao agente o que cada página é. O endpoint do Model Context Protocol diz ao agente quais ferramentas seu produto expõe e como chamá-las.

Designers que acham que isso é território da engenharia estão desperdiçando alavancagem. A hierarquia do que o agente vê primeiro, os nomes que você dá às suas ferramentas, as descrições que escreve para cada superfície, tudo isso define o modelo mental do agente sobre o seu produto, do mesmo jeito que títulos e microcopy definem o do humano.

Camada 4: legibilidade de status significa que uma máquina sabe o que acabou de acontecer

Um spinner de carregamento é suficiente para um humano e invisível para um agente sem olhos na tela. Um estado de sucesso comunicado apenas por um flash verde é ilegível para quem não enxerga verde. Um modal que fecha em silêncio é uma mudança de estado que não aconteceu, do ponto de vista do agente.

Legibilidade de status torna todo estado detectável por uma máquina. A API do Linear retorna um objeto de resposta estável para cada ação. A máquina de estados de deploy da Vercel tem estados nomeados, READY, BUILDING, ERROR, com um payload estruturado em cada transição. O Claude Code transmite cada chamada de ferramenta e resultado como texto estruturado que o agente consegue interpretar.

O movimento de design é uma camada de status que o agente lê ao lado da visual. Uma região ARIA live que anuncia o novo estado. Um toast com role="status" estruturado. Um objeto de resposta que o agente recebe de volta quando chamou a ferramenta. O humano fica com o spinner, o agente recebe o evento estruturado. É a mesma postura de projetar para a latência da IA, que precisa ser lida nos dois planos ao mesmo tempo.

Camada 5: sinais de confiança fecham o ciclo depois que o agente age

Quando um agente faz algo em nome de um usuário, o usuário precisa ver o que ele fez, rápido. A maioria dos produtos pula essa camada, e é ela que decide se alguém confia na integração o bastante para usá-la duas vezes.

A aprovação de diff do Cursor é o exemplo de livro-texto. O agente edita arquivos, o diff aparece inline, o usuário aceita ou rejeita por trecho. Os artifacts do Claude entregam o mesmo padrão em outro formato. O GitHub Copilot Workspace é uma superfície de painel duplo de planejar e executar, com aceitar-rejeitar a cada passo.

O sinal de confiança não é decoração. É a superfície estrutural que torna a autonomia do agente sobrevivível. Um produto em que o agente age e o humano só vê o estado final perde a confiança na primeira vez que algo dá errado.

O que os produtos que fazem isso bem realmente entregam

O enquadramento de duplo usuário fica mais fácil de enxergar em produtos entregues. Análises curtas, cada uma específica.

Cursor. A aprovação de diff do agente é o ciclo de confiança inteiro. Aceitar e rejeitar inline por trecho, diff do arquivo completo visível, o agente nunca faz commit sem consentimento.

Claude artifacts. O painel de preview do artifact é o contrato entre agente e humano. O agente produz, o humano revisa, o artifact tem uma URL estável e uma saída estruturada que o próximo agente pode retomar.

Anthropic Computer Use. Screenshots são o contrato entre agente e produto. Toda decisão de hierarquia visual e de rótulo agora é uma decisão de legibilidade para agentes. Um botão de ícone sem nome acessível é um botão que o agente precisa adivinhar.

Vercel v0. O contrato entre prompt humano e renderização do agente é a superfície inteira. O usuário descreve, o agente renderiza, cada render é um artefato revisável.

Linear e Stripe. Ambos AI-native na postura, API-first na arquitetura. Toda ação primária é nomeada, estável, chamável. Ambos entregaram essa disciplina antes do momento dos agentes chegar, e por isso todo produto de agente se integra com eles sem atrito.

Replit Agent, Raycast e GitHub Copilot Workspace completam a lista. O Replit expõe o trabalho do agente como um workspace editável ao vivo. A paleta de comandos do Raycast é uma superfície que humanos e agentes compartilham nativamente. O padrão de painel duplo de planejar e executar do Copilot Workspace registra o plano por escrito antes da ação, tornando possível a correção no meio da execução.

Para a biblioteca completa de padrões que esses produtos compartilham, o artigo sobre padrões de UI para agentes de IA faz o mapa, e o texto sobre design de produto AI-native cobre a arquitetura por baixo.

Anti-padrões que quebram integrações com agentes

Cinco modos de falha aparecem o tempo todo. Cada um é uma decisão de design, não um descuido de engenharia.

Sopa de divs. Tudo que é clicável embrulhado em <div> porque estilizar é mais fácil. Cada refatoração quebra todos os seletores. Correção: HTML semântico por padrão, com data-testid em tudo que precisa sobreviver a uma mudança de nome de classe.

Affordances escondidas que exigem hover. O botão "editar" que só aparece ao passar o mouse. Agentes não fazem hover. Correção: affordances alcançáveis por teclado que aparecem no DOM independentemente do estado do ponteiro.

Links "clique aqui". Cinco links "clique aqui" na mesma página são cinco affordances idênticas para qualquer coisa que leia o DOM. Correção: texto de link que nomeia o destino.

Estados de sucesso transmitidos só por cor. Uma borda verde, um flash verde, um ícone verde. Nada disso é detectável sem um modelo de visão. Correção: um evento estruturado, uma região ARIA live ou um objeto de resposta junto do sinal visual.

Popups modais sem fechar encontrável. O "X" que é um <svg> sem rótulo. Correção: um botão de fechar com nome acessível em todo modal e um comportamento de escape documentado.

O padrão nos cinco: tudo que depende de um olho humano ou de um ponteiro é invisível para metade dos seus usuários.

A auditoria de duplo usuário

Rode isto em qualquer superfície antes de ela ir ao ar. Sete perguntas, três minutos.

1. Ação nomeada. Toda ação primária tem um nome acessível estável e um seletor estável.
2. Estado de máquina. Toda mudança de estado emite um evento estruturado.
3. Diff visível. Toda mudança feita por agente aparece como um artefato revisável antes do commit.
4. Caminho por teclado. Toda affordance só de hover também é alcançável sem ponteiro.
5. Seletor estável. Todo elemento interativo tem um data-testid ou equivalente semântico que sobrevive a uma refatoração.
6. Humano no ciclo. Ações destrutivas têm trava, ações catastróficas têm trava dupla, ações reversíveis rodam com desfazer.
7. Superfície documentada. O produto entrega um AGENTS.md ou equivalente dizendo ao agente o que há aqui, o que é seguro e quais convenções importam.

Uma superfície que passa em sete de sete está completa para o duplo usuário. Uma superfície que falha em três ou mais está sendo entregue com o agente trancado do lado de fora, não importa o quão bom o plano humano pareça.

A auditoria é um hábito, não um exercício único. Toda nova superfície, toda refatoração, todo redesign de marca passa por essas sete perguntas antes de ir ao ar, do mesmo jeito que todo redesign passa por acessibilidade. Legibilidade para agentes é a nova acessibilidade, e ela se acumula da mesma forma.

Para a versão dessa disciplina na camada de entrada, veja superfícies de prompt. Para o corolário do estado vazio, veja estados vazios são o produto. Para a base por baixo de tudo, princípios de web design explica por que estrutura agora é estética.

FAQ

O que significa, na prática, projetar para agentes de IA em 2026?

Tratar o agente como um usuário de primeira classe do seu produto, não como um bot de quem se defender. O agente lê seu DOM, chama seus botões e julga sua interface por critérios que o humano nunca vai ver. Toda superfície precisa de um plano humano e um plano de máquina que compartilhem as mesmas affordances, o mesmo estado e o mesmo vocabulário.

Como isso é diferente de design de acessibilidade?

A maior parte se sobrepõe. Nomes acessíveis estáveis, HTML semântico, alcance por teclado, status estruturado, tudo isso é a disciplina de acessibilidade aplicada a um novo usuário. A camada nova são as superfícies de ferramentas e a estrutura legível por máquina, incluindo endpoints MCP, arquivos AGENTS.md e JSON-LD. Trate a acessibilidade como a fundação e a legibilidade para agentes como o próximo andar.

Preciso de um servidor MCP para estar pronto para agentes?

Não no primeiro dia. Um produto com DOM limpo, ações nomeadas, seletores estáveis, status estruturado e artefatos revisáveis já está 80 por cento pronto para agentes. Um servidor MCP torna o trabalho do agente mais rápido e confiável, mas entregue a estrutura primeiro e o protocolo depois.

Dois usuários, uma tela, um trabalho

O agente não é uma ameaça ao design. É um segundo usuário com necessidades diferentes, e os produtos que o tratam assim já estão se afastando dos que não tratam.

A maioria das equipes ainda projeta para um usuário só. O brief de marca fala do humano, o moodboard mostra o humano, a pesquisa entrevista o humano. O agente aparece depois do lançamento, quando chega um pedido de integração, e a equipe precisa adaptar seletores, nomes, estrutura, confiança. Adaptar depois sempre custa mais do que projetar para os dois planos desde o primeiro dia.

A mudança não é técnica, é de postura. Trate toda superfície como de duplo usuário, rode a auditoria antes de ir ao ar, dê ao agente o mesmo cuidado que você dá ao humano. Se recusar, e o produto de outra pessoa fica com o tráfego de agentes, a parceria e a receita.

Se você quer um time que entrega marca e UI de produto com os dois planos projetados ao mesmo tempo, em vez de costurados depois, contrate a Brainy. Projetamos o plano humano do jeito que sempre fizemos, e o plano de máquina como o segundo usuário que ele realmente é.