ブロックライブラリから「Vibe」ブロックをページに追加してください。「その他」カテゴリ、またはZero Blockすぐ下のカテゴリ一覧から見つけることができます。

入力欄にプロンプトを入力して、ブロックを生成してください。プロンプトの入力が完了したら、「送信」ボタンをクリックするか、キーボードのEnterキーを押してください。

コード生成用のAIモデルを選択するには、入力フィールドの下にあるモデル名をクリックしてください。

プロンプトに画像、ファイル、または動画を添付するには、クリップのアイコンをクリックしてください。そのファイルは、ブロック内のコンテンツとして、または参照用として使用できます。

疑問符のアイコンをクリックすると、ブロックを生成するためのプロンプト例が表示されます。また、これらを参考に、独自のプロンプトを作成する際の出発点として活用することもできます。

例として挙げたプロンプトをクリックすると、そのプロンプトを使用できます。

また、表紙の例など、別のページでサンプルプロンプトをライブデモとしてプレビューすることもできます。

生成されたブロックコードをコピーするには、「コードを取得」をクリックしてください。すると、そのブロックがページに自動的に追加されます。

「プロンプトを適用」をクリックしてエディタを開き、リクエストを編集してください。エディタでは、画像を添付したり、生成に使用するAIモデルを変更したりすることもできます。

ブロックが生成されると、AIチャットに「完了！」というメッセージが表示され、ブロックが使用可能になったことが示されます。プロンプトの下には、コピー、再生成、削除のオプションが表示されます。

チャット内で、AIの回答を展開してコードを表示したりコピーしたりできます。

コード全体を確認するには、上部パネルの「コード」をクリックしてエディタを開き、そこで手動で編集してブロックをさらにカスタマイズしてください。

最良の結果を得るには、元のプロンプトを調整してブロックコードを再生成するか、まったく新しいリクエストを入力してください。

例えば、ブロック内で変更が必要な箇所を記述するだけで、AIがそれに応じてコードを更新してくれます。

デフォルトでは、ブロックには最新バージョンが表示されます。以前のバージョンを表示するには、目のアイコンをクリックしてください。適用するには、「適用」をクリックしてください。

このオプションを使用すると、ブロックの異なるバージョンを切り替えることができます。結果を保存するには、AIチャットウィンドウを閉じるだけです。

チャットを閉じた後にブロックを再度編集するには、「ブロックエディタ」ボタンをクリックしてください。

作成したブロック内の要素を編集するには、その要素をクリックします。スタイルとコンテンツのパネルが開きます。

別の要素にすばやく切り替えるには、「レイヤー」アイコンをクリックします。「レイヤー」パネルが開きます。

必要な要素やグループを見つけるには、さまざまなレイヤーを選択してください。選択されたレイヤーは灰色で強調表示されます。

Vibe Blockのコードから「レイヤー」パネルを開くこともできます。「レイヤー」アイコンをクリックし、必要なレイヤーを選択してください。スタイルパネルが開きます。

矢印アイコンをクリックすると、ネストされたグループや要素の親グループをすばやく選択できます。

コードアイコンをクリックすると、コード内の要素を編集できます。

要素をコピーするには、コピーアイコンをクリックします。削除するには、ゴミ箱アイコンをクリックします。レイヤーパネル内で要素を移動して順序を変更するには、上向き矢印と下向き矢印を使用します。

AIを使って要素を編集するには、「AIで編集」をクリックしてください。プロンプトを入力するパネルが開きます。入力欄には、変更したい要素へのパスがすでに入力されています。

「コンテンツ」フィールドで利用可能なオプションは、選択した要素によって異なります。

テキスト要素の場合は、「コンテンツ」フィールドでテキストを編集できます。

画像については、ファイルを置き換えたり削除したり、新しい画像をアップロードしたり、画像ライブラリから画像を選択したりすることができます。

フォームの場合、「サービス」ボタンが表示されます。このボタンを使用して、Tilda CRM やその他のデータ収集サービスと連携してください。

要素を含むグループの場合、コードが表示されます。「コンテンツ」フィールドで編集するか、コードエディタで直接開くことができます。

グループや要素のレスポンシブ設定を行うには、「ブレークポイント」フィールドで目的の画面アイコンを選択します。

デフォルトでは4つのブレークポイントが用意されていますが、カスタム値を追加することも可能です。歯車アイコンをクリックし、「追加」を選択して、必要な画面幅を入力し、変更を保存してください。

グループや要素については、幅と高さ、角の丸み、不透明度、および最小・最大サイズを設定できます。

要素ごとにフレックス設定を行うこともできます。

グループや要素については、余白やパディングを設定したり、背景色を変更したりすることができます。

グループや要素に枠線を追加するには、「枠線」をクリックします。利用可能なオプションがスタイルパネルに表示されます。

また、追加の効果を設定したり、アニメーションなどのプロパティを要素に追加したりすることもできます。

Vibe Blockでは、すべての料金プランにデフォルトで無料リクエスト枠が含まれています。以下の表は、各料金プランごとに12時間ごとおよび1か月あたりに利用できるリクエスト数を示しています。

アカウントのリクエスト上限に達した場合は、追加のリクエストを購入することができます。購入するには、「AIリクエストの購入」ページにアクセスするか、ブロックチャット内のポップアップメニューにある「リクエストを購入」ボタンをクリックしてください。

同じ画面で、当日のリクエスト上限や、プランに含まれる残りの利用上限の合計を確認することもできます。