Agentation – 面向AI編程代理的可視化UI註釋工具

Agentation 是一款創新的可視化UI註釋工具，專為AI編程代理設計。它通過在網頁上激活工具欄，讓用户能夠直接點擊界面元素並添加註釋。每次註釋都會自動捕獲元素的CSS選擇器、源文件路徑、React組件樹層級以及當前計算樣式，並附帶用户的反饋文本。這些信息以結構化的Markdown格式輸出，可輕鬆粘貼到AI代理（如Claude Code或Cursor）中。

使用Agentation，用户無需再模糊描述“側邊欄中的藍色按鈕”，而是直接提供“.sidebar > button.primary”這樣的精確選擇器，讓AI代理能通過代碼搜索直接定位。此外，Agentation還提供了實時預覽和動畫暫停功能，方便對特定狀態的元素進行註釋。

更強大的是，通過MCP（模型上下文協議）集成，AI代理不僅能讀取註釋，還能主動與用户交互。例如，代理可以列出所有待處理的註釋、詢問澄清（“應該是24px還是16px？”）、在修復後標記為已解決，甚至一鍵清除所有註釋。這使得反饋過程從一個單向提交通道變成了一個協作對話。

最佳實踐方面，Agentation建議用户對每個註釋只提一個問題，並明確預期與現狀的差異。對於文字錯誤，建議直接選中文本進行註釋。目前，Agentation對個人和公司內部使用免費，但若要將它作為產品的一部分進行再分發，則需要聯繫獲取商業許可。此外，它還提供實時同步、推送至外部服務以及API集成等高級功能，適合團隊協作和自動化工作流。