Agentation 如何與 React 頁面協同工作？

Agentation 是一款基於桌面的開發人員工具，可彌合設計回饋和程式碼變更之間的差距。它使開發人員能夠透過點擊元素、新增註釋和產生 AI 編碼代理可以立即理解的結構化輸出來以視覺方式與其使用者介面互動。該工具在開發人員社群中獲得了顯著的關注，在 GitHub 上擁有超過 1.8k 個星標，並透過 npm 安裝了數十萬次，成為開發人員在 UI 上使用 AI 的不可或缺的一部分。

Agentation 的主要功能

Agentation 是一款視覺回饋工具，開發人員可以使用它直接在他們的 Web 應用程式中註釋 UI 元素，並為 AI 編碼代理生成結構化輸出。它允許使用者點擊元素、新增註釋，並捕獲精確的選擇器、位置和上下文元數據，而無需使用模糊的文字描述。該工具與各種 AI 編碼代理（如 Claude Code 和 Codex）集成，使回饋到程式碼的實施過程更加高效。

視覺元素選擇: 點擊和懸停功能可選擇特定的 UI 元素，並自動捕獲 CSS 選擇器、元件層次結構和計算樣式

動畫暫停功能: 能夠凍結動畫，以捕獲在幾毫秒內消失的特定幀的回饋

代理集成: 透過 MCP 集成與 AI 代理進行雙向通訊，允許代理直接確認、質疑或解決回饋

結構化輸出生成: 自動生成具有精確元素標識符的 markdown 格式輸出，使 AI 代理可以輕鬆找到精確的程式碼引用

Agentation 的使用案例

前端開發迭代: 開發人員可以透過向 AI 編碼代理提供有關需要修改的特定元素的精確回饋，從而快速迭代 UI 變更

UI 錯誤報告: 團隊可以使用精確的元素引用來報告 UI 問題，使 AI 代理或開發人員更容易找到並修復問題

設計實施審查: 設計師可以透過註釋哪些元件需要調整，來提供關於已實施 UI 元素的具體回饋

優點

流暢的安裝過程

精確的元素識別系統

支援多種 AI 工具的代理無關設計

缺點

僅限桌面限制

需要按專案安裝

僅限於開發環境使用

如何使用 Agentation

安裝 Agentation: 透過 npm 安裝套件：npm install agentation

新增到您的 React/Next.js 專案: 匯入 Agentation 元件並將其新增到您應用程式的根目錄：import { Agentation } from \'agentation\'; function App() { return (<> <YourApp /> <Agentation /> </>) }

新增開發環境檢查: 新增 NODE_ENV 檢查以確保 Agentation 僅在開發環境中載入：{process.env.NODE_ENV === \'development\' && <Agentation />}

啟動您的開發伺服器: 執行您的開發伺服器並在右下角尋找 Agentation 工具列（浮動按鈕）

啟動註釋模式: 點擊右下角的閃光圖示以啟動註釋工具列

將滑鼠懸停在元素上: 將滑鼠懸停在 UI 元素上以查看其名稱突出顯示

點擊以註釋: 點擊您要提供回饋的任何元素

新增回饋: 在註釋彈出視窗中撰寫您的回饋並點擊「新增」

複製格式化的輸出: 點擊複製按鈕以取得具有選擇器、位置和上下文的結構化 markdown 輸出

與 AI 工具一起使用: 將複製的輸出貼到 Claude Code、Codex 或其他 AI 編碼代理等 AI 工具中以獲得協助

可選：設定 MCP 整合: 對於直接代理整合，執行 \'npx add-mcp\' 並按照提示將 agentation-mcp 新增為 MCP 伺服器，以跳過複製貼上的步驟