用 AI 助手生成页面，或从设计工具导出 HTML，能完成大部分工作。把它变成一个可维护的 Elementor 页面，则是一条简短、可重复的流程。
第 1 步 — 先处理好图片
人们常常跳过这一步，而它会导致最多的返工。AI 无法把真实照片嵌入 HTML，设计工具导出的内容又经常使用本地路径或 data URL——这些都难以成为媒体库附件。
两个不错的做法：先把图片上传到媒体库，并在 HTML 中引用真实 URL；或者接受空占位符，之后再在 Elementor 中填充。如果采用占位符路线，请确保每个图片都有有意义的 alt 属性——这些文字会保留为槽位说明，让你知道哪张图片该放哪里。
第 2 步 — 要求适合转换的标记
如果你在给模型写提示词，要说明你需要什么：语义化标签、每个区块只有一个包装元素的扁平 DOM、所有 CSS 放在一个样式块中、使用 Font Awesome 图标类而不是内联 SVG，并且不要外部脚本或字体。这几条限制对结果的影响，比之后能做的任何事都大。
第 3 步 — 用正确的选项进行转换
- 原生组件模式，这样得到的是可编辑的小部件，而不是一个 HTML 块。
- 图标：匹配 Elementor 图标库，让图标变成真正可替换的图标。
- 颜色和字体：如果要放到品牌网站上，就用站点值；如果是在复刻设计，就用原始值。
- 图片：除非你已经有真实 URL，否则使用空占位符。
第 4 步 — 导出前检查结构
打开结构图。查看组件数量、最大嵌套深度和置信度明细。红色行表示仍保留为 HTML，值得看一眼。如果深度很高，就在树中设置更深的复制根节点，或简化源内容并重新转换——修复输入几乎总比修补输出更快。
第 5 步 — 粘贴并完成
粘贴到 Elementor，然后执行标准的收尾流程：重新链接按钮、设置悬停状态、连接表单或菜单、上传占位图片，并依次检查桌面端、平板端和移动端。
第 6 步 — 把可复用的部分存起来
任何你会再次使用的内容——定价行、功能网格、客户评价区块——都马上保存到模板库。经过几个项目，它们会变成一个组件库，让下一次构建快得多，而且它的价值超过任何单个转换页面。
提示词中最关键的四条指令
第 2 步决定了大部分结果，因此值得明确哪些指令真正会影响结果。按影响从大到小大致排序：
- “不要将图片嵌入为 Base64 data URL。”如果让模型自行处理，要求生成自包含页面时，它会把每张图片都内联进去，一个包含十二张图片的页面会膨胀到超过半 MB。这些无法成为媒体库附件，因此全部都会以空槽位形式进入。请要求使用真实托管 URL，或使用普通占位路径。
- “图标使用 Font Awesome 类，不要用内联 SVG。”Font Awesome 类名会直接映射到 Elementor 的图标库，成为真正可替换的图标。手绘的内联 SVG 根本无法进入那个控件，只会保留为原始 HTML。这一行就能决定是可编辑图标，还是满页红色 HTML 块。
- “保持 DOM 扁平——每个区块一个包装元素，不要多余的嵌套。”转换器会镜像你的标记，所以输入有多少嵌套，输出就有多少嵌套。模型默认会生成深度嵌套的包装 div，因为大多数训练数据就是那样。
- “使用语义化标签。”真正的
<h1>–<h3>、<p>、<button>、<ul>。语义化标签会映射到原生小部件；完全用样式化 div 构建的页面，能给转换器利用的东西要少得多。
包含这四条的现成提示词在 AI 提示词页面上，其中包括一个专门为“图片优先”工作流编写的提示词。
为什么设计工具导出与 AI 输出的表现不同
这两种来源的失败方向相反，知道自己在处理哪一种，你就能知道该从哪里找问题。
AI 生成的 HTML 通常在语义上还不错——它会使用真正的标题和段落，因为它是用文档训练出来的。它的弱点是内联 Base64 图片、内联 SVG 图标，以及比布局所需更多的包装 div。这三者都可以通过修改提示词并重新生成来解决，只需要几秒钟。
设计工具导出则相反。图片和资源通常引用正确，但标记往往是绝对定位的 div，带有生成的类名，完全没有语义结构——因为工具描述的是画布，而不是文档。通常任何地方都没有标题元素，因此没有任何内容能成为 Heading 小部件。
第二种情况其实不是转换问题。绝对定位的画布输出并不对应任何 Elementor 布局，而且没有任何工具能推断出从未表达过的文档结构。如果你的导出内容看起来是那样，诚实的做法是重建结构，而不是转换它——或者回到设计工具，如果它提供语义化、流式布局版本，就导出那种版本。
重新生成，而不是修补
让这条流程变快的习惯，是把源内容视为可丢弃的。如果结构图显示深度为 8，还有六个红色 HTML 块，不要打开 Elementor 开始修补——给提示词加上两行，重新生成，再转换一次。这个循环大约只要一分钟。
在 Elementor 内部修复同样的问题要花一个小时，而且到下一个页面还要重复一遍。修复提示词则能修复之后你生成的每一个页面，这正是这套工作流值得建立的根本原因。