什麼是 Webflow MCP？
Model Context Protocol (MCP) 是 Anthropic 於 2024 年底推出的開放標準協定，目的是讓 AI 助理能夠直接連接外部工具與數據源，無需撰寫繁複的整合程式碼 。Webflow 與 Anthropic 在 2026 年 2 月 9 日 正式推出原生連接器，讓 Claude 能夠直接讀取和寫入你的 Webflow 網站 。
透過 MCP，你可以用自然語言指令讓 AI 執行：
- 設計操作：創建區塊、設定樣式、管理 CSS 變數、建立組件
- 內容管理：CMS collection 操作、頁面元數據更新、SEO 優化
- 自動化工作流：批量更新、內容生成、網站審核
前置需求
| 項目 | 說明 |
|---|---|
| Node.js | 版本 22.3.0 或更高（遠端安裝需要） |
| Webflow 帳號 | 需有 Workspace 權限 |
| AI 工具 | Claude Desktop、Cursor、Postman Agent Mode 或 Windsurf |
| 網站權限 | Sites:read、CMS:read/write（視操作需求） |
安裝方法（三種方式）
方法一：Claude Desktop 原生連接器（最簡單）
步驟 1：開啟連接器設定
- 在 Claude 聊天視窗左下角點擊
+符號 - 選擇
Add connectors→Manage Connectors→Browse Connectors - 搜尋 Webflow 並點擊
Connect
步驟 2：授權存取
- 授權 Claude 存取你的 Webflow 帳號
- 選擇要開放權限的 Sites 和 Workspaces
- 點擊
Authorize App
步驟 3：開啟 MCP Bridge App
- 在 Webflow Designer 中，按
E鍵開啟 Apps 面板 - 啟動 「Webflow MCP Bridge App」（此 App 會在授權過程中自動安裝）
- 等待 App 連接到 MCP Server
步驟 4：開始使用
輸入你的第一個 Prompt：
「幫我在首頁創建一個 Hero Section，包含標題、副標題和 CTA 按鈕」
方法二：Cursor 設定（開發者推薦）
步驟 1：編輯 MCP 設定
- 開啟
Settings → Cursor Settings → MCP & Integrations - 點擊
+ New MCP Server - 在
.cursor/mcp.json加入以下設定：
{
"mcpServers": {
"webflow": {
"url": "https://mcp.webflow.com/sse"
}
}
}
步驟 2：授權
儲存檔案後，Cursor 會自動開啟 OAuth 登入頁面，授權 Webflow 網站存取權。
步驟 3：開啟 Designer 與 Bridge App
- 在 Webflow Designer 中開啟你的網站
- 按
E開啟 Apps 面板，啟動 Webflow MCP Bridge App - 等待連接成功指示
方法三：API Token 手動設定（最穩定）
如果你遇到 OAuth 問題，建議使用 API Token 方式：
步驟 1：生成 Webflow API Token
- 登入 Webflow，前往 Workspace Settings
- 進入 Integrations → API Access → Generate API Token
- Token 名稱建議設為「MCP Claude Integration」
- 權限選擇：
sites:read、cms:read、cms:write - 立即複製 Token（Webflow 只顯示一次）
步驟 2：設定 Claude Desktop
- 啟用開發者模式：
Help → Troubleshooting → Enable Developer Mode - 開啟設定：
File → Settings → Developer → Edit Config - 編輯
claude_desktop_config.json：
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["-y", "webflow-mcp-server@latest"],
"env": {
"WEBFLOW_TOKEN": "你的_API_Token_這裡"
}
}
}
}
- 重啟 Claude Desktop（
Cmd/Ctrl + R）
驗證連接
輸入測試指令：
「列出我的所有 Webflow 網站」
如果 Claude 能正確顯示網站列表，表示設定成功。
核心功能與工具分類
Webflow MCP Server 提供兩大類工具 ：
| 類別 | 用途 | 需要 Designer | 主要工具 |
|---|---|---|---|
| Designer API | 視覺設計與畫布操作 |  必需（需開啟 Bridge App） |
element_builder、style_tool、variable_tool、de_component_tool |
| Data API | CMS、頁面設定、SEO、腳本 |  不需要 |
collections_list、pages_update_page_settings、sites_publish |
實用 Prompt 範例
1. 審核與優化現有網站
角色：Webflow SEO 專家
目標：審核我網站上所有頁面的 SEO 元素，識別缺少 meta description、
重複標題或圖片缺少 alt text 的問題，並提供修復建議。
執行步驟：
1. 使用 `sites_list` 取得我的網站清單
2. 使用 `pages_list` 取得所有頁面
3. 使用 `pages_get_metadata` 檢查每個頁面的 SEO 設定
4. 分析後回報：
- 缺少 meta description 的頁面清單
- 標題長度超過 60 字元的頁面
- 建議的修正方案
成功標準：提供一份完整的 SEO 審核報告，包含具體頁面名稱與建議修正內容。
2. 批量生成 CMS 內容
分析我 Blog collection 中最近 5 篇文章的風格與結構，
然後根據相同風格生成 3 篇新的文章點子，
包含標題、SEO 關鍵字建議、以及完整的文章大綱。
確認結構符合現有 collection 的欄位設定。
3. 創建設計組件（Component）
角色：Webflow 組件專家
目標：將現有 Hero Section 轉換為可重複使用的 Webflow Component，
並設定 Component Properties 讓內容可以動態調整。
執行步驟：
1. 使用 `de_page_tool`（action: `get_current_page`）確認當前頁面
2. 使用 `element_tool`（action: `select_element`）選取 Hero Section 的 wrapper
3. 使用 `de_component_tool`（action: `transform_element_to_component`）轉換為組件
4. 使用 `de_component_tool`（action: `open_component_view`）進入組件編輯模式
5. 設定組件屬性（標題文字、按鈕連結、背景圖片）
6. 使用 `de_component_tool`（action: `close_component_view`）完成編輯
錯誤處理：
- 若元素巢狀超過 3 層，先使用 `element_builder` 重建結構
- 若組件名稱已存在，建議替代名稱並詢問確認
成功標準：
- 成功創建名為 "Hero Card" 的組件
- 包含可編輯的標題、按鈕文字、連結屬性
- 在組件面板中可見且可拖曳使用
前置條件：Webflow Designer 與 MCP Bridge App 必須開啟
4. 設計系統自動化
審核網站中所有樣式（Styles），識別應該使用 CSS Variables 的屬性。
若適合的變數已存在，連結樣式到變數；
若不存在，創建變數並更新樣式使用它們。
遵循 Webflow Designer 的 longhand property 規範。
參考文件：
- Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview.md
- Longhand CSS only in Designer styles
最佳實踐與技巧
提示詞撰寫原則
有效的 Prompt 結構：
- 目標（Goal）：2-3 句話說明要完成什麼
- 參考資料（References）：提供相關文件連結（可加上
.md取得 Markdown 版本） - 順序步驟（Sequential Tasks）：明確列出工具名稱與動作
- 錯誤處理（Error Handling）：預期可能的失敗與應對方式
- 成功標準（Success Criteria）：定義完成標準
安全建議
- 最小權限原則：為 MCP 創建專用的 API Token，僅授予必要權限
- 定期輪換：每 3 個月更新一次 Token
- 生產環境保護：在生產網站操作時，設定 Claude 需要批准才能執行寫入動作
效能優化
- 批次操作：使用 Data API 進行大量 CMS 更新時，利用批次處理減少 API 呼叫
- 查詢先行：使用 Designer API 時，先
get_styles查詢現有樣式再修改，避免重複創建 - 深度限制：
element_builder最多支援 3 層巢狀結構，超出需分批建立
常見問題排解
| 問題 | 解決方案 |
|---|---|
| MCP 連接失敗 | 確認 Node.js 版本 ≥ 22.3.0；檢查 Bridge App 是否已開啟並連線 |
| OAuth 授權問題 | 改用 API Token 手動設定方式，更穩定且可控 |
| Designer 工具無回應 | 必須在 Designer 中開啟 MCP Bridge App，且只能在有 Designer 權限的網站使用 |
| Claude 說無法存取 | 重新授權：在 Claude 設定中移除並重新新增 Webflow 連接器 |
進階應用場景
- 跨平台自動化：結合 Google Drive MCP、Slack MCP，建立從資產上傳到網站發布的完整流程
- AI 驅動的設計審核：讓 Claude 分析網站無障礙設計（Accessibility）問題並生成修復 CSS
- 多語言內容管理：自動翻譯 CMS 內容並批量更新到不同語言的 collection
- 與版本控制整合：透過 GitHub MCP，將 Webflow 自定義代碼變更自動同步到程式碼倉庫
透過 Webflow MCP，你可以將原本需要數小時的手動操作（如生成 50 個產品頁面、審核 200 頁的 SEO）縮短至 15-30 分鐘，並保持內容風格的一致性 。