概览

Vibr 是面向设计师的原型工具。你用平实的语言描述一个界面，智能体就会进行规划，用你选择的设计系统构建出来，检查能否正常渲染，审查无障碍和布局问题，并修复发现的问题。生成的结果是真实的 React 代码，你可以点击浏览、修改、添加批注、链接成流程并导出。

工作原理

1. 准备密钥。 Vibr 使用你自己的 API 密钥调用 Google Gemini、OpenAI、Anthropic 或 OpenRouter。密钥只保存在你的浏览器中。
2. 选择设计系统。 Material UI、Ant Design、Fluent UI、Mantine、Shoelace、Octuple，或 npm 上的任意包。
3. 描述界面。 Vibr 会在工作时显示每个步骤，画布会在代码编写过程中就开始绘制界面。
4. 继续完善。 提出修改要求，指定某个元素只修改该部分，比较版本，标记反馈，并保存到资源库。

与众不同之处

• 真实组件，而非仿制品。 草稿直接从设计系统的真实包中导入组件，你看到的就是工程师会交付的内容。
• 自动检查自身成果。 每份草稿在呈现给你之前，都会先渲染，再在桌面、平板和手机宽度下通过自动化无障碍检查进行审查。
• 资源库随你使用。 你添加的图片、视频、颜色主题、字体层级和图标，都可以通过 @ 引用放入任意请求中。
• 无需账户，没有服务器。 一切都在你的浏览器中运行。请参阅密钥、隐私与存储。

下一步

• 初次使用？从快速入门开始。
• 想获得更好的结果？阅读编写提示词。
• 想了解各个步骤的含义？请参阅运行过程详解。
• 遇到问题？查看故障排除。