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 編碼工具還不夠。當工具不夠用時，自己動手做的人才能走在前面。