mondaycom/vibe · 上手攻略

• 仓库：mondaycom/vibe
• 链接：https://github.com/mondaycom/vibe
• 分类：skill（设计系统 · React 组件库）
• 作者：Tom
• 更新：2026-08-27

是什么

Vibe Design System 是 monday.com 官方开源的 React.js UI 组件库，为在 monday.com 平台上或基于 monday.com API 开发应用的开发者提供设计规范和 UI 组件。当前活跃维护版本为 Vibe 4（@vibe/core v4），Vibe 3 处于维护状态（仅修 bug），Vibe 2 已停止维护。

GitHub Stars：672（数据截至 2026-08，工作队列标记）。

解决什么问题

如果你是 monday.com App 开发（即用 monday.com API 构建的第三方应用）或者想基于 monday.com 视觉风格构建企业内部工具，你需要：

• 与 monday.com 主平台一致的 UI 组件（按钮、表单、表格、弹窗等）
• 完整的设计 token（颜色、间距、字体）
• 可直接复制粘贴的代码示例和 Storybook Playground
• 以及一个 MCP 服务器（@vibe/mcp），让 AI 编码工具（Cursor、Windsurf、Claude Code 等）能直接查询组件 API 和用法

Vibe 就是这一整套资源的合集。

快速安装

# 安装核心组件库
npm install @vibe/core
# 或
yarn add @vibe/core

# 安装 icons（可选）
npm install @vibe/icons

# 安装测试工具包（Playwright，可选）
npm install @vibe/testkit

# 安装 codemod CLI（升级迁移用，可选）
npm install @vibe/codemod

安装后，在应用入口文件加载设计 token：

import "@vibe/core/tokens"; // 加载 CSS 变量/tokens
import { Button } from "@vibe/core";

function App() {
  return <Button>Hello Vibe</Button>;
}

注意：Vibe 3 与 Vibe 4 存在 breaking changes，官方强烈建议从 Vibe 3 迁移到 Vibe 4，迁移指南见 https://vibe.monday.com/?path=/docs/migration-guide--docs

核心用法

1. 组件使用

Vibe 组件从 @vibe/core 根目录导入：

import { Button, Input, Modal, Table, Dialog } from "@vibe/core";

// 按钮
<Button onClick={handleClick}>Save</Button>
<Button kind="primary">Primary</Button>
<Button kind="tertiary">Tertiary</Button>
<Button size="small">Small</Button>

// 输入框
<Input placeholder="Enter text..." onChange={handleChange} />

// 弹窗
<Dialog title="Confirm">
  <p>Are you sure?</p>
</Dialog>

完整组件目录和示例见 Vibe Catalog。

2. Storybook Playground（快速试组件）

无需安装，在浏览器里直接试：https://vibe.monday.com/?path=/story/playground--playground

3. 设计 Token

Vibe 通过 CSS 变量提供设计 token，安装 @vibe/core/tokens 后即可在 CSS 中使用：

/* 颜色 */
--color-primary-color;   /* 主色 */
--color-success-color;   /* 成功绿 */
--color-error-color;     /* 错误红 */

/* 间距 */
--spacing-small;
--spacing-medium;
--spacing-large;

/* 圆角 */
--border-radius-small;
--border-radius-big;

4. Codemod（Vibe 3 → Vibe 4 迁移）

# 安装 codemod
npm install @vibe/codemod

# 在项目目录运行迁移
npx @vibe/codemod migrate <project-path>

5. MCP 服务器（AI 辅助开发）

@vibe/mcp 是 Vibe 提供的 MCP 服务器，让 AI 编码助手能查询组件 API、图标列表和最佳实践：

# 安装
npm install @vibe/mcp

# 具体配置见
# https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md

配置完成后，Cursor/Windsurf/Claude Code 等工具在编写 Vibe 组件代码时可获得 AI 实时提示。

6. Storybook 组件

Vibe 提供开箱即用的 Storybook 组件包：

npm install @vibe/storybook-blocks

典型适用场景

• monday.com App 开发：用 monday.com API 构建的第三方应用，使用 Vibe 可保持与主平台一致的视觉体验
• 企业内部工具：想复用 monday.com 风格设计的企业内部看板/Dashboard 开发
• AI + 前端开发：通过 @vibe/mcp 让 AI 编码工具更准确地写出 Vibe 组件代码，减少手动查文档时间
• 快速原型：Storybook Playground 无需安装即可预览组件效果，适合设计师/PM 快速确认样式

坑与注意

1. Vibe 3 已停止新功能开发：如果你现在从零开始，直接用 Vibe 4，避免浪费精力在不推荐的版本上。
2. 仅支持 React：Vibe 是 React 组件库，不支持 Vue/Angular/Svelte。
3. 需要设计规范对齐：Vibe 是 monday.com 的设计系统，不是通用组件库，如果你的产品风格与 monday.com 差异大，直接用可能会有违和感。
4. MCP 服务器需要额外配置：@vibe/mcp 的配置说明在 GitHub README 里链接较深，需仔细阅读 packages/mcp/README.md。
5. 组件数量有限：不是 Ant Design / Material UI 这种大型组件库，Vibe 主要覆盖 monday.com 核心场景（表格、弹窗、表单控件），复杂场景可能需要自己扩展。
6. Vibe 2 → Vibe 3 迁移路径不同：如果你还在用 Vibe 2（monday-ui-react-core），需要先迁移到 Vibe 3，再迁移到 Vibe 4，不是直接升级。

与同类对比

Vibe 的独特价值在于monday.com 嫡系设计语言 + MCP 辅助开发，如果你不做 monday.com 相关产品，它的吸引力会大打折扣。

一句话推荐结论

在 monday.com 平台上或用 monday.com API 构建应用时，Vibe 是保持 UI 一致性的首选；借助 @vibe/mcp，AI 编码助手能直接查询组件用法，省去反复翻文档的时间。

参考来源

• GitHub README：https://github.com/mondaycom/vibe
• Vibe 文档站：https://vibe.monday.com
• Vibe Catalog：https://vibe.monday.com/?path=/docs/catalog--docs
• Storybook Playground：https://vibe.monday.com/?path=/story/playground--playground
• Migration Guide（Vibe 3→4）：https://vibe.monday.com/?path=/docs/migration-guide--docs
• npm：https://www.npmjs.com/package/@vibe/core
• 开发者文档：https://developer.monday.com/apps/docs/vibe-design-system
• @vibe/mcp README：https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md

不确定处：npm 当前最新版本号需自行运行 npm view @vibe/core version 确认（npmjs.com 当时被 Cloudflare 拦截未能直接获取）。