
今天我和大家分享使用 GPT 生成方案后,如何进行设计还原效率最高,质量最好,文章最后和大家分享我的设计工作流。

在用 GPT image2 生成好效果图后,AI 在还原设计图上,不管是直接 AI coding,还是通过 AI 绘制还原,有一个问题就是图标、插图都是 svg 绘制,都没办法还原,都还需要人工去替换。
我用一个简单的启动页,和大家举个例子:我在网上找了一个这样的启动页,输入了简单的关键词,先让 GPT image2 生成效果图,当有参考图时,只需要简单的关键词,就能够生成同风格的页面。

界面生成好了,就需要将其还原成设计了,这里为了对比效果,我采用了几种还原方式,大家看后就知道什么方式更节约 token 和时间了。
我原本想同样是 GPT 模型,应该不会太差,但是同样的关键词生成的效果太感人了。看来直接让 figma 绘制是不可能了。

Codex 或者 GPT 的插件或者应用里面,都可以安装 Figma 的 mcp,就在这个位置点击安装即可。

接着点 Codex 对话框下方的+号,选中 Figma 插件,接着将 Figma 需要绘制的 page 链接发到对话框中,然后说你的提示词即可。

整体背景看上去还可以,但是插画部分由于使用 svg 绘制,基本没办法使用,还有按钮还原也不行。

根据近段时间我的使用情况来说,目前我觉得对于用户体验设计来说,最省钱的方式是,使用 GPT image2 官网生成设计效果图,不占用 Codex 的额度。同时平时文字工作比较多,比如需求分析、竞品分析、交互自查等都可以使用。一个会员可以覆盖 UE 体验设计的全部工作流。
接着让 GPT 将效果图分层,背景可以是绿色,便于抠图。

AI 抠图使用下来,最方便的还是 Mastergo 了,选中图片,右上角有个图标,点击图标里面有几个选项,选中 AI 抠图,等 10S 左右,图就抠好了。

像 GPT 分层忘记指定背景,这种棋盘格看着透明,但是 PS 都不好抠的,Mastergo 也能轻松抠掉。

最后在 figma 里面将插画替换即可,这一步我觉得是最省 token 的了,很多同学希望 AI 能够一步到位,让 AI 调整的时间,自己手搓不到 10 分钟就搓完了。所以我觉得能省就省吧,而且效果比较可控。

虽然今天举例的页面非常简单,但是设计流程就是这样,不管你是用 Pencil、Stitch、lovart、还是 AI coding,都是这样的思路。
用了 AI 之后,我最大的变化并不是“画图更快了”,而是开始重新思考设计这件事本身。
以前的设计流程里,设计师更多承担的是执行角色:寻找素材、搭建页面、调整细节、不断修改方案。
但当 AI 加入之后,设计师需要投入更多精力在前面的判断和决策上,比如如何定义设计方向、如何判断 AI 输出是否符合目标、如何组织 AI 完成不同阶段的任务,以及如何把 AI 生成的结果转化成真正可以落地的设计方案。
所以我现在越来越觉得,AI 时代设计师最重要的能力,并不是会不会生成一张漂亮的图片,而是有没有能力理解需求、判断结果,并把 AI 的能力融入自己的设计流程中。
AI 可以帮助我们降低探索成本,提高方案验证效率,但最终决定设计质量的,依然是设计师自己的审美、经验和判断。
图文来源于网络,侵删。
相关新闻
关闭
Rosion
的专业顾问会及时与您沟通...
您也可直接拨打: