设计系统和模型

内置设计系统

设计系统	类型	包
Material UI (MUI)	React	@mui/material@6、@mui/icons-material@6、Emotion
Ant Design	React	antd@5
Fluent UI React	React	@fluentui/react-components@9
Mantine	React	@mantine/core@7、@mantine/hooks@7
Shoelace	Web Components	@shoelace-style/shoelace@2
Octuple	React	@eightfold.ai/octuple@2

草稿会从这些包中导入真实组件（通过 CDN 加载），并使用 React 19 渲染。在构建之前，Vibr 会读取每个包实际导出了哪些组件，因此模型无法凭空编造不存在的组件。CDN 是 esm.sh。如果它停止响应，Vibr 会在本次访问的剩余时间改从备用来源（jsDelivr，或 Vibr 自己的 Fluent UI 副本）加载草稿，并告诉你。

更改设计系统会开始新的会话。请先保存你想保留的内容。

使用 npm 上的任意包

在 设计系统 选择器中选择 自定义 npm 包…，然后填写：

字段	填写内容	示例
包（含版本号）	包名和主版本号。	@radix-ui/themes@3
CSS 路径或 URL	可选。包的样式表（如有）。	@radix-ui/themes@3/styles.css
类型	React 或 Web Components。	React
注册模块	可选，适用于需要加载器来注册的 Web Components。	my-ds@1/dist/loader.js

Vibr 会在构建之前检查该包是否存在于 npm 上。如果包名或版本有误，它会告诉你。

在任何东西加载该包之前，Vibr 还会先检查它。版本范围会固定到发布至少 2 周的最新版本（例如字段中的 @radix-ui/themes@3 会变为 @radix-ui/themes@3.3.0），这样今天发布的有问题的版本不会被用上。被列为恶意软件的包永远不会加载。字段下方会提示已知的安全公告、已弃用的版本、发布不到 30 天或上周下载量不足 1,000 次的包，以及与热门包只差一两个字母的名称。这些检查使用 deps.dev、npm 和 OSV 的公开数据，只发送包的名称和版本。

如需同时选择图表库和表格库，请参阅图表和表格。

服务商和模型

服务商	模型	规划所用模型
Google Gemini	gemini-3.5-flash（默认）、gemini-3.7-flash、gemini-flash-latest、gemini-3.1-pro-preview	gemini-3.5-flash
OpenAI	gpt-5.5（默认）、gpt-5.4、gpt-5.4-mini	gpt-5.4-mini
Anthropic	claude-sonnet-5-5（默认）、claude-opus-5-5	claude-haiku-5-5
OpenRouter	anthropic/claude-sonnet-5.5（默认）、anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview	anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash

使用 OpenRouter，一个密钥即可调用 Claude、GPT 和 Gemini 模型。你也可以不粘贴密钥，而是在密钥对话框中选择 使用 OpenRouter 登录。OpenRouter 会创建一个仅供 Vibr 使用的密钥，你可以在 OpenRouter 账户中查看、限额和撤销它。

规划 步骤使用同一服务商的更快模型。如果你的密钥无法使用该模型，则改由你选择的模型进行规划。每个模型还有一个来自同一服务商的备用模型，会在其繁忙或配额用完时接替；请参阅运行过程详解。

Gemini 的免费层级可用于 Flash 模型。Pro 模型需要在 Google AI Studio 中开通结算。