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(备注加群)
推荐阅读
没有评论:
发表评论