別再用截圖對對碰了！OpenCode Chrome Annotation：讓 AI 直接看懂你的 UI Bug | Stop the Screenshot Game: OpenCode Chrome Annotation

將瀏覽器標記直接轉化為開發指令，把溝通成本降到最低。 | Turn browser annotations directly into development instructions, minimizing communication overhead.

🔎 工具速覽 / AT A GLANCE

Category	Developer Productivity / AI Tooling
Pricing	Open Source / Free
BestFor	Frontend Engineers, UI/UX Designers, Product Managers
GitHub Stars	⭐ 46

🚀 引言 / Introduction

各位肝指數快爆表的工程師好，是不是每次被 PM 或老闆指著螢幕說『這裡那個按鈕歪掉了』，或者收到一張模糊的截圖配上『請參考附件修改』，你就想直接遞辭呈？今天來聊聊 opencode-chrome-annotation。這東西簡單說就是把你的 Chrome 變成 AI 的眼睛，讓你不用再對著截圖猜測 CSS Selector，直接把 UI 狀態、元件元數據和你的要求一鍵餵給 OpenCode，把那些修不完的 Bug 速度加快。 | Hello, fellow engineers with skyrocketing liver enzymes. Tired of PMs pointing at the screen saying 'this button is skewed' or receiving blurry screenshots with 'please refer to attachment'? Let's talk about opencode-chrome-annotation. Essentially, it turns your Chrome browser into AI's eyes, eliminating the guesswork of CSS selectors by sending UI states, element metadata, and your instructions directly to OpenCode.

🛠️ 核心功能 / Key Features

Visual Element Selection: Select specific DOM elements directly on the page for precision targeting.

視覺化元素選取：直接在頁面上圈出出問題的 DOM 元素，精準打擊，不用再手動翻找檢查工具。

Automatic Metadata Extraction: Sends selector, tag, text, role, and bounding box data automatically.

自動元數據提取：自動抓取 Selector、標籤、文字、角色與邊界資訊，AI 再也不會問你『請問這個 div 在哪？』

Integrated Screenshot Workflow: Local screenshots are automatically referenced in OpenCode prompts.

整合截圖工作流：插件自動處理本地截圖並與 Prompt 綁定，省去存檔、命名、上傳的廢話流程。

Seamless Localhost Connection: Connects Chrome tabs to active OpenCode sessions via a local HTTP server.

無縫本地連接：透過 localhost 伺服器直接把分頁連到 OpenCode session，反應速度快到像剛喝完下午茶雞排一樣清醒。

💡 技術亮點 / Tech Highlights

Zero Guesswork: No more manually copying selectors or explaining layout issues in text.

拒絕猜謎：再也不需要手動複製冗長的 CSS 選取器，或者用文字描述『那個藍色方塊左邊一點點』。

Reduced Communication Friction: Direct bridge from visual feedback to code implementation.

降低溝通內耗：將視覺回饋直接轉化為實作指令，讓老闆的奇葩要求能快速轉化為可執行的 Code。

Developer-Centric Design: Built for the actual workflow of modern AI-assisted coding.

工程師思維設計：專為 AI 輔助開發而生，把重複性的截圖-描述-修正循環直接砍掉。

📦 快速上手 / Quick Start

Config Setup: Add 'opencode-chrome-annotation@latest' to your OpenCode plugin config.

配置環境：在 OpenCode 的 config.json 中加入插件，記得先存檔再跑。

Extension Install: Install the official extension from the Chrome Web Store.

安裝擴展：去 Chrome Web Store 把插件裝起來，這步最簡單，別跳過了。

Session Connection: Start OpenCode, click the extension button, and pick your current tab.

連接對接：啟動 OpenCode 之後，點擊瀏覽器右上角插件，選好目前的分頁進行連接。

Annotate & Submit: Click 'Annotate', select the element, write your request, and let the AI do the heavy lifting.

標記與提交：點擊 'Annotate'，選中那個討厭的 Bug 元素，寫下要求，剩下的交給 AI 處理，你趕快去休息。

準備好試試 別再用截圖對對碰了！OpenCode Chrome Annotation：讓 AI 直接看懂你的 UI Bug | Stop the Screenshot Game: OpenCode Chrome Annotation 了嗎？

Ready to try 別再用截圖對對碰了！OpenCode Chrome Annotation：讓 AI 直接看懂你的 UI Bug | Stop the Screenshot Game: OpenCode Chrome Annotation?

前往 GitHub 頁面 →