呃,斐克曼这个 ai 功能还是非常强的,它还可以去做 ppt, 比如说我们把刚才这张图片, 它可以尝试去把它做成可编辑的,我们试一下啊,我们复制这张图片,把它复制成 ppt, 复制完之后你粘贴过来,你也可以上去上传你的内容,让它去做成万能片。这里我们选最后一个 jumbo 三点一,这个我们说,呃,复刻,复刻啊,这张能片 大概十六比九, ok 啊,你也可以去他,呃,能干嘛呢?首先你可以找到你喜欢的风格,让他把它搞成可编辑的, 那这个风格出来之后,那你就可以去上传一个文档 pdf 去让它继续去完成的,你让它输出十六比九的,它就可以变成可以编辑的。 所以它这个这这个 fig 码它是可以用来做 ppt 的, 它是非常多功能的,它也可以去用这个里面这个 ai 去做网页啊什么的,只要稍等的话,不过它用来做这个页面的话,它消耗的积分就会多一点。看我现在积分看一下有多少, 这看不到,它大概会消耗几十点积分。再看这个任务量了,有时候多一点有,有时候小少一点。然后你让它复刻的话,尽量去选一些 啊,规整一点的,就是类似于网页的,如果这种太太花里胡哨了,可能也弄不了,那其实没关系,你可以去用这个什么生图功能,再去生成一张底图嘛,你可以把这些擦掉嘛, 反正他都可以结合来用。他现在没有说哪个工具一次就做出那种呃,一步到位的, 他直接出来图片的是可以,但是你你又要他可编辑,又要那什么,你什么都要的话,这目前我觉得是还没有, 你稍等一下,他一次的话,呃,要几分钟,这个稍微久一点。 我还有一种方式,就是你找一个参考的风格,找到这参考风格之后,你上传你想要做 ppt 的 文档,上传要让他先做前面那几页,这样子他的效率就会高一点, 但这里面其实都有抽奖的成分。你你要找的这种对象一定是跟他这个呃,类似于那种网页啊,快快比较明确的才行, 不然的话他是达不到那个效果,因为他做这个东西有点像网页一样去做嘛,你想他做网页都是一些实量的,你让他去画图,他就没那么擅长,他更擅长的是做动画,做这种啊,效果啊这些东西。 那,那为什么我们可以用这个斐克玛去做 ppt 呢?首先你看我们如果让它进行这种自己的调整是非常方便的,它里面有这种缩放功能,还有这些,呃,这种 我们让它进行这个,我说比如说我们调这个行高,看它就很方便的去调这个行高,通过拖动这个东西就可以调整。 那我这里这我这里也用了一个插件,可以实现这个直接选中它,然后进行说法。 这个手放不了吗?试一下,你看可以直接进行缩放,包括这些选中的对象都可以直接进行缩放, 看它还可以去做这个蒙版,看添加这个蒙版,添加蒙版之后 你再去选择这个蒙版,你去调这个渐变就非常的方便。就是你你要类似于啊渐影吧,你在 ppt 里面去做这个渐影是比较头痛的,是做不了了,所以用 ok 插件, 然后就是斐克码,它不卡,大家都可以在上面去,很多人去进行编辑。 我看一下,他还没出来啊,出来了,你看,但但这个东西有点复杂,如果找一个简单一点的,我们可以找一个简单一点的,试一下简单一点的,比如说去小红书,是吧?小红书我们去找一张小红书, 我们去找一个别人的作品来试一下。在这里啊, ppt 看哪个,找一个, 找哪个,找那个那种快快状一点嘛,要不然太太太那个,不然难度太高,他整不出来。你不是难度太高,要要整他擅长的, 再看一下,稍微找一找, 我觉得这这些相对来说简单一点。试一下这张,把这张搞过来。搞过来啊,我这样来试一下。 ok, 试一下,看一下它的效果,但这些东西它是已经搞的不错的,是我们的要求有点复杂,看看,我把它搞过来。 哎,还没复制,稍等一下。他他他是点这这个复制要要稍等一下,等他复制完,等他复制完,复 制完是可以进行缩放的。 哎,你看这不就像一张幻影片了吗?这些全都可以编辑了呀,这些你不想要的都可以删除了呀,都可以删除。那我们点导出看一下,点导出导出 ppt 保存,看一下下载的效果, 你看都在都在文字都可以编辑,只是这些有一点乱的,他这里应该是,我本来这里就是乱的, 所以几几乎是一样的。再看一下复刻的东西怎么样,等一下,稍等一下。 所以你们想做这种可以编辑的 ai 可编辑的啊,斐克玛是一个比较好的选择,但是它消耗的积分肯定相对多一点,一个消耗几十点,然后每个月是 三十点,所以这个要注意一下,它这里是能看到积分消耗的,比如说我们点一下它是用六十二点,所以让它确定风格之后,让它去一整份输出,其实是比较划算的, 要一整份弄过来,弄过来之后你再去啊,再去调调一下,在这基础上去调他能做的风格还是挺多的,不要整一些,他太复杂了,为难他就行。像这种规规整整我觉得他是没问题的, 他做一个要几分钟,要稍等一下, 你看它,它除了这种呃什么,它排版其实也是很方便的,比如说我们这里有几个东西,你你要对齐的话,在 pc 里面是不是得操控这个对齐工具?那在斐克码里面我们直接 shift 加 a, 哦,对,要放大概这样子,我们直接它用它的呃自动排版工具就可以进行对齐了, 看他在里面还可以去调这个间距,然后换位置也是很方便的,比如说我们这两个位置相换, 看他是完全不会打,不会打乱你的布局的, 他只要两个选中他出来这个东西你就可以随便去换的位置,这个他做完了,你看这是他做完的效果,看他这种规整的东西,甚至你一些更复杂的他也能做出来。所以大家在选择那个对象的时候要注意一下, 不要选那种难度太高了。就类似于这种网页的啊,什么规规整整的,他就可能很精准的给你复刻出来, 完全能够编辑,然后这些图片你可以用它的 ai 功能重新去改,看这些全都是可以编辑的,对吧? 全可以编辑,它这里有个圆角,可以把它去掉。 ok, 我 们再导出试一下嘛。导出 ppt 保存 看一下。这导出来了,打开,哎,你看全都可以编辑,这些字是可以打的哦,你看敲一下,就因为他是没有那个字体就有点乱码嘛, 所以你们可以自己自己去尝试,更复杂,你看几乎一模一样搞出来了,你们可以去尝试,稍微复杂了他也可以实现的。
粉丝5获赞32

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

今天主要就是想跟大家分享一下 figma 它的 m c p 现在到底有多猛?呃,我们看到当前这个设计系统还有这些页面都是我拿 ai 工具连接 figma 的 m c p 了之后 ai 生产的, 也就是说我人工一点也没有干预,它就直接在 figma 的 原声文件里边帮助我生成了这些设计的内容,然后我们怎么使用,其实也是非常简单的。然后在这里面我是推荐大家直接使用这个 codex, 因为它的安装真的是非常简单,只需要我们来到这个技能和应用的这个部分 后,我们就可以直接看到 figma 的 这个插件,我们点击这个连接,它会有一套连接的流程,我们直接一直点确认,确认确认,然后它就能够给我们添加成功。这个插件呢就是直接把我们 figma 的 这个 m c p 的 服务还有 skill 的 技能包就打包成一块了, 就相当于安装了这个插件之后,你 m c p 的 服务也有了,它内置的这个 skill 技能你也有了,就用起来会很方便。而连接成功了之后,我们去使用它的时候,基本上就是两个方向,一个是让编程工具直接去看我们的设计稿去生成代码,还有一个就是 bigmail 去看我们 web 定出来的内容去生成设计稿,主要就是两这两个使用的方向,那让他参考我们的设计稿去生成页面,我们就只需要在 bigmail 里边选中我们想要生成代码的页面 copy 这个链接, copy 了之后我们直接把这个链接发送给这 codex, 它就可以直接连接 m c p 的 服 服务去帮助我们去运行,他会先读取我们的页面,帮助我们自动开发成对应代码文件。那如果说我们想要让他参考我们的这个已经生成的这个代码文件,去生成对应的 figma 原生的文件,我们也只需要用这么简单的一句话,他跟我们确认一下这个文件所属的团队是什么, 就会自动生成对应的设计稿。我们可以看一下这个是他给我生成的 figma 的 原文件,这个是我们之前的这个设计稿,当然这里边也会有一些偏 叉,就比如说他拿 svg 直接画的图形,肯定是不如我们手动画的那种图片要精致的,所以我们需要想要去有调整的地方的时候, 就比如说调整一些细节的这种图案,我们可以直接对应复制组建的这个链接,给它提供一些修改意见,让它改它就能够定位到我们 figma 里边的对应的这个组建他也可以去参考,就相比到之前我们去截图去定位的话,要方便很多,也会准确很多。然后后面的测试就是我直接让他生成页面的一些操作,比如说我让他根据当前页面的风格去设计套设计系统,还有一些根据设计系统去 开发一些延展的一些页面,在 figma 里边执行的效果都是很不错的。这些内容就是我们刚开始给他去展示的。 当然这个设计系统相对来说是比较简单的,包括一些组建的展示,因为我给他的内容就比较简单,只给了他一张页面去做参考, 所以他生成的内容相对简单,我们如果说有丰富的页面参考,可以让他去尝试一下,生成复杂的设计系统都是可以被我们去开发的。从我目前的这个简单的测试的流程来看,我觉得他执行效果还是非常好的,而且很稳定。

哈喽,朋友们,我是阿水,上次呢,我用 codex web 定了一个生成 ui 设计稿和切图的插件,那 ui 设计师必看的这一期,所以呢,这一次在上一次功能的基础上实现了大家都很关心的如何导入。 figma 是 可编辑可修改样式的设计稿, 文案是可以随便修改,巨型的圆角大小也可以调节,并且呢,这种阴影效果还有整个图片的设计的还原度也是很高的,而且呢,这次图标实现了 svg 效果,可以自由编辑描边的颜色呀,大小这些。那这次更新可以说是一个完整体的插件功能了,从 从图片生成到切图再到可编辑的飞格玛设计稿,实现了 u i 设计师解放双手,而且这一次还更新了切图,可以自由的设置圆角呀,大小呀这些,那切出来的图片会更符合我们的交付标准。那还是一样,想要体验插件的同学可以直接在评论区留言,我做这个插件呢,其 主要目的就是希望能够对大家来说有用,可以帮助大家提高工作效率。首先我们在这里可以选择纹身图和图身图都可以,那图片设计稿生成之后呢,同样我们是点击这里去切图,点击这里会出现一个切图大小的设置弹窗,可以设置大小 位置和圆角。那切好图片之后,同样是我们点击放入飞格码,如果我们想导入图片,就选择原文件导入可编辑的设计稿,就选择编辑设计稿这个,那生成好了之后呢,我们点击这个按钮,然后就会自动放到飞格码里面,这样呢,就可以得到一个可编辑修改的 u i 设计稿了, 文字圆角还有描边的大小、颜色这些都可以修改,这样呢,我们的工作效率至少提升了百分之五十。那同样呢,大家对这个插件有什么好的意见或者建议都可以直接在评论区找我,我是阿水,大家记得点赞关注评论哟,我们下期再见,拜拜。

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

这些是我用 figma 中的 jimmy 一 键输出的设计稿,我感觉已经很强了,二零二六年赶快用起来吧,不然真的要被淘汰了。 我主要测试了四个场景,分别是图片转设计稿、需求转设计稿、圆形图转设计稿以及设计优化。先来看一下第一个, 这是我在拼趣设置上找的一个 ui 设计稿,直接贴到 figma 上,提示时我随便写了一下,大致就是你是一个很厉害的前端,帮我把这个 ui 一 比一的还原。稍等一下,我们直接看结果,他生成了一个前端页面,这个页面我们可以通过右上方的这个按钮复制到 figma 设计文件中。 我们来看一下设计原文件,还原度极高,并且所有的图标都是矢量图标,布局也很讲究,也设置了对应的自动布局, 基本具备了将任意一个图片转成设计稿的能力,效率还贼高。再来看一下第二个场景,需求转设计稿,这里我模拟了真实需求,给他贴了一个需求文档,让他直接把这个需求文档变成设计稿。也只是稍微描述了一下我的设计需求,深色底配荧光绿, 他很快就能根据我给的功能做出前端页面,只是底篮的宽度有点问题,调整一轮很快也就弄好了。 我们在设计文件中查看一下原文件,这个页面功能的复杂程度已经是工作中能够真实遇到的那种了,但是他处理的依旧很好。看一下卡片背景,他给了对角线的微妙渐变,甚至还在卡片的右上角加了一点绿色模糊的光效,很像老设计师的手法, 整个布局也很工整,遵守了八点设计的原则,比很多老设计师都细心多了。再来看看第三个场景,圆形图转设计稿,这里给他上一点强度,来一张手绘风格的圆形图, 试着 pua 他 一下,说他拥有极强的审美和产品思维,让他补充功能并设计出 ui 页面。生成好之后,我们去飞格玛查看一下原文件,它增加了顶部的进度统计,以及一些情绪化的标语,并且还增加了一个日期快速切换的区域,我觉得真的挺好的。 以前都说用 ai 会制 ui 很 死板,看下这个,他已经有了自己的思考。第四个场景,我随手截图了一张我手机上的应用,让他去除广告并优化设计。来直接看看原文件吧,中文字体还有点问题,他不能调用我本地的字体,这个也没有办法。 其余的整体看上去已经比原版更加简洁大气了。只是也许这种设计不是老板喜欢的设计,总的来说,颠覆的苗头已经出现。二零二六年,人类 ui 设计师会被 ai 全面超越。快去体验一下 figma make 吧,这可能比任何一个 figma 的 技巧都值得学习。

大家好,最近 gpt 的 mh 二发布之后有多厉害,相信大家都已经见识到了, 但是它都是生图,有没有办法可以尝试转到编辑的版本呢?答案是有的,我这里就先讲其中一个,这张图是我在 gpt 生成的一张 u i 界面图,生成图之后还是在 gpt 绘画,这里选择 fgem 应用,这个是通过 fgem 来连接你的 ai, 需要专业版或者是教育版本 使用,需要连接一下。打开文件之后切换开发模式,右侧菜单这里就可以看到了,我这里是已经连接了,然后你还可以再去添加其他的,只需要点添加,然后可以查看到相关说明了,左下角还有详细的说明。 回到图这里输出提示,然后就等待,期间会弹出一些确认授权同意就可以了。好了之后会返回一个链接,打开就可以看到了, 应该是打开的方式不对。我们回到绘画,这次把生成的图像复制并粘贴到绘画里,重新输入一下提示词,再等待一下一样的同意授权, 然后再返回了一个链接,我们再看一下,这一次就正常很多了。文字图层颜色都是可编辑的,我们把图像放到旁边对比,也方便上修改。图像上没有还原原因应该是因为在 m c p 里对图像处理不了, 这里先把背景改个色,方便查看,这里截个图去 g p t 生成一张海报,为什么要截图呢?因为我懒得打字。继续生成一张海报,生成之后轻轻松松的就可以粘贴到 figma 了, 把海报粘上去,效果是不是一下子就有了?同样的也可以适合在一些其他的 ui 上尝试,如果出错了就多尝试几次,改变不了 ai 对 行业的影响,那我们就拥抱它 好了。这期就分享到这里,麻烦家人们给一下点赞关注,谢谢!

久等了,飞哥马这一次终于把用户呼唤好久的图片转矢量功能上线了。 stop! 比如我拖进这张照相机的图片,先去除背景,方便下一步点中图片,点默 viktoras, 几秒钟,他就会被转成可以编辑的矢量图层。 你还可以 color 调整,选择 full color, 这里的数字就是控制食量里要使用多少种颜色。也可以切到 grey scale, 把画面变成不同层级的灰度。再或者使用 black and white, 同样使用滑杆精准控制黑白的幅度。 图标、 logo、 插画都可以更好的在这里处理。在这基础上,再加上灶点呐纹理呀,立刻就更有设计感了。因为很多设计其实并不是直接从软件开始的, 可能是我的手绘草稿、随手拍的素材,或者是 ai 生成但暂时不能用的丑图。有了这个功能,就可以直接拉到 figma 继续调整。所以你觉得这个 vectorize 的 功能又能帮你省下多少的工作时间呢?

二零二六年 ai 时代动效设计新的工作流, figma 加 gemini, 一 句话直出 svg 动画加代码。首先打开 figma, 右键拷贝图标的 svg, 并加上这段提示词发送给 gemini, 并调整为 covers 模式。点击发送 我们就可以看到动效加代码就完成了,代码直接可以发送给研发,完美解决还原度的问题。关注我,下期更精彩!

我把图标库分装成图标 skill, 要用可生成符合规范且能编辑的图标,才能对已有图标按规范进行审查。实现方式就是先把规范导出为 pdf, 再把 pdf 拖入到 codex 执行完成后就会给到我们 m d 文件,这就是可执行的 skill。 ai 执行过程中会出现遗漏或不准,这就需要人工的修改和确认。最后输入多了加 skill 名,加想要画的图标名字就能调用图标 skill 指出符合规范的图标生成后的图标都是矢量,且支持二次编辑。

hi, 大家好, figma make 在 上周支持了 skill 的 功能,然后呢,这一次这个视频我们就大家一起来体验一下这个 skill 到底怎么用,好不好用。 我们打开 figma make, 点击前面的加号,会发现多了一个 skills, 然后这里有创造 skill 还有管理 skill。 我 们先从习 skill 开始, 点开之后有两个选项,一个呢,一个是从电脑本地导入,还有一个就是写,那我们就直接先从写开始啊,这里呢会有一个 skill 名称, skill 描述,还有 skill 的 内容,让我们先随便填一下。 到了 skill 内容这里呢,我们肯定是不要自己写,然后我们接着还是打开 codex, 然后让 gpt 来给我们写一个 ui skills。 这里呢,我还是以嗯晒思恩为例,就是我们之前视频里有推荐过这套组建库,然后我也还是用这一套组建库来写一个 skill, 我 们来应用一下试一试。 在等待了一段时间之后呢,呃, codex 已经把 skill 帮我们写好了,这个时候呢,我们过来预览一下看一看。因为这个时候其实我们也找不出什么问题,因为我们并没有提出什么特别的要求,我们就只是让它来应用这套组件库而已。 那我们就看一下,然后直接复制粘贴到 fake 码中去, 粘贴完成后,我们直接去点击保存即可。这时候我们再回到 figma make, 然后点击加号 skills, 发现有一个 use skills, 然后刚刚我们创建的 skill 已经出现在这里了。 接下来我们就来测试一下这个 skill 它到底有没有生效。然后呢,我让 figma make 给我做一个宠物社交类的产品,包含 web 端和移动端, 然后呢给了它一些嗯主要的功能,比如说呃电商啊,社交啊,还有个人宠物的这样一些界面,然后让它来给我去完善,就是我只提出一个非常模糊的需求,然后这里在模型上我选择了 cloud cloudsonnet 四点六,因为 oppo 的 四点七它所费的点数会非常的多。 然后在 figma 干活的期间呢,我就给大家再次安利一下这套组件裤,它是一套 开源的组件库,免费的,而且呃它所适配的场景啊也非常的多,大家可以看到现在这我在看它的组件列表,反正这些组件基本上已经覆盖了我们常用的一些功能, 然后我们就可以一起简单的看一下它的样式啊,代码呀,然后安装方式啊,链接就在这里。如果说前端想要使用或者我们自己想要使用这套组建项目的话,可以直接点击右上角到它的 github 链接,然后从 github 上直接下载就可以了。 如果想要在 figma 中使用这套组建的话,其实到社区里面,然后直接输入呃组建库的名称,就会发现其实在呃我们的社区里面有非常非常非常多的这个组建的资源,我们可以直接拿来用就行。 在又等了一段时间后呢, figma 终于把我们的需求给做出来了,我们来一起看一下吧。 首先要说一点,就是呃 fake mac 打出来的东西的质量其实还是跟模型有正相关的,然后我们通过 skill 来约束之后,其实更多是在设计和审美层面 给它做一个规范化的约束,但是像我刚刚给了一个非常模糊的需求,然后它具体能把这个需求完善成什么样,还是需要根据模型能力来看的。 呃,我们快速的浏览点击一下,我们的现在完成这个产品好像是还不错,它把功能完善的很闭环,而且呃界面呀,组件使用也完全遵循了这套组件库的规范, 并且它还做了移动端。这时候我们看一下这个卡片规范是不是和它组件库中的组件规范完全一致,是完全一致的,没有问题, 接下来呢,我们来说一下很多设计师忽略的问题,就是 figma make 完成设计之后里面的这个代码, 这个代码其实它是已经是一个完整的前端项目文件了,如果说你所使用的 skill 里面的组建库和前端使用的组建库是一致的话,那这套代码其实可以完全直接拿给前端来用,那我们先把它下载下来, 下载完成之后呢,我把这个文件直接丢给 codex, 然后让 codex 把这个项目在我本地的前端跑起来,我们来看一看它是不是能跑成功。 codex 跑完之后,我们一起来看一下啊,这个项目已经在我们的浏览器中跑起来了,并且外部段和移动段也都做了适配,所以呢,我们的设计师在 fake map make 升完图之后,千万不要直接把它当做图无赖用了,它还有更多的用处,代码也是完全可用的。 那第一种直接在 fake mark 里面写 skill 的 方式我们已经尝试过了,接下来我们来试一试。第二种从本地导入 skill 的 这个方式,看看怎么样? 我们再次打开 fake, mark make, 然后点击前面的加号,然后去找到创建 skill 的 这个地方。接下来呢,我们使用一个之前视频里有用到的我们写的 on the design 的 skill。 呃,看过之前视频的同学应该还记得,在这个 skill 里面,我把主题色的蓝色改成了橙色,所以呢,当这个 skill 上传上去之后,它是否生效,我们是很容易进行验证的,所以我们把里面的 skill 文件,然后直接去 呃上传到 facebook 里面,然后我们再来试一下。为了方便区分这里,我直接就叫 ant 点赞杠 ui, 然后杠 orange。 然后呢,我们点击加号,然后 skills use skills, 然后选择我们刚刚创建的这个 skill。 为了能更好地看到效果啊,所以我是让它去做了一个弊端的流量使用和 token 使用的这样一个项目,因为这种项目来说,它所用的图标会比较多,然后验证我们这个 skill 中成色有没有生效的。呃, 视觉辨别方式也更简单。好,现在我们的项目已经构建完成了,让我们可以看到我们的 skill 生效了,它是以 ant 组建为基础,然后以我们的成色为主要颜色。 那其实,呃,在今天我们一起调研完这个之后呢,我们会发现,这个 skill 无论是在 figma 中还是在大模型中,它们所完成的工作是一样的,都是对模型所输出的结果进行一个控制和约束。 但是我们会发现它的交互逻辑是完全不一样的, figma 还是更偏向于设计师层面的交互,让你直接能看到你所出的东西是不是符合 skill 预期的, 而且这个东西其实在 figma 中它更多的还是我们最开始所说的 u i skill, 而不是说像大冒险中它可以用 skill 去做任何任何更多的事情。

今天教大家如何用 ai 生成一套可编辑的 ui 设计系统。打开老朋友,选中已经升好的图片模型,选择 gpt image。 二、输入这段提示词,稍等一下,这个 app 的 设计规范就全部升好了。看下,内容很全,点击放大,这高清质感直接拿捏。关键一步,我们要把它喂给 fim。 安装好 codex, 搜索并授权 figma 插件,把图丢进来,输入指令。注意看这里,第一次用 mcp, 一定要在 figma 中手动勾选,不然连不上插件哦。看 ai 在 自动分析了,稍等一会儿,在 figma 中就有了可编辑的文件了,基本上是一比一还原了整个页面, 如果有细节没对上,可以截图让他再次修改。看这次图标就完全没问题,连卡片的投影参数都能改。现在这套规范就可随便你编辑了。这种工作流才是 u i 设计师该有的 ai 外挂下期视频讲如何此基础上搭建组建库。好了,赶快去试试吧!

太离谱了,我真的觉得我本科四年工业设计白学了,我刚才用 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 的 根本就跟不上。

七万两千星的开源项目,把 cloud stripe notion 的 设计系统打包成 ai 能直接读的 markdown 文件。 你丢一个 design md 到项目里,跟 ai 说,按这个风格给我做一页出来的 ui, 直接对其品牌质感,不需要 figma 导出,不需要 j s o n 配置, 六十九个品牌的设计规范都在这儿。 cloud 的 暖陶土色, linear 的 集剪子, nike 的 全幅摄影, tesla 的 剪法美学,每个 design md 都包含完整的色板、字体、组件规范。 ai 说,给我做一页 stripe 风格的结账页面,你只需要 c p design 点 md 到项目根目录,剩下的交给模型,理解你的设计意图。 google stitch 提出的概念,配合 cloud code、 cursor 这些 ai 编码工具,写一页设计文档,省一整个设计团队。记得点赞关注啊!

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 小 技巧。

ai 导出 pdf 首先建议大家在文件里面做好初选位,点击文件存储为选择要保存的路径后保存类型,这里选择 pdf。 如果要把整个文件导出,就选择全部导出,指定某个画板就选择范围,输入要导出的画板编号, 点击保存常规预设,这里选择印刷质量,如果导出的 pdf 不 需要保留编辑功能,就把这个勾给它去掉,需要编辑就给勾选上。打开压缩面板,像素要选择三百个像素,图像品质选择最高。 打开输出面板颜色转换选择不转换配置文件选择不包含配置文件设置好后点击存储 pdf 就 可以了。我们打开 pdf 看一下,这样就导出来了,你们学会了吗?

你跟 ai 对 话的资料都保存在电脑上吗?以及文件夹又是怎么去设置的?如果遇上封号或者说平台崩溃呢?过往的数据都打不开了,那么是否有一些预备的方案?同样的,如果说你使用的是云端笔记, 很有可能遇到数据无法导出,或者说导出之后无法在其他设备上打开。因此,如果说你一开始就把这些资料都保存在电脑上的话,结果可能是完全不同的。这一期视频呢,我会教你如何用 obz 点完成以下三件事情,分别是搭建一套不会乱的文件夹结构,同时写几个文件呢?让 ai 记住你是谁, 包括让 ai 按照你的方式做事情,做完之后呢?不管你换成什么 ai 工具,它都能够马上进入状态, 而我现在用的 cloud code code x 以及 open core 都是基于这套系统在运行的,即使未来有更好的工具,我也能够随时切换。接下来我会把核心的思路讲清楚,你可以跟着视频一点点的开始搭建。 第一层呢,是 act 加缩影系统,你想一想你这些年读过的书,或者说做过的项目,踩过的坑,包括学到的一些道理,这些东西呢,你都保存在哪里了? 我认为这些东西呢是最有价值的,而且只跟你有关。在互联网上是找不到相关资料的,但是大多数人这些资料呢都散落在各种 app 里, 从而导致 ai 没办法更好的利用它们。除非这一些 app 提供了一些 ai 的 入口,否则的话你根本没办法去掉取它们。所以第一步要做的就是把这些资料呢都保存在电脑本地。我用的方法呢就是 act, 它其实对应的呢是三个文件夹。 首先是 action, 它对应的是你正在做的一些事情,或者说想要做的一些事情。第二部分呢是 card, 它里面包含的是你沉淀下来的知识,以及一些知识之间的连接。第三个模块是 time, 里面是包含你跟时间有关的记录,当你在这里面记录的越来越多,然后接入 ai 的 时候,它能够更好地理解你, 同样的跟你的写作也会更加的高效。这并不是一个整理文件夹的技巧,而是你在给 ai 搭建一条了解你的路径。然后呢,在每一个模块上,你可以使用缩印笔记的方式,其实缩印笔记就像一本书的目录, 你可以通过它来找一些自己想要的资料, ai 呢,也可以把它们当做入口,然后快速的定位到需要的那些内容。这样呢,当你需要一份资料的时候,不需要手动和人工的去寻找它们。 第二层呢,就是让 ai 去更好的了解你,给他一个身份文件,你想一下,为什么 ai 每一次跟你对话的时候,都像是一个陌生人在跟你沟通,因为他确实不了解你,他不知道你是做什么的,也不知道你喜欢的风格是什么,更加不知道你之前记录的这个知识库积累的资料是什么样子的。 那么解决这个问题的方法也很简单,就是写几个文件,这边呢,一共会用到三个文件。第一个呢是 user dmd 文件里面呢,有我的工作方式、习惯以及思考问题的一些角度。 第二个呢是灵魂文件里面呢,就是让 ai 去行动的一些准则,比如说跟我对话的时候,不要进行大量的铺垫,或者说稳稳的接触我,而是以一种更加简单直接的方式跟我进行沟通,甚至对我进行批判,这些呢,都可以写在这些文件夹里面。 第三个呢是 cloud dmd 文件,我认为它是最重要的一份文件了,因为它是 cloud 开启每一次对话时候自动加载的那一份文件,每一次它都会去进行阅读,并且这一份文件呢,你不能超过两百行,否则的话 ai 在 读取的时候会忽略后面的内容, 因此呢,你需要去精简以及提炼这里面的信息。当完成了这一些文件夹之后呢,其实 ai 每一次对话的时候,都会通过这些文件夹来了解你以及了解你的工作习惯。其实这个文件夹结构有一部分内容是参考自 opencloud, 如果说你正在使用小龙虾,应该就会知道它的作用是什么,而且这一些内容你可以用到不同的 ai 里面。而第三层呢是 skills, 我认为这个呢很多人都已经开始使用了,这部分呢是叫 ai 按照你的方式去做事情,你肯定有一些事情呢是反复在做,比如说每周的复盘,写文章,或者说整理一些素材。 那么每次做的时候,你都希望 ai 能够按照我们一个固定的思路来配合你,而不是每一次开始都是从头开始。 那么这个时候的 skills 就 像一个 s o p, 当 ai 去执行相关的任务的时候,就会去打开这个文件,里面呢写清楚了一件事情应该如何的行动,里面是一个标准化的流程, 当 ai 读取到它就知道应该怎么做了。比如说我有一个每周复盘的 skills, ai 呢,会自动去读取我这一周的日记以及目标,帮助我进行对齐检查,然后生成一些周笔记的初稿, 以及跟我进行对话,找到我在过去一周里面可能没有注意到的一些细节。而这些 skills 呢,跟前面的文件是一样的,都是普通的 md 文件,它存在你的电脑上,可以随时去切换你想要去用的 ai 工具。