Elementor MCP：把 AI 生成的 HTML 变成可编辑的 Elementor 页面

Elementor 现在有了官方途径，把 AI 设计的 HTML 页面变成真正可编辑的 Elementor 页面：随 Elementor 4.3 推出的 Elementor MCP。我们在一个干净的 WordPress 站点上把它配好，用它重建了一个包含十个区块的落地页，并把途中所有踩过的坑都记了下来。这篇就是那份记录：它是什么、怎么接入、行之有效的工作流程，以及开始之前值得知道的几处细节。

Elementor MCP 是什么

MCP（Model Context Protocol，模型上下文协议）是让 AI 工具调用其他软件功能的一种标准方式。Elementor MCP 把 Elementor 的建页能力开放给你正在使用的 AI 工具——Claude Code、Claude Desktop、Codex、Cursor，或任何其他 MCP 客户端——让助手可以创建页面、添加元素并设置样式、管理你的全局类和变量，并把结果保存在你自己的站点里。整个过程不需要手动粘贴或导入：AI 直接在 Elementor 里搭建，它创建的每样东西都是普通元素，之后你可以在面板里选中并编辑。

它使用的是 Elementor 较新的 atomic 元素——Flexbox、Div block 和 Grid 容器，以及 Heading、Paragraph、Button、Image、SVG、Tabs、Accordion 等——样式通过全局类和变量来设置，而不是逐个小部件设置。这是开始之前最需要理解的一点，因为它同时决定了使用条件和工作流程。

Elementor 编辑器中打开着 MCP 搭建的页面：左侧是 Atomic 元素面板，右侧的结构面板列出了它创建的各个区块：Nav、Hero、Logos、Features、Stats、Quote、Pricing、FAQ、CTA 和 Footer。 — MCP 最终留下的是普通的 atomic 元素，每个区块一个命名好的容器，全部都能在面板里编辑。

需要准备什么

WordPress 6.8 或更高版本，以及 Elementor 4.3 或更高版本。免费版插件就足以完成接入和搭建；Elementor Pro 和免费的 Angie 插件会提供更多能力，例如表单、主题模板和自定义小部件。
开启 Atomic Editor。首次安装时就是 Elementor 4 的站点，通常已经默认开启。从旧版本升级到 4.3 的站点则默认关闭，在你到 Elementor → Settings → Atomic Editor 中打开之前，MCP 的搭建工具都处于锁定状态。
一个支持 MCP 的 AI 工具。Elementor 本身不对 MCP 收费；你要付的是 AI 工具为这些工作收取的费用。

接入大约只要一分钟

在 WordPress 中打开 Elementor → Elementor MCP，点击 Enable MCP access。
选择你的工具：Claude Code、Claude Desktop、Codex、Cursor 或 Other。
勾选确认框，确认会为站点创建一个应用程序密码。
点击 Generate Prompt，复制生成的提示词并粘贴到你的 AI 工具里。它会自动完成连接配置；有些工具之后需要重启一次。

WordPress 中的 Elementor MCP 页面：有 Claude Code、Claude Desktop、Codex、Cursor 和 Other 几个选项卡，一个确认将创建应用程序密码的勾选框，以及 Generate Prompt 按钮。 — 我们测试站上的 Elementor → Elementor MCP。选好工具、勾选确认框、生成提示词，再粘贴到工具里即可。

这条连接以创建它的那个 WordPress 用户的权限行事，所以编辑账号只能做编辑能做的事。你可以在 用户 → 个人资料 → 应用程序密码 中撤销单条连接，也可以在同一个 Elementor 页面里为整个站点关闭 MCP。

行之有效的工作流程

Elementor 官方的演示和我们的测试，指向的是同一个工作顺序。关键在于每一步都给下一步一个确定的参照，让 AI 照着已经做好的决定去执行，而不是自己发挥。如果你想看完整的过程，Elementor 关于这套流程的网络研讨会（约 45 分钟，在 YouTube 上）跟着编辑器团队的一位产品经理，用这种方法搭完了一整个页面。

先把外观定下来。用几张快速生成的图片探索方向，然后让 AI 把页面写成纯 HTML 和 CSS。HTML 改起来成本很低，布局、文案和配色都在这一步反复打磨。
上传你的图片。开始搭建前先把页面用到的图片放进媒体库，让 AI 直接引用，而不是自己凑合。
建立设计系统。让 AI 读取 HTML，把配色和字体建成全局变量，把重复出现的样式——按钮、区块标题、卡片——建成全局类。保持精简：在 Elementor 自己的演示里，第一轮生成了一百多个类，最后精简成约六十个通用类。
一次只搭一个区块，配一句简短的指令，比如「用我们的类，照着 HTML 搭出价格区块」。步子小，检查起来更容易，返工也更便宜。
每搭完一个区块就检查一遍，在编辑器里看，也切到手机宽度看，再继续下一个。Elementor 团队说得很明白，结果仍然需要人来做最后一轮打磨——在他们的演示里，有一张图片在手机上需要调整，一个带选项卡的首屏也需要微调。

测试中学到的七件事

我们在一个全新安装的 WordPress 上使用 Elementor 4.3.5，没有安装 Pro 或 Angie，重建了一个落地页：首屏、logo 条、六张特性卡片、数据条、一条用户评价、三档价格、FAQ、行动号召横幅和页脚。结果和原稿非常接近。下面这些细节是我们花了时间的地方：

并排对比：左边是原始的 HTML 落地页，右边是用 Elementor MCP 重建的同一页面。两者几乎一模一样，只是右边标题里突出显示的词丢失了颜色。 — 左边是原始 HTML，右边是 MCP 搭建的页面。留意标题：「whole team」的颜色丢了，这是没有任何警告就被丢掉的样式之一。

上传 SVG 图标需要打开一个设置。SVG 元素只显示媒体库里的图标，而 WordPress 默认拒绝上传 SVG。打开 Elementor 的 Enable Unfiltered File Uploads 设置，再通过 Elementor 的媒体选择器上传图标。
线框图标可能会被填成实心。SVG 元素会把图标的填充色设为当前文字颜色，于是只有描边的图标——大多数 AI 生成页面用的正是这种风格——会显示成实心形状。给 SVG 元素设置透明的文字颜色后，线框就回来了。
类的顺序就是优先级。两个全局类设置了同一个属性时，排在列表上方的那个生效。类按创建顺序排列，所以在基础按钮类之后创建的小号按钮类，它较小的内边距会被覆盖。我们在开始搭建前让 AI 把这些修饰类移到了基础类之上。
留意被悄悄丢掉的样式。大多数不支持的 CSS 会在工具的返回结果里以警告形式报告——比如单边的边框颜色、带尺寸的径向渐变、单独设置的行间距。但有几处是没有任何警告就被丢掉的：标题中一个突出显示的词丢了颜色，价格里给 span 设样式的嵌套规则也没有生效。要发现这些，得去看页面本身，而不是只看返回结果。
文字元素的标签是固定的。Paragraph 元素只接受 p 或 span，所以用 <blockquote> 标记的引语会变成普通段落。
提前考虑手风琴的展开标记。在我们的测试中，无论把图标槽留空还是干脆不写，FAQ 的展开/收起标记都没有出现。按照工具自带的说明，这个槽位放的是一个 SVG 元素，所以要么给它一个上传好的图标，要么之后在编辑器里补上。
用预览链接自检。MCP 可以为当前草稿生成一个临时预览地址。每搭完一个区块就让 AI 去看一眼，是尽早发现问题成本最低的办法。

同一张特性卡片出现了两次：左边的图表图标显示成深色的实心形状，右边则是本来应有的细线框。 — 左边是第一次搭建的结果：SVG 元素把线框图标填成了实心。右边是给 SVG 元素设置透明文字颜色之后。

给个规模上的参考：整个页面大约用了三十次工具调用——其中两次因为我们自己的失误失败了（一个重复的元素名称，和一个 Paragraph 元素不接受的标签），需要重新发送——助手在一台较慢的本地测试服务器上大约工作了一刻钟。每次新会话开始时，助手还要先读一遍 MCP 提供的工具列表，这部分文字量不小，所以短小、范围明确的会话比一次很长的会话更划算。

什么时候更简单的路线更合适

如果你已经在用 AI 编程工具，又希望页面建立在规范的设计系统之上，MCP 是能力最强的选择。如果你只需要把一个区块粘贴进现有页面、不使用 AI 工具，或者需要在仍然使用经典编辑器的站点上使用结果，那么输出经典小部件的转换器是更简单的路线——这正是本站的转换器所做的事，而且完全在你的浏览器里本地运行。两者也能很好地配合：你的 AI 工具做好的 HTML，在两条路线里都是同一份输入。

简而言之

先用 HTML 做设计，上传素材，建立一个精简的设计系统，然后让 MCP 一个区块一个区块地搭建，你每完成一块就检查一块。Elementor MCP 能把一份好的 HTML 设计变成原生、可编辑的 Elementor 结构，而你花在准备上的时间，决定了结果是否干净。

本指南为独立撰写，与 Elementor 没有任何关联。内容基于 2026 年 10 月对 Elementor 4.3.5 的测试；之后的版本细节可能会有变化。