正在加载视频...

视频加载失败

返回首页

5 分钟 手把手教你Figma MCP+Claude code 还原设计稿 上次我在小红书发了个Ask me Anything 的帖子，发现评论区有好几个朋友，问我关于设计稿 转代码，AI 还原设计， Figma MCP 还原设计稿的教程与方法，受限于评论区篇幅，没能详细解释，这次我用一个视频把详细的教程端上来啦！不要收藏吃灰！

LgyLight's profile picture

三秋十李 Sergio

4,133 subscribers

18,940 次观看 • 9 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

太强了！MCP 开始起飞了🛫 有推上老哥开源了一个基于 Cursor 操作 Figma 的 MCP 🔥 直接 Cursor 写代码转成 figma 设计稿.... 还开源了 🤯 地址见评论👇
0:40

太强了！MCP 开始起飞了🛫 有推上老哥开源了一个基于 Cursor 操作 Figma 的 MCP 🔥 直接 Cursor 写代码转成 figma 设计稿.... 还开源了 🤯 地址见评论👇

Tom Huang

135,958 次观看 • 1 年前

Figma 和 Claude Code 现在终于能双向交互了！ Figma MCP 的最新版本。可以把你用 Claude Code 生成的网页直接转成 Figma 的格式 可以把任意网页的内容转换成 Figma 设计稿，然后发送到剪贴板，直接粘贴到 Figma 编辑器中就可以。 我在 vibe coding 的时候，经常需要一次性提交多个交互相关的改动，这时候很难让 Claude Code 理解。 但由于我是 vibe coding，所以没有设计稿，这就很难办。 现在我们可以每次让 Claude Code 写完代码以后，备份一份设计稿。 我们就可以在设计稿上进行修改，然后再告诉他，这样表达的意图会清晰很多。
0:32

Figma 和 Claude Code 现在终于能双向交互了！ Figma MCP 的最新版本。可以把你用 Claude Code 生成的网页直接转成 Figma 的格式 可以把任意网页的内容转换成 Figma 设计稿，然后发送到剪贴板，直接粘贴到 Figma 编辑器中就可以。 我在 vibe coding 的时候，经常需要一次性提交多个交互相关的改动，这时候很难让 Claude Code 理解。 但由于我是 vibe coding，所以没有设计稿，这就很难办。 现在我们可以每次让 Claude Code 写完代码以后，备份一份设计稿。 我们就可以在设计稿上进行修改，然后再告诉他，这样表达的意图会清晰很多。

歸藏(guizang.ai)

53,257 次观看 • 5 个月前

直接丢设计稿给 AI 去生成网页总是没办法精准还原，氮素！🧐 EdgeOne Pages 出了个 Figma 的一键部署插件，不仅方便展示效果，将部署后的链接丢给 AI 进行二次开发，分分钟完美还原设计稿！🥳 链接见评论👇
0:24

直接丢设计稿给 AI 去生成网页总是没办法精准还原，氮素！🧐 EdgeOne Pages 出了个 Figma 的一键部署插件，不仅方便展示效果，将部署后的链接丢给 AI 进行二次开发，分分钟完美还原设计稿！🥳 链接见评论👇

MapleShaw

24,503 次观看 • 1 年前

我天，刚刚不小心又测出超牛的流程，不用安装任何软件，只需要输入一段脚本，就能将任意网页转成可编辑的设计稿，并且设计稿的还原度超级高。这谁还用 html to figma 啊
1:24

我天，刚刚不小心又测出超牛的流程，不用安装任何软件，只需要输入一段脚本，就能将任意网页转成可编辑的设计稿，并且设计稿的还原度超级高。这谁还用 html to figma 啊

Paidax

153,738 次观看 • 5 个月前

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代
0:29

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代

歸藏(guizang.ai)

157,676 次观看 • 10 个月前

今天在Producthunt发现一个AI模型Kombai，可以理解Figma的界面设计并生成对应的前端代码，下面是他们官网的演示视频。 从演示来看生成的代码还是不错的，它的优势在于他不要求设计稿的格式、层级和是否使用组件，无论你怎么嵌套和画出的界面它都能理解。 这比之前通过传统工程化思路从设计稿生成代码要强多了。之前的一些工具要不是处理不了复杂样式，要不就是对设计师的设计稿格式有非常严格的要求。 同时这个模型也支持通过自然语言生成前端界面的代码。 官网链接：
2:32

今天在Producthunt发现一个AI模型Kombai，可以理解Figma的界面设计并生成对应的前端代码，下面是他们官网的演示视频。 从演示来看生成的代码还是不错的，它的优势在于他不要求设计稿的格式、层级和是否使用组件，无论你怎么嵌套和画出的界面它都能理解。 这比之前通过传统工程化思路从设计稿生成代码要强多了。之前的一些工具要不是处理不了复杂样式，要不就是对设计师的设计稿格式有非常严格的要求。 同时这个模型也支持通过自然语言生成前端界面的代码。 官网链接：

歸藏(guizang.ai)

78,671 次观看 • 3 年前

你是不是遇到AI生成的网页，出来全是千篇一律的紫色渐变？满满的AI感。本期分享我在使用的工作流，不仅能 1:1 还原设计稿，还能生成炫酷的网页动效。使用到的工具是 Figma MCP、Claude Code、GLM4.6。 不管你是开发，还是想做个人网页的设计师，学会这套工作流，也能打造出独一无二的网页～
2:49

你是不是遇到AI生成的网页，出来全是千篇一律的紫色渐变？满满的AI感。本期分享我在使用的工作流，不仅能 1:1 还原设计稿，还能生成炫酷的网页动效。使用到的工具是 Figma MCP、Claude Code、GLM4.6。 不管你是开发，还是想做个人网页的设计师，学会这套工作流，也能打造出独一无二的网页～

Paidax

48,625 次观看 • 8 个月前

UX 设计基础：学习指南 UX 设计入门教程汇总，来自全世界最著名的 UX 设计公司 NNgroup，内容包括： - UX 设计简介 - UX 设计哲学 - UX 设计规划和研究 - 用户界面（UI）设计 - 职业发展 英文的视频和图文教程（大家交口称赞的那些翻译插件终于有用了）。NNgroup 的工作比一般设计公司更注重理论、非常重视用户研究，所以他们的入门课程也偏原理、基础概念 适合从基础开始认真学 UX 设计的人，不适合上速成培训班很神奇地变成 UX 设计师的人 #设计入门 来个视频感受一下，这是 UX 设计入门的入门、被全世界人民问了几百万遍的问题：UX 设计和 UI 设计有什么差异？ 1/
3:15

UX 设计基础：学习指南 UX 设计入门教程汇总，来自全世界最著名的 UX 设计公司 NNgroup，内容包括： - UX 设计简介 - UX 设计哲学 - UX 设计规划和研究 - 用户界面（UI）设计 - 职业发展 英文的视频和图文教程（大家交口称赞的那些翻译插件终于有用了）。NNgroup 的工作比一般设计公司更注重理论、非常重视用户研究，所以他们的入门课程也偏原理、基础概念 适合从基础开始认真学 UX 设计的人，不适合上速成培训班很神奇地变成 UX 设计师的人 #设计入门 来个视频感受一下，这是 UX 设计入门的入门、被全世界人民问了几百万遍的问题：UX 设计和 UI 设计有什么差异？ 1/

倪爽

109,828 次观看 • 3 年前

这就是来自 MCP 的魅力，直接在 Cursor 跟 AI 对话，就能在 Figma 给你生成设计稿😍 不管是设计师还是程序员，都能大大提高效率了😏 注意：MCP Server 安装后如果没看到 tools，可以重启下 Cursor。 项目是开源的，链接见评论👇
1:28

这就是来自 MCP 的魅力，直接在 Cursor 跟 AI 对话，就能在 Figma 给你生成设计稿😍 不管是设计师还是程序员，都能大大提高效率了😏 注意：MCP Server 安装后如果没看到 tools，可以重启下 Cursor。 项目是开源的，链接见评论👇

MapleShaw

521,499 次观看 • 1 年前

🚨Stitch 这次升级不得了，我觉得重点不是多了几个功能，而是 Google 正在重写 AI 设计工具的定义。 1/ Google 昨晚更新了 Stitch，官方给它的新定位很直接： AI-native software design canvas。 2/ 翻译成人话就是： 它不想只做一个 “你写一句 prompt，我给你几张 UI 图” 的工具了。 3/ 这次更新，核心就 5 个方向： 无限画布 更聪明的设计代理 语音交互 即时原型 设计系统 + DESIGN.md 4/ 最值得看的第一点，是 AI 原生画布。 现在的 Stitch 不只是吃 prompt。 还可以把 图片、文本、代码 一起作为上下文。 这说明它开始更像“设计工作台”，而不是一次性生成器。 5/ 第二点，是 agent 变强了。 Google 这次明确说，新 design agent 能理解整个项目演进过程，而且还有 Agent manager，支持你并行探索多个设计方向。 6/ 第三点，是 语音进入设计主流程。 你可以直接对着画布说话 让 Stitch 一边听一边改 还能给你实时设计反馈 7/ 第四点，是 即时原型。 现在 Stitch 可以把静态设计快速变成交互原型，点一下 Play 就能看 flow，甚至还能自动补出逻辑上的下一屏。 8/ 第五点，是很多人会低估的 DESIGN.md。 Google 把设计规则做成了一个 agent-friendly markdown，支持导入、导出、复用，还支持从 URL 提取设计系统。 9/ 所以这次 Stitch 真正从“帮你出图”，走向“参与整个设计流程”。 10/ 一句话总结： 2025 年的 Stitch，更像 UI 生成器。 2026 年这次升级之后，它开始更像 AI 设计工作台。
1:29

🚨Stitch 这次升级不得了，我觉得重点不是多了几个功能，而是 Google 正在重写 AI 设计工具的定义。 1/ Google 昨晚更新了 Stitch，官方给它的新定位很直接： AI-native software design canvas。 2/ 翻译成人话就是： 它不想只做一个 “你写一句 prompt，我给你几张 UI 图” 的工具了。 3/ 这次更新，核心就 5 个方向： 无限画布 更聪明的设计代理 语音交互 即时原型 设计系统 + DESIGN.md 4/ 最值得看的第一点，是 AI 原生画布。 现在的 Stitch 不只是吃 prompt。 还可以把 图片、文本、代码 一起作为上下文。 这说明它开始更像“设计工作台”，而不是一次性生成器。 5/ 第二点，是 agent 变强了。 Google 这次明确说，新 design agent 能理解整个项目演进过程，而且还有 Agent manager，支持你并行探索多个设计方向。 6/ 第三点，是 语音进入设计主流程。 你可以直接对着画布说话 让 Stitch 一边听一边改 还能给你实时设计反馈 7/ 第四点，是 即时原型。 现在 Stitch 可以把静态设计快速变成交互原型，点一下 Play 就能看 flow，甚至还能自动补出逻辑上的下一屏。 8/ 第五点，是很多人会低估的 DESIGN.md。 Google 把设计规则做成了一个 agent-friendly markdown，支持导入、导出、复用，还支持从 URL 提取设计系统。 9/ 所以这次 Stitch 真正从“帮你出图”，走向“参与整个设计流程”。 10/ 一句话总结： 2025 年的 Stitch，更像 UI 生成器。 2026 年这次升级之后，它开始更像 AI 设计工作台。

比特币橙子Trader

16,604 次观看 • 4 个月前

昨天在跑项目的时候，发现 Codex 调用的 figma mcp 一直在调用一个 js 文件，可以将任意网页转为 Figma 设计稿的，为了不浪费 token， 我把它封装成一个插件，点击即可快速创建figma 设计稿，没想到有这么多人关注到，收到很多反馈，我刚刚又更新了一个版本，主要处理个别网页丢失的问题，并且修复了一些断点问题。有需要的朋友可以更新到最新版❤️ #搞的就是艺术 #vibecoding #vibecod
1:43

昨天在跑项目的时候，发现 Codex 调用的 figma mcp 一直在调用一个 js 文件，可以将任意网页转为 Figma 设计稿的，为了不浪费 token， 我把它封装成一个插件，点击即可快速创建figma 设计稿，没想到有这么多人关注到，收到很多反馈，我刚刚又更新了一个版本，主要处理个别网页丢失的问题，并且修复了一些断点问题。有需要的朋友可以更新到最新版❤️ #搞的就是艺术 #vibecoding #vibecod

Paidax

103,553 次观看 • 5 个月前

“哪个大聪明给学校设计这个校徽，演都不演了。但凡受过九年制义务教育的，都知道这个校徽设计有问题。” 我一脸懵逼，直到打开评论区才知道，哦，是日本的本……
0:21

“哪个大聪明给学校设计这个校徽，演都不演了。但凡受过九年制义务教育的，都知道这个校徽设计有问题。” 我一脸懵逼，直到打开评论区才知道，哦，是日本的本……

iGeekbb

95,451 次观看 • 3 个月前

Lovart是我第一次感受到AI真的在改变设计行业： Lovart 是全球首个AI设计智能体，它为设计师专门优化了UX和产品整合，显著提高效率和精确度。而这两点对设计师来说太重要了。 以下我会分享几个在10-30分钟内使用Lovart完成的设计工作。 1. 先看以下官方介绍视频：
3:56

Lovart是我第一次感受到AI真的在改变设计行业： Lovart 是全球首个AI设计智能体，它为设计师专门优化了UX和产品整合，显著提高效率和精确度。而这两点对设计师来说太重要了。 以下我会分享几个在10-30分钟内使用Lovart完成的设计工作。 1. 先看以下官方介绍视频：

汗青 HQ

49,174 次观看 • 1 年前

兄弟们 发现一个牛P的AI设计网站 设计的界面非常精美、炸裂，完全可以直接使用。 最重要的它大幅的简化了对设计提示词的要求 你只要简单描述你的设计需求即可，它会先给你出一套非常详细的设计方案，让你选择，再开始设计 最牛P的是它还能根据界面设计上下文逻辑 为你生成剩余的二级三级页面... 而且还支持对页面各种元素 、文字、图像等进行精准编辑
2:45

兄弟们 发现一个牛P的AI设计网站 设计的界面非常精美、炸裂，完全可以直接使用。 最重要的它大幅的简化了对设计提示词的要求 你只要简单描述你的设计需求即可，它会先给你出一套非常详细的设计方案，让你选择，再开始设计 最牛P的是它还能根据界面设计上下文逻辑 为你生成剩余的二级三级页面... 而且还支持对页面各种元素 、文字、图像等进行精准编辑

小互

57,767 次观看 • 1 年前

Claude + Figma 这个组合彻底颠覆前端！ 早上按到 Figma 和 Claude 打通这个事情，第一反应是打开 OpenCode 配置好 Figma MCP，结果效果很不好，以为就那样...... 结果刚刚试了下 claude code，安装 plugin 之后，结果太牛逼了，一个非常复杂的 Figma 设计稿，一次出来的结果就基本 95% 以上OK了，有问题的都是些小细节，已经可以取代我前端那个员工了
0:30

Claude + Figma 这个组合彻底颠覆前端！ 早上按到 Figma 和 Claude 打通这个事情，第一反应是打开 OpenCode 配置好 Figma MCP，结果效果很不好，以为就那样...... 结果刚刚试了下 claude code，安装 plugin 之后，结果太牛逼了，一个非常复杂的 Figma 设计稿，一次出来的结果就基本 95% 以上OK了，有问题的都是些小细节，已经可以取代我前端那个员工了

nash_su - e/acc

42,959 次观看 • 5 个月前

这个交互式的麻将教程做的太棒了： 是教老外学麻将的，设计配色舒服，教程安排特别合理，几个大块就说明了核心玩法，还有简单的交互性，我也又学习了一下，是我最近看到非常喜欢的网页设计。 之后我用它来测试一下 5.5 编码能力，看看能不能复刻一个另外的类似教程。
0:20

这个交互式的麻将教程做的太棒了： 是教老外学麻将的，设计配色舒服，教程安排特别合理，几个大块就说明了核心玩法，还有简单的交互性，我也又学习了一下，是我最近看到非常喜欢的网页设计。 之后我用它来测试一下 5.5 编码能力，看看能不能复刻一个另外的类似教程。

Viking

83,076 次观看 • 3 个月前

我做的第一个 macOS App 发布啦！没学过 Swift，全程用 Cursor 开发，很 vibe 的一次体验~ 从代码到设计到 Compressio 这个名字都来自 AI~ 软件本身源于我自己多预设灵活切换的压图需求，欢迎体验~
0:24

我做的第一个 macOS App 发布啦！没学过 Swift，全程用 Cursor 开发，很 vibe 的一次体验~ 从代码到设计到 Compressio 这个名字都来自 AI~ 软件本身源于我自己多预设灵活切换的压图需求，欢迎体验~

JJ Ying

61,143 次观看 • 1 年前

ChatWise 加入 MCP 以后太爽了！ 一键配置之后直接从 FIgma 设计稿还原了一个网页出来 内容和样式位置都是对的，直接微调就能用 这不比 Figma 自己的开发者模式强一万倍，那破玩意还卖的贵
0:41

ChatWise 加入 MCP 以后太爽了！ 一键配置之后直接从 FIgma 设计稿还原了一个网页出来 内容和样式位置都是对的，直接微调就能用 这不比 Figma 自己的开发者模式强一万倍，那破玩意还卖的贵

歸藏(guizang.ai)

92,942 次观看 • 1 年前

这次轮到设计师要失业了！Uizard 几分钟就能输出优质的设计😍 我一个设计小白，花 10 秒时间描述需求，立刻生成了一套（注意是一套！）页面设计。还有编辑功能，生成后不满意可随时调整。 过去需要花费数千元外包的工作，现在自己动动手就能完成，这是什么概念？ 链接见评论👇
2:13

这次轮到设计师要失业了！Uizard 几分钟就能输出优质的设计😍 我一个设计小白，花 10 秒时间描述需求，立刻生成了一套（注意是一套！）页面设计。还有编辑功能，生成后不满意可随时调整。 过去需要花费数千元外包的工作，现在自己动动手就能完成，这是什么概念？ 链接见评论👇

MapleShaw

120,081 次观看 • 1 年前