Webflow MCP Tutorial

社區資源
,
1

以下用「Webflow MCP = 讓 AI Agent 直接讀寫 Webflow 專案的工具層」來理解會最清楚。它可讓 Claude、Claude Code、Codex 這類 MCP-compatible 工具透過 Webflow API 操作 Webflow：例如讀取站點結構、管理 CMS、修改頁面/樣式、管理 assets、custom code 等；但它不是萬能，Webflow 官方也明確列出目前不是所有 Data API / Designer API endpoint 都能用，且要改設計畫布時必須開啟 Webflow MCP Bridge App。

1. 三種工具的最佳分工

Claude App / Claude Cowork：適合「非工程日常營運」

Claude Cowork 是 Anthropic 提供給知識工作者的 agentic 工作模式，可在 Claude Desktop 中處理多步驟任務、讀寫你授權的本機檔案，並產出文件、表格、研究整理等成品；官方也提到 Cowork 可處理複雜、多步驟工作，並具備本機檔案存取、長時間任務、排程任務等能力。

適合用法：

  • 把本機的內容 brief、SEO 表格、客戶提供的 Word/PDF/CSV 整理後，建立 Webflow CMS 草稿。
  • 讀取網站現有 CMS 結構，整理「哪些文章缺 meta description、OG image、canonical、分類」。
  • 根據品牌指南或內容規範，批次修正 CMS 文章標題、摘要、CTA 文案。
  • 產出「修改前 / 修改後」清單，先讓你審核，再透過 Webflow MCP 更新。
  • 對非工程同事來說，Cowork 比 Claude Code 更像「把一個營運任務交出去」。

建議 prompt：

請讀取我這個資料夾中的 SEO brief 和 CSV。先列出你會在 Webflow CMS 修改的欄位、每筆項目的修改前後差異，不要直接寫入。等我確認後，再把更新套用到指定的 Blog collection 草稿項目。

Claude Code：適合「工程 / agency / 多站點 WebOps」

Claude Code 官方文件說明，它可以透過 MCP 連接外部工具、資料庫與 API，讓 Claude 不只靠你貼進對話的內容，而是能直接讀取並操作系統；Claude Code 也支援用 remote HTTP MCP server 的方式連接雲端服務。

適合用法：

  • 每個客戶 / 每個 Webflow site 建一個 Claude Code project，隔離授權與設定。
  • 在本機 repo 中管理 custom JS/CSS、Webflow embed code、migration scripts，再透過 Webflow MCP 更新站點。
  • 先用 Claude Code 產生 migration / audit script，再讓 script 透過 Webflow API 或 MCP 做重複性工作。
  • 結合 GitHub、Playwright、Sentry、Figma 等 MCP，做「設計 → 程式碼 → Webflow → QA」流程。
  • 對 agency 特別有用：多客戶、多 workspace、多批次內容時，比單純在 Claude App 裡聊天更可控。

Claude Code 專案層級設定範例：

mkdir webflow-client-a
cd webflow-client-a

claude mcp add --transport http webflow https://mcp.webflow.com/mcp -s project

Webflow 官方文件也建議可以為不同 Webflow sites 建立不同 Claude Code project，讓授權與 token usage 更容易分開管理。

OpenAI Codex：適合「程式碼工作流 + Webflow 外部操作」

OpenAI 官方文件顯示，Codex 支援 MCP servers，且同時支援 CLI 與 IDE extension；它可連接 STDIO server，也支援 Streamable HTTP server、Bearer token 與 OAuth。Codex 的 MCP 設定會放在 config.toml，預設位置是 ~/.codex/config.toml，也可放在 project-scoped .codex/config.toml。

Codex 設定範例：

# ~/.codex/config.toml
# 或專案內 .codex/config.toml

[mcp_servers.webflow]
url = "https://mcp.webflow.com/mcp"

接著可嘗試：

codex mcp login webflow
codex
/mcp

適合用法：

  • 把 Webflow 當成部署 / CMS / content endpoint，但主要開發仍在本機 repo。
  • 用 Codex 產生資料轉換腳本，例如 WordPress / HubSpot / Notion → Webflow CMS。
  • 寫自動化測試或 QA script，檢查 Webflow 發佈後頁面、schema、redirect、meta、internal links。
  • 對 custom code-heavy 的 Webflow 專案，用 Codex 管理 JS/CSS/HTML snippets，而不是把邏輯散落在 Webflow UI。
  • 若你已經用 Codex CLI 做 Next.js / Astro / Tailwind workflow，可把 Webflow MCP 當成「讀取既有 Webflow 結構、搬資料、維護舊站」的工具。

2. Webflow MCP 可以做的高價值工作流

A. CMS 批次維護

這是最穩、最值得先試的方向。Webflow 官方文件與 Reddit 社群都常提到 CMS / metadata / bulk update。Webflow MCP 可管理 CMS collections、items、page settings 與 metadata；Reddit 上也有人分享用 Claude + Webflow MCP 批次更新 meta title/description 裡的年份，或掃描 Blog collection 裡過時內容。

範例：

請列出 Blog collection 中所有 title 或 summary 含有 2023、2024 的項目。先產生修改計畫，把年份更新為 2026，但不要直接寫入。等我確認後，只更新我核准的 items。

B. SEO audit + 修正草稿

Webflow 官方 blog 示範 Claude Connector 可抓取頁面 SEO metadata，檢查 title、meta description、Open Graph 等，並可產生修正版；Reddit 上也有人把 Webflow + Ahrefs 接給 Claude，用來檢查頁面結構、CMS collections、SEO titles/descriptions、schema markup、internal linking、redirects。

範例：

請掃描所有 published pages 與 CMS pages，列出缺少 meta description、title 超過 60 字元、OG title 空白、schema 欄位不一致的項目。先輸出表格，不要修改。第二步再建立修正草稿。

C. CMS 欄位新增與 backfill

Webflow 官方 blog 有一個很實用的例子：新增 Blog Posts 的 reading time 欄位，並根據既有文章字數回填資料。這類「新增欄位 + 批次補值」很適合 MCP，因為人工操作很重複。

範例：

請在 Blog Posts collection 新增 reading_time number 欄位。先計算每篇文章字數與建議 reading time，輸出預覽表。確認後再批次寫入。

D. 設計系統清理與 class cleanup

Webflow MCP 支援透過 Designer API 建立/修改元素、套用 classes、管理 CSS properties 與 design variables；但 Webflow 官方也說，要做 Designer API 操作時 Bridge App 必須在 Webflow Designer 中開啟。這類任務適合「小範圍、可回復、可審核」的清理，不適合一次大改整站。

範例：

請找出 Blog listing 頁面中所有使用文字連結樣式的「Read article」連結。不要新增樣式，只把它們套用既有的 primary button class。先列出會被修改的元素。

E. Newsletter / CTA 區塊建立

Webflow 官方示範可用 Claude Connector 新增 newsletter signup section，包括 heading、description、email field、submit button，並保持為可在 Designer 中繼續編輯的 Webflow elements。這適合快速產出「可人工微調」的區塊，而不是要求 AI 完整設計整個網站。

範例：

請在 Blog post template 底部新增 newsletter signup section。沿用現有 typography、spacing、button class。完成後只建立在 staging / draft 狀態，讓我在 Designer 檢查。

3. Reddit 社群常見 use cases 與真實回饋

我會把 Reddit 當成「使用者實戰靈感 + 風險訊號」，不是官方保證。

社群常見正向用法

Reddit 上反覆出現的實用方向包括：bulk CMS management、SEO audit、class cleanup、CTA 改善、internal link opportunities。也有人分享將 Claude 直接接 Webflow 與 Ahrefs，讓它讀取 live Webflow data 與 SEO 工具資料，檢查 page structure、CMS、schema、internal links 與 redirects。

另一個常見用法是「內容營運自動化」：例如將 topic、keyword data、internal links、meta tags、OG image 等流程串起來，最後發佈到 Webflow blog。不過這類全自動 SEO 內容在 Reddit 也被質疑可能傷害長期品質與可信度，所以更適合做 draft + human review，而不是無人審核自動發佈。

社群常見負面回饋

不少 Reddit 使用者認為 Webflow MCP 對「重複性 CMS / SEO 任務」有幫助，但對「複雜設計修改、完整取代 Designer UI、嚴肅大型工程」仍不穩。有使用者提到連線需要保持 Designer mode、preview mode 可能斷線，也有人說某些任務寫 prompt 的時間可能比手動做還長。

Agency 或大型站點使用者還會碰到 workspace 切換、授權、不同客戶站點管理的問題；也有人指出 Webflow 缺少像完整 CI/CD、staging data、程式碼檢查那樣的防護時，讓 AI 對 production 做大量 bulk work 會有風險。

4. 我會建議你這樣開始

第一階段：只做 read-only audit

先不要讓 AI 寫入 Webflow。讓 Claude / Codex 做這些事：

  • 列出 pages、CMS collections、欄位 schema。
  • 找出 SEO metadata 缺漏。
  • 找出未發佈頁面、空欄位、缺 alt text、重複 slug。
  • 匯出修改計畫。

Webflow 官方 getting started 也提供類似 prompt，例如列出 collections 與 field structures、audit broken links / missing alt text / incomplete meta descriptions。

第二階段：只寫入 draft / 少量 CMS

先從 5–10 筆 CMS items 開始，不要一次處理 500 筆。Reddit 使用者也提醒，指定 collection 很重要，否則容易吃掉 usage limit 或讓任務範圍過大。

第三階段：建立標準 approval workflow

每次都要求 agent 先輸出：

  1. 會修改哪些 site / collection / page
  2. 每個欄位的 before / after
  3. 風險與 rollback 方法
  4. 等你確認後才寫入

這比「直接幫我改好」安全很多。

5. 三工具組合的實戰架構

內容營運 / SEO 團隊：

  • Claude Cowork：讀取 brief、表格、客戶資料，整理成 CMS draft plan。
  • Webflow MCP：建立或更新 CMS draft。
  • Claude App：讓行銷同事用自然語言審核與要求修改。

工程 / agency 團隊：

  • Claude Code：每個客戶一個 project，管理 MCP 授權與本機 scripts。
  • Webflow MCP：讀寫 Webflow site / CMS / Designer。
  • GitHub + Playwright MCP：產生測試、檢查發布頁面、建立變更紀錄。

Codex-heavy 團隊：

  • Codex：管理 repo、產生 migration scripts、重構 custom code。
  • Webflow MCP：同步 CMS、metadata、assets、custom code。
  • Webflow Designer：人工確認設計與互動狀態。

6. 最值得試的 10 個點子

  1. SEO metadata 批次修正：抓所有 pages / CMS pages，產生 title / description 修正草稿。
  2. 舊年份內容刷新：把 2023/2024 的 meta、文章摘要、CTA 更新到 2026，但先列出清單。
  3. Blog reading time backfill：新增 reading time 欄位並批次回填。
  4. Internal link map：根據 blog / glossary 內容找內部連結機會。
  5. Schema audit：檢查 FAQ、Article、Product schema 是否缺欄位或不一致。
  6. 未發佈頁面盤點：列出 unpublished pages、last modified date、可能用途。
  7. CMS migration assistant：從 WordPress / HubSpot / Notion 匯入資料前，先讓 Claude Code / Codex 寫轉換腳本。
  8. 客戶站點健檢報告：Cowork 讀 Webflow + SEO 資料，輸出 PDF / doc 報告草稿。
  9. Webflow custom code 管理：用 Claude Code / Codex 把 JS/CSS 放在 repo，再同步到 Webflow。
  10. Landing page draft pipeline：Notion brief → Claude Cowork 整理 → Webflow CMS draft → Designer 人工確認 → publish。

7. 最重要的限制與安全做法

Webflow MCP 目前不能自動化所有 Webflow developer tools，不能控制 site / Workspace access，而且設計修改需要 MCP Bridge App 開啟；它也不支援建立新的 localized CMS items，但可讀取與更新既有 secondary locale 的 CMS items 與 static content。

實務上建議：

  • 不要讓多個 agent 同時改同一個 site。
  • 不要一開始就允許 production bulk update。
  • 先 draft、再人工審核、最後 publish。
  • 對 client site 使用 project-scoped MCP 設定。
  • 設計修改交給 AI 做「小範圍套用既有 class」，不要讓它自由重設整站。
  • 每次要求 before/after diff。
  • 對 SEO 內容，AI 可產草稿，但不要無審核自動發佈。