Tmall Design Wiki MCP Server

一个为AI编程工具（如Cursor、Claude Desktop、VS Code等）提供天猫设计系统组件库访问的MCP服务器。

功能特性

• 设计令牌访问 - 获取颜色、间距、圆角、字重等全局设计变量
• 组件库 - 访问7个完整的React+TypeScript组件
• 页面模板 - 基于实际案例的页面生成
• 智能搜索 - 快速查找设计规范和组件代码
• 工作流自动化 - 集成提示词扩写和代码验证
• 移动优先 - 专为手机天猫App设计的组件体系

安装和配置

正确使用流程

第一步：配置MCP客户端 在您的MCP客户端中添加配置：

Cursor配置 在您的项目中创建或编辑 .cursor/mcp.json：

{
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "npx",
      "args": ["tmall-design-wiki-mcp-server@latest"]
    }
  }
}

Claude Desktop配置 编辑您的Claude Desktop配置文件 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "npx",
      "args": ["tmall-design-wiki-mcp-server@latest"]
    }
  }
}

VS Code配置 VS Code通过Continue扩展支持MCP协议。请按以下步骤配置：

1. 安装Continue扩展：在VS Code扩展商店搜索并安装"Continue"
2. 在您的项目根目录创建或编辑 .continue/config.json：

{
  "models": [
    {
      "title": "Claude 3.5 Sonnet",
      "provider": "anthropic", 
      "model": "claude-3-5-sonnet-20241022",
      "apiKey": "your-anthropic-api-key"
    }
  ],
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "npx",
      "args": ["tmall-design-wiki-mcp-server@latest"]
    }
  }
}

3. 或者编辑全局配置文件 ~/.continue/config.json：

{
  "models": [
    {
      "title": "Claude 3.5 Sonnet",
      "provider": "anthropic",
      "model": "claude-3-5-sonnet-20241022", 
      "apiKey": "your-anthropic-api-key"
    }
  ],
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "npx",
      "args": ["tmall-design-wiki-mcp-server@latest"]
    }
  }
}

备选配置（全局安装方式）

如果您已全局安装，可以使用：

{
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "tmall-design-wiki-mcp-server",
      "args": []
    }
  }
}

第二步：重启MCP客户端 配置完成后，重启客户端。MCP客户端会自动调用 npx tmall-design-wiki-mcp-server@latest

第三步：开始使用 在MCP客户端中就可以调用天猫设计系统的各种功能了

重要提醒：

• ❌ 不要直接在命令行运行 npx tmall-design-wiki-mcp-server@latest
• ✅ 应该通过MCP客户端配置后自动调用
• 💡 如果直接运行，只会显示配置说明然后等待MCP连接

故障排除

常见问题：运行 npx tmall-design-wiki-mcp-server@latest 时没反应 这是正常现象！MCP服务器启动后会等待MCP客户端的连接。在命令行直接运行时：

• 程序会显示配置说明
• 然后等待MCP协议输入
• 按 Ctrl+C 可退出

环境检测： 如果遇到其他问题，运行环境检测：

npx tmall-design-wiki-mcp-server@latest --check-env

API功能

设计令牌 (Design Tokens)

// 获取所有设计令牌
getDesignToken()

// 获取特定类别的令牌
getDesignToken({ category: "colors" })    // 颜色相关 (33个token)
getDesignToken({ category: "spacing" })   // 间距相关
getDesignToken({ category: "typography" }) // 字体相关
getDesignToken({ category: "borders" })   // 圆角边框相关

组件功能

// 列出所有组件
listComponents()
// 返回: capsuletabbar, price, productcard, productgrid, scrollloading, tabbar, topbar

// 获取组件源码
getComponentCode({ name: "productcard" })
// 返回: ProductCard.tsx, ProductCard.scss, ProductCard.md

// 获取组件演示
getComponentDemo({ name: "productcard" })
// 返回: 完整的HTML演示文件

页面功能

// 列出页面模板
listPages()

// 获取页面代码
getPageCode({ name: "guide-page" })

// 生成页面
generatePage({ 
  type: "guide-page", 
  config: { title: "商品导购", theme: "default" }
})

工作流功能

// 执行组件工作流
runWorkflow({ 
  type: "component", 
  input: { componentName: "productcard" }
})

// 执行页面工作流
runWorkflow({ 
  type: "page", 
  input: { pageType: "guide", config: {...} }
})

// 代码验证工作流
runWorkflow({ 
  type: "validation", 
  input: { code: "...", type: "component" }
})

// 提示词扩写工作流
runWorkflow({ 
  type: "prompt-expansion", 
  input: { userInput: "我需要一个商品列表页面" }
})

搜索功能

// 搜索知识库
search({ query: "商品卡片", limit: 10 })

代码验证

// 验证代码是否符合天猫设计规范
validate({ 
  code: "你的React组件代码",
  type: "component" 
})

可用组件列表

1. CapsuleTabBar - 胶囊式标签栏
2. Price - 价格显示组件
3. ProductCard - 商品卡片（支持1:1和3:4比例）
4. ProductGrid - 商品瀑布流布局
5. ScrollLoading - 滚动加载组件
6. TabBar - 底部标签栏
7. TopBar - 顶部导航栏

设计令牌类别

• 颜色系统 (33个token)：品牌色、文本色、背景色等
• 间距系统 (16个token)：基于8px网格的间距变量
• 字体系统 (28个token)：字体家族、大小、行高、字重
• 圆角系统 (10个token)：统一的圆角规范

系统要求

• Node.js >= 18.0.0
• Cursor、Claude Desktop 或 VS Code（通过Continue扩展） 支持MCP协议

许可证

MIT License