<aside> 📎 注意 AI Component Creatorは現在ベータ版で、Tailwind CSSライブラリでのみ利用可能です。

</aside>

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

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

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

  2. 時間節約： 手作業による設計作業に別れを告げましょう。このツールは、コンポーネントの作成に費やす時間を削減し、全体像に集中することができます。

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

    Zeg2DP_jD4D4xSm3_07.mp4

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

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

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

Zeg2Ov_jD4D4xSm9_08.avif

ヒントとコツ

  1. プロンプトの詳細： AI Component Creatorから最良の結果を得るには、色、タイポグラフィ、レイアウトの好みなど、具体的な設計要件を含む明確で詳細なプロンプトを提供してください。作成するコンポーネントの特性や機能が具体的であればあるほど、AIが生成する結果はより正確なものになります： 入力フィールドを作成し、その上に「Email」というラベルを配置します。ラベルのフォントサイズは16pxで、太字にします。入力フィールドの下辺は2pxのソリッドで、フォーカスされると青いボーダーになるようにします。
  2. さまざまなプロンプトを試してみましょう： AI Component Creatorの可能性を最大限に引き出すために、さまざまなプロンプトを試してみてください。単語やフレーズの組み合わせを試して、生成されるコンポーネントにどのような影響を与えるかを確認し、プロトタイプの新しい可能性を見つけましょう。
  3. 複数の指示を別々に出す： 複雑なUIコンポーネントをより小さく管理しやすいパーツに分解し、各コンポーネントに個別に指示を与えます。これにより、より詳細で正確なコンポーネントを生成することができます。