构建可销售的登录页面 — 分步指南

简介

是否曾希望可以在不写一行代码的情况下设计出漂亮且响应式的登录页区块？使用 ChatGPT 中的 Selldone 插件，这个愿望就能成为现实。

在本指南中，你将逐步学习如何从一个灵感图像出发，通过 AI 驱动，在 Selldone 的页面构建器中生成一个实时且完全响应式的区块。

到最后，你会得到一个可直接发布到 Selldone 网站上的专业设计区块。

💡 注意：Selldone 的页面构建器基于 Vuetify（Vue 3）——因此插件生成的每个区块都与 Selldone 现代且响应式的前端框架完全兼容。

步骤 1 – 准备你的灵感图

首先，找到一个能激发你灵感的区块设计。本教程中，我们以淘宝（Taobao）首页的某个区块作为参考 —— 一个简洁、现代的布局，展示了精选商品，配以强烈的视觉图像和明确的号召性用语（CTA）。

截取该淘宝区块的屏幕截图；我们将在生成自定义设计时把它作为 ChatGPT 的视觉参考。

💡 小贴士：选择一个结构清晰、视觉平衡的区块。设计越清晰，ChatGPT 就越能准确分析并复现。

⚠️ 释义与公平使用声明：此处展示的淘宝截图仅用于教学和示例参考。所有商标、图片和布局均属于淘宝/阿里巴巴集团——本教程与淘宝无关联且未获其背书。

步骤 2 – 在 ChatGPT 中打开 Selldone 插件

确保你已在 ChatGPT 中启用 Selldone 插件：

1. 前往 ChatGPT → 设置 → Beta 功能 → 插件，并启用插件功能。
2. 访问 插件商店并安装 Selldone 插件。
3. 启动一个新的聊天并确保插件处于激活状态。

你应该能在聊天框旁看到 Selldone 的标识 —— 这表示插件已就绪。

步骤 3 – 上传你的参考设计

上传你的截图并输入清晰的提示，例如：

从顶部菜单确认你正在使用 ChatGPT 的最新版本。

“我想构建一个像这张图一样的区块，要求响应式字体大小、可自定义的字体和卡片颜色，以及卡片可以为圆形或圆角方形。”

ChatGPT（配合 Selldone）会分析图像并生成基于 Vuetify（Vue 3）的代码，完全兼容 Selldone 的页面构建器。

在 Selldone 中创建新的登录页面

在添加自定义区块之前，先在 Selldone 中创建一个空白登录页面以便使用。

1. 在店铺顶部菜单中，导航到 页面 → 登陆页 → 添加新登陆页。
   
2. 在该界面你会看到三种默认的登陆页模板可供选择。
3. 点击任意模板进入登陆页设计器。在设计器内，打开左侧面板，找到“代码”元素并将其拖到页面构建区域。这就是你将粘贴或导入由 ChatGPT（通过 Selldone 插件）生成的区块代码的位置。
4. 点击代码框以激活工具栏 —— 你会看到顶部工具栏出现，我们将在后续频繁使用它。

- 第一个图标 (<>) 打开代码编辑器，你可以在这里粘贴或编辑 ChatGPT 生成的 HTML 与基于 Vue 的区块代码。- 第二个图标打开属性面板，你可以在此处调整区块布局、间距和视觉设置。

步骤 4 – 将 ChatGPT 初始代码粘贴到编辑器

可能是错误的版本

现在你需要复制 ChatGPT 为你生成的第一个代码版本。
如截图所示，结果可能与参考图不同 —— 这意味着 ChatGPT 生成了一个不正确的版本。这是完全正常的，请不要担心。为了解决这个问题，重新发送参考图片并再次请求，例如，输入：

“请聚焦我上面发的图片。我现在再次发送该图片。”

此时 ChatGPT 会重新开始并生成新的代码。这个版本也可能不是最终版，你仍可继续提出更多需求和调整。现在，复制代码并粘贴到代码编辑器中，然后点击应用：

重要提示：代码编辑器的默认模式是 HTML。 你必须切换到 Vue 选项 —— 否则会出现空白结果。

现在你会看到 ChatGPT 生成的第一个正确展示的区块版本。 按工具栏中的第二项（如前所述）打开属性菜单以进行调整。如你所见，有很多设置可以帮助你根据业务需求定制该区块。

恢复默认（RESET TO DEFAULT）选项：

有时当你粘贴更新后的代码后，可能看不到任何明显变化。如果修改涉及基础结构，可能需要点击“恢复默认”选项。请注意，使用此选项会删除所有自定义设置，包括新文本、颜色、字体大小甚至已上传的图片 —— 它基本上是一次出厂重置 🙂。因此，仅在更改未正确应用时使用该选项。

步骤 5 – 调整区块

ChatGPT 会基于其他使用此方法构建区块的用户经验生成更完整的布局 —— 因此你无需把每个元素逐一请求。 与它交流得越多越清晰，它对你的设计偏好理解得就越深刻，输出也会越完整、越准确。 默认生成的代码已经相当响应式，但你仍可以调整细节，例如字体大小、字体粗细、区块或卡片高度、宽度和其他视觉元素，以更符合你的偏好。
例如，你可以设置 Selldone 在大屏桌面上每行显示 8 张卡片，在平板上显示 4 张，在移动端显示 2 张。
让我们看看 ChatGPT 如何理解并应用这些调整 —— 在接下来的步骤中，我们可能还需做几次额外编辑或请求。在本例中，你应将 区块最大宽度设为 1400px 以获得更佳布局。你也可以将各屏幕尺寸下的每行卡片数分别设置为桌面 8、平板 4、移动 2。
要精细控制间距，建议将桌面端卡片间隙（Cards Gap）调到约 12px。你也可以将卡片高度从 180px 降到 160px，或调整图片大小以适配设计。

记住，你可以通过试验这些设置轻松自定义外观 —— 只需调整数值，找到最匹配你风格的效果。

为了更好地可视化效果，你可以上传自己的图片。我们建议使用 带透明背景的图片，这样 卡片背景颜色 选项能均匀地应用于所有图片 —— 使你的区块看起来更清爽、更专业。上传图片、编辑文本并完成所有调整后，点击保存按钮或在 Windows 上按 Ctrl + S 快速保存。
现在可以打开实时页面查看你的区块效果。
若要预览，可以使用 实时预览（Live Preview）选项或点击旁边显示登陆页名称的按钮 —— 这样会以买家视角打开页面，呈现访客所见。然而，我不建议仅用实时预览来检查最终版，因为它并不能完全反映不同设备下的响应性——我们将在下面更详细地讨论这一点。这是代码渲染的结果。现在我们需要在不同屏幕尺寸上测试以确保一切正常。
在 Windows 浏览器中打开 Web 开发者工具，按 F12。
该工具允许你在各种屏幕尺寸下预览页面 —— 无需在手机、平板、笔记本等设备上逐一测试。现在，从顶部菜单选择响应式（Responsive）以预览区块在不同屏幕尺寸下的显示情况。如你所见，移动端版本看起来清爽且完全响应式。在平板视图中 —— 特别是在 iPad Pro 11 英寸 —— 我们设定的（平板每行显示 4 张卡片）并未生效，页面只显示了 2 张。我们需要请求 ChatGPT 修复并重新编码。

步骤 6 – 迭代与优化

不要满足于第一个版本 —— 真正的创意在于持续迭代。你可以继续与 ChatGPT 对话来调整细节，例如：

• 让区块在所有屏幕上都响应式显示。
• 添加悬停动画。
• 使用渐变按钮。

每一轮对话都会即时更新你的区块。

💡 专业提示：你与它交流得越详细，ChatGPT 越能理解你的设计风格。随着时间推移，它会学习你的偏好并产出更精确、更高质量的结果。
在此，你应清晰说明问题以帮助 ChatGPT 更好地理解。
记住，它不会读心术 —— 你需要像下面的示例那样详细描写问题：

我在平板尺寸选择了每行显示 4 张卡片，但在 iPad Pro 11 英寸上只显示了每行 2 张。请修复。我在移动端设置为每行 2 张。

当 ChatGPT 回复你的请求时，有时会只给出你需要手动替换或添加的具体代码修改片段，如下面的示意图所示。 为简化操作，只需请求它“发送完整代码”。通常，ChatGPT 在回复末尾还会建议一些你可能忽略的设置 —— 比如在本例中它建议为卡片添加链接，这对我们的区块非常重要。快完成了！复制并粘贴更新后的完整代码到编辑器，保存更改，然后在实时模式下查看以确认一切是否正确显示。
如你所见，现在平板版本已能正确每行显示 4 张卡片。

步骤 7 – 完成代码并保存区块

当你的设计准备就绪后，最好向 ChatGPT 提供区块结构与需求的详细描述。使用以下提示来生成最终代码：

在