BoardUI MCP服务器指南：让Claude Code和Cursor替你自动安装设计系统组件

【免费下载链接】boarduiReact design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.项目地址https://gitcode.com/gh_mirrors/boa/boardui点击查看免费下载BoardUI 是一套面向 AI 产品Agentic Interfaces的 React 设计系统而这个 BoardUI MCP 服务器就是让 Claude Code、Cursor 等 AI 编码助手长出手的关键它能替你浏览全部 69 个免费组件目录并用自然语言一键把设计系统组件以源码形式安装进你的 Next.js 项目——你不用手写一行 import也不用翻文档查 API。本文带你从零配置这个 MCP 服务器并教你如何用一句话让 AI 替你装好整个设计系统。什么是 BoardUI MCP 服务器MCPModel Context Protocol是 AI 编码工具与外部能力之间的标准协议。BoardUI 自带了一个 MCP 服务器通过npx -y boarduilatest mcp启动它向 Claude Code、Cursor 等 MCP 客户端暴露了这样几类工具MCP 工具作用install_components按名字把组件连同依赖一起拷贝到你的项目里get_component查看某个组件的源码与 APIget_theme查询 400 语义化设计令牌颜色、圆角、阴影get_usage_examples获取组件的实际使用示例BoardUI 的核心理念是组件优先源码而非依赖安装不是装一个 npm 包而是把组件源码直接复制进你的项目落在components/base/和components/application/下之后你可以随意修改任何细节。项目根目录的 AGENTS.md 明确规定AI 在动手写 UI 之前必须先找已安装的 BoardUI 组件缺了就通过 MCP 的install_components或 CLI 安装而不是手写一个长得像的替代品。一步安装把 BoardUI 接入 Claude Code 和 CursorClaude Code 一行命令注册 MCP 服务器在终端中执行claude mcp add boardui -- npx -y boarduilatest mcp只需执行这一次。之后在 Claude Code 会话里它就自动能浏览组件目录、读取主题令牌并执行安装了。Cursor 的 MCP 配置方法Cursor 及大多数其他 MCP 客户端使用相同的服务器定义把下面这段加入你的 MCP 配置即可{ mcpServers: { boardui: { command: npx, args: [-y, boarduilatest, mcp] } } }VS Code、Codex 等其他客户端的接入方式也大同小异核心都是运行npx -y boarduilatest mcp这个命令。用自然语言安装组件从翻文档到说一句配置完成后最爽的体验就是直接用大白话下单。比如Install every free BoardUI component—— 一次性装下整个免费组件目录Add a data table and stat cards to the dashboard—— 只装数据表格和统计卡片并且 AI 会顺手把它们接进页面。组件覆盖面很广基础层有 Button、Input、Select、Tabs 等日常构件应用层有 Agent Chat 聊天应用、Data Grid 电子表格、Notification Center 通知中心、Settings Modal 设置弹窗 等整块面板基础层还包括 Carousel 轮播它的项目演示图效果类似下方这张不想用 AI命令行同样开箱即用这也是 MCP 背后同一套能力的手动挡npx boarduilatest list # 列出全部组件 npx boarduilatest add>npx boarduilatest add rules它会在项目里生成 AGENTS.md 与 .cursor/rules/boardui.mdc把 BoardUI 的设计纪律固化成 AI 的常驻约束例如只用语义化颜色令牌text-text-primary、bg-background-primary-default禁止裸色值暗色模式自动生效只用复合字体工具类text-title-2-medium、text-body-medium而不是text-sm font-medium之类的临时堆叠类名合并一律走 cx 工具图标统一来自remixicon/react遇到不确定的令牌、组件 API 或示例代码主动去问 BoardUI MCP 服务器get_theme、get_component、get_usage_examples。有了这套组合AI 写出来的界面在视觉上会和 BoardUI 官方演示保持同一套语言而不是每次生成都略有出入。常见问题装完组件后如何本地跑起来如果你想先看看效果再装进自己的项目可以克隆本仓库体验完整示例首页就是一个带运行聊天能力的 AI 应用历史记录保存在浏览器本地无需数据库git clone https://gitcode.com/gh_mirrors/boa/boardui cd boardui npm install cp .env.example .env.local # 然后把你的模型 Key 填入 AI_API_KEY npm run dev聊天接口 app/api/chat/route.ts 在服务端读取 Key 并流式返回回复Key 永远不会到达浏览器因此本地演示也很安全。更多组件说明与安装命令见 README.md。快速总结注册一次claude mcp add boardui -- npx -y boarduilatest mcpCursor 用 JSON 配置自然语言安装一句话让 AI 装上整个目录或指定组件并自动接线固化规范npx boarduilatest add rules让 AI 持续遵循 BoardUI 的令牌与设计规则手动挡兜底npx boarduilatest add name随时可用。从此以后加一个组件不再是查文档、复制粘贴、对设计令牌的工作而是对 AI 助手说一句话的事。赞分享【免费下载链接】boarduiReact design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.项目地址https://gitcode.com/gh_mirrors/boa/boardui点击查看免费下载相关推荐让AI替你搜电脑Win顺作为MCP服务器一键连接Claude、Cursor和VS Code让AI替你搜电脑Win顺作为MCP服务器一键连接Claude、Cursor和VS Code Win顺WinShun是一款免费开源的 Windows 快速让AI替你写带动效的UIArc Library的MCP服务器接入Claude Code与Cursor完整教程让AI替你写带动效的UIArc Library的MCP服务器接入Claude Code与Cursor完整教程 Arc Library 是一个免费开源的 ReaRustrak内置MCP服务器79个工具零安装接入Claude/Cursor让AI替你排查错误Rustrak内置MCP服务器79个工具零安装接入Claude/Cursor让AI替你排查错误 Rustrak 是一款超轻量的自托管错误跟踪服务器Erro上一篇InternImage架构拆解InternImageBlock、组卷积与LayerScale设计全剖析下一篇从引用到自建基准如何用Moonworks Lunara Art Eval 打造你的AI绘画评测Benchmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考