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

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

コード生成用のAIモデルを選択するには、ブロック内のモデル名をクリックしてください。

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

疑問符のアイコンをクリックすると、プロンプトの例を確認したり、それらを参考に独自のプロンプトを作成したりできます。

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

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

この例をコピーしてページ上にブロックを作成するには、「コードを取得」をクリックしてください。

「プロンプトを適用」をクリックしてエディタを開き、リクエストを編集してください。

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

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

コード全体を確認するには、上部パネルの「コード」をクリックしてエディタを開いてください。エディタでは、ブロックの生成済みコードを手動で編集することができます。

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

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

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

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

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

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

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

各レイヤーを切り替えて、必要な要素やグループを選択してください。選択されたレイヤーは灰色で強調表示されます。

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

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

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

要素をコピーするには、複製アイコンをクリックします。削除するには、ゴミ箱アイコンをクリックします。上下の矢印を使って、レイヤーパネル内の要素を移動させ、順序を変更します。

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

「コンテンツ」フィールドで編集できる内容は、選択した要素によって異なります。

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

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

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

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

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

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

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

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

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

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

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

Vibe Block のコンテンツを編集するには、「コンテンツ」をクリックします。

編集パネルには、テキスト、画像、ライブラリ内のアイコン、その他の利用可能なブロック要素など、すぐに更新できるフィールドや要素が表示されます。

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

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

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

生成されたバイブブロックを変換できますZero Blockこれを行うには、Vibe Block の設定を開き、[変換] をクリックします。 Zero Block 。

変換後、ブロックエディターをクリックしてブロックを開きます。 Zero Block そして、そのデザインをカスタマイズする。