画像、動画、ドキュメント、テーマ、タイプ、アイコン

これらのライブラリのタブにあるものは、すべて@メンションでリクエストに取り込めます。アイテムを選択してメンションをコピーし、［プロンプトに追加］を選択するか、入力欄で@を入力して一覧から選びます。ライブラリにファイルをドロップするか、入力欄の下の + から ライブラリに追加 を選んで追加することもできます。

画像

• マイ画像： ［インポート］を選択するか、PNG、JPEG、WebP、GIF、AVIF、SVGファイルをドロップします。各画像には、@image/storefrontのように、ファイル名からメンションが付けられます。
• Unsplashから： 写真を検索したり、形状や色で絞り込んだり、［シャッフル］を選択したりできます。写真のメンションをコピーするとマイ画像に保存されるため、メンションは引き続き機能します。すべての写真に写真家のクレジットが表示されます。Unsplash の写真が表示される場所（ライブラリ、キャンバス、エクスポートしたアプリ）では、写真家の Unsplash プロフィールと Unsplash へのリンク付きで「Unsplash の 名前 による写真」と表示されます。
• 画像を選択すると拡大表示されます。そこから、メンションのコピー、リクエストへの追加、ダウンロード、メンション名と代替テキストの編集ができます。複数の画像をまとめて削除またはエクスポートするには、［選択］を使います。

画像をメンションすると、Vibrはその画像のサイズ、形状、代替テキストをモデルに伝え、実際の画像を下書きに配置します。

画像を追加すると、Vibr はカメラ情報、位置情報、コメントなどのメタデータを取り除き、画像そのものは変更しません。SVG は描画部分だけが残ります。スクリプトやリンクなど、実行されたりほかのサイトから読み込まれたりする可能性のあるものは取り除かれ、Illustrator や Inkscape が書き出すようにスタイルで指定された色はそのまま保たれます。Unsplash の写真は Unsplash が提供するままの状態で使われます。ほかのウェブサイトの画像はキャンバスに読み込まれないため、ライブラリに追加してメンションしてください。

動画

• マイ動画： ［インポート］を選択するか、100 MB までの MP4、MOV、WebM ファイルをドロップします。各動画には、@video/latte-pourのように、ファイル名からメンションが付けられます。また、約1秒の位置のフレームがポスターになります。
• Pixabayから： 動画を検索します。動画のメンションをコピーするとマイ動画に保存されるため、メンションは引き続き機能します。すべての Pixabay の動画に制作者のクレジットが表示されます。動画が表示される場所（ライブラリ、キャンバス、エクスポートしたアプリ）では、制作者の Pixabay プロフィールと Pixabay へのリンク付きで「Pixabay の 名前 による動画」と表示されます。
• 動画を選択すると再生されます。そこから、メンションのコピー、リクエストへの追加、ダウンロード、メンション名と説明の編集ができます。複数の動画をまとめて削除またはエクスポートするには、［選択］を使います。

動画をメンションすると、Vibrはその動画のサイズ、形状、長さ、説明をモデルに伝え、実際の動画を下書きに配置します。下書きでは、動画はミュートのままループ再生され、ポスターが表示されます。デバイスで視差効果を減らす設定をしている人には、自動では再生されません。

動画を追加すると、Vibr は MP4 や MOV ファイルから位置情報や撮影したデバイスなどのメタデータを取り除き、映像と音声は変更しません。いくつかのフレームは、画像と同じくデバイス上でチェックされます。Pixabay の動画は Pixabay が提供するままの状態で使われます。

エクスポートしたアプリには動画も含まれます。アップロードした動画は 25 MB まで1つのページに収まります。それを超えると、［アプリ（.html）］はページとその横のvideosフォルダーを含む zip をダウンロードします。

ドキュメント

企画書、リサーチメモ、デザイン課題をここに保存し、@doc/ordering-app-brief のようなメンションで任意のリクエストに取り込めます。

• ドキュメントを追加する： インポート を選ぶか、ライブラリにファイルをドロップするか、添付したドキュメントのプレビューで ライブラリに保存 を選びます。ドキュメントを添付すると同じく、PDF、Word、PowerPoint、Excel、CSV、Markdown、テキストを使えます。
• 保存されるもの： Vibr が読み取ったテキストと最大2枚の画像だけで、ファイル自体は保存しないため、あとから何かが実行されることはありません。添付するときと同じチェックが行われます。
• 使い方： @doc/名前 をメンションしたリクエストには、そのドキュメントのテキストと画像が添付と同じように送られます。以降のリクエストでは、メンションしない限り再送信されません。
• プレビュー、名前変更、削除 は各ドキュメントのボタンで行います。名前を変えるとメンションも変わります。

エクスポートしたライブラリやプロトタイプファイルには、使っているドキュメントも含まれ、インポート時にテキストと画像が再度チェックされます。

テーマ

テーマは、色、角丸、余白、影をまとめたもので、ライトモードとダークモードはWCAGのコントラスト基準を満たします。

• ［新規テーマ］でエディターが開きます。プライマリとニュートラルの色（必要に応じてsuccess、warning、danger、infoも）、コントラストのレベル（AAまたはAAA）、角丸、余白の単位、影のスタイルを選びます。
• ［トークンをインポート］では、W3CデザイントークンのJSON（Tokens Studio for FigmaやStyle Dictionaryなど）、またはCSSカスタムプロパティを取り込めます。
• 各テーマには、すべての色の組み合わせが両方のモードでコントラストのレベルを満たしているかが表示されます。
• テーマの［⋯］メニューでは、編集、複製、CSSやトークンのコピー、削除ができます。

テーマは@theme/defaultのようにメンションします。テーマを使った下書きでは、キャンバスに［ダークモード］ボタンが表示されます。

タイプランプ

• ［フォントファミリーをインポート］では、WOFF2、WOFF、TTF、OTFファイルからフォントを追加し、そのランプを作成します。
• ［新規ランプ］では、Georgiaなど、すでに使用しているフォントのランプを作成します。
• 新しいランプには、Display、Heading 1～3、Body、Captionの6つのスタイルがあります。［ランプを編集］では、サイズ、ウェイト、行の高さ、字間を変更したり、スタイルを追加したりできます。

スタイルは@type/georgia/h1のようにメンションします。

アイコン

• Lucide のアイコンは組み込み済みです。アイコンを検索して選択すると、@icon/arrow-rightのようなメンションをコピーできます。コピーした後、SVGとしてダウンロードすることもできます。
• ［アイコンフォントをインポート］では、CSS、IcoMoonのselection.json、Fontelloのconfig.jsonのいずれかとともに、独自のセットを追加できます。Material Symbolsのような合字フォントは単体で使用できます。インポートしたアイコンは@icon/set/nameでメンションします。