麦克米伦设计系统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"让这两个参数都能看到所有可用的令牌
如需更多帮助，请 创建一个问题 在存储库中。