内容
# xd-mcp
自定义MCP服务器，用于从Adobe XD文件中提取样式规范和设计令牌 — 为Cursor构建，用于与XD设计同步现有组件样式。
## 功能描述
该MCP向Cursor的AI公开了三个工具：
| 工具 | 功能描述 |
|---|---|
| `list_artboards` | 按名称列出XD文件中的所有画板 |
| `get_artboard_specs` | 返回指定画板的完整样式详细信息（颜色、字体排版、边框、阴影、间距） |
| `extract_tokens` | 提取所有画板中的全局设计令牌，可选与现有的SCSS变量文件进行差异比较 |
## 设置
### 1. 克隆和构建
```bash
git clone <your-repo-url> xd-mcp
cd xd-mcp
npm install
npm run build
```
### 2. 添加到Cursor
打开Cursor设置 → MCP → 添加服务器，或直接编辑 `~/.cursor/mcp.json`：
```json
{
"mcpServers": {
"adobe-xd": {
"command": "node",
"args": ["/absolute/path/to/xd-mcp/dist/index.js"]
}
}
}
```
保存后重启Cursor。
## 在Cursor中使用
### 列出画板
询问Cursor：
> "列出XD文件https://example.com/design.xd中的所有画板"
### 获取特定组件的规格
> "获取https://example.com/design.xd中Search Bar画板的样式规格"
返回：
- 所有颜色（十六进制 + rgba）用于画板，按填充 / 文本 / 笔画分组
- 字体排版：每个文本元素的字体系列、大小、权重、行高、字母间距
- 边框和边框半径值
- 盒阴影为可直接使用的CSS值
- 元素尺寸和位置
- 可直接粘贴的SCSS变量代码片段
### 更新现有组件样式
> "更新SearchBar组件SCSS以匹配https://example.com/design.xd中Search Bar画板的XD规格"
Cursor将使用 `get_artboard_specs` 并将更改应用于现有的 `.scss` 文件。
### 同步设计令牌与SCSS变量文件
> "从https://example.com/design.xd提取设计令牌，并与src/styles/_variables.scss进行差异比较"
返回差异显示：
- 已更改的变量（带有旧值和新值）
- XD中新的令牌尚未在SCSS中
- SCSS变量在XD中未找到（候选删除）
输出路径：
> "从XD文件中提取令牌，并将更新的变量写入src/styles/_variables.scss"
## XD文件来源
支持URL和本地文件路径：
```
https://sharepoint.example.com/design.xd
/Users/you/projects/design-system/design.xd
./design.xd
```
## 项目结构
```
src/
├── index.ts # MCP服务器入口点 + 工具定义
├── tools/
│ ├── list-artboards.ts # list_artboards工具
│ ├── get-artboard-specs.ts # get_artboard_specs工具
│ └── extract-tokens.ts # extract_tokens工具
├── parser/
│ ├── xd-parser.ts # 核心XD ZIP解析器
│ └── types.ts # 共享TypeScript类型
└── utils/
├── fetch-xd.ts # URL + 本地文件获取
└── scss-diff.ts # SCSS变量差异逻辑
```
## 开发
```bash
npm run dev # 监视模式
npm run build # 生产构建
```
## 备注
- XD文件是ZIP存档。此解析器直接读取内部JSON — 无需Adobe XD应用程序。
- 画板名称匹配不区分大小写，具有模糊回退（部分匹配）。
- SCSS差异比较 `$variable-name: value;` 声明。它处理 `!default` 标志。
