# Claude Code 用户必装的两个工具 — Agentation 和 Readout

> Author: Tony Lee
> Published: 2026-03-03
> URL: https://tonylee.im/zh-CN/blog/two-tools-every-claude-code-user-needs-agentation-readout/
> Reading time: 1 minutes
> Language: zh-CN
> Tags: ai, claude-code, 开发工具, 前端, 工作流, agentation, readout

## Description

Agentation 通过 CSS 选择器为 AI 代理提供像素级视觉反馈。Readout 像回放视频一样重现 Claude Code 会话。两个工具解决了 AI 辅助前端开发中最大的两个痛点。

## Content

每次用 Claude Code 做前端，两件事一直困扰着我：怎么把"改哪里"精确传达给代理，以及会话结束后怎么知道代理到底做了什么。

这两个问题现在都有了专门的工具——而且出自同一个人之手。

## Agentation：别再用文字描述 UI 元素了

告诉 AI 代理"把那个蓝色按钮改一下"的时代过去了。

[Agentation](https://benji.org/agentation) 是一个视觉反馈工具。点击屏幕上想修改的元素，它会自动提取 CSS 选择器和位置信息。不用再说"侧边栏里的蓝色按钮"，直接把 `.sidebar > button.primary` 交给代理就行。

效果立竿见影。以前需要来回修改三四轮的提示，现在基本一次就到位。

### 核心功能

- **一行安装。** `npm i agentation`，在 React 18+ 项目中添加一个组件即可。
- **四档输出模式。** 从 Compact（选择器+备注）到 Forensic（全部计算样式），按需选择详细程度。
- **MCP 连接的 Agent Sync。** 接入 MCP 服务器后，代理可以实时读取视觉反馈。
- **动画调试。** 在 CSS 动画的中间帧暂停，对过渡状态进行反馈——时间曲线、关键帧位置都能精确定位。
- **文本与区域选择。** 选择文本或拖拽空白区域，对间距和布局也能给出反馈。

npm 下载量突破 17 万，一条推文达到 67 万浏览量。这样的数据通常意味着工具解决了真实问题。

## Readout：像看视频一样回放 Claude Code 会话

[Readout](https://readout.org) 是一款 macOS 原生应用，把 Claude Code 的开发环境和配置状态集中展示在一个界面上。

最惊艳的功能是会话回放。选择任意历史会话，沿时间轴拖动浏览。提示词、工具调用、文件变更按时间顺序排列，编辑过的文件会实时闪烁提示。

无论是设计代理系统，还是审查一次长时间自主运行的结果，会话日志分析都不可或缺。在直观性方面，Readout 是我见过最好的工具。

### 关键信息

- **免费下载。** 在 readout.org 直接下载，无需注册账号，完全本地运行。
- **播放控制。** 支持调整播放速度和手动逐步跳转。
- **Codex 支持。** 同时兼容 Claude Code 和 Codex 会话。

## 前端瓶颈不是模型能力，而是反馈传达的精确度

这是一个反直觉的认知。在抱怨 AI 编码工具能力不足之前，先审视一下自己提供的反馈质量。

用 Storybook 隔离组件，用 Agentation 捕获视觉反馈，再交给 Claude Code。有了这个闭环，大多数 UI 修改代理都能独立完成。

Agentation 的文档网站本身就是用这套工作流构建的。动画时间调整、光标行为优化——全部通过视觉反馈循环迭代完成。

## 同一个创造者，同一个起点

两个工具都出自 Benji Taylor 之手，他目前担任 Coinbase Base 的设计负责人。他并非专业开发者，而是在用 AI 编写代码的过程中，把自己遇到的痛点直接做成了工具。

"为什么要用语言解释这个？"变成了 Agentation。"为什么看不到会话记录的全貌？"变成了 Readout。从用户视角出发的工具，反而越来越契合一线开发者的真实工作流。

Benji 曾创办 Family 钱包，经历 Aave 收购后，现在在 Coinbase Base 主管设计。

## 结语

光会用 AI 编码工具还不够。当工具不够用时，自己动手造的人才能走在前面。

---

Author: Tony Lee | Website: https://tonylee.im
For more articles, visit: https://tonylee.im/zh-CN/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.