Tmall Design AI

天猫设计系统智能知识库 - 包含完整的设计规范、组件库和多智能体工作流，为AI驱动的UI生成提供支持。

本包为 tmall-design-wiki-mcp-server 提供设计系统知识库支持。

功能特性

• 设计知识库 (DesignWiki): 完整的 Tmall 设计系统组件、样式规范和资产
• 多智能体工作流 (Workflow): 需求识别、知识检索、设计生成、代码输出的完整AI工作流
• 结构化知识: 语义规则、映射纲要、代码实现三位一体的知识组织
• MCP协议支持: 可通过 MCP Server 在 Cursor、Claude Desktop 等工具中使用

目录结构

tmall-ai/
├── workflow/                    # 智能体工作流
│   ├── 01-Intent-Recognition/             # 需求识别智能体
│   ├── 02-Knowledge-Retrieval/             # 知识检索智能体  
│   ├── 03-Design-Synthesis/             # 代码生成智能体
│   ├── 04-Code-Generation/             # 质量验证智能体
│   └── 协作配置/                # 智能体协作配置
│
├── designwiki/                  # 设计知识库
│   ├── style/
│   │   ├── elements/           # 全局样式变量
│   │   ├── component/          # 组件代码 + 文档
│   │   │   ├── Button/
│   │   │   ├── Indicator/
│   │   │   ├── Label/
│   │   │   ├── Popover/
│   │   │   ├── Price/
│   │   │   ├── ProductCard/
│   │   │   ├── Selection/
│   │   │   ├── Switch/
│   │   │   ├── Tabbar/
│   │   │   ├── Toast/
│   │   │   ├── Topbar/
│   │   │   └── Typography/
│   │   ├── layout/
│   │   │   └── container/      # 容器布局组件
│   │   └── asset/
│   │       ├── icon/           # 图标资产 (SVG)
│   │       └── image/          # 商品图片资产
│   └── case/                   # 页面案例规范
│
├── preview/                     # 预览环境 (可选)
│   ├── src/                    # 预览页面代码
│   ├── node_modules/           # npm 依赖
│   └── ...                     # React/Vite 配置
│
├── .cursorrules                 # AI 规则配置
└── README.md                    # 本文件

安装

npm 安装

npm install tmall-design-wiki

与 MCP Server 配合使用（推荐）

这个包通常与 tmall-design-wiki-mcp-server 一起使用：

# 安装 MCP Server
npm install -g tmall-design-wiki-mcp-server

# 在 Cursor 的 .cursor/mcp.json 中配置
{
  "mcpServers": {
    "tmall-design-wiki": {
      "command": "npx",
      "args": ["tmall-design-wiki-mcp-server@latest"]
    }
  }
}

直接使用

// 引用设计知识库
const designWiki = require('tmall-design-wiki');

// 访问组件
const buttonComponent = require('tmall-design-wiki/designwiki/style/component/Button');

// 访问工作流
const intentRecognition = require('tmall-design-wiki/workflow/01-Intent-Recognition');

智能体工作流

工作流按以下顺序执行：

用户需求 → 01-Intent-Recognition → 02-Knowledge-Retrieval → 03-Design-Synthesis → 04-Code-Generation → 输出结果

知识库结构

DesignWiki (设计知识库)

每个知识对象包含三种文件：

1. 语义规则 (rule.md) - 设计规范和使用指南
2. 映射纲要 (schema.json) - 结构化的属性映射
3. 代码实现 (tsx/css) - 可运行的组件代码

Workflow (多智能体工作流)

AI生成界面的完整工作流程：

1. 需求识别 - 理解用户意图，分类需求类型
2. 知识检索 - 从知识库查找相关组件和规范
3. 设计生成 - 基于规范生成设计方案
4. 代码输出 - 生成符合规范的代码

核心组件

| 组件 | 说明 | 位置 | |------|------|------| | Button | 按钮组件 | designwiki/style/component/Button/ | | ProductCard | 商品卡片 | designwiki/style/component/ProductCard/ | | Container | 布局容器 | designwiki/style/layout/container/ | | Topbar | 顶部导航栏 | designwiki/style/component/Topbar/ | | Tabbar | 标签栏 | designwiki/style/component/Tabbar/ | | ... | 更多组件 | designwiki/style/component/ |

设计规范

• 全局样式: designwiki/style/elements/Global-Variables.md
• 组件规范: designwiki/style/component/组件类撰写规则.md
• 布局规范: designwiki/style/layout/布局类撰写规则.md
• 页面案例: designwiki/case/ShoppingFeed/导购页面.md

资产库

• 图标: designwiki/style/asset/icon/ (按分类组织的 SVG 图标)
• 商品图: designwiki/style/asset/image/ (白底图、场景图、透明图)

技术规范

• 移动端适配: 750px 设计稿，使用 vw 单位
• 组件框架: React + TypeScript
• 样式方案: CSS Modules + Design Tokens
• 禁止: 渐变色、hover 效果、响应式布局

相关项目

• tmall-design-wiki-mcp-server - MCP服务器，提供AI工具集成
• tmall-design.com - 在线文档和使用指南

版本历史

v2.0.0 (2026-02-06)

• 重构知识库结构
• 新增多智能体工作流
• 优化组件代码和文档
• 支持 MCP 协议

v1.0.0

• 初始版本发布

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

Copyright (c) 2026 Tmall Design Team