<aside> 📎 注意 AI Component Creatorは現在ベータ版となっています。

</aside>

OpenAI APIを利用したAI Component Creatorは、プロトタイピングをスピードアップさせて、最小限の作業でコンポーネント作成を効率化します。動的なインターフェイスを作成する場合、またはデザインコンセプトを検討する場合でもワークフローを簡素化します。

その方法をご紹介します：

1. プロンプトベースの設計： 必要なものを説明するプロンプトを入力するだけで、AIが残りを処理し、プロトタイプ用にカスタマイズされたコンポーネントを即座に生成します。

2. 時間節約： コンポーネント構築に費やす時間を削減し、全体像に集中することができます。

3. カスタマイズ： AI Component Creatorは、コンポーネントのあらゆる面でカスタマイズを可能にしながら、プロジェクト固有の要件に合わせてコンポーネントを調整します。

   Zeg2DP_jD4D4xSm3_07.mp4

AI Component Creatorは特に次のような方におすすめです。

• 迅速かつ効率的にプロトタイプを作成する必要があるデザイナーやUI開発者。
• 豊富なデザイン経験はないが、プロジェクトにカスタムコンポーネントを必要とする個人。
• 反復的なデザイン作業を最小限に抑え、より広範なプロジェクト目標に集中したいチーム。

コンポーネントの生成方法

1. OpenAIのウェブサイトからOpenAI API Keyを取得する。
2. Editorに移動し、Quick Toolsパネルから[AI Component Creator]を開きます。
3. Settingsタブを開き、[OpenAI API Key]フィールドに取得したAPIキーを貼り付ける。
4. プロンプト（Prompt）タブを開き、カスタマイズされたコンポーネントを生成します。

Zeg2Ov_jD4D4xSm9_08.avif

AI画像アップロード

AI Component Creatorでは、画像をアップロードしてUIコンポーネントをすばやく生成し、ビジュアルモックアップを機能的なコードに変換できます。画像と詳細なプロンプトを組み合わせることで、プロトタイピングプロセスをスピードアップし、ゼロから始めることなくデザインコンセプトを機能するコンポーネントに変換できます。

低忠実度のワイヤーフレームでも、高忠実度のモックアップでも、AIはコンポーネントのコア構造を生成することができます。※画像の詳細度が出力に影響します：

• 低忠実度ワイヤーフレーム： 大まかなレイアウト構造を作成するのに最適なシンプルなデザイン。色、スペーシング、インタラクティブ性など、不足している詳細を追加するためのプロンプトを必ず提供すること。