Two Tools Every Claude Code User Needs - Agentation and Readout

Two pain points have followed me through every Claude Code frontend session. Telling the agent exactly which element to fix. And figuring out what the agent actually did after a session ends.

Both problems now have dedicated tools — built by the same person.

Agentation: Stop Describing UI Elements in Words

The era of telling an AI agent “fix that blue button” is over.

Agentation is a visual feedback tool that lets you click any element on the screen and automatically extracts its CSS selector and position information. Instead of typing “the blue button in the sidebar,” you hand .sidebar > button.primary directly to the agent.

The difference is immediate. Prompts that used to take three or four rounds of back-and-forth corrections now land on the first try.

What Makes It Work

• One-line install. npm i agentation and add a single component to any React 18+ project.
• Four output modes. Compact (selector + memo) through Forensic (every computed style). Pick the detail level your workflow needs.
• Agent Sync via MCP. Connect an MCP server so the agent reads visual feedback in real time.
• Animation debugging. Pause CSS animations mid-frame and provide feedback on intermediate states — timing curves, keyframe positions, the works.
• Text and area selection. Select text or drag empty regions to give layout feedback on whitespace and spacing, not just elements.

The tool has passed 170K npm downloads. A single tweet about it hit 670K views. Numbers like that usually mean the tool solves a real problem.

Readout: Replay Claude Code Sessions Like Video

Readout is a native macOS app that shows your Claude Code environment and configuration state in a single dashboard.

The standout feature is session replay. Pick any past session and scrub through a timeline. Prompts, tool calls, and file changes appear in chronological order. Edited files blink as they update in real time.

If you design agent systems — or simply want to audit what happened during a long autonomous run — session log analysis is non-negotiable. Readout is the most intuitive viewer I’ve found for this.

Key Details

• Free download from readout.org. No account required. Runs entirely local.
• Playback controls. Adjust speed or step through events manually.
• Codex support. Works with both Claude Code and Codex sessions.

The Real Frontend Bottleneck Is Feedback Accuracy, Not Model Performance

This is the counterintuitive insight. Before blaming the AI coding tool’s capability, look at the quality of feedback you’re providing.

Isolate components with Storybook. Capture visual feedback with Agentation. Feed it to Claude Code. With this loop, the agent can handle most UI modifications autonomously.

Agentation’s own documentation site was built entirely with this workflow. Every animation timing adjustment, every cursor movement refinement — all done through the visual feedback loop.

Same Builder, Same Origin Story

Both tools were created by Benji Taylor, Design Head at Coinbase Base. He’s not a developer by trade. He built these tools while coding with AI because the friction was too obvious to ignore.

“Why am I explaining this in words?” became Agentation. “Why can’t I see what happened?” became Readout. Tools born from a user’s perspective often fit real development workflows better than tools designed top-down.

Benji previously founded the Family wallet and went through the Aave acquisition before taking his current role at Coinbase Base.

The Takeaway

Using AI coding tools well is necessary but not sufficient. When the tools fall short, the people who build what’s missing are the ones who pull ahead.