@my-design/mcp
my-design 组件库的 MCP Server，让 AI 能够查询组件文档、Props、示例、源码、Design Tokens，生成符合规范的代码。
工具一览
| 工具 | 说明 |
|---|---|
get_context_bundle | 一次性获取组件的完整上下文（文档 + Props + 示例 + Tokens），适合代码生成场景 |
component_search | 按关键词搜索组件，返回匹配列表和适用场景 |
component_details | 获取组件详情（Props、Events、行为说明），支持按章节和属性过滤 |
theme_tokens | 查询 Design Tokens（颜色、字号、间距等）和 CSS 变量映射 |
changelog_query | 查询组件变更日志和 breaking changes |
source_inspect | 查看组件源码结构和关键函数实现 |
fetch_design_data | 从 Octo 平台下载设计稿到本地（支持分享口令和 fileKey） |
design_to_code | 将设计稿 JSON 转换为 DSL / HTML / Vue 代码 |
快速开始
安装依赖
npm install构建
npm run build启动
Stdio 模式（Cursor / Claude Desktop 等 MCP 客户端）：
node dist/stdio.jsHTTP 模式：
node dist/http.js --port 3000MCP 客户端配置
{
"mcpServers": {
"my-design": {
"command": "node",
"args": ["/path/to/dist/stdio.js"]
}
}
}环境变量
| 变量 | 必需 | 说明 |
|---|---|---|
OCTO_API_BASE | 否 | Octo API 地址（fileKey 下载模式需要） |
OCTO_TOKEN | 否 | Octo 认证 Token（fileKey 下载模式需要） |
OCTO_DIR | 否 | .octo/ 目录路径，默认当前目录 |
COMPONENT_PACKAGE_ROOT | 否 | 组件包源码路径（source_inspect 用），默认读 node_modules/@douyinfe/semi-ui |
项目结构
src/
tools/ # MCP 工具定义和处理器
utils/ # 工具函数（文档读取、源码解析等）
server.ts # MCP Server 创建和配置
stdio.ts # stdio 传输入口
http.ts # HTTP 传输入口
doc/
components/ # 组件文档（Markdown）
tokens/ # Design Tokens（JSON）
guidelines/ # 设计规范
changelog/ # 变更日志
index.json # 组件索引
tests/
tools/ # 工具测试
utils/ # 工具函数测试开发
npm run build # 构建
npm run dev # watch 模式
npx rstest run # 运行测试控量策略
工具设计遵循渐进式获取，减少 token 消耗：
component_detailsbrief 模式只返回概述 + Props 名称列表sections参数按需获取指定章节propFilter只返回指定属性- 大文档自动隐藏代码块，配合
get_code_block按需获取 get_context_bundle一次打包常用上下文，减少多次调用