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

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

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

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

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

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

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

核心功能

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

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

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

Readout 是一款 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 编码工具还不够。当工具不够用时，自己动手造的人才能走在前面。