Vibe Annotations 免費嗎？

免費。Vibe Annotations 開放原始碼，擴充功能在 Chrome 線上應用程式商店，MCP 伺服器以 vibe-annotations-server 之名發布於 npm。沒有付費方案，也沒有定價頁。

我需要 MCP 伺服器，還是擴充功能就夠？

擴充功能自己就能用。你標註完頁面，把結果貼進任何 AI 對話即可。MCP 伺服器屬選用，只有需要自動同步、監看模式，或讓代理直接讀取標註時才要裝。

我能在正式上線的網站上用 Vibe Annotations 嗎？

不行。它是為 localhost 開發伺服器與透過 file:// 開啟的本機 HTML 檔案而做。標註 file:// 頁面得在 chrome://extensions 另外開啟權限，localhost 頁面則不需要這一步。

要怎麼把標註分享給同事？

從工具列匯出整批標註即可。工具會把內容打包成含內嵌圖片的獨立 .html，或只在需要文字時打包成較輕的 .md，同事在自己的電腦上就能打開。

每則標註會記錄哪些東西？

評論、元素的 DOM 選擇器、React 或 Vue 元件名稱、原始檔，以及自動拍下的截圖。你也可以附上自己的參考圖。代理套用修正時讀的就是這一整包。

Vibe Annotations

Q: 它支援哪些 AI 程式代理？

它透過 Model Context Protocol 連接 Claude Code、Cursor、Windsurf、Codex、OpenClaw 與 VS Code。設定只要一行指令，官方文件裡每個代理都有各自的連線片段。

Vibe Annotations · 程式設計

Vibe Annotations 是免費的瀏覽器擴充功能與 MCP 伺服器，讓你在本機頁面標註回饋，再由 Claude Code、Cursor 等 AI 程式代理動手修改。

前往工具

關於 Vibe Annotations

What Is Vibe Annotations

Vibe Annotations 是一款給網頁開發用的視覺標註工具。它能把你點出來的意見整理成 AI 程式代理回饋，直接傳給對方處理。你裝好瀏覽器擴充功能，點一下本機頁面上的任何元素，留下一句哪裡要修。每一則標註都會記下該元素精確的 DOM 選擇器、背後的 React 或 Vue 元件，以及原始檔。代理拿到的就是明確的脈絡，不是模糊的描述。

產品分成兩塊。擴充功能自己就能用，靠複製貼上即可；選用的 MCP 伺服器則加上自動同步，讓代理直接讀取、監看並處理標註，你不必複製任何東西。當你需要在開發過程中標註本機頁面，這是主要的使用方式。伺服器以 vibe-annotations-server 之名發布在 npm，兩者都免費且開放原始碼。

最大的限制在適用範圍。它是為開發階段的 localhost 與本機 HTML 檔案而做，不能用於正式上線的網站，也不是給非網頁專案用的。如果你不跑開發伺服器，也沒在用 AI 程式代理，這裡能給你的不多。

Getting Started

從 Chrome 線上應用程式商店安裝擴充功能，或基於開發需求從儲存庫載入未封裝版本
執行 npx vibe-annotations-server init，安裝伺服器、在 3846 埠啟動，並接上你的 AI 程式代理
打開任一 localhost 頁面，點工具列上的 Annotate，再點元素留下評論、設計調整或文字修改
把整批標註交給代理，它會透過 MCP 讀取，一次把修正做完

產品資訊

快速了解 Vibe Annotations 的定價、支援平台與效能。

免費方案是

付費方案Free

平台Chrome, Edge, Brave, Arc, Opera, Vivaldi, VS Code, Claude Code, Cursor, Windsurf, Codex, OpenClaw

開發者Vibe Annotations

類別程式設計

發布日期Jan 2025

最近更新Oct 2025

網站訪問量N/A

網站全球排名N/A

API 提供狀態是

適合對象

這項工具最適合的使用者、任務與情境。

使用者

前端開發者：用 React、Vue 或純 HTML 做頁面的人，寧可直接指出壞掉的元素，也不想在對話框裡形容它在哪
與 AI 代理協作的開發者：讓 Claude Code、Cursor 或 Codex 寫介面，需要一條快速把修正送回去的路
獨立開發者：一個人反覆調整頁面，想要短、不卡手的來回節奏
檢查介面小團隊：在改動上線前，把整批標註傳到同事的 localhost 一起看的人

任務

標出跑掉的版面：直接在某個元素上指出內距、間距或對齊問題，不必描述它在哪
送出設計修正：在類 Figma 面板裡改大小、間距、顏色與文字，交由代理套用
索取元件變體：請代理給出某個元件的幾個版本，在頁面上逐一預覽再挑出最好的
在瀏覽器外分享回饋：把整批標註匯出成單一 .md，或含內嵌圖片的獨立 .html
讓修正自動化：開啟監看模式，每留下新標註就被接收並即時處理

情境

同一個按鈕改過十幾次，每次打選擇器都很慢：直接點元素、留一句話、交出去
單靠截圖講不清是哪個元素出錯：標註本身帶著選擇器、元件與原始檔
要檢查散在好幾條路由的頁面：每一頁都標註，讓代理透過 MCP 一次讀完
同事想聽你對他那份本機版本的意見：把標註打包成檔案分享過去
你希望代理在你繼續標註時也持續動手：監看模式會在一有新標註時立刻接收

主要功能

帶完整脈絡的標註

每一則標註都會記下你點選元素的精確 DOM 選擇器，連同背後的 React 或 Vue 元件與原始檔。這正是它跟截圖工具的分野：後者只能讓代理從像素去猜你指的是哪個元素。這裡代理拿到的是能直接動手的選擇器，修正第一次就落在對的節點上。

類 Figma 的設計編輯面板

除了評論，你還能用類 Figma 的編輯面板，直接在頁面上改大小、間距、顏色與文字。送出前先看到即時預覽，所以代理套用的就是你已經認可的版本。小幅視覺調整完全不必進對話框。

變體生成與預覽

你可以請代理做出任一元件的好幾個變體，然後就在頁面上比對。面板把選項並排顯示，你不必離開瀏覽器就能挑出優勝者。版面來回討論，就此收斂成一次選擇。

截圖與參考圖

工具會自動為你標註的每個元素拍下截圖，你還能在上面附上自己的參考圖。視覺脈絡跟著文字註記一起走，遇到用看的比用說的更清楚時特別管用。

單一檔案匯出

你可以把整批標註匯出成一個含內嵌圖片的獨立 .html，或只在需要文字時匯出成較輕的 .md。兩種都是單一檔案，不是一整個塞滿截圖與註記的資料夾。

MCP 整合與監看模式

伺服器把 read_annotations、watch_annotations、get_project_context 等工具提供給連上的代理。設定只要一行指令，適用 Claude Code、Cursor、Windsurf、Codex、OpenClaw 與 VS Code。監看模式會對新標註做長輪詢，代理就能在你繼續工作的同時即時套用修正。