2025年4月7日星期一

如何使用 ChatGPT(4o) 的图像生成来创建 UI

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(备注加群)



推荐阅读

没有评论:

发表评论

一天收入867元,分享5个短剧推广任务平台,兼职日结,0粉可做

其实无论当下多安稳,趁早给自己留条退路,对自己而言百利无一害。 而这个退路,肯定是要有自己的副业,并且越早开始越好。 最近短剧市场火爆,各行大佬都开始布局短剧,之前看短剧要付费充值解锁,9.9元 、19.9元、甚至39.9元的都有。 但现在微信、支付宝推出免费短剧全集, 很多...