使用GPT-6 Astra进行UI设计

梯形图转SCL | 需求文本转SCL | 梯形图在线查看 | 博途编程文档MCP | AI模型价格对比 | AI工具导航 | ONNX模型库 | Vibe Coding教程 | PLC在线仿真器 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace

GPT-6 Astra是OpenAI最新、最强大的AI模型。该模型因其能力已经获得了很多赞誉。在产品设计中，它可以帮助UI设计工作流程的各个环节，从探索布局到构建和优化工作界面。

在本文中，我将分享我使用GPT-6 Astra的3步工作流程来简化UI设计过程。

1、提示GPT-6 Astra构建UI设计

以我的示例为例，我将构建一个食品订购应用程序的UI设计。

我使用Markdown格式的提示，因为GPT模型针对Markdown处理进行了优化。我明确要求AI生成UI的图像，而不是编码原型。

我的提示提供了UI设计的所有必要部分，包括：

• 设计应具有的功能细节，包括部分和组件描述（查看提示中的"功能布局"部分）
• UI应具有的视觉风格，包括颜色、间距和排版（查看提示中的"视觉风格"部分）
• 平台约定（只是提到我将构建iOS设计）

为现代食品订购移动应用设计一个高保真主屏幕的图像。
该屏幕应帮助用户快速发现餐厅、浏览食品类别、查找相关优惠并重新订购熟悉的餐点。

# 功能布局

包括：

## 顶部标题
- 用户的配送地址，带下拉菜单
- 小型个人资料/头像按钮
- 通知图标

## 搜索
- 显眼的搜索栏，占位符："搜索餐厅或菜肴"
- 搜索/筛选图标，用于菜系、饮食偏好、价格、配送时间和评分

## 食品类别
- 水平可滚动的类别列表
- 类别包括披萨、汉堡、寿司、亚洲菜、健康食品、甜点等
- 每个类别应使用清晰的食品图像或带标签的图标

## 促销部分
- 突出当前优惠的大型促销卡片
- 包括食品摄影、简短的促销文案、折扣信息和CTA
- 示例："首次订单享受20%折扣"

## 为您推荐
- 基于之前订单和偏好的个性化餐厅卡片
- 显示餐厅图片、名称、菜系、评分、预计配送时间、配送费和价格等级
- 突出有用属性，如"免费配送"、"热门"或"20-30分钟"

## 附近热门
- 次要水平餐厅轮播
- 优先考虑靠近配送位置的高评分餐厅

## 再次订购
- 显示最近订购的餐点或餐厅的紧凑部分
- 包括快速"重新订购"操作

## 底部导航
- 主页
- 搜索/浏览
- 订单
- 收藏夹
- 个人资料
- 主页应明显选中

# 视觉风格

使用类似高质量食品配送和生活方式应用程序的现代、高端消费者应用美学。
UI应感觉温暖、开胃、干净且高度视觉化，而不是企业化。

使用：
- 充足的留白
- 柔和的中性背景
- 温暖的强调色，如珊瑚色、橙色或番茄红
- 大型高质量食品摄影
- 圆角卡片，圆角半径约16-20px
- 微妙阴影和浅色边框
- 大胆但友好的排版
- 章节标题、餐厅名称、元数据和辅助信息之间的强层次感
- 大型触摸友好的控件
- 最小化使用图标和装饰元素
- 评分、优惠、配送时间和促销的小型彩色徽章

避免让每个元素看起来都像单独的卡片。使用间距、排版、图像和背景分组来创建层次感。

整体体验应该感觉精致、快速、值得信赖且略带趣味，食品摄影作为主要视觉焦点。

设计用于现代Apple iOS移动视口，并保持适合生产食品订购应用的现实间距、内容密度和组件大小。

我使用ChatGPT网页版，工作标签页。

我使用相同的提示，但使用了不同的努力级别。

首先，我使用中等努力级别构建了一个模型。这是GPT-6 Astra最平衡的努力级别。

以下是GPT-6在此努力级别为我生成的设计。我认为这是主屏幕的一个相当不错的视觉探索。AI模型遵循了我在提示中提供的指令（颜色、圆角半径、间距等）。

接下来，我在单独的会话中使用相同的提示，GPT-6在最大努力级别下运行，得到了相当有趣的输出。

如您所见，输出具有一些不错的视觉细节，例如"配送至地址"图标、促销卡片上首次客户优惠的更有趣图像，以及更好的间距使用。同时，图像被微妙地水平拉伸（感觉像是为一个分辨率生成，然后为另一个分辨率调整大小并缩小）。总的来说，对于一次性提示，结果相当不错。

对于产品构思，我认为中等努力就足够了，因为它可以让Astra更快地生成输出，而不会牺牲质量。

2、为我的UI模型设计生成DESIGN.md文件

一旦我得到了喜欢的设计，问题是：下一步做什么？逻辑上的下一步是要求AI将此设计转换为原型。但为了简化原型制作过程，我强烈建议做一件事：创建DESIGN.md文件

DESIGN.md是一个专用的markdown文件，定义了产品应该如何外观和感觉。 该文件充当AI的设计系统，帮助它从视觉角度构建正确的产品。

它包含必要的信息，如颜色、排版、间距、组件以及注意事项和禁忌，这些可以最小化UI模型和编码原型之间的差距。GPT-6 Astra的好处是，你可以要求该工具为你生成一个DESIGN.md。

但有一个陷阱：你需要向GPT-6 Astra提供DESIGN.md的规范，以获得正确格式的文件。根据我的经验，当你要求GPT-6在没有规范的情况下生成文件时，你将获得一个不完全符合Google规范的文件。下面我向你展示一个示例文件。

使用此图像编写DESIGN.md文件

当你引用规范（这里是Google的此文件的官方规范）并要求AI根据规范生成文件时，你会得到什么。如您所见，GPT-6 Astra生成的文件将完全符合规范。

快速说明：您可以看到我正在使用中等努力级别的Astra。大多数时候，对于DESIGN.md生成等任务，您不需要最大努力。

3、使用UI模型和DESIGN.md制作产品原型

这是最后一步，我将静态模型转换为非常接近原始设计的交互式原型。

我使用Claude Code将目标转换为真实产品。而且，在你问之前，这就是我这样做的原因

**我使用GPT-6 Astra来定义视觉目标（**这种体验应该是什么样子的？)我向Astra提供所有产品详细信息（产品要求、平台、目标用户、视觉方向等），生成高保真模型，并迭代，直到层次结构、间距、构图、图像、排版和整体视觉特征感觉正确。 **然后我使用Claude Code将目标转换为真实产品（**这种体验应如何在此特定代码库中实现？） Claude Code的好处是它直接在存储库中操作（它可以检查现有的架构、组件和约定，编辑多个文件，运行命令和测试，并验证其实现）。

我将向Claude Code提供我的UI模型（使用GPT-6 Astra中等努力生成的UI设计PNG图像）和DESIGN.md文件（将文件放在工作目录中，food_ordering_app），并提示它使用官方Claude Code的设计插件为我构建设计：

/design this screen

Claude将分析图像，将其与DESIGN.md文件中的信息匹配，并在几分钟内为我生成以下设计。Claude Code设计插件的好处是，它允许我在将其转换为功能齐全的产品之前，玩弄此设计的视觉属性。

原文链接：GPT-6 Astra for UI Design

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