Agentation

Agentation 是什麼？

Agentation 是一款視覺回饋工具，讓您直接在 UI 上標註元素，然後將回饋分享給 AI agents，讓它們能在您的程式碼庫中精準識別目標。其核心目的是將「指向這裡」的回饋轉換為結構化、可供 agents 執行的機器指令。

它特別適合與能存取專案檔案的 AI 程式碼工具搭配使用，Agentation 的輸出可包含選擇器、檔案路徑及結構資訊，協助 agent 導航至正確的程式碼列與元件。

主要功能

• 頁面視覺標註：啟用工具列，點擊或選取元素，即可建立與螢幕特定目標連結的標註。
• 供 agents 的元素定位：Agentation 可產生元素路徑、CSS 選擇器及檔案位置細節，讓 agent 不需猜測您指的 UI 元素。
• 程式碼庫脈絡提升修正品質：當 agent 有程式碼庫存取權（例如透過 Claude Code 或 Cursor 等工具）時，可利用選擇器進行 grep、原始檔案路徑跳轉至正確列數、React 元件樹了解階層結構，以及計算樣式推斷元素當前外觀。
• 格式化 Markdown 輸出：新增回饋後，用戶可點擊複製格式化 Markdown，並貼入 agent 的輸入。
• MCP 整合支援：使用 MCP 時，可省略複製貼上，因為 agent 已能看見標註脈絡；可提示指令如「處理我的回饋」或「修正標註 3」。
• 標註生命週期控制：Agents 可查詢既有回饋（例如列出跨頁面所有標註），並回應動作如捨棄或解決項目（例如「清除所有標註」）。

如何使用 Agentation

1. 啟用標註工具列：工具列可在 Agentation 介面中使用（頁面內容註明示範頁面已啟用工具列）。
2. 懸停識別元素：將滑鼠懸停在元素上，即可看見其名稱高亮顯示。
3. 建立標註：點擊目標元素或選取文字（例如提供的示範元素），建立新標註後輸入回饋。
4. 提交並分享回饋：新增標註後，點擊複製格式化 Markdown 輸出，用於貼入您的 agent。
5. 選用 MCP：若您的 agent 已透過 MCP 連線，即可避免手動複製貼上，直接要求 agent 處理或修正特定標註。

使用情境

• 特定 UI 元件的 Bug 回報：當看到按鈕狀態或樣式「錯誤」時，懸停識別元素，標註預期與實際差異，並分享選擇器/路徑資訊，讓 agent 定位相關程式碼。
• 排版與間距回饋：針對 padding 或尺寸問題，可標註確切元件區域，並要求 agent 在解決回饋時決定替代方案（例如「24px 或 16px」）。
• 文字/內容修正：若標籤或文案有錯字，選取確切文字並新增簡要回饋（例如「按鈕文字不明確」或「內容應為 X」），讓 agent 鎖定特定 UI 字串。
• 動畫特定畫格回饋：透過工具列暫停動畫至您關心的畫格，標註該視覺狀態，並提供與暫停脈絡連結的回饋。
• 團隊或多頁面回饋協調：讓 agents 列出跨頁面所有可見標註，一一解決，並在審核完成後清除全部。

常見問題

Agentation 如何幫助 agent 找到應用程式正確的部分？
Agentation 的輸出可包含 CSS 選擇器、原始檔案路徑、React 元件階層，以及計算樣式，讓 agent 能搜尋、導航至正確行數，並了解元件的位置與適配方式。

我需要將回饋複製貼上到 agent 嗎？
不一定。頁面提到，搭配 MCP 整合，即可省去複製貼上，因為 agent 已能看到標註脈絡。

標註中應寫哪些類型的回饋？
頁面建議要具體（例如清楚描述問題）、每則標註處理單一問題，並包含預期與實際看到的脈絡。

agent 能否詢問問題或回應標註？
可以。搭配 MCP 整合與 Annotation Format Schema，頁面描述 agent 可列出標註、請求澄清、以摘要解決，或駁回標註等互動。

Agentation 的授權模式為何？
Agentation 對個人及公司內部使用免費。若將 Agentation 重新散布至銷售產品，頁面建議聯繫他們取得商業授權。

替代方案

• 互動式 UI 螢幕截圖/標註工具（含人工審核流程）：擷取並標註 UI 供審核的工具，也能支援回饋分享，但通常不會產生結構化選擇器/檔案路徑給程式碼感知的 agent。
• 追蹤器中的文字問題範本（例如 bug 票券）：Bug 追蹤器有助記錄預期與實際行為，但依賴描述，而非指向程式碼中特定 UI 元件路徑。
• 無視覺標註的 agent 程式碼導航工具：理解程式庫的程式碼助理仍能依回饋行動，但無標註層時，通常需間接描述目標（例如手動命名元件）。