用codex生成了UI界面有什么方案可以将UI切图出来呢?

我自己vibe了一个ai项目管理程序,能生成项目规划,调用codex生成界面UI,但是生成的是一个图片,有什么方案可以将图片中的图片给透明的切出来呢?
目前我的做法是通过codex在给每一个选择的组件从新用image_gen出来这能倒是能,但是感觉很慢(估计一个界面要10几20分钟)
我看有一个大佬的视频可以切出来,不知道是什么原理:

大致的想法:

项目开源地址

欢迎大佬交流指正

我有几个想法:
1 我印象中figma的AI是支持的
2 老办法,让AI生成SVG的切图
3 让AI生成一张大图,包含所有图片,按游戏精灵图切图的那个思路去处理,避免一张一张生成

直接告诉ai,这个是设计图, 直接给我符合某个css框架或者其他框架的代码。要完全一致巴拉巴拉的。

figma的ai 估计是要单独收费的吧?也不好集成到自己的应用里面

ai生成SVG,和原型UI差距非常大不可取。

精灵图的方式我试过,不是很稳定。出的图片边缘模糊,并且速度也挺慢。

感谢大佬指点

这到提醒我了,实际上压根不用切图,切图是上一个时代编码的方式,新时代应该让AI1:1还原,没有的素材直接生成出来 .现在的AI还是太废物了,直接说清楚了 他还是要犟种的用css svg icon来实现

不用切图就简单了。我正好看到一篇公众号文章讲这个工作流的,感兴趣的话,你可以去搜一下看看“ 4 个实用技巧加强 Codex 的 UI 能力”

我个人的用法是直接让 ChatGPT 给 png 格式的透明背景矢量图;或者就是接入 figma mcp 了。

我目前的思路还是让把网站图片丢给gpt image ,让它把所有的物品生成到一张图里, 背景是绿幕,然后用python处理抠图

佬,我没用过figma,请问这个接入要收费吗?

接入不用,设计模式也不用,但如果你要复制 css 样式那些就需要开发模式,开发模式要付费

直接让生成UI图,然后分层连续的生成多张图片,再背景透明一下 裁切 这样差不多吧

我是生成一整张界面,然后再生成单独只有ui纯色背景的和一张背景,然后手动一个个抠

我现在使用figma + codex开发的,但是figma的mcp很坑爹,每个月只能调用6次,我使用的

这个项目,完美连接figma和codex

看这个mcp 好像也没有可以将codex生成的图片导出成切图的功能啊?请佬细说

它主要是用来连figma的,:joy:,切片啥的你可以看看figma可不可以做

:laughing:我之前的想法是用SAM模型去分层,但是有些地方效果不太好