nicobailon/pi-annotate

解決的問題

Pi Annotate 提供了一種可視化方式，讓使用者能將 UI 問題與設計變更傳達給 AI 代理。無需手動描述佈局問題或複製 CSS，使用者只需點擊網頁上的元素，即可捕獲 AI 代理修復程式碼所需的精確技術上下文（選擇器、盒模型、可存取性角色）與截圖。

運作方式

它作為 Chrome/Chromium 的瀏覽器擴充套件運作，搭配原生主機與 Pi 擴充套件使用。當使用者執行 /annotate 命令時，該工具會將註解 UI 注入瀏覽器。使用者可選擇元素、新增註解，甚至使用「Etch」模式記錄 DevTools 中的即時編輯。這些資料——包含 HTML 屬性、CSS 樣式與視覺裁剪——隨後會被打包成結構化的 Markdown 報告，並傳送給 AI 代理。

適用對象

使用 AI 代理協助 UI/UX 實作與除錯的前端開發人員與設計師。

主要特色

• 深度上下文捕獲：自動收集所選元素的盒模型資料、可存取性資訊與關鍵 CSS 樣式。
• 編輯捕獲（Etch）：透過 MutationObserver 追蹤瀏覽器 DevTools 中的即時變更，並提供前後截圖與屬性差異。
• 視覺註解卡片：提供類似 Figma 的體驗，支援可拖曳的浮動註解卡片與連結註解與元素的 SVG 連接線。
• 遠端與 WSL 支援：透過原生訊息橋接，支援在遠端 SSH 主機或 WSL 環境中對頁面進行註解。