Web to MCP
WebToMCP · 程式設計
Web to MCP 是一款 Chrome 擴充功能與 Model Context Protocol 伺服器，能擷取任何真實網頁上的元件，並把它的程式碼與樣式直接送到 Cursor 或 Claude Code。
關於 Web to MCP
What Is Web to MCP
Web to MCP 要解決的是一個很具體、也很惱人的問題：怎麼向 AI 助理描述一個介面元件。你不必再打「一個藍色、圓角、帶漸層的按鈕」，只要指向真正的那個元素，把它送出去。
工具分成兩塊一起運作。Chrome 擴充功能負責在你瀏覽的任何網站上擷取，MCP 伺服器則把擷取到的元件送進你的 AI 助理。它鎖定的是已經在用 Cursor 或 Claude Code 的開發者，要的是像素級精準的起點，而不是靠猜。
最主要的限制在於範圍。Web to MCP 只負責餵資料給助理，本身不會寫入或修改程式碼，成果好壞仍取決於你用的模型與提示。它也需要 Chrome 瀏覽器與 Google 帳號，而且是透過個人的 MCP 網址運作，並非共用伺服器。
Getting Started
- 從 Chrome 線上應用程式商店安裝 Web to MCP 擴充功能。
- 用 Google 帳號登入，產生專屬的 MCP 網址。
- 把該網址加進助理的設定檔（Cursor 讀取
.cursor/mcp.json；Claude Code 用自己的 MCP 設定）。 - 打開任一網站，點擴充功能圖示，開啟元件選取模式。
- 點選你要的元素，複製它的參照 id，再請助理照著重建。
產品資訊
快速了解 Web to MCP 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 使用 Cursor 或 Claude Code 的前端開發者，因為擷取到的程式碼能直接進到他們平常的對話流程裡。
- 做 design engineering、要把設計稿與真實頁面轉成正式元件的角色，他們要的是精確的樣式數值，不是概略值。
- 帶新人的團隊，因為擷取一個已經驗證過的元件，比手寫文件記錄樣式快得多。
任務
- 重建在別的網站看到某個元件，擴充功能會連同 DOM 結構與計算後的 CSS 一起擷取。
- 對齊自家設計系統的按鈕或卡片，讓新程式碼不會和現有畫面打架。
- 從參考案例快速做出版面原型，抓幾個真實範式會比逐一從零描述來得省事。
情境
- 你看到一個喜歡的價目表，想請助理在你的技術堆疊裡重現它的結構。
- 設計師直接丟給你一個線上頁面，而你需要的是實際的 hover 行為，不是一張平面圖。
- 你正在研究某個複雜元件怎麼做出來，想要真實的程式碼脈絡來學。
主要功能
一鍵擷取元件
點擴充功能圖示，切到選取模式，任選頁面上的一個元素。Web to MCP 會記錄渲染當下的 DOM 結構與計算後的 CSS，助理拿到的就是你看到的樣子。你不必開開發者工具，也不用逐行複製樣式。
透過 MCP 直接遞送
擷取到的元件會經由 Model Context Protocol 送到你的助理，用的是綁在你帳號上的個人網址。只要網址寫進設定，Cursor 與 Claude Code 就會自動抓到這個工具。你在對話裡用 id 參照該元素，整個接手流程就留在你原本就在用的工具裡。
不受框架限制
擷取在 React、Vue、Angular 與純 HTML、CSS 網站上都一樣管用，因為它讀的是渲染後的結果，不是框架內部。接著你的助理會把這些脈絡套進你正在用的技術堆疊。不過提示裡還是要講清楚你的框架與設計系統，才能引導成果。
語意脈絡，不只是像素
和截圖不同，這裡拿到的是語意化的 HTML、精確的 CSS 數值，以及像是周邊結構、hover 狀態這類版面脈絡。正是這層細節，讓助理能朝接近的視覺結果努力，而不是去重新解讀一張圖。Web to MCP 表示資料會直接送到助理，不會存在它的伺服器上。
專屬的個人 MCP 端點
每個登入的帳號都會有自己的 MCP 網址，在 Google 登入後產生。你把它貼進專案或全域設定檔，連線就只屬於你。這樣的設計讓安裝只要幾分鐘，而不必自己架一台伺服器。
相容 Claude Code 與 Cursor
設定教學同時涵蓋 Cursor 與 Claude Code，也就是這款工具圍繞的兩個助理。Cursor 使用者在 .cursor/mcp.json 加一筆設定；Claude Code 使用者則編輯它的 MCP 設定檔。兩條路徑安裝後都走同一套「先擷取、再參照」的流程。
優缺點
優點
- 免去用文字描述介面給助理的猜測，因為它送出的是真實程式碼與樣式。
- 送出語意化 HTML 與精確 CSS，而非一張平面截圖，第一次就命中的機會更高。
- 因為讀的是渲染後結果，任何網站、任何前端框架都能用。
- 用個人 MCP 網址搭配標準設定檔，安裝只要幾分鐘。
- 元件資料直接送到助理，不會留在廠商伺服器上。
缺點
- 需要 Chrome 與 Google 帳號，等於把 Firefox 或 Safari 使用者擋在門外。
- 成果好壞仍看你用的模型與提示，它是更好的輸入，不是完成品。
- 免費方案每月擷取次數有限，用量大就得升級 Pro。
常見問題
它會擷取任何線上網站上的元件，把程式碼與樣式送到 AI 助理，讓你不必自己描述，就能請助理重建那個元件。
相關內容
探索與 Web to MCP 相關的工具、技能與文章。
Web to MCP 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。