# Dos herramientas imprescindibles para todo usuario de Claude Code — Agentation y Readout > Author: Tony Lee > Published: 2026-03-03 > URL: https://tonylee.im/es/blog/two-tools-every-claude-code-user-needs-agentation-readout/ > Reading time: 4 minutes > Language: es > Tags: ai, claude-code, herramientas-dev, frontend, workflow, agentation, readout ## Description Agentation proporciona a los agentes IA retroalimentación visual precisa mediante selectores CSS. Readout reproduce sesiones de Claude Code como un vídeo. Juntas eliminan los dos mayores puntos de fricción del desarrollo frontend asistido por IA. ## Content Dos puntos de fricción me acompañan en cada sesión de frontend con Claude Code. Indicar al agente exactamente qué elemento modificar. Y averiguar qué hizo realmente el agente después de que la sesión termine. Ambos problemas tienen ahora herramientas dedicadas — creadas por la misma persona. ## Agentation: deja de describir elementos de UI con palabras La era de decirle a un agente IA «arregla ese botón azul» ha terminado. [Agentation](https://benji.org/agentation) es una herramienta de retroalimentación visual que permite hacer clic en cualquier elemento de la pantalla y extraer automáticamente su selector CSS e información de posición. En lugar de escribir «el botón azul de la barra lateral», entregas `.sidebar > button.primary` directamente al agente. La diferencia es inmediata. Los prompts que requerían tres o cuatro iteraciones ahora aciertan a la primera. ### Lo que lo hace funcionar - **Instalación en una línea.** `npm i agentation` y añade un solo componente a cualquier proyecto React 18+. - **Cuatro modos de salida.** Desde Compact (selector + memo) hasta Forensic (todos los estilos calculados). Elige el nivel de detalle que necesite tu flujo de trabajo. - **Agent Sync vía MCP.** Conecta un servidor MCP para que el agente lea la retroalimentación visual en tiempo real. - **Depuración de animaciones.** Pausa animaciones CSS a mitad de fotograma y proporciona retroalimentación sobre estados intermedios — curvas de temporización, posiciones de keyframes, todo. - **Selección de texto y áreas.** Selecciona texto o arrastra regiones vacías para dar retroalimentación sobre espaciado y diseño, no solo sobre elementos. La herramienta ha superado las 170.000 descargas en npm. Un solo tuit sobre ella alcanzó 670.000 visualizaciones. Cifras así suelen significar que la herramienta resuelve un problema real. ## Readout: reproduce sesiones de Claude Code como un vídeo [Readout](https://readout.org) es una aplicación nativa de macOS que muestra el entorno de desarrollo y el estado de configuración de Claude Code en un único panel. La funcionalidad más destacada es la reproducción de sesiones. Selecciona cualquier sesión pasada y recorre la línea temporal. Los prompts, llamadas a herramientas y cambios en archivos aparecen en orden cronológico. Los archivos editados parpadean en tiempo real. Si diseñas sistemas de agentes — o simplemente quieres auditar lo que ocurrió durante una ejecución autónoma prolongada — el análisis de logs de sesión es imprescindible. Readout es el visor más intuitivo que he encontrado para esto. ### Datos clave - **Descarga gratuita** desde readout.org. Sin necesidad de cuenta. Funciona completamente en local. - **Controles de reproducción.** Ajusta la velocidad o avanza manualmente entre eventos. - **Soporte para Codex.** Compatible con sesiones de Claude Code y Codex. ## El verdadero cuello de botella del frontend es la precisión del feedback, no el rendimiento del modelo Esta es la idea contraintuitiva. Antes de culpar a la capacidad de la herramienta de codificación IA, examina la calidad de la retroalimentación que proporcionas. Aísla componentes con Storybook. Captura retroalimentación visual con Agentation. Pásalo a Claude Code. Con este bucle, el agente puede encargarse de la mayoría de modificaciones de UI de forma autónoma. El propio sitio de documentación de Agentation fue construido íntegramente con este flujo de trabajo. Cada ajuste de temporización de animación, cada refinamiento del movimiento del cursor — todo se realizó a través del bucle de retroalimentación visual. ## Mismo creador, mismo origen Ambas herramientas fueron creadas por Benji Taylor, responsable de diseño en Coinbase Base. No es desarrollador de profesión. Construyó estas herramientas mientras programaba con IA porque la fricción era demasiado evidente como para ignorarla. «¿Por qué tengo que explicar esto con palabras?» se convirtió en Agentation. «¿Por qué no puedo ver qué pasó?» se convirtió en Readout. Las herramientas nacidas desde la perspectiva del usuario a menudo encajan mejor en los flujos de trabajo reales que las diseñadas de arriba hacia abajo. Benji fundó previamente la cartera Family y pasó por la adquisición de Aave antes de ocupar su puesto actual en Coinbase Base. ## La conclusión Usar bien las herramientas de codificación IA es necesario pero no suficiente. Cuando las herramientas escasean, quienes construyen lo que falta son los que avanzan. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/es/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.