AIでデザインする: Claude、Codex、Figma | 完全ガイド

Anthropic の Claude、OpenAI の Codex、Google Stitch、Mobbin、Figma を使用して AI でデザインする方法を学びます。 このガイドでは、初期段階のアイデア出しと UX 思考からワイヤーフレーム、高忠実度デザイン、デザインシステム、プロトタイピング、本番対応 UI まで、実際のプロダクトデザインワークフローで AI ツールを活用する方法を紹介します。 Claude、Codex、Google Stitch、Mobbin、Figma がデザインプロセスのどこに適合するか、汎用的な AI 生成結果を避ける方法、そしてデザイナーがテイスト、構造、コントロールを失わずに、より速く、より良い決定を下し、トークンを節約する方法を探ります。 🔗 重要なリンク 📣 コミュニティに参加: 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/ 📣 Mobbin 年間プランで 20% 割引: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design kirkland@uicollective.co 0:00 はじめに 0:52 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 Claude Design と Google Stitch を一緒に使用するタイミング 31:44 Claude Design の制限 32:35 Claude と Codex の比較実験 38:25 AI トークンの最適な使用方法 40:45 デザインシステムと AI 42:04 Claude Design デザインシステム制限 45:32 AI を使用したデザイントークンの構築 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 Chat GPT で UI を構築 1:24:26 AI デザインの改善 1:25:13 Figma にプッシュして最終結果 1:27:08 終わりに