2026年Webflow MCP 完整指南：用自然語言管理你的網站（2026 年最新）

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

 Webflow 在 2026 年 2 月 9 日正式推出 Claude 原生 Connector，讓使用者可以從 Claude 的對話介面直接操作 Webflow 網站的 CMS、頁面結構和設計元素。同年 3 月 13 日，Webflow 又以官方外掛形式進駐 Cursor Marketplace，把 MCP Server 跟 10 個 Agent Skills 打包成一鍵安裝。這兩件事加在一起，代表 Webflow 已經把 AI 從「輔助建議」推進到「直接操作」的階段。
這篇文章會講清楚三件事：Webflow MCP 的技術架構是什麼、各平台怎麼設定、以及 2026 年到目前為止有哪些重要更新。
MCP 是什麼，跟 Webflow 有什麼關係
MCP（Model Context Protocol）是 Anthropic 在 2024 年底發布的開放標準，目的是讓大型語言模型可以跟外部工具溝通。你可以把它想成 AI 跟軟體之間的 USB-C 接口：統一規格，不用每個工具各寫一套整合。
Webflow 的 MCP Server 就是基於這個協定建的。它把 Webflow 的 REST API 跟 Designer API 包裝成 MCP 工具，讓任何支援 MCP 的 AI Agent 都能存取你的 Webflow 專案。伺服器以開源形式（MIT 授權）發布在 GitHub，遠端運行在 https://mcp.webflow.com/sse，用 OAuth 驗證身份。
跟之前用 Zapier 或 Make 串接不同，MCP 讓 AI 直接理解你的網站結構，包括 Collection Schema、頁面層級、CSS 變數、Component 定義。AI 不只是搬資料，而是看得懂你的設計系統。
兩大工具家族：Data API 與 Designer API
Webflow MCP Server 把工具分成兩個類別，各自有不同的運作條件。

類別功能範圍是否需要開 Webflow Designer Data API CMS 管理（Collection、Item、Field）、網站設定、頁面 Metadata、自訂程式碼、資產管理、發布不需要 Designer API 畫布元素操作、版面建構、樣式管理、CSS 變數、Component、響應式斷點需要，且 MCP Bridge App 必須保持開啟

Data API 工具在 OAuth 授權完成後就可以直接用。日常的內容管理流程，像是批次更新 CMS、修改 SEO Metadata、發布網站，全部可以從 AI 對話視窗完成，不用打開 Webflow Designer。

Designer API 比較特別。它需要一個叫 MCP Bridge App 的配套應用程式在 Webflow Designer 裡保持運行。這個 App 在 OAuth 授權時會自動安裝，透過 WebSocket 維持 AI Agent 跟設計畫布之間的即時同步。你可以把它最小化，但不能關掉。

各平台設定方式

Claude（原生 Connector）

2026 年 2 月 9 日上線，設定時間大約 3 分鐘。

在 Claude 對話視窗左下角點 +，選 Connectors，再選 Browse Connectors
搜尋 Webflow，點選連接
跳出 OAuth 授權頁面，選擇要讓 Claude 存取的網站和 Workspace
完成，開始在對話裡直接操作 Webflow

需要付費 Claude 方案（Pro 每月 USD 20 或 Team）。Data API 操作不需要開 Designer；如果要用 Designer API 操作畫布，需要在 Webflow Designer 裡打開 MCP Bridge App。

Cursor（Marketplace 外掛）

2026 年 3 月 13 日上線。兩種安裝方式：

方式一：直接在 Cursor 裡輸入 /add-plugin webflow

方式二：手動設定

{ "mcpServers": { "webflow": { "url": "https://mcp.webflow.com/sse" } } }

把這段加到 .cursor/mcp.json，存檔後 Cursor 會自動開啟 OAuth 授權頁面。外掛包含 MCP Server 加上 10 個 Agent Skills，涵蓋批次 CMS 更新、WCAG 2.1 無障礙稽核、Asset SEO 稽核、Collection 架構建議、安全發布確認等工作流程。

Claude Desktop（手動設定）

需要 Node.js 22.3.0 以上版本。

在 Claude Desktop 選單列點 Help → Troubleshooting → Enable Developer Mode
打開 File → Settings → Developer，點 Edit Config
在設定檔加入：

{ "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }

儲存後重啟 Claude Desktop（Cmd/Ctrl + R）
OAuth 授權頁面會自動跳出

Claude Code

claude mcp add-json "webflow" '{"command":"npx","args":["mcp-remote","https://mcp.webflow.com/sse"]}'

Claude Code 支援用不同專案資料夾管理不同 Webflow 網站的授權，加上 -s project 參數就可以把 MCP Server 設定限定在特定資料夾內。

Windsurf

設定方式跟 Claude Desktop 類似，在 Windsurf 的 MCP 設定檔加入同樣的 JSON 設定即可。

2026 年 Webflow MCP 時間線

日期事件 2026 年 2 月 9 日 Webflow × Anthropic 推出 Claude 原生 Connector 2026 年 3 月 13 日 Webflow 外掛上架 Cursor Marketplace，含 10 個 Agent Skills 2026 年 3 月 17 日 Designer API 新增 openCanvas() 方法，支援 Component 畫布自動切換 2026 年 3 月 17 日新增 getComponentByName()、 getVariants()、 getSelectedVariant() 等 Beta 方法進行中 MCP Server 效能改善 Beta 版測試中

3 月 17 日的更新值得特別注意。openCanvas() 解決了一個實務上的大問題：以前 MCP Agent 要修改 Component 的內部結構，必須使用者手動切換到 Component 畫布。現在 Agent 可以自己觸發切換，讓 Component 相關的自動化工作流程真正跑得通。

Agent Skills：不只是工具，是工作流程

Webflow 在 2026 年 3 月推出的 Agent Skills 是建立在 MCP Server 之上的高階工作流程。跟單純的 API 工具不同，每個 Skill 會把多個 MCP 工具串聯起來，處理一個完整的任務。

目前有 10 個 Skill，全部開源（MIT 授權）：

Skill 功能 bulk-cms-update 批次建立或更新 CMS Item，含驗證和 Diff 預覽 accessibility-audit WCAG 2.1 無障礙稽核，檢查按鈕、表單、連結、標題、鍵盤導覽 asset-audit Asset SEO 稽核，找出缺少 Alt Text 和檔名不符 SEO 規範的資產 cms-collection-setup 建立新的 CMS Collection，設定欄位和關聯 cms-best-practices CMS 架構**實務建議 safe-publish 發布前確認步驟，防止意外上線

Skill 的運作方式是自動偵測你的 Prompt 內容。你不用指定要用哪個 Skill，AI Agent 會根據你的描述自動觸發對應的工作流程。例如你說「幫我檢查網站的無障礙問題」，accessibility-audit Skill 就會自動啟動。

bulk-cms-update 和 asset-audit 有內建的 Rollback 機制，執行後幾分鐘內可以復原。不可逆的操作則一律需要你確認才會執行。

實際使用場景和限制

Webflow MCP 在內容管理流程上最成熟。一家 Webflow Enterprise Partner（Karpi Studio）分享的生產環境工作流程是：用 Ahrefs MCP 做關鍵字研究，在同一個對話裡用 Webflow MCP 把內容寫入 CMS，不用切換任何工具。

幾個需要注意的限制：

圖片處理還是手動的。MCP 可以把已存在 Asset Library 的圖片設定到元素上，但不能生成圖片、調整尺寸、或做創意決策。每篇文章的圖片工作還是要在 Designer 裡完成。

Rich Text 的連結問題。Webflow API 有一個已知行為：Rich Text 欄位裡的 href 屬性在某些讀寫循環中可能被移除。批次更新連結後要驗證結果。

Context Window 有限。每次工具呼叫都消耗 Token。複雜操作如果串聯太多工具，可能在完成前就把 Context 用完。

API 依賴性。如果 Webflow API 出問題，工作流程就暫停。有時間壓力的工作要留緩衝。

mcp-remote 套件目前還標記為實驗性。Anthropic 方面的介面可能會變動。

第三方 MCP 整合

除了 Webflow 官方的 MCP Server，市場上還出現了幾個第三方選項：

Composio 提供 Tool Router 方式，透過單一 MCP 端點動態載入 Webflow 和其他應用程式的工具。通過 SOC 2 Type 2 認證，支援自帶 OAuth 憑證。

Glama 上也有社群開發者做的 Webflow MCP Server，功能比官方版精簡，適合只需要基本網站資訊查詢的場景。

對大多數團隊來說，官方 MCP Server 是第一選擇。功能最完整、更新最快，而且跟 Webflow 的 Designer Extension 生態系統整合得最好。

Webflow MCP 適合什麼不適合什麼？

MCP 把 Webflow 的操作門檻拉低了一個等級。行銷人員可以直接用自然語言更新 CMS、跑 SEO 稽核、批次修改 Metadata，不用學 API 也不用找工程師。開發者則省掉了寫 API 呼叫和管理驗證的瑣碎工作。

但 MCP 不是 Webflow 的全自動替代品。設計決策、品牌判斷、圖片創作、複雜的互動邏輯——這些還是需要人做。MCP 處理的是重複性的結構化工作，讓你把時間花在真正需要人類判斷的地方。

有什麼是 Webflow MCP 做不到的？

Webflow MCP 目前無法生成或調整圖片大小，Rich Text 的連結在讀寫過程中可能遺失 href 屬性，Designer API 操作必須保持 MCP Bridge App 開啟，而且 mcp-remote 套件仍為實驗性質。複雜的跨站操作也可能因為 Context Window 限制而中斷。

Webflow MCP 需要付費嗎？

MCP Server 本身開源免費。但要用 Claude 原生 Connector 需要 Claude Pro（每月 USD 20）或 Team 方案。Cursor 外掛免費，但 Cursor 本身有獨立的付費方案。Webflow 端則取決於你的網站方案等級，某些功能可能需要 CMS 以上的方案。

非技術人員可以用 Webflow MCP 嗎？

可以。Claude 原生 Connector 的設定不需要寫程式，三分鐘內就能完成。CMS 管理、SEO 稽核、發布操作這些都用自然語言就好。不過如果要用到 Claude Code 或手動設定 MCP Server，就需要基本的終端機操作能力。

設定 Webflow MCP 需要哪些前置條件？

Claude Connector 只需要 Claude 付費帳號和 Webflow 帳號。Cursor 外掛一鍵安裝。手動設定（Claude Desktop、Claude Code、Windsurf）則需要 Node.js 22.3.0 以上版本。所有方式都透過 OAuth 驗證，不需要手動管理 API Token。

Webflow MCP 跟傳統的 Zapier/Make 整合有什麼不同？

Zapier 和 Make 是觸發式的資料搬運工具，基於「事件 A 發生 → 執行動作 B」的邏輯。MCP 讓 AI 直接理解你的 Webflow 專案結構，包括 Collection Schema、頁面層級、樣式定義。AI 可以根據脈絡做判斷，而不只是搬資料。代價是 MCP 需要即時的 API 連線，Zapier 可以排程非同步執行。

權威來源

Webflow Developer Documentation — MCP Server
GitHub — webflow/mcp-server
GitHub — webflow/webflow-skills
CMSWire — Webflow Adds Claude Connector for AI-Driven Site Management
如何取得 Webflow MCP Token - 社區資源 - Webflow + NoCode 社群
Webflow MCP 完整教學指南 - 社區資源 - Webflow + NoCode 社群

Author Insight

By EKC, Tenten.co

身為台灣第一個且也是 Webflow 亞洲最大社群的 Webflow Agency - Tenten 團隊從 Webflow MCP 在 Private Beta 時就開始用了。老實說，Data API 那邊的體驗已經很成熟——批次更新 CMS Item、修改 SEO Metadata、跑全站內容稽核，這些流程在我們的 Claude Project 裡已經是日常操作。省下來的時間是可以算的：以前一個客戶網站 80 頁的 SEO Metadata 稽核加修正要半天，現在 20 分鐘。

Designer API 的部分我們比較保守。在替客戶建新頁面的時候，我會讓 AI 先生成版面結構，但最終的設計調整還是在 Designer 裡手動做。原因很實際：AI 生成的版面在 responsive 斷點上有時候不夠精細，客戶品牌風格的判斷也不是 AI 目前擅長的。

3 月推出的 Agent Skills 是我最期待的方向。accessibility-audit 跟 asset-audit 兩個 Skill 已經幫我們在交付前的品質檢查流程省了不少工。如果 Webflow 繼續擴展 Skill 的覆蓋範圍，特別是加入 E-commerce 相關的工作流程，這對 Shopify 以外的電商建站方案會是一個有意義的差異化。

如果你在評估 Webflow 搭配 AI 的導入策略，或者想了解 MCP 在你的網站管理流程裡能省多少時間，歡迎跟 Tenten 團隊預約諮詢。