Webflow 发布 MCP 2.0：AI 代理可建组件、改设计变量、查流量

2026 年 7 月，Webflow 正式发布 MCP 2.0。核心能力一目了然：你的 AI 代理现在可以从一张截图创建 Webflow 组件、在一次对话中更新超过 50 个设计令牌（design token）、用自然语言查询站点流量分析。这对无代码/低代码建站者来说是一个标志性变化——AI 代理真正"进入"了设计与构建的环节。

告别桥接应用

如果你用过此前的 MCP 服务器，可能还记得需要一直开着浏览器标签里的桥接应用（bridge app），代理才能访问并操作你的站点。新版本对大多数操作已不再需要它——只有当代理需要访问当前画布、或你让它执行"更新我当前所在的页面"这类任务时，才会提示你启用桥接应用。

把设计工作交给代理

要规模化维护 Webflow 站点，值得投入精力建立设计系统，其基础是 CSS 变量。MCP 2.0 给了代理对这些变量的完全访问权：读取变量集合、创建与重排变量、新增变量模式。这意味着代理可以基于驱动站点的真实令牌进行推理，而不是猜测硬编码值。

文章作者的一个实践：觉得站点颜色"太满"，就把问题直接交给 Cursor 代理——"请检查设计系统并提出不同的配色方案，给我一个预览备选方案的方式"。代理读取了驱动设计的变量集合，构建了快速原型预览更柔和的配色，选定后一次性更新了 50 多个设计令牌，还新建了变量模式方便切换。

从截图构建组件

MCP 2.0 还让代理完全控制 Webflow 组件：创建、添加 props、变体与插槽、设置元数据，全部基于站点现有元素与样式。一个高效做法是给代理喂截图提供额外上下文——把组件草图截图发给 Cursor，要求"创建一个大概长这样的 manifest 组件，所有字段可配置"，代理会分析截图、检查站点现有结构、用现有元素与样式构建新组件，甚至能截图确认结果是否与给出的草图一致。

用技能与规则教会代理你的偏好

上下文决定成败。Webflow 站点现在新增"Instructions（指令）"区域，把 AI 上下文分为两类：

  • 规则（Rules）：始终生效的护栏，适用于所有代理交互，例如"使用我们的设计令牌""绝不硬编码颜色""匹配我们的命名规范"。
  • 技能（Skills）：按需加载的剧本。只有当任务需要时，代理才加载对应技能。一个"创建组件"的技能可以精确记录你的团队如何构建组件：结构、props、变量、命名。

你还可以在 AI 上下文中直接引用 Webflow 的变量、组件与样式，让代理访问真实数据而不是过时信息。文中的示例组件正是靠一个预定义技能，让代理第一次尝试就做对了。

一个可复用的 Rules 模板

把下面几条写进 Webflow 的 Instructions，几乎所有代理任务都能少踩坑：

规则（Rules）：
- 所有颜色必须来自设计系统的变量，禁止硬编码 hex
- 组件命名遵循 PascalCase，变量遵循 kebab-case
- 图片资源必须压缩后上传，格式优先 webp
- 改页面结构前，先读取当前页面的组件与类名再动手

技能（Skills）示例——"创建组件"：

当被要求创建组件时：
1. 读取现有同类组件的结构与 props
2. 复用站点已有的颜色变量与字体样式
3. 用截图提供的参考，但不复制其像素级实现
4. 创建后给出 1-2 个变体，并说明命名

把规范写进规则而不是每次口头交代，是 MCP 2.0 与"让 AI 临时帮忙"最大的区别：前者是可积累的资产，后者每次都是从零开始。

还有更多

MCP 2.0 还包括：读取表单与提交、操作页面分支并执行角色权限、管理资产与文件夹（对话内压缩图片为 webp/avif）、读写页面级与站点级的 head/footer 代码、在 Enterprise 计划上访问站点历史了解谁改了什么，以及用自然语言查询流量（热门页面、渠道来源、互动、停留时长）。

常见问题

问：MCP 2.0 会让设计师失业吗？
短期不会，反而提高了设计师的杠杆。MCP 更擅长执行"已有明确规范"的重复任务，而"定义规范、判断审美、做取舍"仍是人的工作。

问：免费或基础计划能用 MCP 吗？
大部分 MCP 能力面向有 Webflow 站点权限的用户，站点历史等高级能力需要 Enterprise 计划。动手前先确认你的计划包含哪些能力。

问：代理改坏了怎么办？
MCP 2.0 的操作都基于站点的真实结构，配合页面分支（page branches）可以先在分支上试，确认无误再合并，别在主干上直接让代理大改。

16IDC 观察

对用 Webflow 做营销站、作品集或企业站的团队，MCP 2.0 的价值在于"把团队规范沉淀为代理能遵循的指令"。想上手，先读本站的 Webflow 可视化开发指南，并对照 建站平台对比 判断无代码建站是否适合你。若你更关心整体 AI 建站趋势，可看 AI 建站工具。更多内容请查看 网站构建分类。

原文来源：https://webflow.com/blog/mcp-2-features
参考：Webflow MCP 开发者文档 https://developers.webflow.com/data/docs/mcp；MCP 官方协议 https://modelcontextprotocol.io/