ChatGPT 真的能生成用户界面吗？
之前我也测过几次，但效果嘛……实在是不忍直视。
下面这张图是我两个月前在一篇通讯文章里分享过的：
（升级前的 ChatGPT 生成）
怎么看都太卡通了，根本没法用。
但就在上周，OpenAI 推出了一个大更新，我决定再试试看。
这次结果让人眼前一亮，根据我的提示词，竟然能生成相当不错的 UI 效果图，甚至还能给我多个设计方案备选：
（新版 ChatGPT 生成）
今天，我就跟大家分享一下我的这次实验，包括用到的提示词、生成的过程，以及一些让我意外的发现和总结。
一起来看看吧！
背景情况
OpenAI 最近宣布 ChatGPT 已经能直接使用 GPT-4o 模型生成高质量的图片，不再使用之前的 DALL·E 老版本了。
相比过去，GPT-4o 的指令执行能力更强，图片里的文本渲染效果也提升了不少。
上周不少人都用这个功能把真人照片变成了 AI 艺术画，其中以"吉卜力动画风"尤其火爆。
我也尝试了一下：
（ChatGPT 生成）
看到网络上各种神奇的作品后，我忽然想到：
==要是 ChatGPT 也能帮产品设计师生成真正好用的界面效果图，那会怎样？==
于是我的实验开始了。
我的实验过程
1. 写一个超详细的提示词
我先请 ChatGPT 帮我写了一个我想要的 UI 提示词：
设计一个干净、现代的 iOS 风格手机界面，APP 名称是"SkillVerse - 热门微课程"，界面布局要求如下：
## 1. 状态栏（顶部）
- 标准 iOS 布局（顶部安全区）
## 2. 头部区域
- 居中的 logo："SkillVerse"
- 字体中等粗细，小字号，蓝色文字
## 3. 精选课程轮播图（可横向滑动）
- 样式：卡片可滑动，圆角加轻微阴影
- 卡片内容：
- 卡片1：标题："动态设计入门"，副标题："4月2日开课"，缩略图：动画
- 卡片2：标题："自由职业者 Excel 大师课"，副标题："3月31日开课"，缩略图：效率图标
## 4. 导航标签
- 标签："热门"（激活状态，粗体+蓝色下划线）、"推荐"、"已报名"、"收藏"
## 5. 筛选行
- 下拉选项："过去7天"、"全部主题"、"所有难度等级"
## 6. 热门课程列表
- 纵向堆叠，重复的课程项：
- 左：圆角缩略图
- 中：课程标题、难度等级
- 右：收藏图标
- 底部：报名人数和趋势（如"2400人报名，+12%"）
## 7. 底部导航栏
- 标签："主页"（激活状态，突出颜色）、"搜索"、"活动"、"个人资料"
- 风格：图标下方带文字
然后，我把这段提示词粘贴到一个新的 ChatGPT 窗口，点击了"生成"。
2. 竟然生成了代码版 UI
结果很意外：ChatGPT 右侧突然打开了一个新的面板，开始触发了 Canvas 功能，然后生成了可运行的代码。
这让我一下子想起 Claude AI 的 Artifact 功能：
（ChatGPT 截图）
接着，我点了右上角的"预览"按钮。
竟然生成了一个响应式、带代码支持的 UI：
（ChatGPT 截图）
虽然生成过程非常炫酷，但整体效果明显没有 Claude 那么精致和准确。
3. 重新请求纯视觉效果图
因为我本来的意图其实只是生成一张 UI 的效果图，而不是代码，我补充了一句提示：
请改为生成纯视觉的界面效果图。
生成的结果让我惊艳：
（ChatGPT 生成）
相比之前用 DALL·E 时的效果提升了巨大，真的很不错了。
小挑战：你能找出上面 AI 生成图里有几个拼写错误吗？:)
4. 缩小一下界面尺寸
虽然效果图很不错，但我觉得上下似乎有点被裁掉了，于是继续要求：
界面上下有些裁切了，整体缩小20%试试？
结果还真调整好了：
（ChatGPT 生成）
看着还不错吧！
5. 要求生成多个备选方案
后来，我更大胆了一点：如果让它生成几个不同的 UI 方案，让我来挑呢？
于是我要求：
设计三个界面版本：
1. 醒目吸睛版
- 突出视觉冲击和品牌风格
2. 高效实用版
- 优先考虑信息密度，卡片更紧凑
3. 个性温暖版
- 突出个性化和社交元素，增加社区标签
生成结果：
（ChatGPT 生成）
虽然三版区别不算特别明显，但仔细看，每个版本里都加入了一些不同的小元素（如搜索图标、社交元素等），已经初具差异化效果了。
当然，精准度还有提高空间，因为信息量比较大，ChatGPT 开始犯迷糊了，导致有些文本出现扭曲变形的情况。
6. 转换为 Figma 可编辑文件
最后，我又玩了个更有趣的实验：用 Codia AI 插件 把 ChatGPT 生成的效果图转换成了 Figma 文件：
（Figma 截图）
居然所有的组件和文字都能在 Figma 中编辑，字体还自动用上了 Intel。
效果好到吓人。
这意味着我可以进一步修改这些界面了。
总结和思考
这次 ChatGPT UI 生成能力确实是一次重大升级，精确度和指令执行力都有巨大提升。
但速度上稍慢，精度偶尔还差一点，有时图片只生成了一半或者指令没很好执行。
当我尝试让它生成一个 3D 效果图时，结果略微扭曲和奇怪，不过整体来说已经比以前好了太多：
（ChatGPT 生成）
不管怎样，这绝对是一次令人兴奋的升级，让我能做出之前无法实现的东西。
而且这一切都能在 ChatGPT 的聊天窗口里完成，真的方便到炸裂。
我现在已经迫不及待地期待下一次升级了！
专注搞钱与健康 | "欢迎关注、点赞、分享"
爆料 / 交流 / 合作：请加微信 ifloop
加入副业交流群：请加微信 ifloop（备注加群）
推荐阅读
没有评论:
发表评论