vibe
monday.com官方React UI组件库与设计系统
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：vibe。 它的用途是：monday.com官方React UI组件库与设计系统 详细介绍见：https://321skill.com/skills/vibe-mondaycom/ 请根据该页面的说明完成安装。
使用示例
'我正在用Vibe的Button组件，但不确定如何正确设置loading状态和图标。'，它会通过集成的MCP服务器，快速提供该组件的相关API文档、代码示例以及与其他组件（如Tooltip）配合使用的最佳实践。或者，当你问：'帮我用Vibe组件搭建一个数据筛选面板'，AI可以基于Vibe的设计规范，生成包含Search、Dropdown、Chip等组件的结构代码。
介绍
Vibe Design System 是 monday.com 官方推出的设计系统，旨在解决团队在构建 React.js 应用时面临的UI组件不一致、开发效率低下和设计规范难以落地的问题。它提供了一套经过生产环境验证的、高质量的React组件、样式令牌和设计指南，帮助开发者快速构建具有统一品牌体验的现代化应用。
使用上，开发者可以通过 npm 安装核心包，并导入所需的组件。系统还提供了详尽的在线文档、组件目录和交互式Playground，方便查阅和学习。更重要的是，Vibe 集成了 MCP (Model Context Protocol) 服务器，这意味着开发者可以在其AI开发工具（如Cursor、Claude Desktop）中直接获得关于Vibe组件的智能辅助，包括API查询、使用示例和最佳实践建议。
该Skill非常适合需要快速构建企业级React应用的前端开发、全栈开发团队，以及希望统一产品设计语言和开发规范的UI设计师与产品经理。对于在monday.com生态内进行二次开发的团队来说，Vibe更是确保体验一致性的不二之选。
建议新项目直接使用最新的Vibe 4版本，以获得完整的功能和持续支持。对于现有项目，官方提供了详细的迁移指南。虽然Vibe 3仍会收到关键修复，但已不再增加新功能。
核心特点
与通用UI库（如Ant Design、MUI）相比，Vibe是专为monday.com平台及其生态系统深度定制的设计系统，确保了与平台的无缝集成和体验一致性。其集成的MCP服务器提供了独特的AI原生开发体验，能直接在编码环境中智能辅助组件使用，这是大多数传统UI库不具备的能力。
注意事项
该Skill主要服务于React技术栈和monday.com生态，对于非React项目或希望完全自定义设计语言的团队可能不是最佳选择。
常见问题
Vibe Design System 和 monday-ui-react-core 是什么关系？
monday-ui-react-core 是 Vibe Design System 的旧版本（Vibe 2），现已停止维护。新项目应使用 @vibe/core（Vibe 4）。
如何在AI编码助手（如Cursor）中使用Vibe的MCP功能？
需要按照 @vibe/mcp 包的文档进行配置，将其MCP服务器添加到你的AI开发工具中，之后即可在编码时获得关于Vibe组件的智能建议。