figma如何修改ai的页面

打开任意一个网页，然后在这里输入这段脚本，它就可以直接把整个网址都爬下来。我们再打开 figma， 按下粘贴， 它就变成了一个可编辑的设计稿了。哈喽大家，我是派大星啊。今天我在测试 figma 跟扣 d s 它们的联动的时候，我发现 figma 的 m c p 它一直在调用一个 js 文件呢。 打开看，它是一个获取网页布局的 js 文件，所以我就把它分装了。分装成一个脚本，就是我刚刚开始演示的脚本，你只要按在控制台粘贴以后，它就会直接读取整个网页。同时它还有个功能，就是你点击区域选择， 它就会出现一个选择框，你只要按下复制，在这里粘贴一下，它就能直接取下来了。但是有些用户我发了出去之后，有很多人都不知道怎么配置这个脚本，所以我又把它做成了一个插件，对， 叫 web to figure mark， 你 只要安装以后在任意一个网页，我这里用阿里云的网页测试一下，你只要点击插件图标 ok， 它就能直接整个网页都拉取下来了， ok， 然后再直接粘贴，稍微等一下，因为它图片的资源比较多，它就会慢一点啊，可以你看它实现出来的效果，我觉得基本跟 网页显示的效果一样，而且他最好的点是什么呢？他直接变成了一个自动布局的形式啊，我看一下他的文件在哪里，你看他有一个自动布局，同时你看可以看到他这里是一个雪碧图，是因为他网页他这里是一个会动的图标， 所以他这里就是水墨图。如果你这里是 svg 的 话，他这里显示的就是一个 svg 的 文件。对，然后我已经把整个插件已经分装好放在这里了，你们可以有需要的话就直接来找我。那好了，就这样，拜拜。关注我带你解锁更多 ai 体校技巧。

飞马今天刚刚更新了一些图片编辑相关的 ai 新功能，我们一起来看看。这是一张图片，按住卡曼的在边缘拖拽，可以变化这张图片的比例，然后右下角这是它的新功能， 也就是我们经常在 ai 里用到的扩图功能，加上了一个选区功能，有两个功能，一个是把当前选中的内容删掉，另外一个就是把当前的内容和背景分离，也就是把这个内容从背景里提取出来， 把这个云去掉，看它能不能去好。 然后我们再把右下角的这个，比如说这个水印给它删掉，现在去水印利器，然后甚至我们可以把这个云和文本从背景上分离出来， 这以后就真的不用打开 ps 了。嗯，这些东西都是分层的了， 然后这个是重新生成这个梦幻城三 pro， 根据选中的图层样式生成新图， 内容是上海迪士尼，它会有一个 之前的参考，之前的图和新图的一个对比样式，它就把中间的城堡换成了迪士尼的样子。 总体来说，新上线的这部分功能非常的实用，是我们每天切实的可以用到的工具。这一部分 sigma ai 的 编辑功能是针对于 专业版、组织版和企业版生效，免费的账号暂时是没有办法使用的，教育版账号其实也等于是专业版，所以教育版账号也是可以用的，有空的话快来试一试吧！关注我，我是自己查查，每天分享一点设计技巧。

随便给 ai 一 点提示词，直接帮我生成一整套音乐小界面，而且可以复制到费用码里边直接编辑。有同学说，老师，那我想要白色的，我再让他给我生成一套白色的，你瞅一瞅这小感觉，这不一下质量就起来了吗？而且这里边全都是可编辑的，看见没？都是原文件，你就编辑就完事了，在刚才那个基础上改改，你看咱同学做这小作业，你瞅一瞅这小质量，这没谁了，属于 相当给力。紧接着再根据那一套 app， 你 可以整一个吉祥物，画个小草图，直接给 ai 三 d 画完了，给你各种延展动作，把这些小动作再放在空间面里边，再做点视觉小画面，这一整套太帅了，你再延展点小徽章，你看咱同学这没有美术基础做的徽章太溜了，这是我们这个高分学员作业啊！瞅一瞅这小感觉， 放在界面里边也是老帅了，直接炫耀一下，你就会发现，一整套界面，这不就出来了吗？ ai 辅助的太多了，以前如果没有 ai 的 话，你做这玩意那肯定老费劲了，现在咔咔出。 你像这些用 ai 升图标，升徽章，包括升这些吉祥物，把这些东西再放在界面当中，咱们现在做 ui 界面啥的，你从这个布局再到风格设定，全是 ai 辅助，也属于嘎嘎精致，嘎嘎高级。对于 ai 加 ui 感兴趣，同学，左下角，你直接点击预约，嘎嘎好使，学就完事了。

天天跟开发在飞格玛里面对稿的应该不止我一个吧？前几天我摸索出一套绝杀连招，你看这个 ai 写的代码页面，直接往飞格玛里面一丢，它就变成可编辑的设计稿，更炸裂的是回程成代码，你看这还原度，我直接惊了，而且我还拿它直接读需求出交互稿， 连主健库都能一键帮我搞定。这几天扣的跟科森轮番兼青，我研究了好几天，这三招特别好用，一定要试试。先说好，这期没有恰饭分，个人经验，我自己玩了好几天，该踩的坑基本踩了一遍，操作步骤和提示词我都给你整理好了，求个小关小注，我直接发给你。 废话不多说，直接开始。先说 figma 和代码之间的双向同步，我专门挑了一个复杂一点的 app 页面来演示。其实设计搞转代码这类的功能， 之前有类似的插件，但说实话用过的朋友都知道，基本没法用，布局错乱，元素乱飘，跟原稿根本对不上。但是磕碜昨天更新了一个逆天功能， 直接可以读取这个码里面的设计稿生成代码。把同样的车库页面丢进去试了一下，你看这页面效果，布局颜色全都对的上，基本都能对的上，这还原九十高的我当时直接惊了，你有病！但是当我扒开这个代码页面一看，这底下居然全是图片截图！ 所以实际的情况是，它确实会比以前那些插件好那么的一丢丢，但不多。 虽然 figma 转代码这个确实是有一点取巧，但反过来也就是 code 转回 figma 这个方向导入的效果倒是相当的不错，直接说一声，界面就直接可以推送到 figma 的 画布上，变成可编辑的设计稿，图层全是可编辑自动布局，也有，连命名也挺规范的。单向的还原度确实是非常能打的， nice！ 虽然所谓的双向互动目前确实还是有点水分，但是这套代码一键生成设计稿的单项功能就已经足够我们搞很多事情了。比起以前我们纯属说设计稿，有了这些功能，你完全可以换一个较为打击的工作流程。 但这还没完，还有两招，压箱底的技能，你有没有接触过这种需求？文档看一眼头都大，还要去啃业务，拆页面化交互，累死累活搞个两三天，结果产品来一句再改改，我直接原地爆炸啊！ 现在呢？别管这个文档有多糙，直接丢给他，他会先理解你的需求，把功能和页面自己拆好，你看就几分钟， 全部页面一键给你生成出来。我们来检查一下需求，问页面能不能对得上。注意看这登录页，校车信息、排班、 五 g 报表，文档里的功能点全部都能跟你对得上，逻辑也没有跑偏哦，拉回这个码直接就能编辑的，你自己爱怎么改就怎么改。重点来了，同样的文档，换一个指令，直接能出一个可以交互的原型，甚至他也给你加了点小逗笑， 厉害，没灵感或者感兴趣的时候，先让他出个出版，真的是能救我狗命啊！还有，千万不要让产品知道这个套路， 哈哈哈，压轴这一招呢，是懒人必备的，之前从零搭建一套主件裤，少说也得死磕个两三天吧。颜色规范、字体层级、交互状态，一个个手调，眼睛都快废掉了。现在把这一张设计稿丢给他，告诉他我要哪些主件就行了。你看字体、颜色、 图标、按钮，不到五分钟全部给你做出来了，连交互状态的样子都给你做好。这圆角配色阴影跟圆稿的风格完全对得上，有些地方不满意也没有关系，还是一样直接让 ai 改就行了。 搞定之后我发回这个码，你也搞进去一整套出来，我就问你好不好用？我的天呐，这三招配合体验下来，我自己的感受是，以前那些手搓主键，一点点还原设计稿的体力活真的是可以省掉了， 咱们只负责想脏活累活就交给 ai 来，视频里面用到的所有提示词、操作文档，连怎么安装我都给你们写好了，相信我，真的很好用！觉得有用的话记得点个赞，我是专注 ai 体校的木马，下次再带你们体验实用又好玩的 ai 工具。

现在在前端编程里，基本上可以做到百分之一百使用 ai 去编程，但是还是有很多人不知道怎么更好的将一个 ui 图转成我们的前端代码。现在我来告诉大家怎么做，比如说我们拿到这样的一个 ui， 我 拿这个百度的来举例，我们拿到这个图片之后， 然后我们复制图片，然后需要将它转成一个 big 码生成的格式， big 码它是一个做 ui 的 一个软件，我们先我们知道这个格式行了，然后我们去豆包，然后我们把图把图片给他豆包，图片给他豆包， 而且我们把这个提示词复制过去，提示词的意思就是说需要将这个 ui 图转成一个 big 码的生成格式， 这个买的自行格式，而且需要保留他的一些细节。嗯，然后呢？我会告诉他图标的啊，图片的地址位置，为什么呢？因为这里面我们这个项目里面对应的这些图片，刚才我从百度里面拿下来的，就这些图片， 你告诉他越详细越好，但是我不弄那么详细了，然后把它给到他，然后加多一个搜索为半秒。 ok， 好，我们已经拿到了，我们可以看到它这里面它是有那个图标的啊，然后把这个图片复制出来，进到我们这个项目， 我们写随便写个提示词， 把 fake 码格式复制过去，放到放到它下面来，这里给大家敲一下， 如果它脆，它不它特别大的话，你可以把这个格式转成一个空格给丢掉，这样的话它它就没那么大， 直接这样把这前面给删掉，就这样就行了。我们来看一下效果。 好，现在已经生成好了，我们看一下效果，你看大概就是这个样子， 它是不是完全复现了？它也没有完全完全的复现，你不可能说完全一模一样的，但是它基本上很多地方都相似了。好，谢谢大家。

figma make 一 键生成 ui， 效率直接翻倍，三步搞定一整套 ui 界面，亲测好用！第一步，打开 figma， 点击右上角 make 图标，进入 ai 界面。第二步，上传参考图，粘贴你的设计框架或直接输入需求。 第三步，按下回车，等一小会就会生成一个带交互的 app 原型。 figma make 可以 点击这个按钮，将当前页面一键复制为可编辑的设计稿， 还能生成前端代码，设计开发无缝衔接。关注我，分享更多设计干货！

一觉醒来，谷歌又干掉了一个百亿美金的市场，搞了一个氛围设计产品 stage。 消息一出，飞格玛的股价硬生生下跌百分之八。更狠的是，谷歌这次还顺带立了一个新标准，叫 the 三点 m d。 就 像当年 ags 点 m d 颠覆代码邪作一样。现在要重新定义设计行业的底层规则，它能把自然语言直接变成高保真 ui 设计。 比如 ai 原生化部，这是一个能同时思考图片、代码和文本的无限战场。一个智能体管理器能让你同时开展多个设计任务并行作战。你甚至可以用语音直接驱动设计，实时获得修改意见和全新方案。 ai 还能预测你点击后的下一个界面。 我最喜欢的是这三点 m d， 每个设计自动生成，设计系统还能导入导出规则，保证一致性。这意味着，一个资深设计师花半天时间摸索调整对齐的设计风格和页面。现在你只需要用语言描述你的氛围感，在点击生成的瞬间，一个风格统一、原型可用的方案就已经摆在面前。

完全从零开始，如何无痛使用 cloud code to figma？ 一 边调整设计，一边看着前端生成代码呢？第五步，理解 cloud code， 它不像 gpt 或者豆包这种陪你聊天的 ai， cloud code 更像一个运行在 terminal 里的 ai 工程师，它 就在你的电脑里面帮你创建文件，甚至帮你生成完整的工具和应用。那么这位工程师要上班，我们最好给人家一个办公室吧。 这就是为什么提供一个编辑器，配合 cloud code 使用会更好。最简单就是使用 cursor。 第一步，使用 cursor 来安装 cloud code， 下载 cursor， 打开一个空的文件夹，直接在对话框里输入，帮我安装一个 cloud code， 它就开始帮你安装了。成功以后，国内的朋友还需要配置一个模型 a p i 进去看秋之的这期视频讲的很简单，跟着做就行了。完成之后我们打开 terminal new terminal， 在 这里输入 cloud， 再根据他的提示进行一些简单的设置， cloud code 就 正式启动了，就是这么的无脑和简单。第二步，连接 figma mcp。 我 们找到 cloud 官方文档，把 figma mcp 的 安装命令复制下来，在 cloud terminal 里粘贴上发送指令，然后他就会帮你安装了。第三步，安装 figma plug in， 直接输入这串指令 我会放在评论区，然后进行提交，安装完成之后输入斜杠 plug in， 发送之后，你会看到一个这样的界面， 按右键挪到 install 这一排的位置，你会看到第二行的 figma mcp。 还需要我们进行一个登录验证，那我们键盘按 ctrl 键，浏览器会自动打开，让你授权你的 figma 账号搞定了，就这样，号的员工就可以来你的 figma 帮你提取文件，帮你创建设计了。 我们来试试，让他设计一个 ios 风格的天气查询网页界面冒号，然后粘贴我的 figma 文件的链接， 他问你很多权限问题都同意后， cloud 会开始在本地生成代码，等一会会的时间，你就可以拥有一个真正运行的前端界面了。响应式也完全没有问题。点击这个发送到飞马，你就可以在你的飞马上进行编辑了。 第五步，然后呢？修改完设计怎么传回到扣子里呢？超级简单，比如我改了这些模块的颜色，选择这个设计，右键选 copy link to selection， 回到 call terminal， 输入 update changes， 冒号，粘贴刚刚的复制， 哇靠，就重新构建了对应的部分，就这么简单。这种双向同步的工作流对于设计来说真的非常强大。 ai 可以 承担大部分的生成和重复工作，而你可以专注更多在判断、优化和创意。所以你觉得这个产品更新对设计师来说算势利好吗？

hello， 大家好，今天给大家带来的是 cloud code to figma 的 视频教程，在使用之前我们需要安装好 cloud 教育版或付费版的 figma， 这两项都准备好后，我们就开始今天的视频教程吧。 首先启动 cloud， 我 这里用的是终端，在 ide 中使用 cloud 模型也是可以的， 等待 figma 安装成功。安装成功后继续安装 figma 插件， 因为我这里已经安装过了，所以显示的是已经安装。 安装完成后，重启 cloud， 输入 plujin 并切换到 install， 查看是否有 figma remote m c p 这里因为我还没有重启，所以没有看到， 这样我们的基础配置就完成了。接下来我们让 cloud 帮我们做一个网页，最近刷到了 crock 的 官网，觉得很好看，所以想尝试一下 cloud 能不能复刻出来， 很明显效果不太好，不过没关系，我们换一种风格，重新调整 经过修改后的界面，看起来至少能用了。 接下来我们打开 figma， 创建一个新的设计文件， 这里要注意一定要打开分享链接的编辑权限，不然 cloud 是 无法在 figma 中写入文件的。权限设置完成后，复制这个文件的。链接在 cloud 中输入，将当前网页发送到 figma 中，并粘贴刚刚复制的 figma 链接， 这样我们就在 figma 中得到了设计稿，此时我们可以对设计稿进行修改。 修改完成后，我们右键画板名称选择复制到链接， 在 cloud 中输入，按照链接更新页面样式加复制的 figma 画板链接 刷新页面。恭喜你成功完成了 cloud code to figma 的 最小闭环。

pencil 对 决 figma， 谁才是未来的 ui 设计工具？废话不多说，今天我们直接上硬核 pk。 首先我们打开 figma make， 告诉他需求，简单的描述下页面和风格，同时选择 g m i 三点一 pro 模型 发送出去，可以看到正在生成中，绘制过程稍微有一丢丢慢。好了，生成的效果出来了，看着比较简单，页面可以满足基本需求，而且直接自带交互，极其丝滑。但我想试试 cloud code 的 四点六模型效果，我再次生成一遍。 ok， 生成出来了 效果更好，推荐大家多尝试。这里再打开 python， 我 们可以选择官方内置的各类规范，不用担心没有规范而乱套了。这里我们选性价比更高的 g p t 五点四模型， 开启多线城，也就是多个 ai 同时进行。再将同样的需求给到 python， 我 们再点击开始生成，可以看到 python 正在批量生成中，注意看有六个 ai 打工人同时在帮你干活，可以看到每个 ai 工人都在分析和工作中，是不是好像在掌控着一群人。 并且生成的 ui 界面很专业，一步步的把每个板块生成出来了。设计出来的版式与功能很细致，但画面的效果不如斐格玛丰富， 这时我可以随意拖动，想改点小细节，手动微调，非常方便。这点就比较类似斐格玛的编辑功能。在右侧可以看到与斐格玛一样的编辑区，自由度很高，掌握感非常棒，这点盘搜完胜。相比之下，斐格玛没有官方的内置规范，如果想用一套规范还得自己去添 家，比较麻烦点，生成的 ui 想手动修改，得一个个复制，复制出去后想再次让 ai 编辑就比较费劲了。但飞格玛 mac 可以 单独让 ai 或手动修改某个点， 这个功能还是非常便捷的。但别急，开发交付才是重头戏。告诉潘素，帮我开发出来， ai 工人就能直接帮你开发。可以看到 ai 开发工人正在进行中，飞格玛更狠，生成出来及时预览交互效果， 一键发布出去就是前端 html 代码，这里我们预览一下，效果非常 ok， 带有一定的交互，基本一比一还原了。另外在设计图右键发送给 mate， 也能一键生成前端代码，一比一完美还原，设计开发一体化。综合来看，飞格玛目前依然抗打，而像素胜在直观，速度快，质量高，易上 手。我的建议是，完全不懂设计的小白，无脑充，像素快，小白专属专业设计师依然是飞格玛， 它的生态和 ai 能力还是很 ok 的， 但也强烈推荐试试 pencil。 最后需要 figma 和 pencil 的 使用步骤。评论区留言记得点赞、关注、收藏！我是大木，关注我，跟上 ai 步伐！

人类的产品团队真的很神奇，一边高喊设计驱动开发，一边让设计稿和代码像异地恋情侣，靠截图和脑补维持关系。设计师在 figma 里优雅拍板， 前端在 id 里疯狂揣摩，最后上线的页面谁都不完全满意，然后大家互相甩锅，文明社会的温柔撕扯。 直到 codex plus、 figma、 mcp server 这套组合出现，我才意识到这不是功能升级，这是一次生产关系的改造。我讲的直一点，它正在消灭涉及到开发这条漫长又低效的翻译链，而翻译链是效率杀手。 真正颠覆的是从代码回到画布。说实话，我真正兴奋的不是设计生成代码，而是反向这一步， generate 下划线 figma design， 它可以把真实运行的 u i 抓回。 figma 不是 截图，是可编辑的 frame。 这意味着什么？意味着代码不再是终点，代码只是一个版本状态， 设计师可以基于真实产品结构继续改，而不是靠脑补。你能想象这对团队合作意味着什么吗？以前设计交付实现验收返工，现在设计代码时时往返，这已经不是合作，这是融合。 原型和生产的界限会消失， proto time 不 再是草图，混乱的设计资产会成为组织的拖累，前端工程师的角色会进化。别焦虑，不会消失，但还原设计稿这件事会越来越不值钱。 如果你还把自己定位成像素守门员，那确实危险， ai 正在接管重复劳动。 真正的价值在于最佳想法，而不是第一个想法。官方那句 build on your best ideas not just your first。 其实很准。过去大家停在第一版，不是因为没创意，是因为改一次太贵。 现在想法设计代码回话再优化再生成，迭代成本极低，创新速度会被推高，创新从勇气问题变成成本问题，当成本被压缩，竞争维度就变了。 桥梁时代结束了，现在是传送门时代，你要么升级认知，要么被效率碾压。

在分享这个工具之前，先带你看一个特别解压的视频， ai 正在根据关键词生成界面，这就是今天要分享的工具 pencil。 配合 cloud code 和 figma， 它做了两件以前很难想象的事情。 第一，哪怕你不是设计师，甚至是编程小白，也能借助 ai 快 速做出规范、好看而且很像专业团队产出的设计页面。 第二，他还能进一步把设计稿直接转化成前端代码。以前最麻烦的地方是，设计师在飞格玛里把页面画好了，开发还得再手动还原一遍，中间不仅沟通成本高，而且经常会出现一个问题，设计稿很好看，落地出来却不是那个味道。但这次 pencil 更新之后，事情开始不一样了。 它新增了很多关键的能力，比如动态系统组建，可以附用样式、 ai 集成，还有桌面端的支持。更重要的是，它可以把 figma 里面的设计直接复制进 pencil 的 画布里，尽量保留原本的布局和样式。 接下来， ai 就 可以基于这些设计内容，继续帮你生成前端组建。你还可以结合不同的设计系统，快速的切换组建的风格，让整个页面更统一、更规范。再往后，通过 mcp 连接 cloud code 系统，就能够进一步分析当前画布，并生成实际可用的前端代码。 所以这套流程真正厉害的地方，不只是在于 ai 帮你写代码，而是它正在把设计跟开发之间那段最耗时间、最容易出错的流程直接缩短。它不是单纯的让你省点事， 而是在重新定义普通人做产品、做页面、做前端的方式。关注二号学长，不要让 ai 成为淘汰你的借口，让 ai 替你弯道超车。

今天我们来学习这个 talk to figma mcp， 它的作用是，呃，直接让一句话变成我们的设计图，在 figma 中运行， 来看一下它的地址， gethelp 地址打开之后是一些教程，不会的可以跟着我来学。下载点 vip 文件到本地，然后自己能找得到的文件夹就可以， 然后打开 coser， 打开我们刚刚下载好的那个文件， 然后找到 readme 的 这个文件，找到这行代码， 复制好，新建一个 terminal， 然后粘贴刚刚的那行代码，回车 就可以安装好了，然后找到第二段，再粘过来回车，然后最后我们就启动， 启动完成之后可以看到我们的端口号，然后打开这个码，导入我们刚刚下载那个地址里面的插件，找到 s r c， 找到 plug in， 找到点接收导入进来，然后你会发现我们的插件就安装完成了， 然后他单口号跟我们的那个端口号是保持一致的，然后复制他的 m c p， 然后找到 console 中的 setting， 找到他的 m c p， 把刚刚的代码复制过来，然后再保存， 保存之后看看它灯是不是亮的，如果是绿的就安装好了。然后我们新建一个 agent， 输入一段指令，进行通道连接， 回车之后它会告诉你是否已经连接上了，然后我们在输入框里面再输入我们的需求，比如说我想让他帮我画一个圆， 回车之后，然后看到 figma 里面，他们会自动给我进行一些操作，看圆就画好了。