# Claude Code 使用者必裝的兩個工具 — Agentation 和 Readout

> Author: Tony Lee
> Published: 2026-03-03
> URL: https://tonylee.im/zh-TW/blog/two-tools-every-claude-code-user-needs-agentation-readout/
> Reading time: 1 minutes
> Language: zh-TW
> 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-TW/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.