探索 Webflow MCP 2.0 如何將 AI 代理人整合至網站設計流程。支持 CMS、設計系統、權限管理與性能分析，實現自然語言驅動的開發體驗。
Webflow MCP 2.0 更新指南
Webflow 推出了 MCP (Model Context Protocol) 2.0 版本，旨在讓使用者能將 Webflow 與 Claude、ChatGPT 及 Cursor 等 AI 客戶端無縫連接。透過自然語言對話或全自動的代理人工作流 (Agentic Workflows)，使用者可以更高效地設計、構建與管理網站。
MCP 2.0 核心新功能
1. 優化工作流
- 移除橋接應用 (Bridge App)：大多數使用場景不再需要橋接應用，提升了工作流的穩定性與流暢度，並支持同時在多個頁面或網站上進行構建。
2. 全面支持設計系統與 CMS
AI 代理人現在可以深度操作 Webflow 的核心構建元素，而非僅僅在周邊進行修改：
- 組件支持：包含屬性 (Props)、插槽 (Slots) 與變體 (Variants)。
- 樣式管理：支持樣式 (Styles)、變數 (Variables) 與綁定 (Bindings)。
- CMS 整合：可直接操作 CMS 數據與集合 (Collections)。
3. 代理人指令 (Agent Instructions)
使用者可以儲存特定的指導方針，讓 AI 在執行任務時自動參考，確保產出一致性：
- 語調與聲音指南 (Voice and Tone guidelines)
- 設計規範 (Design rules)
- 法律政策 (Legal policies)
4. 協作與治理
為了在規模化運作時保持安全性，MCP 2.0 引入了以下機制：
- 權限強制執行：完全遵循團隊的角色與權限設定。
- 頁面分支 (Page Branching)：支持安全地進行迭代測試。
- AI 歸因日誌：記錄每一次變更，明確標記由 AI 執行，方便追蹤與回溯。
5. 對話式數據分析
使用者可以直接透過 AI 詢問網站性能，無需離開聊天界面即可獲取洞察：
- 流量趨勢分析
- 熱門頁面統計
- 用戶參與度數據
實作建議與限制
如何利用 AI 監督開發過程
雖然 AI 代理人（如 Claude）無法實時看到使用者的螢幕（例如目前開啟的面板或游標位置），但它可以讀取網站的實際結構。這意味著使用者可以在完成某項修改後，要求 AI 驗證該變更是否符合預期或規範。
快速入門資源
- MCP Starter Kit：提供從設定到建立第一個代理人工作流的完整指南。
- 可用性：Webflow MCP 目前對所有網站方案開放，無需額外費用。
應用場景示例
- 使用設計系統與 CMS 數據建立或更新組件。
- 要求 AI 分析網站性能並提出具體的優化建議。
- 設定代理人指令，確保 AI 生成的內容符合品牌形象。