ai设计海报怎么出figma源文件

这些设计精美的 ui 稿居然都是以 mac 二出的，不仅能一键生成整套 ui， 还能直接转成 figma 编辑图层，甚至带自动布局。今天手把手教你这套保姆级落地流。 打开这个 ai 工具模型，选择 gpt image 二，输入这段提示词。注意，这里一定要写九比十六，或者具体尺寸稍等下，一整套这个 app 的 页面就齐活了。这个质量果然很高，如果不满意，可以直接让它再优化，比如优化成英文版和更为简洁的版本。 这质量，产品经理看了都不想画原形了。重点来了，怎么把画变成稿？把生好的图丢给 jimmy， 输入这串指令，看它在自动解析结构了。点击复制代码， 粘贴进这个转换工具，点击保存。这是目前我测试下来还原度比较高的方法。在 frame 中打开这个插件， 选择文件，将代码文件拖到这里，点击继续看下它解析出来界面。乍一看还原的还可以，连自动布局也有了，文字图标全部能修改， 但是想要一比一还原，还需要 ui 手工再修改下哦。可以在 office 中按住 command 键，点击需要的图片，就可得到一张完整的高清素材了。将素材还有图标在 fim 中快速还原下，相比自己纯手搓，效率直接拉满。 不到十分钟，一张能直接交付给开发的沈阳稿就整理好了。我还用它生成了车载盒和和格式化大屏 ui， 这质量同样是绝了，还能一键变换色系，真的服了！好了，赶快去试试吧！

g p d a b s two 它不只会生图，还可以给你一整套设计员文件，包括 p s d 分 成文件， big mac cat， 全都是可以直接编辑的那种。这个功能太离谱了，基本就是把设计师的工作流都打包了。操作也很简单，我只说一句话，帮我生成一套 ui 规范，要求它输出设计交互包。 这里选 gpt， 五点五它会自动调用最新的 a mz。 二、生图模型，几分钟之后直接给你拼音， g svg， psd， figa max， 各种原文件，甚至连设计 token 都有，全都是打开就可以用的。 更贴心的是，他还给你写了一份 readme 文件，告诉你每个文件怎么用。这已经不是生图了，是在帮你交付设计。如果你是做设计，做产品，做前端，这个你可以去体验一下。关注我，每天一个 ai 小 技巧。

我告诉你们为啥现在 ui 不行了，成套成套的 ui 组件就现在都不需要做，所以说不需要找那么多 ui， 就你们要懂飞鸽马的话，打开飞鸽马那个社区啊，我跟你说这个，哎，飞鸽马社区看飞鸽马原文件，各种原文件，这边有插画看着啊，飞鸽马插画原文件，各种插画原文件， ui 远文件全都免费。因为菲格玛社区就是别人做完之后老外啊，他很多都是闲的没事做完了之后上传让你自己下去开康目标 ui kit 感受一波 ui kit 全套，线上社交 app 全套，直接拿他套你自己的，开发你自己的 app。 那咱们这个胡博老师作品及模板缘分见你吭哧吭哧做我半天，人家这这个都是免费的，你看这个多好啊。

今天给大家分享一下飞马官方出的这些 skill 的 用法，然后测试一下让 skill 调用你的飞马设计组件来搭建页面的最终效果。那在上个视频中，有朋友问我 cloud code 用的是什么模型，必然是 cloud 自家最强的 oppo 四点六模型。 因为是接的第三方没有公开的一套中转方案，所以知道的人比较少，而且永远不会有被封号的问题。如果有需要的朋友，我也会把这套中转方案更新在群问当中。 ok， 我 们首先聊一下 figma skill 的 安装问题，简单来说就是你想用下面这些 skill， 就 必须先安装上面这个 skill 为 基础。那点进去之后，官方跳转的是 get up 的 文件包，但是用压缩包安装对于我们这种非 cloud code 的 客户端用户来说非常不友好，因为自己添加的文件路径 cloud code 是 很难识别到的。我已经亲测踩雷了，所以我们要复制 skill 的 名称，去这个网站搜索， 复制这里的命令行来终端里安装。安装的时候后面加上空格杠 g， 空格杠 a cloud code 这个杠 g 的 意思就是全区杠 a 的 意思就是 agent 后边跟上 cloud code， 这样 skill 就 能在全区项目中用 cloud code 时都生效。装好之后，我们按同样的方法把这个 skill 也装上。这个 skill 就是 可以读取你 figma 项目中的设计规范与组建，然后就可以用这些组建来搭建页面。那我首先找来了 l b n b 的 一部分组建，让他帮我搭建个民宿的推荐页。 出来的效果组件在还原度上看上去好像没什么问题，但只要仔细查看就会发现这里的卡片组件右侧多出来的间距，甚至这里的字体用的压根不是 l b n b 这套规范。然后我们来 figma skill 网站再安装这个 skill， 这个 skill 可以 审查组建的还原度问题并纠正。安装好之后，我们就用这个 skill 在 cloud code 里跑一下，发现这个 skill 确实纠出了许多问题，然后看一下它还原后的效果。这卡片组建确实得到了修复，但字体依然是老样子。目前来看，调用这两个 skill 并不能完全交给它来搭建，组 建，仍然需要手动去介入。这个视频我也不会大肆去宣扬 skill 有 多夸张，只是想让各位了解一下 ai 的 真实。 虽然目前的效果并不完美，但我相信以 ai 的 进化速度，很快就会得到解决，所以我们更应该时刻关注他的能力边界。视频制作不易，测试和学习过程背后都是头肯在燃烧。如果对你有帮助，记得点赞关注支持一下。

哈喽，大家好，今天我想演示一下如何通过 ai 工具将 fig 码 ui 转成前端代码。这里我只要选择 fig 码并进行登录，登录后选择我想要的设计稿，选中我想要生成的设计稿 并添加到对话中，这个时候 id 一 会自动获取 fake 码中的图片和文字内容。 当这个码 u y 这些元素获取完了之后，我们可以用文字的描述让它将这个页面生成到我们指定的文件中。现在它就开始生成了。 现在它生成完了，我们可以打开浏览器看一下生成的效果。这是生成完的效果和 figma 的 效果进行对比， 我感觉还原率还是挺高的。那今天的演示就到这里了，我们下期再见。

太离谱了，我真的觉得我本科四年工业设计白学了，我刚才用 e m g 二点零，发现它可以直接生成那种可编辑的 p s d 文档或者 svg 格式的海报，就是它可以直接导入你的 photoshop 或者 figma 进行编辑。 如果大家不理解这是什么概念的话，就是 ai 已经学会用设计师的工具来做设计了。那么话不多说，我们直接演示一下它的提示词是如何生成的，就是首先我们一定要选择一个 g p t 五点五 thinking 的 模型 啊，我之前也试过其他的，比如说五点三，他都没有很好的效果。选好模型之后，我们就随便的输入指令啊，比如说让他帮我们去生成一个鸡蛋糕的海报，他很快就生成出来了， 而且我们在全网也可以看到啊， emoji 二点零的生成效果是非常好的啊，但这不是重点，接下来才是核心，就是我们让他把海报的逐个元素精准的单独拆分开， 并且不要改变相对的位置，以便可以在 photoshop 中贴合。我把提示词就放在这里，大家可以截图领取。然后就是大约过了一分钟左右，它就可以生成一个所有元素都独立分开的文件， 从背景到文字，每一个元素都是独立的，大家可以看到啊，这个效果真的还是蛮好的。随后就是说我让他把底部的这个白色抠除，然后整体可以合成一个 p s d 文件，把这个文件发给我，这个也是一样啊，提示词大家截图领取。然后也是过了一分钟左右，他就把完整的 p s d 文件生成好了， 关键是它不仅能生成 p、 s、 d， 它连 f、 g 那 种需要的 svg 格式它也能生成。大家可以看到就是每个元素都是独立拆分的，随时可以隐藏。而且你要想编辑其中的文字或者图像的话啊，具体的大小你随时都可以调整， 就比如说你觉得这个鸡蛋不够大，你就可以直接放大，一点也没关系。我觉得这下就是海报设计的，它底下的白边还没有抠干净， 但我觉得模型进步这么快，大家可以想一下一个月之后会是什么样的变化。我觉得之后 ai 生成的图都是分层的，不会再是单一图层了，而且之后我们想要改什么，只针对其中的某一个分层进行定制化的编辑就可以了。 所以说这个对于我本科学了四年工业设计的人来说，真的非常的震惊，因为我们当时学 ps 就 学了差不多一两年的时间，但是现在 ai 就 可以操纵这些工具去帮你生成海报， 生成一些专业的编辑和定制化的内容了，也许马上一个人用 e、 m、 g 二点零就能干掉五个人的设计师工作室了。所以说我真的建议很多现在还在学设计的同学啊，没有必要再学学校里面那些过时的知识了，更重要的是赶紧去学习怎么掌握 ai 这样的技术，然后利用这些技术去批量的接单。 其实现在有大量的场景可以做啊，就比如说一些公众号的封面和订阅，对吧？未来一个人可以接五十个号啊，就算每一个客户你一个月只收他两百块钱，那一个月也是一万块钱啊， 而且还可以做小红书的电竞详情页，你还可以做跨境电商的一些海报素材，就是机会还是非常多的，只不过是大家不会再用那些传统的工具了。我觉得未来就是拼这个批量化和定制化的，如果你不学 ai 的 话，你的产出效率跟别人用 ai 的 根本就跟不上。

设计师们别再在 ae 里苦苦挣扎了，今天给大家分享超厉害的飞格玛图标动画工作流，不用 ae 也不用拉提，效率直接飙升六十倍，设计同行们可一定要码住！第一阶段，准备与基础设计。咱们先打开主力工具飞格玛，在飞格玛里着手完成基础图标造型， 不用追求极致完美，简单画个矢量轮廓就可以，不过有个关键步骤得给图标加上组建树形，这可是后续生成动画的重要基础。第二阶段， ai 一 键生成动画。重点来了，打开 jameson 大 模型， 或者使用任何支持 figma 的 ai 插件，把你的 figma 链接复制下来，粘贴到插件里。接着输入指令， 请将这个 ui 图标制作成一个两秒的加载动画，要求流畅有科技感，并输出为 lucky json 代码，只需等待三到五秒， ai 就 会自动分析图形结构。第三阶段，代码转换于应用， ai 会直接生成一套 lucky json 代码， 完全不用你自己写一行代码回到飞格玛新建一个框架，直接把这段代码粘贴进去， 或者在开发工具里引入，这时你就会看到原本静态的图标瞬间动起来了，旋转弹入，加载动作丝滑流畅，和设计系统完美匹配。第四阶段，交付与副本。现在你只要把这个动画文件直接导出给开发同学，开发同学看到后肯定会惊叹， 完美还原，直接就能复用！整个从设计动效开发的流程原来可能要花半天甚至一天，现在五分钟就能搞定，这就是二零二六年最顶级的 ui 设计效率提升方案。

这个网站可以直接帮你做 a p p 设计！最近，鹅厂自研的 ai 设计网站平台正式公测了，主打产研设协调、协助一体化。它还能一句话，生成可编辑的设计稿！快，可以快速做 a p p 官网海报、 ppt， 还能导入飞格码，调用团队的组建库。更狠的是呢，它设计稿可以一键转代码， 支持多人实时评论呀，版本对比协助的。现在设计圈又多了一个设计平台啊！呃，放一个它的官网宣传视频看一下给大家。

这个斐格码插件 html to decide， 学会了，少走二十年弯路，可以直接把你喜欢的网页扒下来，一键转成斐格码设计稿，高保真，可编辑， 细节放大也经得起推敲。如果你平时会做临摹或者设计参考，这个工具真的能帮你省非常多时间。改改颜色，看一下内容，一个新的网页基本上就出来了，做参考的时候会更轻松，用来练手找感觉还是挺香的。

figma 支持 skill 功能，可以创建 skill 和导入 skill， 之后输入 skill 名字进行调用。第二个更新是用聊天的方式直接在画布进行设计，还可以选中 frame 直接 进行修改，甚至在画布中调用组建，按规范在画布直接生成设计图，一句话，批量调整间距和组建。目前原生画布功能只有专业版和企业版支持。

别再用 ae 苦苦抠绿幕了，今天教你一套用 figma 加 ai 提效十倍的全新动效流程， 只要 figma 插件和任意一款 ai 声图视频工具结合，就能生成研发可直接使用的动效文件。导出的动效文件有 webm、 app、 ip 序列帧，可调整尺寸，文件大小，速率，还可以强制设置循环动画。 找到一个合适你的一个 ai 工具。我现在用的是可灵，然后通过文声图，然后图声视频生成你想要的效果，注意要带纯绿色的背景，然后导到本地备用， 然后再打开 figma， 在 figma 插件找到 chromecy pro， 然后打开运行。运行之后呢，再把你刚才下载的 绿幕视频文件导入进来，这里可以微调一下参数，然后在这里调整一下相对应的一个尺寸，然后点击下一步，然后选择你想要导出的格式，我选择 ybm， 然后再选择强制循环， 强制循环设置一点四秒吧，然后就可以预览一下了，预览之后整体效果没有问题的话，就可以导出了。 导出的文件大小呢，可以看一下 web 格式是两百多 k 可以 的，然后 web 格式也是两百多 k 啊，这个 a p n g 稍微大一点，然后包括这个雪碧图续列针的这个动画可以打开看一下， 然后这个整体的文件也是比较大的，当然这个你是可以根据实际的情况自己做一个优化调整。 最终呢可以放在 figma 里看一下这个动画的效果，在 ui 界面当中效果还是不错的， 没有 figma 的 同学可以使用，这个网站有试用，但是收费的话也很便宜，半杯咖啡的钱效果和功能和 figma 插件完全一 致。点赞关注，下期见。

客户要做这种菜单海报，有办法用你说的 ai 吗？我要不要告诉他，如果是我的话会用 ai 智能体，只需要五分钟我就能搞定他。你看，这就是我做的，一打开我的设计智能体， 上传这张图和我的要求，第三，敲个回车，等生成结果，第四，再检查一下，第五，直接导出。第六，如果要打印喷绘，导出之后在 ps 里面调成喷绘尺寸就行。 不对，我要分层的文件。这不行，这个简单啊，你这里就直接能改啊。不行不行，他不是我粉丝，我不能告诉他，这是我们应能达会员的秘密。图文广告店转型就找刘安平，真的好落地。

之前我们用 ai 做电商图的时候，最尴尬的一点是什么？当你的客户，你的商家找你要 psd 源文件的时候，给不出，为什么？因为用 ai 做的图根本就没有 psd 源文件吗？但现在这个问题解决了，我们来看一下。 呃，我们图生成好了之后，直接点击这个 psd 生成，然后我们就能把我们的 psd 文件下载下来，下载下来之后呢？那我们就去 ps 里面去编辑它吗？ 我们 ps 打开之后，我们去打开我们的一个 psd 文件，打开之后我们可以看一下，它其实是拆成了三个部分，一个是背景层，一个是产品主体层以及 装饰图标层，还有就是上下的这些文字了，我们挨个来看一下，比如说我把产品主体层隐藏掉之后，看是不是非常完美，然后装饰图层 以及背景层，因为这张图它的一个背景是白色的，所以所以 我们看起来实际上没什么变化，就是它本来就是白底的，相当于这张背景层是多余的啊。然后文字我们看一下是不是都可以编辑，然后换一下字体，是不是？以后如果商家或者你的客户要求你发 psd 文件给他，这不就是成了？对，是不是？

随手拍的图片就能变成 c、 d、 r 或者 p、 s、 d 的 原文件了，想学的直接看这个演示操作。这是随便拍的一张易拉宝啊， 把它怎么样去变成一个设计稿，一分钟就可以搞定。点这个 ai 生图上传这个图片，把图片给传到这个里面去，再选这个食物找稿，再点你的涨价或易拉宝，再选一下这个比例，这个原文件就直接出来了。还可以选择 p、 s、 d 跟 c、 d、 r 文件。 这以后还会有人找我们做这个设计方案吗？这都能转为原文件了，我们真的租这样一栋楼，三千多个平方，养五十个设计师，是不是草率了？