AI によるカスタムデザインシステムの呼び出し

AI が利用可能なデザインガイドラインとは？

公開済みのライブラリで「AI による利用を許可」にチェックを入れると、AI 上でそのライブラリを選択し、使用できるようになります。

設定方法 1

チームのランディングページ - リソースタブ（ライブラリファイルの編集権限が必要）

設定方法 2

ライブラリパネルの左下（ライブラリファイルの編集権限が必要）

設定方法 3

管理コンソール - ライブラリ管理（エンタープライズプランの管理者向け）

AI によるカスタムデザインシステムの呼び出しフロー

1. 対象のデザインシステムを選択する

デザインファイル内の AI パネルを開き、ダイアログで「カスタムデザインシステム」を選択します。次に、AI での使用が許可されているライブラリファイルを選択してください。選択完了後、プロンプトを入力することで、そのコンポーネントライブラリのスタイルに沿ったデザインを生成できます。

2. 対応するプロンプトを入力する

プロンプトのコツ

• 生成の質を向上させるため、プロンプトは選択したコンポーネントライブラリのスタイルや意味（セマンティクス）の範囲にできるだけ近づけることを推奨します。
• 両者の間に乖離がある場合、生成結果の品質やコンポーネントの適用率に影響が出る可能性があります。
• ページ内にコンポーネントライブラリがカバーしていないモジュールがある場合、AI は意味（セマンティクス）に基づいて補完的に生成を行います。不適切なコンポーネントを無理に適用することはありません。

避けるべきケース

• スタイルの不一致：コンポーネントライブラリはライトモードの B2B 向けスタイルだが、プロンプトはダークモードの金融系である。
• シーンの不一致：コンポーネントライブラリはダッシュボード向けだが、プロンプトはモバイルアプリのログイン画面である。
• 構造の不一致：コンポーネントがフォーム（入力欄）しかないのに、プロンプトは EC サイトのカード型レイアウトである。
• ブランドの不一致：プロンプトに強いブランドビジュアルが含まれているが、コンポーネントライブラリにはそれらが含まれていない。