# Duas ferramentas que todo usuário de Claude Code precisa — Agentation e Readout > Author: Tony Lee > Published: 2026-03-03 > URL: https://tonylee.im/pt/blog/two-tools-every-claude-code-user-needs-agentation-readout/ > Reading time: 4 minutes > Language: pt > Tags: ai, claude-code, ferramentas-dev, frontend, workflow, agentation, readout ## Description Agentation oferece feedback visual pixel-perfect para agentes de IA via seletores CSS. Readout reproduz sessões do Claude Code como vídeo. Juntas, eliminam os dois maiores pontos de atrito no desenvolvimento frontend assistido por IA. ## Content 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](https://benji.org/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](https://readout.org) é 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. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/pt/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.