プロンプトの書き方

画面を説明する

デザイナーに依頼するときのように、画面の目的と載せる内容を書きます。Vibrがリアルなサンプルコンテンツを補うため、文言を書く必要はありません。

• 良い例： 「KPIカードと最近の注文テーブルを備えた分析ダッシュボード」
• さらに良い例： 「コーヒー焙煎会社向けの分析ダッシュボード。売上、注文数、平均注文額、リピート顧客の4つのKPIカード、週次売上グラフ、ステータスチップ付きの最近の注文テーブル」

Enterで送信、Shift+Enterで改行します。タッチスクリーンでは、Returnで改行し、［送信］ボタンで送信します。

リクエストが曖昧すぎて計画を立てられない場合、Vibrは推測せずに質問します。入力欄で回答すると、そこから実行が再開されます。

Vibrはインターフェースのデザイン専用です。雑学や作文のように作るものがないリクエストには、代わりに作れるインターフェースのアイデアを添えた1行の返信が返り、計画以降は何も実行されません。ページ、アプリ、画面になりうるものなら、どんなテーマでも作成されます。ワークスペースに下書きがあるときは、その下書きについて質問することもできます（「なぜこのフォント？」「このコントラストはアクセシブル？」）。Vibrは下書きを変更せずにチャットで回答します。

画像から始める

スケッチ、スクリーンショット、モックアップがあれば、リクエストに添付すると、Vibr はその内容をもとに作成します。入力欄の下の + から ファイルを追加 を選ぶか、入力欄に画像を貼り付けまたはドロップしてください。1 回のリクエストにつき 3 枚まで、PNG、JPEG、WebP、GIF、AVIF、SVG を使えます。

• 「このスケッチを登録ページにして」
• 「このスクリーンショットのレイアウトで、自転車店の内容にして」
• テキストなしで画像だけを送ると、画像の内容を作成します。

下書きはデザインシステムのコンポーネントと文字スタイルで作られるため、ピクセルをコピーするのではなく、画像のレイアウトと階層に沿ったものになります。画像内のテキストはコンテンツとして扱われ、指示として扱われることはありません。

画像は送信前に縮小して描き直されるため、メタデータは取り除かれます。また、ライブラリに追加する画像と同じく、お使いのデバイス上でチェックされます。送信先は AI プロバイダーだけで、そのリクエストにのみ添付されます。ライブラリに保存されることも会話と一緒に残ることもないため、以降のリクエストで再送信されることはありません。

ドキュメントを添付する

企画書、リサーチメモ、デザイン課題、前四半期の数字など、ドキュメントを添付すると Vibr はそれをもとにデザインします。入力欄の下の + から ファイルを追加 を選ぶか、入力欄に貼り付けまたはドロップしてください。1 回のリクエストにつき 3 件まで添付できます。

• PDF
• Word、PowerPoint、Excel（.docx、.pptx、.xlsx）
• CSV、TSV、Markdown、プレーンテキスト

Google ドキュメント、スライド、スプレッドシートは、先にいずれかの形式でダウンロードしてください（ファイル、ダウンロード）。

Vibr は各ドキュメントをブラウザ内で読み込みます。モデルが受け取るのはテキスト（スライドの発表者ノートや、表形式にしたスプレッドシートの行を含む）と、一部の画像（PDF の最初のページや、Word ファイル・スライドの最初の画像）です。1 回のリクエストで送られるテキストは 30,000 文字までで、それを超えると切り詰められ、チップにそう表示されます。ドキュメントのチップを選ぶと、送信される内容をそのまま確認でき、画像をライブラリに保存することもできます。 以降のリクエストでもドキュメントを使うには、プレビューで ライブラリに保存 を選び、@doc でメンションします。

ドキュメントは読み込む前にチェックされます。マクロを実行できるファイル（.docm、.pptm、.xlsm、またはマクロプロジェクトを隠したドキュメント）、展開するとサイズをはるかに超えるアーカイブ、パスワードで保護された PDF は受け付けません。ドキュメント内のものは何も実行されません。スクリプト、リンク、フォームフィールド、数式、埋め込みオブジェクトは無視され、スプレッドシートのセルは保存された値として読み込まれます。テキストには入力内容と同じクリーニングとチェックが、画像には参考画像と同じチェックが行われ、モデルにはドキュメントを指示ではなくデザインの素材として扱うよう伝えます。

ドキュメントはそのリクエストにのみ添付されます。ライブラリに保存されることも、会話と一緒に残ることもありません。

作成したものを修正する

下書きができると、入力欄には「改善点や追加するセクションを入力…」と表示されます。リクエストのたびにキャンバス上の下書きが修正され、新しいバージョンになるため、いつでも元に戻せます。例：

• 「Proプランを目立たせて、FAQを追加して」
• 「デスクトップでは2カラムのレイアウトにして」
• 「スマートフォンではテーブルをカードに置き換えて」

新しいバージョンが書かれている間も現在の下書きはキャンバスに残り、新しいバージョンが描画できる程度まで準備できると、キャンバスが切り替わります。

一部分だけを変更する

ほかの部分に影響を与えずに1つの要素を変更するには：

1. ［要素を選択］（キャンバスの上にあるポインターのアイコン）を選択します。
2. 変更したい部分をクリックします。入力欄の上のチップに、選択した要素とコード内の位置が表示されます。
3. 変更内容を説明します。「これ」「ここ」「それ」などの言葉は、その要素を指します。

Escを押すと選択を終了します。チップの［×］を選択すると選択が解除されます。

ページ上で要素が繰り返されている場合（リストのカードや、各料金プランの見出しなど）、チップの下に選択肢が表示されます。［これだけ］はクリックしたコピーだけを変更し、［N 個すべて］はすべてのコピーを変更します。既定は「これだけ」です。キャンバスでは変更されるコピーが枠で示されます。

複数の部分をまとめて変更する

Shift を押しながら別の要素をクリックすると、最大 8 個まで 1 回のリクエストでまとめて変更できます。ワークスペースではそれぞれに番号が付き、チップに一覧が表示されます。そのうえで「これらをそろえて」「同じ余白にして」のように、関係を説明します。選択済みの要素をもう一度 Shift+クリックすると外れます。

タッチスクリーンでは、チップの［追加］を選んでから要素をタップします。キーボードでは、フォーカスのある要素で Shift+Enter を押します。追加した要素は、選んだコピーだけが対象です。選択済みの要素の内側にある要素はすでに含まれているため、重ねて追加されません。

@でアセットをメンションする

入力欄で@を入力するか［@］ボタンを選択すると、ライブラリのアイテムをリクエストに取り込めます。入力に合わせて一覧が表示されます。↑と↓で選び、EnterまたはTabで追加します。

メンション	取り込まれるもの
@image/name	インポートした画像、またはUnsplashから保存した画像。
@video/name	インポートした動画、またはPixabayから保存した動画。
@theme/name	ライトモードとダークモードを含むカラーテーマ。
@type/ramp/style	タイプランプの文字スタイル（例：@type/georgia/h1）。
@icon/name	組み込みのLucideアイコン、またはインポートしたアイコンフォントのアイコン（@icon/set/name）。
@screen/name	リンク先にする保存済みのプロトタイプ。フローをご覧ください。
@chart/kind	@chart/donutなど、グラフライブラリで作るグラフの種類。グラフと表をご覧ください。
@table/feature	@table/sortableなど、表ライブラリで作る表の機能。

リクエスト内のメンションは、入力欄の下にチップとして表示されます。名前がライブラリにない場合はチップが赤くなり、Vibrはそのメンションを除外します。アセットの追加方法については、画像、動画、ドキュメント、テーマ、タイプ、アイコンをご覧ください。

より良い結果を得るコツ

• 1回のリクエストで1画面。 まずページを構築してから、内容を追加していきます。非常に大きなリクエストはモデルの出力上限に達することがあります。その場合は、1メッセージにつき1セクションずつ依頼してください。
• 部分に名前を付ける。 「上のほう」よりも「プランカード」や「ヘッダー」のほうが、的確に対応できます。
• 適切なツールを使う。 1つの要素を変えるなら、その要素を選択します。残しておきたいメモは、注釈としてピン留めします。