正在加载视频...

视频加载失败

返回首页

分享下我在 Vibe Coding 中，使用率最高，且最高效的几个工具，覆盖到设计稿生成，到代码交付，网页动效等👇 1、Codex 你只要输入一个需求，它就会调动多个AI智能体并行工作，无论是项目重构，还是从零构建MVP，，它都能独立完成，你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上 2、Paper 这个可以让 AI 生成高质量设计稿，并实现设计与代码双向实时同步，你只需专注界面创作，AI 会自动还原为精准代码交付 3、21st 这个提供超多精美的前端组件，同时带有流畅的交互动画，只需点击复制 Prompt ，粘贴到 AI 对话框即可使用 4、Unicorn 这个，不用写代码，也可以做出丝滑流畅的 GPU 级网页特效，一键导出即可让 AI 接入你的项目 5、Agentation 这个，可以直接在网页上标注需要调整的元素，自动转化为 AI 能够直接理解，和执行的结构化代码上下文， 实现网站的精细化调整 6、Axion 这个，能让你的 AI 化身 iOS 开发专家，覆盖从设计、开发到调试的全流程，，输出符合 Apple 高标准、安全、高性能，且易于维护的生产级代码 7、Apple docs mcp 配合这个，可以自动检索 Apple 最新开发文档，能解决日常开发软件中 90% 的问题

xin_pai88825's profile picture

Paidax

17,068 subscribers

175,509 次观看 • 7 个月前 •via X (Twitter)

教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

19 条评论

Wibi X 的头像
Wibi X7 个月前

这条我挺有共鸣 尤其是把精力从写代码转到架构和创造那句 最近我的体感也是这样 会不会写代码已经不是第一门槛了 真正拉差距的是拆问题和控结果的能力

zac zhu 的头像
zac zhu7 个月前

Vibe好的页面需要个展览的地方，可以看看这个(一键发布 Vibe 页面)：

daniel 的头像
daniel7 个月前

Vibe Coding 的工具生态越来越成熟了，从设计到代码的无缝衔接确实能极大提升开发效率。特别欣赏 Codex 这种让开发者专注于架构设计的理念，这才是 AI 工具的终极价值。

Jackywine 的头像
Jackywine7 个月前

AI 设计师 派大鑫老师！

Paidax 的头像
Paidax7 个月前

🤣

nemeow.ai 的头像
nemeow.ai7 个月前

我觉得 zite 也挺好用的

Mark 的头像
Mark7 个月前

@grok 验证后发我

Kieran Zhang 的头像
Kieran Zhang7 个月前

paper和pencil哪个更好一点啊老师？

Paidax 的头像
Paidax7 个月前

没有实际的对比过，不过最近 pencil挺火的

Kieran Zhang 的头像
Kieran Zhang7 个月前

谢谢

ATC12138 的头像
ATC121387 个月前

好东西，喜欢

智算爱德华 的头像
智算爱德华7 个月前

Vibe Coding让Codex独揽大活，你成监工了。它写的bug自己认吗？

Paidax 的头像
Paidax7 个月前

哈哈哈，每次我都会整体验收一遍，所有问题都写成文档让他根据文档改

派大星～ 的头像
派大星～7 个月前

能给给链接？ 都搜索不到

Paidax 的头像
Paidax7 个月前

设计师最爱 vibecoding 工具合集文档

Shukuinan 的头像
Shukuinan7 个月前

厉害👍

Hal 的头像
Hal7 个月前

换发型了呀

Paidax 的头像
Paidax7 个月前

发型炸了

飞鸟 的头像
飞鸟4 个月前

@Jackywine 一直苦于 ai 不能还原图片的设计 ，白天试试

相关视频

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

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

小互

26,359 次观看 • 2 年前

Codex 最新动态： 从 GPT‑5.6 与 Ultra 模式，到多智能体并行协作、计算机与浏览器操作、应用截图理解、行内代码和文档修改，再到一键发布 Sites、跨项目管理以及完整的 PR 工作流。 Codex 已不只是一个“帮你写代码”的工具，而是能够拆解复杂任务、操作和测试应用、协调多个项目、处理 Bug 与代码审查，并协助完成发布的开发伙伴。 无论你想提高日常开发效率，还是探索更自动化的 AI 编程方式，这支视频都能帮你快速掌握 Codex 的新能力和实际应用场景。 本视频由 baocut 翻译
7:12

Codex 最新动态： 从 GPT‑5.6 与 Ultra 模式，到多智能体并行协作、计算机与浏览器操作、应用截图理解、行内代码和文档修改，再到一键发布 Sites、跨项目管理以及完整的 PR 工作流。 Codex 已不只是一个“帮你写代码”的工具，而是能够拆解复杂任务、操作和测试应用、协调多个项目、处理 Bug 与代码审查，并协助完成发布的开发伙伴。 无论你想提高日常开发效率，还是探索更自动化的 AI 编程方式，这支视频都能帮你快速掌握 Codex 的新能力和实际应用场景。 本视频由 baocut 翻译

宝玉

37,498 次观看 • 3 个月前

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

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

小互

57,767 次观看 • 1 年前

如果我们平时都是直接让 ChatGPT、Claude 这些 AI 助手帮忙调试代码或解决 Bug，而不是使用 Cursor 等付费 AI 编程助手。 那么 gptree 这个开源项目可以看一下，它能一键将整个项目的文件内容和目录结构打包成单个文本文件，让 AI 快速理解完整的项目上下文。 GitHub： 并且内置文件筛选和交互式选择功能，能够自动排除 .git、node_modules 等无关目录。 同时提供可视化的项目结构树，支持全局和项目级配置，可为不同项目定制不同的打包策略。 可直接一键复制到剪贴板，粘贴到 AI 对话框发送使用，高效地为 AI 提供项目上下文。
0:32

如果我们平时都是直接让 ChatGPT、Claude 这些 AI 助手帮忙调试代码或解决 Bug，而不是使用 Cursor 等付费 AI 编程助手。 那么 gptree 这个开源项目可以看一下，它能一键将整个项目的文件内容和目录结构打包成单个文本文件，让 AI 快速理解完整的项目上下文。 GitHub： 并且内置文件筛选和交互式选择功能，能够自动排除 .git、node_modules 等无关目录。 同时提供可视化的项目结构树，支持全局和项目级配置，可为不同项目定制不同的打包策略。 可直接一键复制到剪贴板，粘贴到 AI 对话框发送使用，高效地为 AI 提供项目上下文。

GitHubDaily

31,667 次观看 • 1 年前

最近在开发圈很火的 GitHub 项目 Firecrawl， 一个专门给 AI 用的智能爬虫，已经 7万+ Star 了。 一句话总结： 它可以把任何网站，直接变成 AI 能用的数据。 只要给它一个 URL，它就会自动： - 抓取整站页面 - 清洗网页内容 - 解析结构信息 - 输出 Markdown / JSON 也就是说： 网站 → 结构化数据 → 直接喂给 LLM。 现在很多 AI 项目的数据流程其实都是： 网站 → Firecrawl → 向量库 → RAG → AI 应用 如果你在做： - AI Agent - RAG 知识库 - 自动化数据采集 这个工具基本算是 AI 开发的基础设施了
0:25

最近在开发圈很火的 GitHub 项目 Firecrawl， 一个专门给 AI 用的智能爬虫，已经 7万+ Star 了。 一句话总结： 它可以把任何网站，直接变成 AI 能用的数据。 只要给它一个 URL，它就会自动： - 抓取整站页面 - 清洗网页内容 - 解析结构信息 - 输出 Markdown / JSON 也就是说： 网站 → 结构化数据 → 直接喂给 LLM。 现在很多 AI 项目的数据流程其实都是： 网站 → Firecrawl → 向量库 → RAG → AI 应用 如果你在做： - AI Agent - RAG 知识库 - 自动化数据采集 这个工具基本算是 AI 开发的基础设施了

开发者Hailey

140,708 次观看 • 7 个月前

在对前端网页应用进行性能优化时，经常会打开 Chrome DevTools 分析加载时间、网络请求，以及排查问题，整个过程耗时耗力。 现在 Chrome DevTools 推出了 MCP 并且代码已开源，可以直接让 AI 完成网页自动化测试、调试以及优化整套开发流程。 比如将其安装到 Gemini CLI 等支持 MCP 的 AI 编程工具中，就能够自动进行网页导航、性能分析、截图调试等复杂操作，简化开发流程。 GitHub： 甚至可以模拟真人操作，比如页面点击、填写表单、元素拖拽等各种交互，可应用于自动化测试以及爬虫等场景。 除此之外，还可以模拟不同设备 CPU 性能、网络和屏幕尺寸，同时支持直接在网页中运行 JavaScript 代码并查看结果。 项目代码已完全开源，开发者可以根据需求扩展更多能力，感兴趣的同学可以安装到任意支持 MCP 的 AI 助手中使用。
0:32

在对前端网页应用进行性能优化时，经常会打开 Chrome DevTools 分析加载时间、网络请求，以及排查问题，整个过程耗时耗力。 现在 Chrome DevTools 推出了 MCP 并且代码已开源，可以直接让 AI 完成网页自动化测试、调试以及优化整套开发流程。 比如将其安装到 Gemini CLI 等支持 MCP 的 AI 编程工具中，就能够自动进行网页导航、性能分析、截图调试等复杂操作，简化开发流程。 GitHub： 甚至可以模拟真人操作，比如页面点击、填写表单、元素拖拽等各种交互，可应用于自动化测试以及爬虫等场景。 除此之外，还可以模拟不同设备 CPU 性能、网络和屏幕尺寸，同时支持直接在网页中运行 JavaScript 代码并查看结果。 项目代码已完全开源，开发者可以根据需求扩展更多能力，感兴趣的同学可以安装到任意支持 MCP 的 AI 助手中使用。

GitHubDaily

15,551 次观看 • 1 年前

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

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

Paidax

48,962 次观看 • 11 个月前

🚨卧槽！Codex 5.6 这几个插件装完真的会起飞 重度使用后我筛选出了这几个最能提升生产力的插件，开发体验直接上一个台阶。 核心亮点： > Browser 插件：写完交互直接让它自动化测试、点按钮、验收，比手动快太多 > GitHub 插件：Issue 一丢过去，它就能直接写代码并处理 PR，开发流程彻底闭环 > Codex Security：自动扫描漏洞和密钥泄露，还给出修复建议 > Build Web Apps：从产品构思到架构生成、开发、浏览器测试全流程跑通 > Figma 插件：设计稿丢进去，几分钟就能输出像素级还原的响应式代码 > Sentry 插件：线上报错自动定位并推送修复代码 最强功能是 Sites：做完项目可以直接预览、发布、分享，还能绑定自定义域名。 这套插件装完后，你的 Codex 基本能覆盖从设计到上线的大部分流程。 对重度使用 Codex / Cursor 类 AI 编码工具的开发者来说，这几个插件目前是生产力提升最明显的组合。 安装方式：桌面端进入 Settings → Plugins，搜索插件名称即可安装。
1:10

🚨卧槽！Codex 5.6 这几个插件装完真的会起飞 重度使用后我筛选出了这几个最能提升生产力的插件，开发体验直接上一个台阶。 核心亮点： > Browser 插件：写完交互直接让它自动化测试、点按钮、验收，比手动快太多 > GitHub 插件：Issue 一丢过去，它就能直接写代码并处理 PR，开发流程彻底闭环 > Codex Security：自动扫描漏洞和密钥泄露，还给出修复建议 > Build Web Apps：从产品构思到架构生成、开发、浏览器测试全流程跑通 > Figma 插件：设计稿丢进去，几分钟就能输出像素级还原的响应式代码 > Sentry 插件：线上报错自动定位并推送修复代码 最强功能是 Sites：做完项目可以直接预览、发布、分享，还能绑定自定义域名。 这套插件装完后，你的 Codex 基本能覆盖从设计到上线的大部分流程。 对重度使用 Codex / Cursor 类 AI 编码工具的开发者来说，这几个插件目前是生产力提升最明显的组合。 安装方式：桌面端进入 Settings → Plugins，搜索插件名称即可安装。

爱吃折耳根的Ace

22,439 次观看 • 3 个月前

朋友们，我发现一个超级哇塞的技能 现在已经有不少不错的工具可以画出好看的项目架构图，但大多是静态的，不能交互。今天分享的这个不一样，它是会动的！ 视频里是我在 MkAgent 项目下执行出来的效果，一次搞定。它会根据项目的 logo、主题风格等信息，生成对应的架构图。 不仅如此，它还能分析代码，找出核心节点，生成节点信息和节点关系。每个节点都可以点击，右侧会显示该节点的详细信息。 最终产物是一个 HTML 文件：展示核心架构和工作流程，并且支持动画自动演示调用流程。这个挺有意思，以后读新项目代码可以先用它。
0:28

朋友们，我发现一个超级哇塞的技能 现在已经有不少不错的工具可以画出好看的项目架构图，但大多是静态的，不能交互。今天分享的这个不一样，它是会动的！ 视频里是我在 MkAgent 项目下执行出来的效果，一次搞定。它会根据项目的 logo、主题风格等信息，生成对应的架构图。 不仅如此，它还能分析代码，找出核心节点，生成节点信息和节点关系。每个节点都可以点击，右侧会显示该节点的详细信息。 最终产物是一个 HTML 文件：展示核心架构和工作流程，并且支持动画自动演示调用流程。这个挺有意思，以后读新项目代码可以先用它。

Fox

75,312 次观看 • 2 个月前

以前想要制作数学和物理教学这类交互动画，需要用到 Manim 这些专业工具，还得搞清楚 LaTeX 公式渲染和相机运动等。 现在用 Math-To-Manim 这个开源 AI 工具，只需要一句话简单描述就能自动生成完整的交互动画。 从分析概念逐步构建到目标主题，自动生成包含详细 LaTeX 公式和镜头设计，全流程自动化完成。 GitHub： 同时输出动画代码和完整的 LaTeX 学习笔记文档，并提供了 55+ 个涵盖物理、数学、计算机科学等领域的示例动画。 通过克隆代码到本地，安装相关依赖，并配置好模型 API Key，即可在可视化操作界面输入描述生成动画。
0:20

以前想要制作数学和物理教学这类交互动画，需要用到 Manim 这些专业工具，还得搞清楚 LaTeX 公式渲染和相机运动等。 现在用 Math-To-Manim 这个开源 AI 工具，只需要一句话简单描述就能自动生成完整的交互动画。 从分析概念逐步构建到目标主题，自动生成包含详细 LaTeX 公式和镜头设计，全流程自动化完成。 GitHub： 同时输出动画代码和完整的 LaTeX 学习笔记文档，并提供了 55+ 个涵盖物理、数学、计算机科学等领域的示例动画。 通过克隆代码到本地，安装相关依赖，并配置好模型 API Key，即可在可视化操作界面输入描述生成动画。

GitHubDaily

40,441 次观看 • 1 年前

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包
0:23

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包

暖暖爱AI

102,651 次观看 • 3 个月前

这绝对是 GitHub 上最牛逼的 AI 网站克隆神器🔥 别再羡慕大厂动辄几万刀的前端设计了！ 用这个开源神器，全网顶级落地页一键变成你的私人组件库！ 操作简单到离谱： 给它一个 URL，AI 几分钟时间，它就能把人家的设计、资源、组件全部智能复刻成干净的生产级代码。 最牛的是，它不是死板的复制，而是带脑子的重构！图片自动下、SVG 自动扣、CSS 自动转。写代码的速度比你眨眼还快！ 地址：
0:21

这绝对是 GitHub 上最牛逼的 AI 网站克隆神器🔥 别再羡慕大厂动辄几万刀的前端设计了！ 用这个开源神器，全网顶级落地页一键变成你的私人组件库！ 操作简单到离谱： 给它一个 URL，AI 几分钟时间，它就能把人家的设计、资源、组件全部智能复刻成干净的生产级代码。 最牛的是，它不是死板的复制，而是带脑子的重构！图片自动下、SVG 自动扣、CSS 自动转。写代码的速度比你眨眼还快！ 地址：

爱丽丝呀！

15,316 次观看 • 3 个月前

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包
0:23

Codex 5.6 真的绝了 用了这么久，最值得装的插件就这几个 👇 ① Browser AI 自动操作浏览器，点击、输入、端到端测试全能干，再也不用手动验证了 ② GitHub 和 Issue、PR 打通，丢个任务给它，从编码到审核全搞定，开发流程快到飞起 ③ Codex Security 自动扫代码漏洞和密钥泄露，还能给出修复方案，省了一堆安全问题 ④ Build Web Apps 描述想法就行，设计、开发、测试一条龙，全栈项目的时间能省一半 ⑤ Figma Figma 设计直接转代码，响应式自动搞定，设计稿和代码终于能对上了 ⑥ Sentry 线上报错自动分析，帮你定位问题还给出修复代码，线上问题不再头大 但最绝的其实是「Sites」功能 开发完直接在里面预览，一键公开分享 还能用自定义域名 这意味着什么？原型秒送客户看 把这些组合起来用 Codex 就从单纯的「写代码 AI」变成了真的开发团队——设计、编码、测试、调试、上线全包

科技混子Chris

112,131 次观看 • 2 个月前

🚨 可能是全网第一个！0 代码手搓一款真正原生 App 的最佳实践。不管你是资深工程师还是零基础小白，只要跟着做，半小时就能做出运行在手机上的原生 App（不是 H5 网页！）👇 1️⃣ Stitch 生成设计：打开 Google Stitch，用中文描述需求（如“拍照自动识别有效期的 App”），选择 Gemini 3.0 Pro 模型。AI 瞬间生成符合 Material 3 规范的极简设计稿。 2️⃣ 一键导出素材：直接从 Stitch 导出 HTML 代码和 PNG 图片，省去 UI 和前端反复沟通的麻烦。 3️⃣ Antigravity 写代码：打开 Antigravity IDE，建立 frontend/backend 目录。把素材放入 design 文件夹。给 AI 下指令：“基于 design 目录，使用 Flutter 技术生成 App 代码”。AI 自动疯狂写代码，配置环境。 4️⃣ 模拟器运行：打开 Mac 的 Simulator，终端输入 flutter run。见证奇迹，真正的原生 App 跑起来了！ 这不是简单的套壳，AI 生成的代码包含 iOS、Android、Mac、Windows、Web 全平台支持。从想法到成品的全流程自动开发，是实践出来的最佳路径。 #AI编程 #Flutter #Stitch #Antigravity #零代码开发
3:27

🚨 可能是全网第一个！0 代码手搓一款真正原生 App 的最佳实践。不管你是资深工程师还是零基础小白，只要跟着做，半小时就能做出运行在手机上的原生 App（不是 H5 网页！）👇 1️⃣ Stitch 生成设计：打开 Google Stitch，用中文描述需求（如“拍照自动识别有效期的 App”），选择 Gemini 3.0 Pro 模型。AI 瞬间生成符合 Material 3 规范的极简设计稿。 2️⃣ 一键导出素材：直接从 Stitch 导出 HTML 代码和 PNG 图片，省去 UI 和前端反复沟通的麻烦。 3️⃣ Antigravity 写代码：打开 Antigravity IDE，建立 frontend/backend 目录。把素材放入 design 文件夹。给 AI 下指令：“基于 design 目录，使用 Flutter 技术生成 App 代码”。AI 自动疯狂写代码，配置环境。 4️⃣ 模拟器运行：打开 Mac 的 Simulator，终端输入 flutter run。见证奇迹，真正的原生 App 跑起来了！ 这不是简单的套壳，AI 生成的代码包含 iOS、Android、Mac、Windows、Web 全平台支持。从想法到成品的全流程自动开发，是实践出来的最佳路径。 #AI编程 #Flutter #Stitch #Antigravity #零代码开发

Vincent

35,435 次观看 • 6 个月前

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 次观看 • 8 个月前

这两天用Claude Design 给EasyApp2.0版本重新设计UI，得到的一些启发，希望给大家做一些参考。 😂Claude Design 非常消耗token，我已经消耗了 5次 5小时的用量，才做到如图所示的效果，其实还有一些地方可以继续优化/调整 1：首页找到你要参考的设计图，粘贴到对话框，Opus4.8多模态能力非常强，他能够很好的捕捉到参考图的设计系统。让Claude 以此为背景/模板来做创作，防止Claude 随意发挥，避免来回返工，消耗不必要的token 2：如果你对已存在的项目做UI优化，你可以选择Github connected、或者Link local code，这样做是让Claude读取你的代码，更加了解你当前的代码、功能，设计出来的UI更加符合你的业务逻辑 3：对于生成玩之后的设计图，局部微调效果，就用Commons功能，指哪打哪，非常精准。可以一次标记多个Commons，最后一次性发给Claude来修改。这一步基本上会占据整个设计时间的80%，非常琐碎 4：多试试Tweaks，Claude会在Tweaks中提供多种设计，选择一种你最喜欢的一套，作为最终的设计Token 5：可以让Claude 针对每个页面做成可交互的原型，带有动画效果，这样最终在还原到项目源码时，动画效果AI会自动带上，无需后续在手动告知AI 6：最后沉淀为自己的一套设计系统，以供后续复用
1:02

这两天用Claude Design 给EasyApp2.0版本重新设计UI，得到的一些启发，希望给大家做一些参考。 😂Claude Design 非常消耗token，我已经消耗了 5次 5小时的用量，才做到如图所示的效果，其实还有一些地方可以继续优化/调整 1：首页找到你要参考的设计图，粘贴到对话框，Opus4.8多模态能力非常强，他能够很好的捕捉到参考图的设计系统。让Claude 以此为背景/模板来做创作，防止Claude 随意发挥，避免来回返工，消耗不必要的token 2：如果你对已存在的项目做UI优化，你可以选择Github connected、或者Link local code，这样做是让Claude读取你的代码，更加了解你当前的代码、功能，设计出来的UI更加符合你的业务逻辑 3：对于生成玩之后的设计图，局部微调效果，就用Commons功能，指哪打哪，非常精准。可以一次标记多个Commons，最后一次性发给Claude来修改。这一步基本上会占据整个设计时间的80%，非常琐碎 4：多试试Tweaks，Claude会在Tweaks中提供多种设计，选择一种你最喜欢的一套，作为最终的设计Token 5：可以让Claude 针对每个页面做成可交互的原型，带有动画效果，这样最终在还原到项目源码时，动画效果AI会自动带上，无需后续在手动告知AI 6：最后沉淀为自己的一套设计系统，以供后续复用

sunshineLx

10,745 次观看 • 4 个月前

🚨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 次观看 • 7 个月前