Vibr MCP

Vibr MCP 是一个在你的电脑上运行的小型服务器。它让 Claude Code、Cursor 或 Claude Desktop 等智能体可以使用 Vibr：列出你的原型、构建和修改界面、导入 Figma 文件、以设计令牌形式读取你的主题，以及将原型导出到你的项目中。

你的资源库和密钥保存在浏览器中，因此工作在你连接的 Vibr 标签页中进行。智能体提出请求，标签页使用你的设计系统和模型密钥完成工作，和你自己输入请求时一样。

设置

你需要 Node 20 或更高版本。在 Claude Code 中添加一次服务器即可：

claude mcp add vibr -- npx -y vibr-mcp

其他 MCP 客户端在其设置文件中使用相同的命令：

{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }

连接标签页

1. 让你的智能体连接到 Vibr。它会给你一个链接，指向服务器在你自己电脑上显示的页面。
2. 在你使用 Vibr 的浏览器中打开该链接，然后选择 Open Vibr。Vibr 会在单独的窗口中打开，并带有你的资源库和密钥。如果 Vibr 还没有密钥，请在那里添加一个。
3. Vibr 会询问是否允许这台电脑上的 MCP 在该窗口中工作。选择 允许。
4. 窗口底部会显示 MCP 已连接。随时选择 断开连接 即可结束连接。

智能体工作时，请保持服务器的页面和 Vibr 窗口打开。每个链接只适用于服务器的一次会话；服务器重启后，请索取新的链接。

功能

• 列出和读取。 你保存的原型、某个原型的代码和请求、资源库中可引用的内容，以及标签页的设置（服务商、模型、设计系统，绝不包括你的密钥）。
• 构建。 让请求依次经过“规划”“构建”“检查”“审查”和“修复”，生成新原型或现有原型的修订版，并保存到你的资源库。它使用你的密钥，因此费用与在 Vibr 中发出同样的请求相同。
• 从 Figma 导入。 导入来自 Send to Vibr 插件的 .vibr-figma.json 文件，并将其中的画框构建为相互链接的界面。请参阅从 Figma 导入。
• 读取主题。 以 CSS 自定义属性或设计令牌的形式读取主题，包括其浅色和深色角色。
• 导出。 将原型写入文件夹，形式可以是单个页面、相互链接的流程或其 React 源代码。除非你明确要求，它绝不会替换文件，也绝不会写入你指定的文件夹之外。

隐私与安全

• 你的密钥绝不会离开标签页。服务器永远看不到它们，请求和往常一样从标签页发送到你的模型服务商。
• 服务器只在 127.0.0.1 上监听。它通过你浏览器中它自己的页面把任务交给 Vibr，因此 vibr.art 从不连接你的电脑。
• Vibr 只接收来自打开它的那个页面的任务，只在带有服务器链接中的随机一次性代码时接收，并且只在你选择 允许 之后接收。
• 资源库中的内容以数据形式传给智能体：原型中的文字或导入的文件无法向你的智能体下达指令，除非你的智能体把它当作指令。因此，请像审阅任何草稿一样审阅它构建的内容。

更多信息请参阅密钥、隐私与存储。

配置项

• VIBR_MCP_PORT：你电脑上的端口（4517，除非该端口已被占用）。
• VIBR_MCP_APP：链接打开的 Vibr 页面（https://vibr.art/，除非你自行运行 Vibr）。

故障排除

• Vibr 始终无法连接。 请检查你是否已在 Vibr 窗口中选择 允许，以及服务器的页面是否仍然打开。如果浏览器拦截了该窗口，请允许该页面弹出窗口，然后再次选择 Open Vibr。
• 智能体提示没有已连接的标签页。 服务器已重启，或某个窗口已关闭。请索取新的链接并打开它。
• 构建失败。 打开 Vibr 窗口：运行过程会显示每个步骤，与你输入请求时相同。