背景 OpenAI 宣布，现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像，而不是使用较旧的 DALL·E 模型。
它更擅长遵循指令，并且可以更好地呈现图像中的文本。
上周，许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。
我也尝试过：
通过 ChatGPT 生成
但在网上看到很多有趣的艺术作品后，我想：
如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样？
实验就是从这里开始的。
实验 1. 创建详细的提示 我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。
# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面（iOS 风格）。布局应遵循以下结构化部分。 ## 1. 状态栏（顶部） - **样式**：标准 iOS 布局（顶部安全区域） --- ## 2. 标题部分 - **居中标志**：“SkillVerse” - **字体**：中等粗细，小尺寸 - **颜色**：蓝色文本 --- ## 3. 特色课程轮播（水平滚动） - **风格**：具有圆角和柔和阴影的可滑动卡片 - **卡片**: -**卡 1** - 标题：**动态设计简介** - 字幕：*4 月 2 日开始* - 视觉：动画缩略图 -**卡 2** - 标题：《自由职业者精通 Excel》 - 字幕：*3 月 31 日开始* - 视觉：生产力图标 --- ## 4. 导航标签 -**标签**： - **趋势**（活跃，**粗体标签**带有**蓝色下划线**） - 受到推崇的 - 已注册 - 已保存 --- ## 5. 过滤行 - **过滤器（下拉菜单）**： - **过去 7 天**（基于时间） - **所有主题**（类别） - **所有级别**（难度） --- ## 6. 热门课程列表 - **布局**：可重复课程项目的垂直堆叠： - **左**：圆形缩略图 - **中心**： - 课程名称 - 级别（例如，初学者、中级等） - **右**：保存图标 - **底部**：入学人数 + 趋势（例如，入学人数 2.4k，+12%） --- ## 7. 底部导航栏 -**标签**： - **主页**（活动，突出显示颜色） - 搜索 - 活动 - 轮廓 - **风格**： - 下方有标签 然后我将其粘贴到 ChatGPT 中的新聊天窗口中，然后单击“生成”图标。
2. 生成代码支持的 UI 令人惊讶的是，ChatGPT 在右侧打开了一个额外的面板，触发了它的 Canvas 功能。然后它开始生成代码。
这立刻让我想起了克劳德的神器功能。
ChatGPT 的屏幕截图
然后我点击了右上角的“预览”按钮。
生成了响应式、代码支持的 UI。
ChatGPT 的屏幕截图
看起来很有趣，但似乎不如克劳德那么精确/精致。
3. 要求提供视觉模型 由于我的目的只是生成一个图像（一个可视化模型）而不是一个代码支持的 UI，因此我请求后续提示来纠正它：
创建一个可视化模型。 而是一个视觉模型。 结果如下：
通过 ChatGPT 生成
结果出乎意料地好，尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。
测验：你能在上述 AI 生成的 UI 中找到多少个拼写错误？:)
4. 要求缩小用户界面 尽管用户界面看起来不错，但我仍然对图像截断感到有点困扰，所以我问了：
顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右，让它整体更小一些吗？ 顶部 和 底部 看起来 有点 截断。您能将 UI 缩小 20%左右， 让它 整体更小一些吗？ 结果如下：
通过 ChatGPT 生成
看起来不错！
5. 要求生成设计选项 然后我开始更有创意了……我想，如果我让它生成多个设计方案供我参考会怎么样？那会更有帮助！
所以我写了这个：
创建三个设计选项。 使用相同的核心内容，但根据以下描述改变布局、UI 元素和视觉重点： 选项 1. 大胆且引人入胜 - 优先考虑视觉冲击力和品牌表达 选项 2. 功能强大且快速 - 优先考虑速度、清晰度和生产力 - 紧凑的用户界面，卡片更小，信息层次更密集 选项3.个性化和温暖 - 优先考虑联系、信任和个性化 - “为你推荐”轮播，包含人工智能策划的课程建议 - 社会证明（头像、徽章、朋友活动） - 添加“社区”选项卡，用于同行共享内容 结果如下：
通过 ChatGPT 生成
再次，我对 GPT-4o 图像生成能力的提升感到震惊。
虽然这三个选项看起来仍然非常相似，但如果仔细观察，就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。
不过，结果肯定还有改进的空间。例如，由于一张图片中包含了大量信息，ChatGPT 的精度开始下降。你可能会注意到，部分文本变得无法识别/扭曲。
6. 将设计转换为 Figma 文件 接下来，作为一个有趣的测试，我使用 Codia AI 的插件 根据 ChatGPT 生成的视觉模型生成 Figma 设计。
Figma 中的屏幕截图
所有组件（包括文本）都可以在 Figma 中编辑。
它使用的字体系列是 Intel。
好得可怕。
如果我想进行更改，这使我能够自定义 UI 模型。
