こんな課題、ありませんか？
AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう
AI 駆動開発において、AI に UI の自動生成を任せきりにすると、ページごとにボタンの色が異なるなど、意図しないデザインになってしまう課題がある。
AI による高速化メリットが、従来のデザイン作成工程で相殺されてしまう
「全画面分の Figma デザインを作成する」プロセスに時間がかかり、AI による UI コード生成の高速化というメリットを享受できていない。
AI が参照できる、信頼性の高いデザインシステムが存在しない
AI によるコード生成のメリットを享受しつつ品質を担保するためには、AI が解釈・参照可能なデザインシステムと、新しい開発プロセスを確立することが不可欠である。
AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現
UI/UX デザイナーと開発者に対し、AI が参照可能なデザインシステムと、
それを活用した開発プロセス（スキーム）を確立・提供する
AI 参照可能なデザインシステムと Figma MCP の活用
Figma、Storybook、shadcn/ui を連携させ、主に Figma MCP を通じて AI が参照可能なデザインシステムを構築する。Figma はデザイン定義、コンポーネント、変数（デザイントークン）管理の基点となり、AI 参照のメインソースとなる。
- Figma 上で制作するデザインシステムをデザイン定義として活用
- Figma MCP を通してデザインシステム上の定義を取得して必要な UI 生成に利用
- AI がデザインの意図を正確に認識できる基盤を構築
原則デザイン不要の UI 自動生成プロセスへの転換
全画面分の Figma デザイン作成を原則廃止し、前提情報、ユーザーストーリーと受け入れ基準を AI に入力することで、デザインシステムに準拠した UI コードを直接生成するプロセスを目指す。
- ユーザーストーリーから直接 UI コードを生成
- デザインシステムに準拠した一貫性のある UI を自動生成
- ベストケース：個別画面のデザイン作成が不要に
デザインと実装の整合性を担保するレビューフロー
Figma と Storybook をプラグイン経由で「リンク参照」させることで、デザイン定義と実装 UI コンポーネントカタログ（Storybook）の一貫性を確保する。
- Figma と Storybook のリンク参照による整合性確保
- Chromatic（GitHub 連携）によるビジュアルリグレッションテスト
- デザイナー側でデフォルトでレビューを設定する運用
AI デザインシステムを活用した開発プロセス
UI/UX 設計プロセスの再定義と確立を目指す
デザインシステム
基盤の構築
デザイナーが Figma 上でデザインシステム（コンポーネント、変数）を AI が解釈可能な形で設計・構築する。
連携設定と
レビュー承認フローの確立
Figma と Storybook をプラグインで連携（リンク参照）させ、Chromatic で UI コンポーネントの変更レビューと承認フローを確立する。
UI 要件入力と
AI による自動生成
開発者が前提情報、ユーザーストーリーと受け入れ基準を AI に入力し、AI が主に Figma MCP を参照して UI コードを自動生成する。
AI 生成 UI の
レビュー・調整
開発者・デザイナーが AI の生成した UI をレビューし、修正が必要な場合のみデザイナーが Figma で詳細デザインを作成・調整し、再実装を行う。
SNS 公式アカウント
gaipack の最新情報を SNS で発信中！