企业官网建设流程全解析

BoardUI 是一套面向 AI 产品（Agentic Interfaces）的 React 设计系统，而这个 BoardUI MCP 服务器，就是让 Claude Code、Cursor 等 AI 编码助手"长出手"的关键：它能替你浏览全部 69 个免费组件目录，并用自然语言一键把设计系统组件以源码形式安装进你的 Next.js 项目——你不用手写一行 import，也不用翻文档查 API。

本文带你从零配置这个 MCP 服务器，并教你如何用一句话让 AI 替你装好整个设计系统。

什么是 BoardUI MCP 服务器？

MCP（Model Context Protocol）是 AI 编码工具与外部能力之间的标准协议。BoardUI 自带了一个 MCP 服务器（通过npx -y boardui@latest mcp启动），它向 Claude Code、Cursor 等 MCP 客户端暴露了这样几类工具：

BoardUI 的核心理念是"组件优先，源码而非依赖"：安装不是装一个 npm 包，而是把组件源码直接复制进你的项目（落在components/base/和components/application/下），之后你可以随意修改任何细节。项目根目录的 AGENTS.md 明确规定：AI 在动手写 UI 之前，必须先找已安装的 BoardUI 组件；缺了就通过 MCP 的install_components或 CLI 安装，而不是手写一个"长得像"的替代品。

一步安装：把 BoardUI 接入 Claude Code 和 Cursor

Claude Code 一行命令注册 MCP 服务器

在终端中执行：

claude mcp add boardui -- npx -y boardui@latest mcp

只需执行这一次。之后在 Claude Code 会话里，它就自动能浏览组件目录、读取主题令牌并执行安装了。

Cursor 的 MCP 配置方法

Cursor 及大多数其他 MCP 客户端使用相同的服务器定义，把下面这段加入你的 MCP 配置即可：

{ "mcpServers": { "boardui": { "command": "npx", "args": ["-y", "boardui@latest", "mcp"] } } }

VS Code、Codex 等其他客户端的接入方式也大同小异，核心都是运行npx -y boardui@latest 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 boardui@latest list # 列出全部组件 npx boardui@latest add>npx boardui@latest 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。

快速总结

1. 注册一次：claude mcp add boardui -- npx -y boardui@latest mcp（Cursor 用 JSON 配置）；
2. 自然语言安装：一句话让 AI 装上整个目录或指定组件，并自动接线；
3. 固化规范：npx boardui@latest add rules让 AI 持续遵循 BoardUI 的令牌与设计规则；
4. 手动挡兜底：npx boardui@latest add <name>随时可用。

从此以后，"加一个组件"不再是查文档、复制粘贴、对设计令牌的工作，而是对 AI 助手说一句话的事。