如何使用 GemPages MCP 将 HTML 转换为可编辑的 GemPages 页面

GemPages MCP 如何生成 HTML 页面

GemPages MCP 支持从 HTML、图像和 URL 生成 AI 页面。本指南重点介绍如何使用 以HTML为源.

HTML落地页可以来自多种来源：

• 内部开发人员
• 创意或电子商务机构
• Claude Code 或其他 AI 编码工具
• Figma 到 HTML 的转换过程
• 现有营销活动工作流程
• 您的团队已拥有的页面
• 另一个能够生成完整HTML的系统

文件在浏览器中可能看起来已经完成了，但它仍然与商店的页面工作流程是分开的。

如果没有直接连接，团队可能需要手动传输代码，或者请开发人员在 GemPages 中重建页面。这会增加一次交接，也可能导致文案、布局或链接发生更改。

GemPages MCP 允许 AI 通过预设流程完成数据传输。与将最终成果留在本地文件夹不同，该工作流程会创建一个真实的 GemPages 页面，供您的团队预览和编辑。

GemPages MCP 如何从 HTML 创建页面

GemPages MCP 不会将整个 HTML 文件视为一个未区分的块。

它将源代码分成语义部分，分别构建每个部分，并在继续下一步之前验证结果。

1. AI读取已完成的HTML代码

工作流程从您将 HTML 代码粘贴到对话中或将 AI 指向本地位置开始。 的.html 文件中。

您可以提供：

• 一个 HTML 着陆页
• 多个 HTML 文件
• 包含一批页面的文件夹

源 HTML 应该已经包含预期的文本、布局、图像和样式。

重大内容或设计变更最好在工作流程开始前完成。从稳定的 HTML 版本开始可以减少长时间转换过程中的混乱。

2. 页面被划分为多个语义部分

人工智能读取HTML代码，并识别页面的功能部分。

根据源设计的不同，这些可能包括：

• Hero (英雄)
• 产品介绍
• 优点
• 产品特性
• 它是如何运行的？
• 产品对比
• 社会证明
• 评价
• 提供
• 常见问题
• 最终的 CTA

具体的章节列表取决于所提供的HTML代码。

将页面划分为语义部分，可以为人工智能提供清晰的结构。此外，它还允许工作流程将问题隔离到特定部分，而不是一次性处理整个页面。

3. 获取 GemPages 的生成规则

在构建页面之前，AI 会检索 GemPages 的生成规则。

这些规则提供了将 HTML 转换为 GemPages 页面所需的指令。人工智能只需获取一次这些规则，并在整个运行过程中将其作为参考。

这样可以确保工作流程从第一部分到最后一部分始终保持相同的建筑要求。

4. 每个部分都已构建并验证

人工智能一次处理一个部分。

每个部分都将：

1. 阅读相关的HTML代码。
2. 根据 GemPages 的生成规则构建该部分。
3. 验证生成的结果。
4. 解决验证过程中发现的问题。
5. 将完成的部分推送到页面上。
6. 请继续阅读下一节。

这种逐节检查的方法可以发现诸如以下的问题：

• 缺少副本
• 页面元素不完整
• 布局差异
• 内容放置位置错误
• 与源不匹配的按钮
• 构建过程中省略的部分
• HTML 和生成结果之间的其他差异

一个部分构建并验证完成后，人工智能就会继续处理下一个部分。

5. 整个页面在 GemPages 中创建

每个部分处理完毕后，工作流程就会在 GemPages 应用中完成页面生成。

HTML 不再仅仅是一个本地代码文件。您的团队会收到一个可以打开并继续工作的页面。

6. 人工智能返回页面链接

页面完成后，人工智能返回：

• 预览网址
• 编辑器网址

预览网址允许您在发布前检查整个页面。

编辑器 URL 会在 GemPages 中打开页面，以便您的团队可以继续进行更改。

工作流程在创建页面并返回这些链接后即告结束。人工智能不会自动发布页面。

如何一步一步用 HTML 创建 GemPages 页面

在 Claude Code、Claude Cowork、Claude Desktop 或其他兼容的 AI 环境中运行工作流，并支持 GemCommerce MCP 和本地文件访问。

不同客户端的界面可能有所不同，但主要流程保持不变。

开始之前，请按照 GemPages MCP 设置指南将 GemCommerce MCP 连接到您的 AI 工具和 Shopify 商店。

步骤 1：准备 HTML

首先，你需要一个已经完成的HTML落地页。

源文件应该已经包含预期内容：

• 页面副本
• 章节结构
• 图像优化
• 活版印刷
• 颜色
• 钮扣
• 链接
• 响应式样式

转换前请检查文件，并确认您使用的是正确的版本。

清晰的文件名有助于防止出错，尤其是在同一个文件夹中存储多个文件或版本时。

例如：

• 夏季促销已批准.html
• product-launch-final.html
• comparison-page-v3.html

避免使用如下文件名：

• new.html
• test2.html
• final-final.html

对于批量转换，请将相关的 HTML 文件放在一个名称清晰的文件夹中。

步骤 2：打开兼容的 AI 环境

在 Claude Desktop 应用中打开 Claude Code、Claude Cowork，或其他 AI 环境：

• GemCommerce MCP
• 本地文件访问
• 读取和写入工作流文件的权限

工作流会创建一个运行文件夹，其中包含节文件、日志和构建工件。它依赖这些文件来跟踪进度，并在中断后正确恢复。

仅支持聊天且无法访问本地文件的 AI 环境无法可靠地完成完整的转换。

要了解如何将 GemCommerce MCP 连接到 Claude 或 Codex，请按照我们的说明操作。 GemPages MCP 设置指南. 

步骤 3：明确要求 AI 使用 GemCommerce MCP

提示语开头应为：

使用 GemCommerce MCP。

该指令告诉人工智能连接到正确的工具，而不是猜测应该如何处理 HTML。

例如：

使用 GemCommerce MCP。 着陆页.html 添加到我商店的 GemPages 页面。

步骤 4：提供一个 HTML 文件或一批文件

您可以将 HTML 代码粘贴到对话中，或者让 AI 指向本地文件。

单页内容：

使用 GemCommerce MCP。 着陆页.html 添加到我商店的 GemPages 页面中”。

对于附件文件：

“使用 GemCommerce MCP。将附件中的 HTML 代码转换为我商店中的 GemPages 页面。”

对于多个文件：

使用 GemCommerce MCP。为每个页面构建 GemPages 页面。 着陆页.html 下 pages/batch-2026-07/文件夹里有六个文件。

尽可能提供确切的文件名或文件夹名称。如果存在多个版本，请避免使用“使用最新文件”之类的指示。

步骤 5：让 AI 构建页面

收到 HTML 代码后，人工智能将执行以下操作：

1. 阅读页面内容。
2. 将其分成语义部分。
3. 获取 GemPages 的生成规则。
4. 建造第一部分。
5. 验证结果。
6. 将该部分推送到页面上。
7. 对剩余的每个部分重复上述步骤。

通常情况下，您无需在此阶段提供更多信息。

但是，在运行初期，请保持在对话附近。人工智能可能需要获得使用 MCP 工具、访问文件或运行本地命令的权限。

步骤 6：接收预览和编辑器 URL

每个部分构建并验证完毕后，人工智能会返回指向已完成页面的链接。

打开预览网址查看结果。

当页面需要进一步修改时，请打开编辑器网址。

对于一批文件，请确认每个 HTML 文件都有对应的页面和一组链接。

步骤 7：在 GemPages 中查看页面

将转换后的页面与原始 HTML 进行比较。

请从首页顶部到最后的行动号召按钮完整浏览整个页面，而不仅仅查看前几个部分。

确认：

• 所有章节均已包含
• 副本已正确传输。
• 图片显示在正确的位置
• 字体和颜色与源文件一致
• 截面间距保持不变
• 按钮和链接都能正常工作
• 该页面在各种屏幕尺寸下都能正常显示。
• 交互元素按预期运行

步骤 8：在编辑器中进行最终修改

请使用编辑器 URL 来处理审核过程中发现的任何问题。

修改后请再次预览页面。

页面在发布前应通过团队的内容、设计、技术和商业审核。

步骤 9：自行发布页面

GemPages MCP 不会为您发布页面。

页面准备就绪后，通过 GemPages 手动发布。

这样一来，最终面向客户的版本和发布时间就完全掌握在你们团队手中。

提示示例

清晰的提示应明确指出 GemCommerce MCP、源文件、请求的操作和预期输出。

转换附加的 HTML 文件	“请使用 GemCommerce MCP。将附件中的 HTML 文件转换为我商店中的 GemPages 页面。每个部分完成后，请返回预览和编辑器 URL。”
使用 AI 编码工具转换 HTML	使用 GemCommerce MCP。 夏季活动.html 将内容添加到我商店的 GemPages 页面中。分别构建和验证每个部分，然后返回预览和编辑器 URL。
批量转换HTML页面	使用 GemCommerce MCP。为每个页面构建 GemPages 页面。 着陆页.html 下 pages/batch-2026-07/文件夹中共有六个文件。请分别处理每个页面，并返回其预览和编辑器 URL。

使用其他输入类型

本指南重点介绍如何使用 HTML 创建 GemPages 页面。

GemPages MCP 还支持其他用于 AI 页面生成的输入：

• 图片： 使用图片或屏幕截图作为视觉参考。
• 网址： 使用现有的网页 URL 作为来源。

有关详细步骤说明，请参阅： 如何使用 GemPages MCP 从图像生成可编辑页面

如何确保工作流程顺畅运行

提示 1：允许调用 GemCommerce MCP 工具

默认情况下，Claude 会在使用 MCP 工具前请求许可。由于 HTML 到 GemPages 的工作流程会调用大量工具，这些提示可能会反复中断该流程。

允许调用所需的 GemCommerce MCP 工具：

1. 在 Claude Desktop 应用程序中打开 Claude Code。
2. 点击 定制 在左侧边栏中。
3. 在MyCAD中点击 软件更新 连接器 → GemCommerce MCP.
4. 可选 工具权限.
5. 设置所需的 GemCommerce MCP 工具 总是允许.

只向您认识和信任的连接者授予持续权限。

技巧二：使用自动模式执行安全的 Bash 命令

该工作流程使用 Bash 命令来创建和管理节文件、日志和构建工件。

当 Claude 对每个命令都请求批准时，运行可能会频繁停止。

在 Claude 桌面应用程序的 Claude Code 中，将对话设置为 自动模式然后，Claude 就可以运行它认为安全的命令，而无需每次都请求批准。

启用自动模式之前，请检查权限设置，尤其是在对话可以访问存储信息或本地文件的情况下。

运行工作流程之前需要了解的事项

开始转换前，请先查看以下几点。

1. 明确说明“使用 GemCommerce MCP”

首先告诉 AI 使用 GemCommerce MCP。

如果没有这条指令，人工智能可能会尝试其他方法，或者无法连接到所需的工具。

2. 使用具有本地文件访问权限的环境

在 Claude Code、Claude Cowork 或其他具有本地文件访问权限的兼容环境中运行工作流。

工作流会生成一个运行文件夹，其中包含：

• 节文件
• 进度日志
• 验证结果
• 构建工件
• 用于恢复转换的数据

仅提供聊天功能而无法访问本地文件的界面无法可靠地管理整个运行过程。

3. 使用能够处理约 500 万个上下文的模型

一个落地页可能包含多个部分，每个部分都需要单独的构建和验证流程。

使用能够轻松处理约 500K 个上下文的模型，例如推理难度为中等或高的 Opus。

上下文信息或推理能力有限的模型可能会丢失以下信息：

• GemPages 的生成规则
• 先前完成的部分
• 早期验证结果
• 页面级设计模式
• 当前运行阶段

对于长页面和批量转换而言，这一点尤为重要。

4. 中断的运行可以恢复

连接中断、使用预算用尽或其他中断都可能导致工作流程在完成前停止。

通常情况下不需要重启。

请人工智能继续：

从上一个已完成的部分继续执行 HTML 到 GemPages 的工作流程。不要重新开始运行。

AI 可以利用现有的章节文件、日志和构建工件，从正确的位置继续执行。

在页面加载完成之前，请保持运行文件夹完整。

5. 长篇页面可能需要一个多小时才能打印完成。

包含多个部分的页面可能需要一个多小时才能完成。

该工作流程优先考虑精确重建，而非快速批量传输。每个部分都根据 GemPages 的生成规则单独构建和验证。

这一点至关重要，因为最终呈现给用户的是页面，他们会在页面上看到并采取行动。文案、布局或行动号召（CTA）行为上的细微差别都可能影响最终用户体验。

页面包含的章节越多，工作流程所需的构建和验证步骤就越多。

发布前需要审核的内容

GemPages MCP 返回一个可编辑的页面，但您的团队仍需负责最终审核。

将每个部分与原始 HTML 进行比较

并排打开原始 HTML 和 GemPages 预览。

检查：

• 每个部分都存在
• 章节顺序正确
• 副本与源文件匹配
• 图片会出现在预期位置
• 按钮使用预期的标签
• CTA目的地信息正确
• 没有重复章节。
• 没有遗漏任何重要内容。

评测桌面电脑、平板电脑和移动设备

请在多种屏幕尺寸下查看页面。

寻找：

• 水平滚动
• 超出容器范围的文本
• 图像裁剪错误
• 固定宽度部分
• 难以点击的按钮
• 各部分之间存在较大间隙
• 不适合小屏幕的表格
• 覆盖内容的粘性元素

测试页面操作

点击并测试所有面向客户的操作，包括：

• CTA按钮
• 产品链接
• 导航链接
• 锚链接
• 表格
• 手风琴
• 其他互动元素

页面外观可能与源代码非常接近，但仍然包含错误的链接或无法正常工作的操作。

核实内容和优惠信息

检查：

• 产品名称
• 活动门票价格表
• 学费优惠
• 配送信息
• 退货条件
• 担保
• 客户推荐
• 竞争对手比较
• 认证
• 产品声明
• 优惠截止日期

工作流程会传输页面，但并不能保证源 HTML 中的所有商业声明都准确无误。

在 GemPages 中进行最终更改

请使用编辑器网址解决任何剩余问题。

修改完成后，再次预览页面并重复相关检查。

只有在审核完内容、设计、移动端演示和用户操作后才能发布。

何时从 HTML 创建 GemPages 页面

在以下情况下使用 HTML 作为源代码：

• 您已经有一个完整的 HTML 着陆页。
• 开发人员已准备好页面
• 一家机构已交付最终的HTML文件。
• 人工智能编码工具生成了一个已批准的页面
• Figma 设计稿已实现为 HTML 格式。
• 您需要将多个HTML页面迁移到GemPages中。
• 电子商务团队需要在开发完成后管理页面。

该工作流程专为已完成 HTML 代码并需要将其导入到商店工作流程中而无需再次手动重建的团队而设计。