入门
快速入门
添加密钥，选择设计系统和模型，几分钟内即可构建你的第一个界面。
开始之前
你需要以下任一服务商的 API 密钥。每家都提供免费或低成本的试用方式。
- Google Gemini： 在 Google AI Studio 获取密钥。免费层级的密钥可用于 Flash 模型；Pro 模型需要开通结算。
- OpenAI： 在 OpenAI 控制台中创建密钥。
- Anthropic： 在 Anthropic Console 中创建密钥。
使用付费账户时，一份草稿通常只需几美分。密钥对话框会显示所选模型的费用范围。
还没有密钥？先试试示例
首次访问时，欢迎页提供无需密钥，先试试示例。它会把三个完成的原型加入你的库并打开第一个：一个咖啡馆首页、它的菜单页和一个运营仪表板。所有不调用模型的功能都能使用，包括选择元素、比较版本、所有尺寸、测量、备注、播放和导出。要通过请求修改示例，请添加密钥。之后，在保存密钥之前，密钥对话框里也会提供打开一个示例。
添加密钥
- 在顶栏的 AI 服务商 选择器中选择你的服务商。
- 点击 添加密钥。对话框中会显示你所选服务商的名称。
- 粘贴密钥，然后点击 保存密钥。按钮会变为 已设置密钥。
Vibr 会在保存前检查你粘贴的内容。它能发现常见的混淆情况，例如粘贴的是密钥 ID 而不是密钥值、来自其他服务商的密钥、Anthropic Admin 密钥或多余的空格，并告诉你该如何修正。你可以为每个服务商（Gemini、OpenAI 和 Anthropic）各保存一个密钥，并随时切换；同一服务商的所有模型都使用该服务商的密钥。要设置另一个密钥，请选择对应的服务商，然后再次点击 添加密钥。移除此密钥 只会移除当前服务商的密钥。清除所有密钥 会从此浏览器中移除所有已保存的密钥。
选择设计系统和模型
- 设计系统 决定每份草稿所用的组件库。更改设计系统会开始新的会话，因为草稿无法中途切换组件库。完整列表以及如何使用你自己的 npm 包，请参阅设计系统和模型。
- AI 服务商 和 模型 决定由谁来构建草稿。每个服务商都有合理的默认模型，Vibr 会在此浏览器中记住你的选择。
以你的语言使用 Vibr
如果你的浏览器语言是以下语言之一，Vibr 会以该语言打开：英语、阿拉伯语、简体中文、荷兰语、法语、德语、希伯来语、意大利语、日语、韩语、葡萄牙语（巴西）和西班牙语。否则会以英语打开。要自行选择语言，请使用顶栏中的 界面语言 按钮（地球图标）。在手机上，该按钮位于设计系统下方的设置中。选择 自动（跟随浏览器语言） 即可重新跟随浏览器语言。
在阿拉伯语和希伯来语中，Vibr 从右到左显示：布局会镜像翻转，箭头也会指向相反方向。这只会改变 Vibr 本身。要以其他语言查看你的草稿，请使用画布上的以其他语言预览。文档也提供相同的语言：可使用任意文档页面顶部的语言菜单切换。
构建你的第一个界面
在对话底部的输入框中输入你想要的内容，或选择一个示例，例如“一个包含三档套餐和按年付费切换开关的定价页面”。按 Enter 或点击 发送。
对话会实时显示每个步骤，画布会在界面仍在编写时就开始绘制。大多数界面不到一分钟即可完成。
