使用 AI 设计：Claude、Codex、Figma | 完整指南

学习如何使用 Anthropic 的 Claude、OpenAI 的 Codex、Google Stitch、Mobbin 和 Figma 进行 AI 设计。 本完整指南展示了我如何在真实产品设计工作流中应用 AI 工具，从早期创意和 UX 思维到线框图、高保真设计、设计系统、原型和生产级 UI。 我们将探讨 Claude、Codex、Google Stitch、Mobbin 和 Figma 在设计流程中的定位，如何避免通用的 AI 生成结果，以及设计师如何在保持品味、结构和控制力的同时加快速度、做出更好的决策并节省 Token。 🔗 关键链接 📣 加入社区: https://uicollective.co/ ❎ 在 X 上关注我: https://x.com/KirkMDesign 为什么加入 UI Collective Academy？获取优质课程、优质资源下载以及更多即将推出的内容（我主要独自构建...致力于让设计教育对所有人都可用，您的支持意义重大！） ↪️ 需要设计系统？（也包含在学院中）: https://collectivekit.co/ 🔗 其他系统视频值得观看 构建设计系统: https://youtu.be/opTANvl9G1g 复杂设计系统与 Figma 变量设置: https://youtu.be/L-tpK7Eeuow Claude 设计视频: https://youtu.be/eXlSgQmz02E 🔗 更多链接 让我们为您构建或修复设计系统: https://designsystemlabs.co/ 📣 节省 20% 的 Mobbin 年度计划费用: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design [email protected] 0:00 介绍 0:52 AI 不是工具，AI 是工作流 6:43 AI 设计栈 7:32 Claude vs Codex 9:16 AI 设计设置（Figma 技能与 Figma MCP） 16:31 Google Stitch 21:27 我在工作流中如何使用 Stitch 23:29 Claude Design 27:01 Claude Design 输出 28:35 何时将 Google Stitch 与 Claude Design 配合使用 31:44 Claude Design 的局限 32:35 Claude 和 Codex 对比实验 38:25 AI Token 的最佳使用 40:45 设计系统与 AI 42:04 Claude Design 设计系统的局限 45:32 使用 AI 构建设计 Token 49:01 Figma 变量与 AI 52:26 设计系统组件与 AI 58:32 使用 AI 训练我们的设计系统 1:01:34 设计系统 Claude 技能 1:08:04 组件与 Claude 技能 1:13:48 向 Codex 添加 Claude 技能 1:15:09 AI 与 Mobbin 设计研究 1:17:24 使用 Claude Code 构建生产级 UI 1:22:43 使用 ChatGPT 构建 UI 1:24:26 优化我们的 AI 设计 1:25:13 推送到 Figma 并查看最终结果 1:27:08 结尾