关于 Vibe Design System
Vibe Design System 是 monday.com 官方提供的 React.js 应用界面资源，包含组件库、样式令牌和设计指南。它面向使用 React 构建 monday.com 风格应用的开发者，并提供可供 AI 开发工具调用的 MCP 服务。
主要功能
- 01@vibe/core 组件库与样式令牌
- 02@vibe/icons 图标库
- 03@vibe/testkit Playwright 测试工具
- 04@vibe/codemod 代码迁移与命令行工具
- 05内置 MCP 服务，可查询组件 API 与用法示例
适用场景
- 01在 React 项目中使用官方组件构建界面
- 02通过 AI 开发工具查询 Vibe 组件 API 并获取示例
- 03使用 codemod 将代码迁移到新版本
MCP 相关
该项目包含一个 MCP 服务（@vibe/mcp），可帮助 AI 开发工具查找组件 API、用法示例和合适的图标。
配置
本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。
我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。
工具
本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。
详细介绍
Vibe Design System
monday.com 官方 UI 资源，用于使用 React.js 开发应用程序
文档 • 目录 • Playground
概述
Vibe Design System 是一组软件包，旨在通过提供一套用于构建 React.js 应用程序的组件、样式和指南，简化开发流程并提升用户体验。
安装
npm install @vibe/core
# or
yarn add @vibe/core
要加载所有相关 CSS 令牌，请在应用程序的根文件中导入令牌文件：
import "@vibe/core/tokens";
使用方法
从库的根入口导入组件：
import { Button } from "@vibe/core";
MCP
Vibe 包含一个 MCP（Model Context Protocol）服务，可为使用 Vibe 组件提供智能辅助。该 MCP 服务可以帮助你了解组件 API、获取使用示例、查找合适的图标，并遵循最佳实践。
要开始使用，请按照 @vibe/mcp 文档中的安装说明，在你偏好的 AI 开发工具中集成该服务。
生态系统
- @vibe/core：核心组件库
- @vibe/icons：图标库
- @vibe/testkit：Playwright 测试工具
- @vibe/codemod：Codemod 和命令行工具
- @vibe/style：样式基础（包含在 @vibe/core 中）
- vibe-storybook-components：Vibe Storybook Blocks
- storybook-addon-playground：适用于 Storybook 的组件 Playground 插件
- @vibe/mcp：Vibe Design System 的 MCP 服务
较早版本
Vibe 3（@vibe/core v3）将不再获得新功能或增强，但会根据需要继续获得关键错误修复。我们强烈建议参阅迁移指南，升级到积极维护的 Vibe 4。Vibe 4 包含最新改进、新组件，并持续获得支持。有关版本 3 的文档，请参阅 vibe.monday.com/v3。
Vibe 2（monday-ui-react-core）已停止维护。有关版本 2 的文档，请参阅 vibe.monday.com/v2。
参与贡献
欢迎并鼓励每一位贡献者！请阅读我们的贡献指南。
建议
如果你有任何问题或建议，欢迎随时发起讨论。
发现了 Bug？请提交问题。
评论
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。