Loading video...

Video Failed to Load

Go Home

打打字，就生成 figma UI 设计稿，还是基于你的需求文档（PRD）和设计系统（Design system） 🔗

cellier_'s profile picture

Cellier

32,361 subscribers

95,594 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

9 Comments

ByeWind's profile picture
ByeWind3 years ago

UI的作用在于让人可对机器方便地输入指令, 机器AI创建UI让我觉得是AI输出指令让人去理解, 然后人再对AI输出指令. 那为什么不省略这一步骤让人直接对机器输出指令呢? 也就是既然机器能理解人的对话指令, 那么何必需要UI呢?

pp's profile picture
pp3 years ago

@readwise save thread

Thinkify AI's profile picture
Thinkify AI3 years ago

@SaveToNotion #Thread #Design #UI

汪汪喵's profile picture
汪汪喵3 years ago

@SaveToNotion #Tweets

Ray's profile picture
Ray3 years ago

@SaveToNotion #Thread #Design #UI

王鹏飞's profile picture
王鹏飞3 years ago

好像还用不了

Sasha Welk 互粉秒回's profile picture
Sasha Welk 互粉秒回3 years ago

赞赞赞

Qianqin's profile picture
Qianqin3 years ago

@SaveToNotion #thread

Chairin's profile picture
Chairin3 years ago

@SaveToNotion #Thread

Related Videos

溜儿，把从真实网站提取的设计规范做成了现成的 DESIGN.md集合，直接丢一个DESIGN.md+描述，AI即能生成对应精美UI 就是用纯Markdown描述设计系统，AI读取它来生成对应的UI界面，直接放到根目录里，AI即能理解并生成 这个库叫awesome-design-md，目前收录了50+知名网站设计，涵盖AI&LLM、开发工具、后台与数据库、金融、电商、媒体、设计等等领域 每个文件包含完整设计系统规范，颜色、字体、组件、布局等，另外还附带preview.html和preview-dark.html预览文件 相当于一个设计系统prompt库，AI一键生成风格一致的界面，对vibe coding来说比较实用，不过1:1复刻某品牌完整原版需谨慎 #AI设计 #awesomedesignmd #vibecoding
0:35

溜儿，把从真实网站提取的设计规范做成了现成的 DESIGN.md集合，直接丢一个DESIGN.md+描述，AI即能生成对应精美UI 就是用纯Markdown描述设计系统，AI读取它来生成对应的UI界面，直接放到根目录里，AI即能理解并生成 这个库叫awesome-design-md，目前收录了50+知名网站设计，涵盖AI&LLM、开发工具、后台与数据库、金融、电商、媒体、设计等等领域 每个文件包含完整设计系统规范，颜色、字体、组件、布局等，另外还附带preview.html和preview-dark.html预览文件 相当于一个设计系统prompt库，AI一键生成风格一致的界面，对vibe coding来说比较实用，不过1:1复刻某品牌完整原版需谨慎 #AI设计 #awesomedesignmd #vibecoding

AIGCLINK

11,646 views • 5 months ago

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

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

小互

57,767 views • 1 year ago

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

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

歸藏(guizang.ai)

157,848 views • 1 year ago

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/

倪爽

110,010 views • 3 years ago

现在我们 vibe coding 做产品，基本都是交给 AI 一把梭。 功能写得飞快，但设计这块，像UI、颜色、字体这些，基本都是AI 给啥就是啥，能用就行 就算想改，也不知道该怎么改，纯靠主观感觉 后来我才发现不是不在乎设计，而是根本不知道一个「好的设计」应该是什么样 这个时候，一个成熟、完整的设计标准规范就显得很重要了 而这个东西，叫「设计系统」。 设计系统本质上就是一整套涵盖颜色、排版、间距、icon、组件等的标准规范，在做产品时，按照这个规范来实现就好了 但我们这种非设计师出身的，要想设计一套靠谱的设计系统，那真是太难了 今天我来分享一个网站，收录了各家大厂的设计系统，像Apple、Adobe、Google、Ant Design。颜色系统、icon、排版、字体等，整理得非常完整，都能在里面找到
0:37

现在我们 vibe coding 做产品，基本都是交给 AI 一把梭。 功能写得飞快，但设计这块，像UI、颜色、字体这些，基本都是AI 给啥就是啥，能用就行 就算想改，也不知道该怎么改，纯靠主观感觉 后来我才发现不是不在乎设计，而是根本不知道一个「好的设计」应该是什么样 这个时候，一个成熟、完整的设计标准规范就显得很重要了 而这个东西，叫「设计系统」。 设计系统本质上就是一整套涵盖颜色、排版、间距、icon、组件等的标准规范，在做产品时，按照这个规范来实现就好了 但我们这种非设计师出身的，要想设计一套靠谱的设计系统，那真是太难了 今天我来分享一个网站，收录了各家大厂的设计系统，像Apple、Adobe、Google、Ant Design。颜色系统、icon、排版、字体等，整理得非常完整，都能在里面找到

Corey Chiu

38,008 views • 8 months ago

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

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

三秋十李 Sergio

23,706 views • 11 months ago

这些UI工具能帮你的产品，彻底摆脱AI味儿，都是我经常用的网站，推荐推荐~ 一、热门GitHub设计推荐 1、awesome-design-md，热门品牌设计系统的 DESIGN.md 文件 2、taste-skill，去除AI味道，专业设计规范 3、花叔 Design，HTML 高保真原型、动效 Demo、设计变体探索 4、frontend-design，前端 UI/UX 设计，避免 generic AI 界面 5、ai-website-cloner-template，克隆任意网站给自己用 二、炫酷前端网站推荐 1、 - 展示动态设计 2、 - 浏览器中的 3D 设备模型 3、 - 将照片转为回顾视频 4、 -图像与视频的 lo-fi 效果 5、 -基于曲线的渐变创建器 6、 -无限独特渐变 7、 -抖动、ASCII 和半色调效果 8、 -每小时在 𝕏 上发现创意UP 9、 - 每日精选设计方案 三、UI设计思路网站 1、figma make，多种UI模板参考 2、 3、 4、 UI参考 请大家继续评论区补充你私藏的好的UI网站~
0:49

这些UI工具能帮你的产品，彻底摆脱AI味儿，都是我经常用的网站，推荐推荐~ 一、热门GitHub设计推荐 1、awesome-design-md，热门品牌设计系统的 DESIGN.md 文件 2、taste-skill，去除AI味道，专业设计规范 3、花叔 Design，HTML 高保真原型、动效 Demo、设计变体探索 4、frontend-design，前端 UI/UX 设计，避免 generic AI 界面 5、ai-website-cloner-template，克隆任意网站给自己用 二、炫酷前端网站推荐 1、 - 展示动态设计 2、 - 浏览器中的 3D 设备模型 3、 - 将照片转为回顾视频 4、 -图像与视频的 lo-fi 效果 5、 -基于曲线的渐变创建器 6、 -无限独特渐变 7、 -抖动、ASCII 和半色调效果 8、 -每小时在 𝕏 上发现创意UP 9、 - 每日精选设计方案 三、UI设计思路网站 1、figma make，多种UI模板参考 2、 3、 4、 UI参考 请大家继续评论区补充你私藏的好的UI网站~

产品经理老王霸

14,315 views • 3 months ago

我的 UI 再也不会一股AI味了！ 本周 GitHub 最火的设计师项目： awesome-design-md，一周拿下 23k ⭐ Stars，迅速成为设计工具类开源爆款。 亮点一览： - 50+ 顶级产品设计规范 包括 Stripe、Notion、Linear、Figma、Apple 等，每个用 DESIGN.md 文件整理， 覆盖：颜色系统 字体与排版 间距、网格与布局 组件状态与 UI 规范 响应式断点 - 轻量、易用 不依赖 Figma 或复杂工具，普通 Markdown 就能使用 - 快速复用风格 一键套用顶级产品的视觉规则，保证 UI 一致性 - 提升团队效率 将设计语言结构化，减少设计与开发对齐成本，节省从零做设计系统的时间 对团队或独立开发者来说，这可能就是未来设计协作的参考模板。
0:31

我的 UI 再也不会一股AI味了！ 本周 GitHub 最火的设计师项目： awesome-design-md，一周拿下 23k ⭐ Stars，迅速成为设计工具类开源爆款。 亮点一览： - 50+ 顶级产品设计规范 包括 Stripe、Notion、Linear、Figma、Apple 等，每个用 DESIGN.md 文件整理， 覆盖：颜色系统 字体与排版 间距、网格与布局 组件状态与 UI 规范 响应式断点 - 轻量、易用 不依赖 Figma 或复杂工具，普通 Markdown 就能使用 - 快速复用风格 一键套用顶级产品的视觉规则，保证 UI 一致性 - 提升团队效率 将设计语言结构化，减少设计与开发对齐成本，节省从零做设计系统的时间 对团队或独立开发者来说，这可能就是未来设计协作的参考模板。

开发者Hailey

105,624 views • 6 months ago

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

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

小互

26,359 views • 2 years ago

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)

55,090 views • 7 months ago

全网催爆的设计工作流来了！从单个 IP 出发，延展出整套品牌视觉 + APP 全界面设计！先用 Image2 生成高品质 UI 界面、APP 页面、运营活动页，再由 Codex 精准复刻视觉稿，最后用插件生成可直接落地的 Figma 设计稿
3:29

全网催爆的设计工作流来了！从单个 IP 出发，延展出整套品牌视觉 + APP 全界面设计！先用 Image2 生成高品质 UI 界面、APP 页面、运营活动页，再由 Codex 精准复刻视觉稿，最后用插件生成可直接落地的 Figma 设计稿

Paidax

315,482 views • 5 months ago

我现在尝试的方案是： 1. 先用 出一个大概的风格，可以扩展不同的设计风格和布局，它可以把当前设计打包成一整套提示词，导出给其他 agents 使用。 2. 在其他 agents 比如我用 Replit ⠕ 还原，基本粘贴它的提示词都能完美还原，然后让 Replit 再基于这个设计完成其他页面和功能。(Replit agent 4.0 支持 canvas 也可以生成不同风格和布局的设计) 3. Replit 绑定 Github 后代码是实时同步到你的 repo 的，基本满意后 fork 到本地，让 Claude Code 重构。
0:26

我现在尝试的方案是： 1. 先用 出一个大概的风格，可以扩展不同的设计风格和布局，它可以把当前设计打包成一整套提示词，导出给其他 agents 使用。 2. 在其他 agents 比如我用 Replit ⠕ 还原，基本粘贴它的提示词都能完美还原，然后让 Replit 再基于这个设计完成其他页面和功能。(Replit agent 4.0 支持 canvas 也可以生成不同风格和布局的设计) 3. Replit 绑定 Github 后代码是实时同步到你的 repo 的，基本满意后 fork 到本地，让 Claude Code 重构。

Ding

56,866 views • 6 months 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 设计工作台。
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 views • 6 months ago

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

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

Paidax

154,231 views • 7 months ago

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

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

Paidax

48,894 views • 10 months ago

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

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

MapleShaw

521,499 views • 1 year ago