[Serviço gratuito #1] Corrigindo designs de IA com Agentation

Pedir para a IA criar um site já não é difícil. A verdadeira dificuldade começa depois: quando você exibe a tela pronta e diz: “Esse botão está meio estranho”.

“O botão azul no centro.” → A IA corrige o botão errado. “Não, o que está acima dele.” → Ela mexe em outra coisa. “O segundo de cima, ao lado de Login…” → No fim, você abre o código por conta própria.

A causa é simples. Pessoas olham para a tela; a IA olha para o código. Ao tentar ligar duas perspectivas diferentes com palavras, surgem lacunas. Agentation foi criado para preenchê-las.

Esta série apresenta, um por um, serviços que podem ser usados de graça. Vamos verificar o que fazem, até onde vai o plano gratuito e quais condições se aplicam. O primeiro é o Agentation.

Aponte na tela e traduza para uma linguagem que a IA entende

Agentation é uma pequena barra de ferramentas que fica sobre o site que você está criando. Clique no ponto que não agradou e deixe uma nota como “O espaçamento está apertado demais”; ela será organizada em um formato que uma ferramenta de programação com IA consegue executar diretamente.

O ponto central é que ele “organiza” o feedback. Com um clique, informações como estas são adicionadas automaticamente.

• Um seletor CSS que encontra o elemento no código (um endereço que identifica um elemento da tela no código) — body > main > .hero-section > button.cta
• O arquivo-fonte e o número da linha que criaram o elemento — src/components/Button.tsx:42
• A hierarquia de componentes React — App > LandingPage > HeroSection > CTAButton
• Posição e tamanho, texto ao redor e os valores atuais de cor, fonte e espaçamento

Ao clicar em Copiar, informações nesse formato vão para a área de transferência.

## Page Feedback: /landing
**Viewport:** 1440×900

### 1. button
**Location:** body > main > .hero-section > button.cta
**Source:** src/components/Button.tsx:42
**React:** App > LandingPage > HeroSection > CTAButton
**Feedback:** Button is cut off on mobile viewport

A quantidade de informações é ajustável. Há quatro níveis: Compact, Standard, Detailed e Forensic; o exemplo usa o padrão, Standard. Quando você precisa descobrir por que espaçamento ou cores aparecem daquele jeito, mude para Forensic para incluir também os valores CSS aplicados.

A linha Source:—o arquivo-fonte e o número da linha—só é adicionada no modo de desenvolvimento. Vite, Next.js, webpack e Turbopack são compatíveis, embora a configuração do bundler possa omitir essa informação. Sem ela, ainda dá para encontrar o local usando o seletor e a hierarquia de componentes; a precisão apenas cai um pouco.

Cole isso no Claude Code ou no chat do Cursor e pronto. A IA não precisa mais adivinhar qual é o “botão azul”: ela recebe o endereço e vai direto para aquele arquivo e linha.

Não dá para desenhar uma seta na captura de tela?

É um método comum e não é inútil. Mas uma captura é apenas uma imagem e não está ligada ao código. A IA precisa procurar novamente onde o botão da imagem está no código e pode acabar corrigindo outro botão parecido.

O Agentation envia uma string pesquisável, não uma imagem. Com o seletor e o nome da classe, a IA pesquisa a base de código e encontra o local exato. Essa é a diferença decisiva em relação a uma imagem com uma seta.

Há cinco formas de apontar elementos

O alvo nem sempre é um único botão, por isso existem métodos diferentes.

• Clique no elemento — Aponte para um botão, cartão ou imagem.
• Seleção de texto — Use para corrigir erros de digitação ou textos. A frase selecionada entra entre aspas no resultado, permitindo que a IA a pesquise diretamente no código.
• Seleção múltipla — Arraste sobre vários elementos de uma vez. Serve para pedidos como “Ajuste o espaçamento destes três cartões”.
• Seleção de área — Espaços vazios também podem ser selecionados. Assim você pode dizer “Esta área está vazia demais”.
• Pausar animação — Pressione a tecla P para pausar animações CSS, JavaScript e de vídeo. Congele o momento que passa rápido demais e faça a observação. Algumas bibliotecas de animação de terceiros não param completamente.

Também vale memorizar alguns atalhos. Cmd+Shift+F (Ctrl+Shift+F no Windows) alterna o modo de feedback; C copia, X apaga tudo e H oculta os marcadores.

Modo de layout para mudar a disposição

Pedidos como “Mova este cartão para a direita e coloque um formulário abaixo” ficam vagos quando descritos em palavras. Pressione L para mudar a barra para o modo de layout. Em vez de explicar a disposição, você a mostra movendo os elementos diretamente.

• Arraste mais de 65 elementos da paleta de componentes para a tela.
• Passe o mouse sobre uma seção existente para ver o rótulo do seletor CSS e arraste para alterar a ordem.
• Ative “Novo wireframe de página” para deixar o design atual esmaecido e desenhar em uma tela vazia. Você também pode desenhar vendo a tela original por meio do controle de opacidade.
• Há também um campo separado para anotar a finalidade da página.

Cada alteração feita assim é enviada com um dos tipos feedback, placement ou rearrange associado a cada anotação. A IA recebe coordenadas e dimensões, não uma frase como “Mova para o centro”. O modo de layout entrou no Agentation 3.0, então verifique a versão; como os demais recursos, funciona apenas no desktop. Mais detalhes estão em Artigo oficial do blog.

Instalação sem chamar um desenvolvedor

Se você usa Claude Code, uma linha no terminal é suficiente.

npx skills add benjitaylor/agentation

Depois, digite /agentation no Claude Code; ele detecta o framework e conclui a instalação. Mesmo sem saber ler código, você chega até aqui.

Para fazer manualmente, instale o pacote e adicione uma linha de componente.

npm install agentation -D

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  );
}

A condição NODE_ENV === 'development' significa “mostrar a barra apenas durante o desenvolvimento”. É uma proteção para escondê-la dos visitantes do serviço em produção; não a deixe de fora.

Os métodos de instalação e as opções de configuração por framework estão organizados na documentação Install e Features de Site oficial.

Se até copiar e colar é cansativo, conecte pelo MCP

Anotar, copiar e colar no chat. Repetir isso também vira trabalho. Ao conectar via MCP (Model Context Protocol, um padrão para ferramentas de IA trocarem dados com programas externos), essa ida e volta desaparece. A IA busca as notas automaticamente. Além da barra, é preciso conectar o servidor agentation-mcp e ativar a sincronização nas configurações.

A partir daqui, há três formas de usar o recurso.

• Mãos livres — Quando surge uma nota nova, a IA a verifica, corrige e marca como resolvida automaticamente. Você só continua apontando problemas enquanto observa a tela.
• Crítica (Critique) — Por outro lado, a IA abre o navegador, percorre a página e deixa os problemas de design como notas. Você os revisa.
• Autônomo — A IA identifica os problemas e também faz as correções.

As duas últimas opções exigem que a IA abra o navegador diretamente, então você precisa instalar a skill agent-browser separadamente. Se estiver começando, é mais seguro iniciar por Mãos livres.

Também é importante que as notas conectadas deixam de ser unidirecionais. Se a IA perguntar na nota “Devo usar 24px ou 16px?”, você responde no mesmo lugar. Estados como pendente, em revisão, resolvido e adiado também ficam registrados. Não é apenas enviar e terminar: vira uma conversa.

A propósito, a estrutura de dados dessas notas trocadas está publicada como AFS (Annotation Format Schema, esquema de formato de anotações). Os criadores a descrevem como “comentários inteligentes do Figma anexados a um aplicativo em execução”.

Condições para conhecer antes de começar

Para não falar apenas das coisas boas, vamos deixar os limites claros.

**Você não pode corrigir o site de outra pessoa.**É uma ferramenta instalada no projeto que você está criando e usada enquanto o servidor de desenvolvimento roda no seu computador. Não é uma extensão para abrir qualquer site e mudar seu design.

**É necessário React 18 ou posterior.**Se você pedir à IA para criar um aplicativo web, provavelmente ele será feito com React, mas confirme. A ferramenta também funciona sem problemas em frameworks SSR/SSG como Next.js, Remix e Astro. Astro não é baseado em React, mas funciona em uma configuração que adiciona React.

**Exclusivo para desktop.**Como a ferramenta depende de passar o mouse e arrastar para selecionar alvos e áreas, é praticamente impossível operá-la no celular. Para investigar problemas mobile, reduza a largura de uma janela de navegador no desktop.

**Não há imagens no resultado.**Tudo é texto. Para feedback sobre cores ou atmosfera, que são difíceis de expressar em palavras, capturas de tela ainda são melhores.

**Não é possível apontar dentro de um iframe.**Isso inclui widgets de pagamento e mapas incorporados externamente: áreas onde a tela inteira de outro site foi inserida. É uma limitação inevitável da política de segurança do navegador.

**As notas não duram muito.**Sem conexão com MCP, elas são salvas no navegador por página e desaparecem após 7 dias. Se pretende acumulá-las para tratar depois, é melhor conectar.

O preço não pesa. O uso interno é gratuito para pessoas e empresas. Só é necessária uma licença separada para redistribuição ou oferta comercial. Segue a PolyForm Shield 1.0.0.

Resumo

• Agentation é uma barra que traduz a posição clicada na tela em um endereço de código que a IA entende.
• O seletor e a hierarquia de componentes são adicionados automaticamente; no modo de desenvolvimento, o arquivo-fonte e o número da linha também são incluídos, para que a IA não precise adivinhar qual é “aquele botão”.
• Você pode apontar problemas de cinco formas: clique, seleção de texto, seleção múltipla, seleção de área e pausa de animação.
• No modo de layout da tecla L, você pode arrastar componentes, mudar a ordem das seções e mostrar a própria disposição (3.0 ou posterior).
• Com Claude Code, basta executar npx skills add benjitaylor/agentation e depois /agentation uma vez para concluir a instalação.
• Conectado ao MCP, o recurso permite que a IA busque as notas diretamente, sem copiar e colar, e também faça perguntas e receba respostas.
• Porém, ele só pode ser usado em um navegador desktop enquanto seu projeto React 18+ roda com um servidor de desenvolvimento.

Se você se cansa de explicar as mesmas coisas, experimente apontar para elas com o dedo. O site oficial é https://www.agentation.com/. Na próxima edição, vamos explorar outro serviço gratuito.

Continue lendo

• Como fazer Vibe Coding corretamente: até onde você deve ler o código?
• Como evitar problemas de Vibe Coding desde o início usando arquivos de regras