图片、视频、文档、主题、字体与图标

这些资源库标签页中的所有内容都可以通过 @ 引用放入请求中。点击某一项即可复制其引用，然后点击 添加到提示词；也可以在输入框中输入 @，从列表中选择。你还可以将文件拖到资源库中来添加，或者选择输入框下方的 +，然后选择添加到资源库。

图片

• 你的图片： 点击 导入，或拖入 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，并以大约第一秒处的画面作为封面帧。
• 来自 Pixabay： 搜索视频。复制视频的引用会将其保存到你的视频中，确保引用持续有效。每个 Pixabay 视频都会注明创作者：无论出现在哪里（资源库、画布和导出的应用），都会显示“视频由 姓名 发布于 Pixabay”，并链接到创作者的 Pixabay 主页和 Pixabay。
• 点击视频即可播放。在这里，你可以复制其引用、将其添加到请求、下载视频，或编辑其引用名称和描述。使用 选择 可一次删除或导出多个视频。

当你引用一个视频时，Vibr 会将视频的尺寸、形状、时长和描述告诉模型，并在草稿中放入真实的视频。草稿中的视频以静音、循环方式播放并带有封面；如果用户在设备上开启了减少动态效果，视频不会自动播放。

添加视频时，Vibr 会移除 MP4 或 MOV 文件的元数据，例如拍摄位置和拍摄设备，画面和声音保持不变。部分帧会经过与图片相同的设备端检查。Pixabay 视频完全保持 Pixabay 提供时的样子。

导出的应用会带上你的视频。上传的视频在 25 MB 以内时可放入单个页面；超过后，应用（.html） 会下载一个压缩包，其中包含页面及旁边的 videos 文件夹。

文档

在这里保存简报、研究笔记和设计挑战，并通过引用把任意一个带入请求，例如 @doc/ordering-app-brief。

• 添加文档： 选择导入，将文件拖放到资源库，或在附加文档的预览中选择保存到资源库。与附加文档一样，支持 PDF、Word、PowerPoint、Excel、CSV、Markdown 和文本。
• 保存的内容： 只保存 Vibr 读取的文本和最多两张图片，从不保存文件本身，因此以后不会有任何内容被运行。检查方式与附加文档时相同。
• 使用方法： 引用 @doc/名称 的请求会像附件一样附带该文档的文本和图片。之后的请求除非再次引用，否则不会再次发送。
• 预览、重命名和删除：使用每个文档上的按钮。重命名会改变它的引用。

导出的资源库和原型文件会带上它们使用的文档，导入时会重新检查文本和图片。

主题

主题是一组颜色、圆角半径、间距和阴影，其浅色和深色模式均符合 WCAG 对比度要求。

• 新建主题 会打开编辑器。选择一个主色和一个中性色（如有需要，还可以添加成功、警告、危险和信息色），以及对比度等级（AA 或 AAA）、圆角半径、间距单位和阴影样式。
• 导入令牌 可导入 W3C 设计令牌 JSON（例如来自 Figma 的 Tokens Studio 或 Style Dictionary），或 CSS 自定义属性。
• 每个主题都会显示每组颜色配对在两种模式下是否达到所选对比度等级。
• 主题的 ⋯ 菜单可以编辑、创建副本、复制其 CSS 或令牌，或删除主题。

引用主题的方式为 @theme/default。使用主题的草稿会在画布上显示 深色模式 按钮。

字体层级

• 导入字体系列 会从 WOFF2、WOFF、TTF 或 OTF 文件中添加字体，并为其生成一套字体层级。
• 新建字体层级 会为你已在使用的字体（例如 Georgia）生成一套字体层级。
• 新的字体层级包含六个样式：Display、Heading 1 至 3、Body 和 Caption。编辑字体层级 可以更改字号、字重、行高和字距，或添加样式。

引用样式的方式为 @type/georgia/h1。

图标

• Lucide 图标为内置图标。搜索图标并点击即可复制其引用，例如 @icon/arrow-right。复制后，你还可以将其下载为 SVG。
• 导入图标字体 可添加你自己的图标集，需附带其 CSS、IcoMoon selection.json 或 Fontello config.json。Material Symbols 等连字字体可单独导入。导入的图标使用 @icon/set/name 引用。