Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

三秋十李 Sergio

5,379 subscribers

23,706 views • 11 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

24 Comments

shing11 months ago

感谢分享！

王乔治11 months ago

好也可以试试我的开源工具直接实时的 html css 渲染结果预览

三秋十李 Sergio11 months ago

这个好，其实直接给ai这样的代码，还原程度会更好，codebuddy就是这样的逻辑

饼干哥哥AGI（2.0）11 months ago

深度学习

Freedom Rss11 months ago

你视频也是个钩子，中间细节都忽略了

AI磊叔11 months ago

电脑快没电了喂～～～一边看大佬的视频，一边担心放到一半提示充电😆

三秋十李 Sergio11 months ago

哈哈哈，作为视频钩子了

Jackywine11 months ago

为什么你们都这么帅还这么有实力😍

三秋十李 Sergio11 months ago

还在努力达到 Jacky 哥的实力💪

Yanhua11 months ago

这真的需要收藏，但是前提是需要会figma哈哈

三秋十李 Sergio11 months ago

哈哈哈哈，也可以设计师设计开发拿稿就行

Krui11 months ago

我昨天用cursor 版本的figma mcp做设计，效果不理想，是不能做且设计只能根据设计稿生成页面么？

三秋十李 Sergio11 months ago

后半句我不是很明白，读的不太通顺是啥意思？

BTC八戒11 months ago

真是太棒了！期待学习更多技巧，感谢分享！

三秋十李 Sergio11 months ago

有帮助就好！

zzzzxians11 months ago

干货！最近正发愁怎么高度还原

三秋十李 Sergio11 months ago

哈哈哈，有帮助就好

我真的没有拼多多11 months ago

收藏收藏

三秋十李 Sergio11 months ago

感谢感谢

Ding11 months ago

是不是教育版用不了 Figma MCP 啊😅

三秋十李 Sergio11 months ago

哈哈可以用呀，我也是教育版🤫

Ding11 months ago

🤣

Vyrneth11 months ago

Figma自带的AI用着也挺不错的

三秋十李 Sergio11 months ago

@ChinaSquint 确实 make挺好用的

Related Videos

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

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

Tom Huang

136,121 views • 1 year ago

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

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

歸藏(guizang.ai)

55,090 views • 7 months ago

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

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

MapleShaw

24,538 views • 1 year ago

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

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

Paidax

154,231 views • 7 months ago

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

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

歸藏(guizang.ai)

157,848 views • 1 year ago

用了这么久 Figma 才发现我不是不会设计，而是少看了这份最新官方入门级别说明书〒▽〒手把手教你做个“作品集网站” >都是几分钟的小短课 > 项目式教学 > 自动布局原来还能这样玩 > 专业术语不再头疼 @Figma 官方救命入门手册：

用了这么久 Figma 才发现我不是不会设计，而是少看了这份最新官方入门级别说明书〒▽〒手把手教你做个“作品集网站” >都是几分钟的小短课 > 项目式教学 > 自动布局原来还能这样玩 > 专业术语不再头疼 @Figma 官方救命入门手册：

Jackywine

13,426 views • 1 year ago

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

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

Paidax

48,894 views • 10 months ago

Creatie AI：AI驱动的产品设计工具几分钟之内设计出一个网站或程序它集思维导图、设计、协作、原型制作、代码交接于一身。可自动分析你的现有设计文件，识别并整理出可复用的设计元素（如字体、颜色、阴影等），自动创建一个统一的样式库。还可以快速将设计转化为高保真的可交互原型并生成代码网站：

Creatie AI：AI驱动的产品设计工具几分钟之内设计出一个网站或程序它集思维导图、设计、协作、原型制作、代码交接于一身。可自动分析你的现有设计文件，识别并整理出可复用的设计元素（如字体、颜色、阴影等），自动创建一个统一的样式库。还可以快速将设计转化为高保真的可交互原型并生成代码网站：

小互

26,359 views • 2 years ago

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

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

倪爽

110,010 views • 3 years ago

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

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

MapleShaw

521,499 views • 1 year ago

🚨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 设计工作台。

🚨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 views • 6 months ago

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

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

Paidax

104,339 views • 7 months ago

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

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

iGeekbb

95,457 views • 5 months ago

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

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

小互

57,767 views • 1 year ago

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

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

JJ Ying

61,206 views • 1 year ago

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

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

歸藏(guizang.ai)

92,942 views • 1 year ago

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

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

nash_su - e/acc

42,959 views • 7 months ago