Webflow MCP 2.0 上线：AI 代理可读写设计令牌与组件

Webflow 近日正式推出 MCP 2.0（Model Context Protocol 第二版），将其可视化建站平台与 AI 代理工作流进一步打通。新版本允许 Cursor 等 AI 代理直接读取和修改 Webflow 的设计系统变量、创建组件与变体、调用 CMS，并在对话中查询站点流量分析数据，而无需依赖此前必须保持开启的 bridge 浏览器插件。

对于长期依赖设计令牌（design tokens）管理视觉规范的团队而言，MCP 2.0 带来的最大变化是 AI 终于能「理解」设计系统的底层结构，而不只是猜测硬编码值。

设计令牌全面开放

新版本让 AI 代理拥有对 CSS 变量的完整访问权：可以读取变量集合、创建与重排变量、添加新的变量模式（variable modes）。Webflow 官方在示例中演示了一次典型的色彩重构场景——用户在新建站点后觉得初始配色「太抢眼」，于是让 Cursor 代理接管：

• 代理先读取驱动该站点的变量集合；
• 快速生成多组低饱和度配色方案的可预览原型；
• 用户确认后，一次性更新超过 50 个设计令牌；
• 同时建立新的变量模式，方便在多套配色之间切换。

整个过程在数轮对话内完成，而传统流程往往需要大半天。

从截图直接生成组件

MCP 2.0 还赋予 AI 代理对 Webflow 组件的完整控制能力：创建组件、添加 props、变体、slots 以及元数据，且全部基于站点既有元素与样式构建。一个被官方称为「发现得太晚」的工作流是——直接给代理一张截图作为上下文。

在示例中，作者提供一张粗糙的「manifest」组件草图截图，要求 Cursor 生成可配置字段的新组件。代理会分析截图、检查站点现有结构，并在构建过程中截图自检，确保输出与原图视觉一致。

用「规则」与「技能」约束代理行为

为了让 AI 代理在 Webflow 中获得更准确的上下文，平台新增了侧边栏中的「Instructions」板块，将 AI 上下文分为两类：

• 规则（Rules）：始终生效的全局护栏，例如「使用我们的设计令牌」「禁止硬编码颜色」「遵循命名规范」；
• 技能（Skills）：按需加载的操作手册，例如「创建组件」技能可精确描述团队的组件结构、props、变量与命名习惯。

用户可以直接在 Webflow 中编写这两类上下文，并引用变量、组件、样式等平台原语，让代理始终基于真实数据工作，而非过时的训练信息。

不再依赖 Bridge 插件

此前 MCP 服务器要求用户保持一个运行中的 Bridge 浏览器标签页。MCP 2.0 已取消该限制，大多数操作不再需要 Bridge；只有当代理需要访问当前画布或执行「更新我当前所在页面」类任务时，系统才会提示用户启用 Bridge。

对于使用 Webflow 搭建站点并希望引入 AI 协作的设计与开发团队来说，MCP 2.0 让代理从「辅助生成文本片段」升级为「能理解并修改设计系统」的真正协作者。