@coinbase/cds-mcp-server

技能简介

@coinbase/cds-mcp-server 是 Coinbase 官方发布的 Design System（CDS）MCP 服务器，让 Claude Desktop、Claude Code、Cursor、VS Code 等 AI 编程助手能够直接读取 Coinbase Design System 的 UI 组件、Design Token、布局规范与样式指南。CDS 是 Coinbase 内部跨 Web 与移动端统一的设计语言，原本主要服务 Coinbase 工程师；MCP 化之后，外部开发者、AI 编程助手、AI Agent 都可以通过标准协议访问同一份设计系统元数据。包内容由 Coinbase 仓库的文档站点 docs:build 任务自动生成，确保 MCP 暴露的内容与官方文档站点 100% 一致。零配置，开箱即用。

核心能力

• Design System 元数据查询：通过 MCP tools 查询 Coinbase Design System 的组件清单、Token 名称、CSS 变量、布局规范等元数据。
• 跨平台一致性：同一份数据同时服务于 Web 与 Mobile 前端代码生成场景，AI 不用为不同平台分别记忆不同 API。
• 文档自动同步：MCP server 内容由 mcp-server:generate-mcp-docs 任务从官方 docs 站点拉取，每次文档更新都会自动反映到 AI 助手能看到的工具列表里。
• 零配置接入：安装即可用，不需要任何环境变量或 API Key，特别适合快速试用或 demo。
• 依赖链自动化：构建过程 common:build → docs:build → mcp-server:build → mcp-server:generate-mcp-docs 自动串联，不需要开发者手动维护映射。
• npx 即用：npx -y @coinbase/cds-mcp-server 一行命令即可启动，无需克隆仓库或编译。

安装配置

1. npx 直接启动（推荐试用）：执行 npx -y @coinbase/cds-mcp-server 即可拉取最新包并以 stdio 模式启动 MCP server。
2. 项目级安装：在 Node.js 项目中执行 npm install @coinbase/cds-mcp-server 或 yarn add @coinbase/cds-mcp-server，把命令固定到 package.json。
3. 注册到 Claude Desktop：编辑 ~/Library/Application Support/Claude/claude_desktop_config.json（macOS），加入：

   {
     "mcpServers": {
       "coinbase-cds": {
         "command": "npx",
         "args": ["-y", "@coinbase/cds-mcp-server"]
       }
     }
   }

4. 注册到 Claude Code / Cursor / VS Code：在对应 IDE 的 MCP 配置文件中加入同样的 mcpServers 段，命令指向 npx。
5. 环境要求：Node.js 18 或更高版本；npx 可用（默认随 Node.js LTS 安装）；Claude Desktop、Claude Code、Cursor 或其它 MCP 客户端。
6. 可选：源码自行构建：克隆 https://github.com/coinbase/cds，运行 yarn install && yarn mcp-server:build && yarn mcp-server:generate-mcp-docs，自定义 docs 后可重新生成 MCP 内容。

使用步骤

1. 执行 npm install @coinbase/cds-mcp-server（或直接 npx -y @coinbase/cds-mcp-server 试用）。
2. 把上述 mcpServers 配置写入 Claude Desktop / Claude Code / Cursor 的 MCP 配置文件。
3. 重启 AI 客户端，确认工具列表中出现 CDS MCP server 提供的 tools。
4. 在对话中让 AI 查询 CDS，例如"列出 CDS 里所有按钮组件"、"Button 组件有哪些 variant"、"CDS 的 spacing token 都有哪些档位"、"展示 Modal 组件的 props"。
5. AI 通过 MCP tools 拉取 Coinbase 官方文档站点的结构化数据，返回的结果始终与官网文档保持同步。
6. 让 AI 基于返回结果生成符合 CDS 规范的代码，例如新增带 primary variant 的 Button 或按 space.$4 设置内边距。
7. 当 Coinbase 更新 CDS 文档时，AI 下次查询会自动看到最新内容，无需手动同步。

适用场景

• Coinbase 内部工程团队：让 Claude Code / Cursor 直接读取官方 CDS 规范，确保所有新建页面、组件都符合公司设计语言。
• 金融 Web3 创业团队：参考 Coinbase 的成熟设计体系为自己的交易类 App 做 UI，把 CDS 当成"行业最佳实践字典"。
• AI Agent 前端代码生成：用 CDS MCP 给 Agent 提供权威设计参考，避免 AI 编造不存在的 token 或组件名。
• 跨平台 Web/Mobile 一致性：同一份 CDS 元数据同时支持 Web（React/Next.js）与 Mobile（React Native）的代码生成场景。
• 设计走查自动化：让 AI 助手根据 CDS 规范审查现有 PR 是否违规——例如擅自使用未在 CDS 中注册的色值。
• 新人 onboarding：新工程师第一天就让 AI 助手充当"CDS 实时问答机"，不必反复翻阅 Notion 文档站点。

适用人群

• Coinbase 公司内部前端、移动端、AI 工程团队的工程师与设计系统 Owner。
• 金融科技、Web3 产品团队，希望参考 Coinbase CDS 给自己的交易类应用定设计系统的 Tech Lead 与设计负责人。
• 正在评估 MCP 协议如何与企业内部 Design System 集成的架构师与 DevEx 工程师。
• 使用 Claude / Cursor / VS Code 等 AI 工具的 UI 前端，希望 AI 严格按既定设计系统而非自由发挥的前端开发者。

工作原理

@coinbase/cds-mcp-server 内容并不是手写维护的，而是由 https://github.com/coinbase/cds 仓库中的 build pipeline 自动生成。具体的依赖链是：common:build → docs:build → mcp-server:build → mcp-server:generate-mcp-docs。CDS 包源码里写有完整的 token、recipe、组件定义；common:build 把这些定义汇总为可被 docs 站点消费的格式；docs:build 据此生成官方文档站点；mcp-server:build 编译 MCP server 源码；最后 mcp-server:generate-mcp-docs 从已生成的 docs 内容里抽取出 token / 组件 / pattern 元数据，转换为 MCP tools 的 schema 与实现。运行时 MCP server 通过 stdio 与 AI 客户端通信，把这些 tools 暴露给 Claude 等 LLM，确保 AI 看到的"设计系统事实"与 Coinbase 官网文档完全一致，杜绝文档/MCP 漂移。

官方链接

• npm 包：https://www.npmjs.com/package/@coinbase/cds-mcp-server
• GitHub 仓库：https://github.com/coinbase/cds
• Coinbase Design System：https://github.com/coinbase/cds#readme
• Model Context Protocol 规范：https://modelcontextprotocol.io/