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整合等高階功能，適合團隊協作和自動化工作流。