Carbon MCP

Carbon MCP

让任何 AI Agent 都能使用 Carbon Design System。

Carbon MCP 是一项托管服务，让 AI Agent 能通过 MCP 直接访问 Carbon 的组件、 图标、图表和文档。MCP 是用于将 AI 应用连接到外部工具和数据的开放 Model Context Protocol 标准。该服务运行于 IBM Cloud，因此任何 MCP 客户端都可以通过 URL 和 IBMid 登录进行连接。此代码库用于报告问题、请求功能和获取 Carbon Builder 技能。

连接 · Carbon Builder 技能 · 工具 · 覆盖范围 · 报告问题

托管服务使用条款 · Carbon Builder 技能采用 Apache-2.0 许可

---

为什么选择 Carbon MCP

Carbon MCP 让任何 Agent 式 AI 应用都能即刻成为 Carbon Design System 专家，帮助团队更快地打造一致、高质量的用户体验。

优势	含义
直接访问 Carbon	AI Agent 可查询 Carbon Design System，获取所需背景信息：颜色、排版、组件源代码和使用指南。
生成更出色的代码	Carbon MCP 中的代码示例和文档让 AI 工具能够生成高度还原 Carbon UI 的代码，并遵循设计和开发实践。
为整个团队提供统一答案	设计师、开发人员和 PM 都能从统一可信的信息源获得一致的答案和示例，从而减少偏差和返工。

连接

Carbon MCP 服务托管在远程地址 https://mcp.carbondesignsystem.com/mcp。将其作为远程 MCP 服务添加到客户端，并在提示时使用 IBMid 登录。

读取 mcp.json 文件的客户端可使用以下最简配置：

{
  "mcpServers": {
    "carbon-mcp": {
      "type": "streamable-http",
      "url": "https://mcp.carbondesignsystem.com/mcp",
      "oauth": true,
      "alwaysAllow": []
    }
  }
}

客户端	设置
IBM Bob	入门：IBM Bob
Claude Desktop	入门：Claude Desktop
Cursor	入门：Cursor
Figma Make	入门：Figma Make
Claude Code、VS Code、GitHub Copilot 和其他客户端	入门：其他客户端
不支持 OAuth 的客户端	令牌和会话 ID

完整的入门和设置指南 介绍了开始之前需要准备的内容、 先决条件、 连接到服务 以及上文列出的所有客户端。

令牌和会话 ID

如果客户端不支持 OAuth 发现，你可以改用令牌和会话 ID 进行身份验证。

1. 生成令牌和会话 ID。
2. 复制凭据并将其添加到 Carbon MCP 配置中。

搭配 Carbon Builder 技能使用

Carbon Builder 是一项可移植的 AI 技能，可将 Agent 变成 Carbon Design System 专家。它从 Carbon MCP 服务中获取实时组件示例、变体、属性和文档，生成 Carbon React 和 Web Components 代码，并为所有受支持的框架构建 Carbon Charts。

服务提供事实；技能则告诉 Agent 何时查询这些事实，以及如何将答案转化为可运行的代码。两者搭配使用，效果优于单独使用任一方。

使用 skills CLI 安装，并选择适用于你的 Agent 的命令：

npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a bob
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a claude-code
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a cursor
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a codex
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a github-copilot
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a gemini-cli

CLI 还支持更多 Agent；请参阅 skills.sh。该技能也有自己的页面：skills.sh/carbon-design-system/carbon-mcp/carbon-builder。

若不使用 CLI 安装，请下载 carbon-builder.zip，解压后将 carbon-builder/ 文件夹复制到客户端的技能目录。技能 README 列出了各客户端对应的路径，入门指南则会逐步指导你完成操作，详见设置 AI 客户端并安装 Carbon Builder 技能。

工具

工具	返回内容
code_audit	根据 Carbon 指南检查代码，涵盖设计令牌、组件用法、无障碍性、布局和最佳实践。
code_search	Carbon React 和 Web Components 代码示例、图标和象形图，包括完整的示例应用文件。
docs_search	Carbon Design System 和 IBM Products 文档，例如组件指南、用法、无障碍性和参考资料。
get_charts	适用于 React、Angular、Vue、Svelte、Vanilla JS 和 HTML 的 Carbon Charts 代码示例。
labs_search	Carbon Labs 实验性组件的代码示例、属性、事件和用法文档。

覆盖范围

Carbon MCP 持续演进。当前覆盖范围：

语料库	示例	已索引内容
@carbon/react	Button、Tabs、TextInput	代码示例和文档、每个组件的多个变体、完整的属性和导入
@carbon/web-components	button、tabs、text-input	代码示例和文档、每个组件的多个变体、完整的属性和导入
Carbon for IBM Products	Tearsheets、PageHeader	代码示例和文档、每个组件的多个变体、完整的属性和导入
Carbon Icons and Pictograms	Settings、User、UserAvatarFilled	代码示例和文档、用法
@carbon/ai-chat	basic、custom-element、history	代码示例和文档、完整的代码示例、完整的属性和导入
@carbon/charts	图表类型，附演示链接	图表类型说明、演示链接、完整的代码示例、完整的属性和导入
@carbon-labs/*	React：AnimatedHeader、Processing、Resizer、UIShell、What's New	预览候选项的代码示例和文档、每个组件的多个变体、完整的属性和导入

概念页面 对内容作了更详细的说明。

文档

文档	涵盖内容
概览	Carbon MCP 概览和主要优势
概念	Carbon MCP 工具和内容覆盖范围
入门和设置	身份验证、连接常见的 MCP 客户端、安装 Carbon Builder 技能
提示词	提示词指导和最佳实践
节省 Token	通过减少不必要的上下文和响应，让 AI 工作流更快速、更具成本效益
使用条款	IBM Cloud 托管的 Carbon MCP 服务的条款
支持	获取帮助
行为准则	我们对本项目中所有人的行为规范

---

问题与支持

提交问题 以报告错误、申请功能或寻求帮助。每种情况都有相应的模板。