vibe

用 monday.com 官方组件，快速搭出统一好看的后台界面

开源 🏷️完全免费 ⚠️ 链接可跳转，访问体验不确定 设计创意 🍴 复刻 365 🐛 待处理 47 👀 关注 18
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 692
维护状态 活跃
是否开源 开源
定价模式 🏷️完全免费 开源免费使用

项目预览

vibe 项目界面预览图
图片来源：项目官网

项目数据

分类设计创意
开发团队mondaycom
官网地址https://vibe.monday.com
GitHubhttps://github.com/mondaycom/vibe
定价模式🏷️完全免费
价格说明开源免费使用
访问状态⚠️ 链接可跳转，访问体验不确定
是否开源是
主要语言TypeScript
技术栈/模型codemod,component-library,design-system,hacktoberfest,icons,javascript,js,llm,mcp,mcp-server,monday,react,reactjs,tsx,typescript,ui,ui-components,ui-library,vibe,vibe-coding
GitHub 星标★ 692
上线时间2020-10-06 00:00:00
代码更新2026-11-02
仓库体积292.0 MB
本站数据更新2026-11-03
维护状态活跃
收录时间2026-09-16
浏览次数2

项目介绍

Vibe 是 monday.com 官方开源的 React UI 设计系统，为开发者提供构建企业级应用所需的完整组件与资源。它解决的核心问题是：团队在开发内部工具或 SaaS 产品时，往往需要从零搭建按钮、表单、弹窗、图标等基础 UI，既耗时又难以保证视觉一致性。Vibe 将 monday.com 产品中沉淀的交互规范封装成可复用组件，覆盖基础控件、布局、数据展示、反馈提示等场景，并配套图标库、设计令牌与主题能力。项目使用 TypeScript 编写，类型友好，支持按需引入。近期还加入了 codemod 迁移工具以及面向 LLM 和 MCP 的适配，方便 AI 辅助开发时直接调用组件知识。整体定位偏向中后台与协作类产品，适合希望快速获得成熟设计语言、又不想被商业组件库绑定的团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-09-16 · 当前星标 ★ 692

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：进阶 约 30 分钟 部署方式：本地安装 4 步

环境要求

  • React 18+
  • Node.js 18+

安装与启动步骤

  1. 1安装组件库

    monday.com 官方的 React UI 资源，按包管理器选一条。

    npm install @vibe/core

  2. 2或用 yarn

    团队统一用 yarn 时走这条，锁文件别和 npm 混。

    yarn add @vibe/core

  3. 3引入主题与样式

    组件依赖主题变量，只引组件不引主题会显示成无样式状态。

  4. 4对照示例搭页面

    先用官方示例确认渲染正常，再往业务里搬。

如何确认成功

页面渲染出官方组件且样式正确

注意事项

  • 这是面向应用开发的 UI 资源，不是完整产品。
  • 版本升级常伴随 API 调整，锁版本更稳。

核心亮点

  • 由 monday.com 官方维护，组件经过真实产品验证，视觉与交互规范成熟
  • TypeScript 编写，类型定义完整，React 项目接入成本低
  • 提供图标、设计令牌、codemod 迁移及 MCP/LLM 适配，配套资源较全

不足之处

  • 组件风格与 monday.com 品牌绑定较深，深度定制需覆盖较多样式
  • 社区生态和第三方教程数量相比主流组件库仍偏少

适用场景

  • 开发 SaaS 后台或内部管理系统的 UI 层
  • 需要统一设计语言的多团队协作前端项目
  • 借助 LLM/MCP 快速生成符合规范的 React 界面

替代项目

Ant Design、Material UI、Chakra UI

上一篇：tool-ui

下一篇：Fabric

同类项目推荐

nodeo 开源

让 TouchDesigner 媒体播放像点按钮一样简单

An intuitive TouchDesigner media server application

★ 86 2026-08-09
subjective-zero 开源

用AI和节点图，实时打造视觉特效，无需手写复杂代码。

The agentic node editor for live visual effects

★ 75 2026-08-09
shaders 开源

一行组件接入 WebGPU 炫酷着色器效果

WebGPU components for React, Vue, Svelte, Solid, JS & Framer

★ 5806 2026-10-22
openflowkit 开源

说句话或贴段代码，本地秒出架构图与流程图

Free, open-source diagram canvas. Draw it, write it as code (Mermaid, D2, Structuriz···

★ 925 2026-10-08
simple-ai 开源

复制粘贴即用的 AI 界面组件，快速搭出好看对话产品

A collection of beautifully designed AI interface components that you can copy and p···

★ 755 2026-10-08
CreativeCodingExamples 开源

用代码画艺术，从示例秒变创意编程玩家

A collection of Creative Coding examples by me & other artists. We've used Jetpack C···

★ 101 2026-08-09
desert 开源

快速生成随机艺术图案，几行代码出图

A fast (?) random sampling drawing library

★ 67 2026-08-09
q5.js 开源

用 WebGPU 轻松画交互艺术，小白也能秒上手

Beginner friendly graphics powered by WebGPU, optimized for interactive art!

★ 425 2026-08-09
melta-ui 开源

让 Claude Code 和 Cursor 看懂组件，生成界面少返工

人間にも、AIにも、読めるデザインシステム — AI-Ready Design System for Claude Code &···

★ 202 2026-10-08