快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

麦克米伦设计系统MCP服务器

一种模型上下文协议（MCP）服务器，提供对麦克米伦设计系统令牌和组件指南的访问。此服务器遵循ITCSS（倒三角CSS）架构，并公开设计令牌、组件指南和代码生成功能。

🚀 快速开始

先决条件

Node.js（v16或更高版本）
TypeScript（用于开发）

安装和设置

克隆并构建服务器：

   git clone 
   cd mcp-design-system
   npm install
   npm run build

测试服务器：

   echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | node build/index.js

配置您的MCP客户端 （参见客户端配置)

✨ 自我发现功能

服务器公开自己的文档！ 任何MCP客户端都可以立即发现如何使用它：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_usage_instructions",
    "arguments": {"format": "markdown"}
  }
}

这意味着AI助手可以在没有外部文档的情况下自动学习如何使用您的设计系统！

📡 可用端点

🛠️ 工具（交互功能）

1. `get_design_tokens`

根据ITCSS架构从Macmillan设计系统中检索设计令牌。

参数：

layer （可选，默认：“全部”）：

- "settings" -来自SCSS变量的原始令牌 - "tokens" -映射到CSS自定义属性的语义标记 - "all" -两层

category （可选，默认：“全部”）：

- "colors" -调色板和语义颜色 - "spacing" -间距尺度和语义间距 - "typography" -字体系列、大小、粗细、线条高度 - "radius" -边界半径值 - "shadows" -方框阴影定义 - "borders" -边框宽度定义 - "all" -所有类别

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_design_tokens",
    "arguments": {
      "layer": "tokens",
      "category": "colors"
    }
  }
}

示例响应：

{
  "result": {
    "content": [{
      "type": "text",
      "text": "{\n  \"foreground\": {\n    \"hero\": \"var(--mac-color-fg-hero)\",\n    \"primary\": \"var(--mac-color-fg-primary)\",\n    ...\n  }\n}"
    }]
  }
}

2. `get_component_guidelines`

获取特定组件的全面使用指南、变体和示例。

参数：

componentName （必填）：组件名称

- 可用： "button", "card", "input", "heading", "link"

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_component_guidelines",
    "arguments": {
      "componentName": "button"
    }
  }
}

3. `list_available_components`

列出设计系统中所有可用的组件及其变体和描述。

参数： 无

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "list_available_components",
    "arguments": {}
  }
}

4. `generate_component`

使用设计系统令牌生成具有TypeScript接口和SCSS实现的React组件。

参数：

componentType （必填）：组件类型（例如，“按钮”、“卡”、“输入”）
variant （可选）：组件变体（例如，“主要”、“次要”）
props （可选）：附加道具对象
includeAccessibility （可选，默认值：true）：包含ARIA属性

5. `get_usage_instructions`

获取此MCP服务器的全面文档和使用说明。

参数：

format （可选，默认：“json”）：输出格式("json" 或 "markdown")

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_usage_instructions",
    "arguments": {
      "format": "markdown"
    }
  }
}

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "generate_component",
    "arguments": {
      "componentType": "button",
      "variant": "primary",
      "includeAccessibility": true
    }
  }
}

📚 资源（静态数据）

1. `design-system://tokens`

JSON格式的完整设计系统令牌。

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "resources/read",
  "params": {
    "uri": "design-system://tokens"
  }
}

2. `design-system://guidelines`

JSON格式的完整组件指南。

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "resources/read",
  "params": {
    "uri": "design-system://guidelines"
  }
}

3. `design-system://documentation`

JSON格式的完整服务器文档和使用说明。

请求示例：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "resources/read",
  "params": {
    "uri": "design-system://documentation"
  }
}

🔧 客户端配置

Claude桌面配置

将此添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "macmillan-design-system": {
      "command": "node",
      "args": ["D:/CODE/AI/mcp-servers/mcp-design-system/build/index.js"],
      "env": {}
    }
  }
}

配置文件位置：

视窗: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

程序化使用

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
import { spawn } from "child_process";

const client = new Client(
  { name: "design-system-client", version: "1.0.0" },
  { capabilities: {} }
);

const serverProcess = spawn("node", ["./build/index.js"]);
const transport = new StdioClientTransport({
  reader: serverProcess.stdout,
  writer: serverProcess.stdin,
});

await client.connect(transport);

// Example: Get color tokens
const result = await client.request(
  { method: "tools/call" },
  {
    name: "get_design_tokens",
    arguments: { layer: "tokens", category: "colors" }
  }
);

🎨 设计体系结构

ITCSS图层

设计系统遵循ITCSS（倒三角CSS）架构：

设置图层（图元）

未经处理的原始设计令牌：

品牌颜色（品牌5、品牌20、品牌40等）
间距图元（xs1-4、s1-4、m1-4、l1-4）
排版图元（字体族、粗细、大小）
边界和半径图元

令牌层（语义）

映射到CSS自定义属性的语义标记：

前景颜色(var(--mac-color-fg-*))
背景颜色(var(--mac-color-bg-*))
间隔标记(var(--mac-spacing-*))
排版标记(var(--mac-fontsize-*))

可用组件

组件	变体	尺寸	描述
按钮	主、次、轮廓、幽灵、英雄	小、中、大	带语义标记的交互式按钮
卡	高架、轮廓、填充、英雄	-	带立面的内容容器
输入	文本、电子邮件、密码、数字、文本区域，选择	-	带有验证状态的表单输入
标题	h1、h2、h3、h4、h5、h6、h7	-	按照排版比例的分层标题
链接	默认、英雄、按钮样式	大、中、小、xsmall	带悬停/焦点状态的样式链接

💡 使用示例

示例1：从设置层获取间距令牌

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_design_tokens","arguments":{"layer":"settings","category":"spacing"}}}' | node build/index.js

示例2：获取按钮组件指南

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_component_guidelines","arguments":{"componentName":"button"}}}' | node build/index.js

示例3：生成英雄按钮组件

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"generate_component","arguments":{"componentType":"button","variant":"hero","includeAccessibility":true}}}' | node build/index.js

示例4：获取所有排版令牌

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_design_tokens","arguments":{"category":"typography"}}}' | node build/index.js

🧪 测试服务器

基本连接测试

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | node build/index.js

全功能测试

# Test tools listing
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | node build/index.js

# Test resources listing  
echo '{"jsonrpc":"2.0","id":1,"method":"resources/list","params":{}}' | node build/index.js

# Test token retrieval
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_design_tokens","arguments":{"layer":"tokens","category":"colors"}}}' | node build/index.js

# Test component generation
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","parameters":{"name":"generate_component","arguments":{"componentType":"button","variant":"primary"}}}' | node build/index.js

🏗️ 发展

建筑

npm run build

观察变化

npm run watch

项目结构

src/
├── index.ts              # Main MCP server implementation
├── tokens/
│   ├── tokens.scss       # CSS custom properties
│   ├── settings/         # ITCSS Settings layer (primitives)
│   │   ├── colors.scss
│   │   ├── spacing.scss
│   │   ├── typography.scss
│   │   └── ...
│   └── ...
build/
└── index.js              # Compiled server

🤝 贡献

分叉存储库
创建要素分支
进行更改
构建和测试： npm run build && npm test
提交拉取请求

📄 许可证

\[在此处添加您的许可证信息\]

🆘 故障排除

常见问题

服务器无法启动：

确保Node.js版本为16或更高
跑 npm install 和 npm run build
检查是否安装了所有依赖项

Claude Desktop找不到服务器：

验证中的路径 claude_desktop_config.json 是正确的
确保服务器构建没有错误
配置更改后重新启动Claude Desktop

令牌查询返回空结果：

检查一下 layer 和 category 参数有效
使用 "all" 让这两个参数都能看到所有可用的令牌

如需更多帮助，请创建一个问题在存储库中。

目录标签

设计系统代码生成JavaScriptClaude本地部署令牌管理组件指南ITCSS架构

支持客户端

Claude DesktopClaude

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

token

工具数量（toolCount，工具数）

5

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明token部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/2f588ae9bc42111b57de63cc28aa9f1c

一个提供Macmillan设计系统令牌和组件指南访问的模型上下文协议（MCP）服务器，支持设计令牌管理、组件指南获取和代码生成功能。

继续浏览同类 MCP

更多开发工具 MCP（20,396）返回 MCP 目录

上一个 MCP

MCP Design Gemini

一个利用Gemini 2.5 Flash生成前端UI代码的MCP服务器，支持从文本描述或截图生成代码，并提供代码迭代优化功能。

下一个 MCP

MCP Design System Extractor

一个从Storybook设计系统中提取组件信息的MCP服务器，包括HTML、样式和组件元数据。

MCP Design System

快速接入

详细介绍

麦克米伦设计系统MCP服务器

🚀 快速开始

先决条件

安装和设置

✨ 自我发现功能

📡 可用端点

🛠️ 工具（交互功能）

1. get_design_tokens

2. get_component_guidelines

3. list_available_components

4. generate_component

5. get_usage_instructions

📚 资源（静态数据）

1. design-system://tokens

2. design-system://guidelines

3. design-system://documentation

🔧 客户端配置

Claude桌面配置

程序化使用

🎨 设计体系结构

ITCSS图层

设置图层（图元）

令牌层（语义）

可用组件

💡 使用示例

示例1：从设置层获取间距令牌

示例2：获取按钮组件指南

示例3：生成英雄按钮组件

示例4：获取所有排版令牌

🧪 测试服务器

基本连接测试

全功能测试

🏗️ 发展

建筑

观察变化

项目结构

🤝 贡献

📄 许可证

🆘 故障排除

常见问题

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

1. `get_design_tokens`

2. `get_component_guidelines`

3. `list_available_components`

4. `generate_component`

5. `get_usage_instructions`

1. `design-system://tokens`

2. `design-system://guidelines`

3. `design-system://documentation`