Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tmall-design-wiki-mcp-server) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Tmall Design Wiki MCP Server
一个为AI编程工具（如Cursor、Claude Desktop等）提供天猫设计系统组件库访问的MCP服务器。
功能特性
- 设计令牌访问 - 获取颜色、间距、圆角、字重等全局设计变量
- 组件库 - 访问7个完整的React+TypeScript组件
- 页面模板 - 基于实际案例的页面生成
- 智能搜索 - 快速查找设计规范和组件代码
- 工作流自动化 - 集成提示词扩写和代码验证
- 移动优先 - 专为手机天猫App设计的组件体系
安装和配置
使用方式
推荐：NPX直接运行
npx tmall-design-wiki-mcp-server@latest无需安装，自动获取最新版本和依赖
备选：全局安装后运行
npm install -g tmall-design-wiki-mcp-server
tmall-design-wiki-mcp-server配置MCP服务器
推荐配置（NPX方式）
优势: 无路径问题，自动获取最新版本，依赖自动管理
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"]
}
}
}备选配置（全局安装方式）
如果您已全局安装，可以使用：
{
"mcpServers": {
"tmall-design-wiki": {
"command": "tmall-design-wiki-mcp-server",
"args": []
}
}
}故障排除
如果遇到连接问题，运行环境检测：
npx tmall-design-wiki-mcp-server@latest --check-envAPI功能
设计令牌 (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"
})可用组件列表
- CapsuleTabBar - 胶囊式标签栏
- Price - 价格显示组件
- ProductCard - 商品卡片（支持1:1和3:4比例）
- ProductGrid - 商品瀑布流布局
- ScrollLoading - 滚动加载组件
- TabBar - 底部标签栏
- TopBar - 顶部导航栏
设计令牌类别
- 颜色系统 (33个token)：品牌色、文本色、背景色等
- 间距系统 (16个token)：基于8px网格的间距变量
- 字体系统 (28个token)：字体家族、大小、行高、字重
- 圆角系统 (10个token)：统一的圆角规范
系统要求
- Node.js >= 18.0.0
- Cursor 或 Claude Desktop 支持MCP协议
许可证
MIT License