Dos herramientas que todo usuario de Claude Code necesita — Agentation y Readout

Dos problemas me persiguen en cada sesión de frontend con Claude Code. Decirle al agente exactamente qué elemento arreglar. Y descubrir qué hizo el agente después de que la sesión termina.

Los dos problemas ahora tienen herramientas dedicadas — y las hizo la misma persona.

Agentation: ya no describas elementos de UI con palabras

Se acabó la era de decirle a un agente de IA “arregla ese botón azul”.

Agentation es una herramienta de retroalimentación visual que te 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 del sidebar”, le pasas .sidebar > button.primary directo al agente.

La diferencia es inmediata. Los prompts que necesitaban tres o cuatro idas y vueltas ahora funcionan a la primera.

Por qué funciona

• Se instala en una línea. npm i agentation y agrega un componente a cualquier proyecto React 18+.
• Cuatro modos de salida. Desde Compact (selector + nota) hasta Forensic (todos los estilos computados). Elige el nivel de detalle que necesites.
• Agent Sync con 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 cuadro y da retroalimentación sobre estados intermedios — curvas de timing, posiciones de keyframes, todo.
• Selección de texto y áreas. Selecciona texto o arrastra zonas vacías para dar retroalimentación sobre espaciado y layout, no solo sobre elementos.

La herramienta superó las 170,000 descargas en npm. Un solo tweet llegó a 670,000 vistas. Números así generalmente significan que la herramienta resuelve un problema real.

Readout: reproduce sesiones de Claude Code como un video

Readout es una app nativa de macOS que muestra el entorno de desarrollo y el estado de configuración de Claude Code en un solo panel.

La función más impresionante es la reproducción de sesiones. Selecciona cualquier sesión pasada y recorre la línea de tiempo. Los prompts, llamadas a herramientas y cambios de archivos aparecen en orden cronológico. Los archivos editados parpadean en tiempo real.

Si diseñas sistemas de agentes — o simplemente quieres revisar qué pasó durante una ejecución autónoma larga — el análisis de logs de sesión es indispensable. Readout es el visualizador más intuitivo que he encontrado.

Datos clave

• Descarga gratuita en readout.org. Sin cuenta necesaria. Corre completamente en local.
• Controles de reproducción. Ajusta la velocidad o avanza manualmente entre eventos.
• Soporte para Codex. Funciona con sesiones de Claude Code y Codex.

El cuello de botella real del frontend es la precisión del feedback, no el rendimiento del modelo

Esta es la idea contraintuitiva. Antes de echarle la culpa a la capacidad de la herramienta de IA, revisa la calidad de la retroalimentación que estás dando.

Aísla componentes con Storybook. Captura retroalimentación visual con Agentation. Pásala a Claude Code. Con este loop, el agente puede manejar la mayoría de las modificaciones de UI por su cuenta.

El sitio de documentación de Agentation se construyó completamente con este flujo de trabajo. Cada ajuste de timing de animación, cada refinamiento del movimiento del cursor — todo se hizo a través del loop de retroalimentación visual.

Mismo creador, mismo punto de partida

Las dos herramientas las creó Benji Taylor, jefe 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 obvia para ignorarla.

“¿Por qué tengo que explicar esto con palabras?” se volvió Agentation. “¿Por qué no puedo ver qué pasó?” se volvió Readout. Las herramientas que nacen de la perspectiva del usuario muchas veces encajan mejor en los flujos de trabajo reales que las diseñadas de arriba hacia abajo.

Benji fundó la billetera Family, pasó por la adquisición de Aave y ahora lidera diseño en Coinbase Base.

Lo importante

Usar bien las herramientas de codificación con IA es necesario pero no suficiente. Cuando las herramientas no alcanzan, los que construyen lo que falta son los que van adelante.