# Claude Code 用家必裝嘅兩個工具 — Agentation 同 Readout

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