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