GPT-6 Astra 网页设计指南

梯形图转SCL | 博途AI辅助编程文档 | AI模型价格对比 | AI工具导航 | ONNX模型库 | Vibe Coding教程 | PLC在线仿真器 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo

在这篇文章中，我将分享使用 GPT-6 打造新网络项目的4步流程。我会展示如何为银行设计一个着陆页。

1、为未来的网页设计选择关键参考

虽然你可以让AI从零开始构建新设计，但这通常不是好主意，因为AI往往会生成泛泛的设计。

我遵循的流程类似于与产品团队的传统设计流程：我从情绪板开始，但不是为人类设计师收集参考，而是为AI创建参考。

我尝试了 GPT-6 的多种方法，发现给AI一个"锚点"截图比给一组不同的截图效果更好。

代表整体设计方向的锚点截图会让AI工作更聚焦

你提供的截图应包含：

• 整体构图
• 密度
• 字体层级
• 留白
• 视觉层级
• 整体艺术方向

在我的示例中，我将使用英国一家主要银行的主页截图。

我会使用名为 FireShot 的 Chrome 扩展程序捕获整个页面的截图（你可以在 Chrome 商店轻松找到它）。

在继续之前，我想说明三点关于你提供给 GPT-6 的参考：

1. 越简单越好。尽管 GPT-6 Astra 是非常强大的AI模型，但在理解网页设计中特定元素如何运作方面仍可能存在差距。这就是为什么使用简单设计作为参考总是更好的主意，因为它会最大程度地减少AI误解的可能性。
2. 避免使用巨大的图片文件。我更喜欢使用普通视口截图，例如 1440 × 1000–1600 px，而不是巨大的 1440 × 8000 全页截图。Astra 可以毫无问题地理解大截图，但 ChatGPT 或 Codex（你用来与 GPT-6 交互的工具）可能会在内部调整图片大小，这可能使小的UI细节更难检查。
3. 避免使用视频作为主要参考。GPT-6 本身可能接受视频文件附件并使用工具检查它们，但 OpenAI 警告说视频分析可能不完整，可能无法准确覆盖整个视频。

2、提示 GPT-6 分析图片并为你创建 DESIGN.md

一旦你有了参考图片，你可以跳转到 ChatGPT 或 Codex，提示它使用你的图片作为参考来构建网页设计。如果你想生成现有设计的完整副本，这效果不错，但既然我的目标是将图片作为参考，我会采取不同的方法。

我会提示 GPT-6 分析图片并为我创建 DESIGN.md 文件。

这个文件将包含参考图片的"视觉DNA"：颜色、字体、间距、图像。因此，创建 DESIGN.md 时，你基本上是从参考设计中提取这些信息并放入你的文件。DESIGN.md 的优点在于你可以修改文件的某些特定属性（如颜色），同时保持设计的所有其他属性（如字体和间距）不变，然后使用这个文件构建一个继承原始参考图片所有属性但不是副本的设计。

我分两步创建 DESIGN.md。

首先，我附加原始设计的截图作为图片，并提示 GPT-6 分析它：

现在不要构建网站。

分析附件中的参考并提取设计语言。

识别：

- 页面结构
- 网格
- 容器宽度
- 间距系统
- 字体层级
- 颜色策略
- 边框处理
- 圆角
- 阴影
- 图片处理
- 组件密度
- 导航模式
- 按钮样式
- 交互模式
- 响应式行为

然后总结得出的设计方向。

在此步骤结束时，GPT-6 将生成样式的文本描述。

现在我需要提示 GPT-6 创建实际的 DESIGN.md 文件。我会通过提供后续提示来完成

使用此信息创建 DESIGN.md 文件 - 遵循官方
Google DESIGN.md 规范 [Google Labs github 页面上 DESIGN.md 格式的链接]

快速说明："遵循官方 Google 规范"这部分将有助于避免 GPT-6 向 DESIGN.md 文件添加不必要的章节。这确保文件 100% 根据官方规范创建。

此操作结束时，GPT-6 将为你生成特定设计的 DESIGN.md 文件并放入你的工作目录。

3、提示 GPT-6 使用 DESIGN.md 为你构建设计

在此步骤中，你可以修改 DESIGN.md 以匹配你的最终设计目标。添加完更改后，你可以要求 GPT-6 为你构建新设计并在提示中引用此文件。

我用来制作主页设计的提示预览：

为名为 Neonbank 的数字银行构建响应式营销主页。
此页面应在 React 项目中创建。

使用我之前提供的图片仅作为整体页面结构、
部分顺序、布局组合、内容密度和
视觉节奏的指南。

不要从参考中复制任何品牌、文案、
徽标或专有内容。

遵循附随 DESIGN.md 中定义的视觉和
组件规范

Header
创建紧凑的导航页眉。
左侧：
* Neonbank 徽标
* 个人
...

避免让每个部分看起来相同。
在卡片、横幅、分屏布局、
产品模型、编辑摄影和信息部分之间交替。

使用 DESIGN.md 作为所有视觉样式的事实来源，
包括字体、颜色、间距、圆角、组件外观、
图像处理、响应式行为和交互样式。

你可以发现两件事：

• 我要求 GPT-6 构建 React 应用。这将使我能够将 GPT-6 生成的设计集成到真实的网络项目中（React 是强大的网络框架）。
• 我引用 DESIGN.md 两次（在提示的开头和结尾）。我称这个原则为"加倍"：这是确保 GPT-6 在处理长提示时不会跳过此文件的一种方式。

等待 30 分钟后（是的，GPT-6 Astra 使用 Extra High effort 并不是最快的AI模型），我得到了以下设计。如你所见，它非常接近我提供的原始参考图片（我唯一改变的是银行的名称）。

4、引入针对性设计更改

在此步骤中，你应该已经有一个符合你意图并以你喜欢的风格创建的工作网页。接下来你可以做的是改进这个设计的某些区域。

例如，我不喜欢顶层菜单导航的工作方式。我希望能看到更精致的菜单设计以及打开/关闭菜单的动画过渡。

有3种主要方式可以改进菜单设计：

1. 你可以从头编写后续提示，解释你想看到什么。当涉及到运动效果时，很难清楚地表达你想使用什么。
2. 你可以从 Dribbble 或 Awwwards 提供视频格式的参考给 GPT-6，并要求它在你的设计中使用。不错的选择，但仍然存在 GPT-6 可能误解某些内容的风险。
3. 你可以从 21st dev 提供现成的提示。21st 是一个专门的资源，包含设计和开发者社区分享的各种类型的网络组件。好处是 21st dev 提供免费计划，可以选择复制现成的提示用于2个组件（每天），这对于持续项目来说绰绰有余。

在我的案例中，我将遵循第三种方式，下载此菜单组件的提示。

接下来，我可以跳转到 GPT-6 并简单粘贴提示。因为我将网络项目创建为 React 项目，所以 GPT-6 不会难以将这个新的菜单设计集成到它为我创建的页面原始设计中。

快速说明：从 21st dev 等资源复制提示时，始终在执行前阅读提示并与你的项目技术栈匹配。例如，在我的案例中，提示说项目应该具有 shadcn 项目结构，这可能不是你特定项目想要的。

5、GPT-6 Token 使用情况

使用 GPT-6 Extra High effort 构建整个网页并不是经济的选择。事实上，这是相当昂贵的练习。

整个设计过程不仅花费了一个多小时，还消耗了我3倍的每日token配额（达到限额后我不得不购买额外的每日配额）。

我注意到 GPT-6 花了大量时间验证设计，确保其可访问性和响应式。GPT-6 生成的最终设计确实没有太多问题。 GPT-6 验证循环。

原文链接: GPT-6 Astra for Web Design

汇智网翻译整理，转载请标明出处