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 編碼工具係唔夠嘅。當工具唔夠用嗰陣，自己動手整嘅人先至行得更前。