Figma MCP × Claude Codeでデザインシステム準拠のUIを自動生成してみた

Figma MCPとClaude Codeを連携して、自社のデザインシステム（コンポーネント・トークン）に完全準拠したUIを自動生成するワークフローを実演しました。 「AIが生成したUIは現場で使えない」という声をよく聞きますが、デザインシステムをAIに正しく読み込ませれば、実用レベルのUIが出てきます。 その手順を3つのステップで解説します。 ▼ 動画の内容 00:00 今日のテーマ — デザインシステム準拠UIをAIで自動生成 01:03 導入 — 3つのステップで進めます 01:13 前提 — なぜデザインシステム準拠が重要なのか 01:53 Step 1: デザインシステムをFigmaでライブラリ公開 03:08 Step 2: Figma MCPでClaude Codeと接続 03:35 Step 3: プロンプトでUI自動生成（実演） 07:29 考察 — デザイナーの仕事はどう変わるのか 08:31 まとめ ▼ この動画で伝えたいこと AIにUIを任せるとき、問題はAIの能力ではなく「何を読み込ませるか」にある。デザインシステムという制約をAIに渡すことで、現場で使えるUIが生成できる。デザイナーの価値は「画面を作る速さ」から「システムを設計し、AIに正しく伝える力」に移っている。 ▼ 関連リンク ・Figma MCP Server: https://developers.figma.com/docs/fig... ・Claude Code: https://docs.anthropic.com/en/docs/cl... ・Figma: https://www.figma.com/ ▼ コミュニティ（noteメンバーシップ） AI×デザインの実践をもっと深く学べるメンバーシップ → https://note.com/dubhunter/membership ▼ アジケについて UIUXデザインの専門会社です。 → https://ajike.co.jp/ ▼ SNS ・X: https://x.com/dubhunter ・note: https://note.com/dubhunter ・Podcast「デザインの味付け」: https://open.spotify.com/show/5wpB22Y... #AIデザイン #UIデザイン #FigmaMCP #ClaudeCode #デザインシステム