Duas ferramentas que todo usuário de Claude Code precisa — Agentation e Readout

Dois pontos de atrito me acompanham em toda sessão de frontend com Claude Code. Indicar ao agente exatamente qual elemento corrigir. E descobrir o que o agente realmente fez depois que a sessão termina.

Os dois problemas agora têm ferramentas dedicadas — criadas pela mesma pessoa.

Agentation: pare de descrever elementos de UI com palavras

A era de dizer ao agente de IA “arruma aquele botão azul” acabou.

Agentation é uma ferramenta de feedback visual que permite clicar em qualquer elemento na tela e extrair automaticamente seu seletor CSS e informações de posição. Em vez de digitar “o botão azul na barra lateral”, você entrega .sidebar > button.primary diretamente ao agente.

A diferença é imediata. Prompts que exigiam três ou quatro idas e vindas agora acertam de primeira.

O que faz funcionar

• Instalação em uma linha. npm i agentation e adicione um único componente a qualquer projeto React 18+.
• Quatro modos de saída. De Compact (seletor + memo) a Forensic (todos os estilos computados). Escolha o nível de detalhe que seu workflow precisa.
• Agent Sync via MCP. Conecte um servidor MCP para que o agente leia o feedback visual em tempo real.
• Depuração de animações. Pause animações CSS no meio de um frame e forneça feedback sobre estados intermediários — curvas de timing, posições de keyframes, tudo.
• Seleção de texto e áreas. Selecione texto ou arraste regiões vazias para dar feedback sobre espaçamento e layout, não apenas sobre elementos.

A ferramenta ultrapassou 170 mil downloads no npm. Um único tweet sobre ela atingiu 670 mil visualizações. Números assim geralmente significam que a ferramenta resolve um problema real.

Readout: reproduza sessões do Claude Code como um vídeo

Readout é um aplicativo nativo para macOS que exibe o ambiente de desenvolvimento e o estado de configuração do Claude Code em um único painel.

O recurso de destaque é o replay de sessão. Selecione qualquer sessão passada e percorra a linha do tempo. Prompts, chamadas de ferramentas e alterações em arquivos aparecem em ordem cronológica. Arquivos editados piscam em tempo real.

Se você projeta sistemas de agentes — ou simplesmente quer auditar o que aconteceu durante uma execução autônoma longa — a análise de logs de sessão é indispensável. Readout é o visualizador mais intuitivo que encontrei para isso.

Pontos-chave

• Download gratuito em readout.org. Sem necessidade de conta. Roda inteiramente em local.
• Controles de reprodução. Ajuste a velocidade ou avance manualmente entre eventos.
• Suporte a Codex. Compatível com sessões do Claude Code e do Codex.

O verdadeiro gargalo do frontend é a precisão do feedback, não o desempenho do modelo

Essa é a sacada contraintuitiva. Antes de culpar a capacidade da ferramenta de codificação com IA, avalie a qualidade do feedback que você está fornecendo.

Isole componentes com Storybook. Capture feedback visual com Agentation. Envie para o Claude Code. Com esse loop, o agente consegue lidar com a maioria das modificações de UI de forma autônoma.

O próprio site de documentação do Agentation foi construído inteiramente com esse workflow. Cada ajuste de timing de animação, cada refinamento de movimento do cursor — tudo foi feito através do loop de feedback visual.

Mesmo criador, mesma origem

As duas ferramentas foram criadas por Benji Taylor, Head de Design no Coinbase Base. Ele não é desenvolvedor de formação. Construiu essas ferramentas enquanto programava com IA porque o atrito era óbvio demais para ignorar.

“Por que estou explicando isso com palavras?” virou o Agentation. “Por que não consigo ver o que aconteceu?” virou o Readout. Ferramentas nascidas da perspectiva do usuário frequentemente se encaixam melhor nos workflows reais dos desenvolvedores do que ferramentas projetadas de cima para baixo.

Benji fundou a carteira Family, passou pela aquisição pela Aave e atualmente lidera design no Coinbase Base.

A mensagem

Usar bem as ferramentas de codificação com IA é necessário, mas não suficiente. Quando as ferramentas faltam, quem constrói o que está faltando é quem sai na frente.