您提供设计图并指定目标页面。然后，人工智能会分析视觉结构，识别元素及其样式，并将设计映射到 GemPages 元素。
如果您之前没有使用过 GemPages MCP，请先阅读以下指南：
在你开始之前
确保：
- GemCommerce MCP 已连接到您的 AI 工具。
- 您的 Shopify 商店已连接。
- 您有一张想要重现部分的参考图片。
- 您知道 GemPages 中目标页面的名称或 URL。
请使用清晰的图片，确保完整显示该部分。如果需要重现多个部分，您可以提供多张图片，或者一次处理一个部分。
GemPages MCP 的图像页面生成工作原理
GemPages MCP 支持从 HTML、图像和 URL 生成 AI 页面。
本指南重点介绍如何使用 图像作为源.
当设计图已经以视觉形式存在但尚未用 HTML 实现时，图像输入非常有用。
参考文献可能来自：
- 截图
- 设计模型
- 导出的帧
- 宣传图
- 现有页面部分
GemPages MCP 使用该图像作为视觉参考，并使用可编辑的 GemPages 元素重新创建设计。
如何一步一步地根据图片创建设计
步骤 1：添加参考图像
将设计图作为附件添加到您的对话中。
参考文献可能是：
- 现有部分的屏幕截图
- 设计模型
- 从设计工具导出的图像
- 你想在 GemPages 中重建的另一个视觉参考
尽量避免使用模糊、过度裁剪或包含无关浏览器控件的图像。人工智能只能利用参考图像中提供的视觉信息进行工作。
对于较长的页面，您可以为各个部分提供单独的图像，然后逐一重新创建它们。
步骤二：输入提示
上传参考图片后，输入以下提示：
使用 GemCommerce MCP 描述视觉结构，识别图层树和元素样式，然后将其映射到 GemPages 元素，并在 GemPages 中构建 [页面名称或 URL] 部分。
更换 [页面名称或网址] 以及目标页面。
提示要求人工智能做什么
提示信息包含两个主要请求。
分析参考图像
第一部分要求人工智能检查：
- 视觉结构
- 元素的层级结构
- 设计中使用的可见样式
根据人工智能工具和分析结果，回复可能包含以下信息：
- 视觉结构
- 建议的 GemPages 层树
- 可见的设计细节，例如字体、间距、颜色或对齐方式
具体格式和详细程度可能有所不同。这些不应被视为每个 GemPages MCP 任务中都会出现的固定输出阶段。
在 GemPages 中构建该部分
第二部分要求人工智能执行以下操作：
- 将设计中已识别的部分映射到 GemPages 元素
- 在您指定的页面上构建该部分。
将这两个请求放在同一个提示中，就能让 AI 获得参考图像、预期解释和结果目标位置。
步骤 3：让 GemPages MCP 构建该部分
提交提示后，请允许人工智能分析图像并处理该部分内容。
在流程运行期间，请保持对话畅通。如果人工智能要求您批准 GemCommerce MCP 工具调用，请审核并批准，以便工作流程能够继续进行。
当目标页面或部分设计不清楚时，人工智能也可能会要求提供更多信息。
第四步：在 GemPages 中查看结果
创建完该部分后，在 GemPages 中打开目标页面，并将其与参考图像进行比较。
请检查：
- 布局和元素顺序
- 文本和图像位置
- 颜色和排版
- 间距和对齐
- 桌面和移动设备上的外观
参考图片可能不包含所有设计细节，例如原始字体名称、确切尺寸或响应式设置。您可以直接在 GemPages 编辑器中进行最终调整，或发送后续说明。
第五步：完善结果
如果重新创建的部分需要调整，请在同一对话中继续描述所需的更改。
例如：
使用 GemCommerce MCP 更新您刚刚创建的部分。缩小标题和段落之间的间距，并放大图片。页面其余部分保持不变。
布局更改：
使用 GemCommerce MCP 更新重新创建的部分。在桌面端，将文本放在左侧，图片放在右侧。
移动调整：
使用 GemCommerce MCP 更新重新创建的版块。在移动设备上，将图片放在文本下方，并将按钮居中放置。
造型调整：
使用 GemCommerce MCP 更新重新创建的版块。调整标题粗细和按钮样式，使其更接近参考图片。
避免使用诸如以下这类笼统的指示：
让它看起来更好看。
相反，应该找出问题所在，并解释需要做出哪些改变。具体的后续跟进能让用户更容易理解所要求的结果。
获得更好结果的技巧
- 使用高质量的参考图片。
- 请确保整个部分都可见。
- 请指定确切的目标页面。
- 请说明该部分应插入的位置。
- 处理长页面时，一次只重新创建一部分。
- 如有需要，请另行提供原始图片或原文。
- 对于小的调整，请使用后续提示，而不是重建整个部分。
GemPages MCP 让您能够更快地重新创建设计，同时保持结果在 GemPages 中的可编辑性。发布前，请务必检查已完成的部分并进行必要的调整。
谢谢您的意见