使用 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？獲得高級課程、高級下載資源等更多內容（我主要是獨自構建...努力讓所有人都能獲得設計教育，您的支持意義重大！） ↪️ 需要設計系統？（也包含在 Academy 中）：https://collectivekit.co/ 🔗 其他系統影片 構建設計系統：https://youtu.be/opTANvl9G1g 複雜設計系統 & Figma 變數設置：https://youtu.be/L-tpK7Eeuow Claude 設計影片：https://youtu.be/eXlSgQmz02E 🔗 更多連結 讓我們構建或修復您的設計系統：https://designsystemlabs.co/ 📣 Mobbin 年度方案享 20% 折扣：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 對比 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 將 Claude 技能新增至 Codex 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 結語