Skip to main content
Glama
bosong

Moke MCP

by bosong
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
Python
Remote

MOKE MCP

将摹客（Mockplus）设计数据接入 AI 编码助手的 MCP Server。对标 Figma MCP，实现设计到代码的自动化工作流。

功能特性

能力

MCP Tool

说明

元数据

get_metadata

获取页面/分组层级树（XML 格式）

设计上下文

get_design_context

完整设计数据（YAML/JSON），含布局、样式、颜色、排版

截图

get_screenshot

整页 @2x PNG 截图（base64）

设计变量

get_variable_defs

Design Token 提取（颜色、字体、间距）

切图下载

download_design_images

按需下载 PNG/SVG 切图到本地

设计数据

get_design_data

get_design_context 别名（兼容 Figma MCP）

设计规范

create_design_system_rules

生成 Tailwind/CSS 设计系统 Markdown 文档

设计数据经过： 包含树重建 → 坐标相对化 → Token 去重 → 机械蒸馏，AI 可直接消费。

代码生成（code_gen）当前不对外提供，推荐由大模型直接分析设计稿数据生成目标平台代码（如 Swift/React 等），效果更佳。

前置要求

  • Node.js >= 18

  • Python 3（数据转换脚本依赖）

# macOS
brew install python3

# 验证
python3 --version

安装

方式 1：npx 一键使用（推荐）

无需安装，直接运行：

npx @moke-mcp/cli serve

方式 2：全局安装

npm install -g @moke-mcp/cli
moke-mcp serve

方式 3：本地开发

git clone https://github.com/bosong/MOKE_MCP.git
cd MOKE_MCP
cd packages/server && npm install && npm run build && cd ../..
cd packages/cli && npm install && npm run build && cd ../..
node packages/cli/dist/index.js serve

配置 Cookie（首次使用必须）

摹客 API 需要浏览器 Cookie 认证，有效期约 30 天。

获取 Cookie

  1. 浏览器打开 app.mockplus.cn 并登录

  2. 按 F12 → Application → Cookies → app.mockplus.cn

  3. 复制所有 cookie，格式为 name=value，用 ; 连接

    token=xxxxx; JSESSIONID=yyyyy; _ga=zzzzz

配置方式（三选一，按优先级）

方式 1：环境变量（推荐，Agent 中直接设置）

export MOKE_COOKIE="token=xxx; JSESSIONID=yyy; ..."

在 AI 编辑器的 MCP 配置中也可直接写入 env 字段（见下方编辑器配置）。

方式 2：CLI 交互式

moke-mcp cookie set
# 粘贴 cookie → 回车 → Ctrl+D 完成

方式 3：手动文件

mkdir -p ~/.config/mockplus
echo "你的cookie" > ~/.config/mockplus/cookie
chmod 600 ~/.config/mockplus/cookie

验证配置

moke-mcp cookie status

快速开始

# 1. 配置 Cookie
export MOKE_COOKIE="你的cookie"

# 2. 启动 Server
npx @moke-mcp/cli serve

# 3. 在 AI 编辑器中配置 MCP（见下方各编辑器 JSON）
# 4. 在 AI 对话中粘贴摹客设计稿 URL 即可

AI 编辑器 MCP 配置

Trae（字节跳动 AI IDE）

Trae MCP 配置文件位于项目目录的 .trae/mcp.json：

{
  "mcpServers": {
    "moke-mcp": {
      "command": "npx",
      "args": ["-y", "@moke-mcp/cli", "serve"],
      "env": {
        "MOKE_COOKIE": "你的cookie"
      }
    }
  }
}

配置后在 Trae 中直接发送摹客设计稿 URL，AI 即可读取设计数据。

Cursor

配置文件：.cursor/mcp.json（项目根目录下）

{
  "mcpServers": {
    "moke-mcp": {
      "command": "npx",
      "args": ["-y", "@moke-mcp/cli", "serve"],
      "env": {
        "MOKE_COOKIE": "你的cookie"
      }
    }
  }
}

配置后重启 Cursor，在 Composer 中粘贴摹客 URL 即可使用。

Claude Desktop

配置文件路径：

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "moke-mcp": {
      "command": "npx",
      "args": ["-y", "@moke-mcp/cli", "serve"],
      "env": {
        "MOKE_COOKIE": "你的cookie"
      }
    }
  }
}

配置后重启 Claude Desktop，在对话中粘贴摹客 URL 即可。

VS Code Copilot

配置文件：.vscode/mcp.json（项目根目录下）

{
  "servers": {
    "moke-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@moke-mcp/cli", "serve"],
      "env": {
        "MOKE_COOKIE": "你的cookie"
      }
    }
  }
}

配置后打开 VS Code Copilot Chat，使用 Agent 模式粘贴摹客 URL。

Qoder（阿里灵码）

配置文件：.qoder/mcp.json（项目根目录下）

{
  "mcpServers": {
    "moke-mcp": {
      "command": "npx",
      "args": ["-y", "@moke-mcp/cli", "serve"],
      "env": {
        "MOKE_COOKIE": "你的cookie"
      }
    }
  }
}

配置后在灵码对话中粘贴摹客 URL 即可。

MCP Tools 参考

get_metadata

获取设计文件的页面/分组层级树。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

用户：看看这个设计稿有哪些页面
https://app.mockplus.cn/app/xxx/develop/design/yyy

get_design_context

获取完整设计上下文，返回结构化 YAML（含节点树、样式、布局、文本）。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

format

"yaml" | "json"

❌

输出格式，默认 yaml

scale 单位缩放（默认 1，通常无需设置）：设计稿原始数值基于 Sketch 画布像素（如 device ios2x）。默认不填 scale 时直接输出画布原始像素值，绝大多数场景不需要任何配置 —— AI 可依据返回数据 metadata 中的 device 与 size（如 ios2x、750 × 1630）自行推算出正确的逻辑宽度（375pt）进行布局：

metadata:
  name: 会场页面 - 黑版直播
  device: ios2x           # 源设计稿设备标记
  size: {width: 750, height: 1630}

仅当目标端需要特殊换算时，才按以下方式传入系数，例如设置输出 scale 为 0.5：

  1. 环境变量：MOKE_SCALE=0.5

  2. 项目配置：.moke-mcp.json 中 "output": { "scale": 0.5 }

  3. CLI 本地调用：moke-mcp tool get_design_context <url> --scale 0.5（优先级最高）

设置后所有长度值（坐标/尺寸/字号/圆角/线宽/效果偏移）被等比缩放，返回数据的 metadata.scale 会记录该系数 —— 数值已换算，勿再按 device 物理倍率二次缩放。

用户：把这个设计稿还原成 Vue 组件
https://app.mockplus.cn/app/xxx/develop/design/yyy

get_screenshot

获取整页 @2x PNG 截图（base64 编码）。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

用户：给我看看这个页面的截图
https://app.mockplus.cn/app/xxx/develop/design/yyy

get_variable_defs

提取设计文件中的 Design Token（颜色、字体、间距等）。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

用户：提取这个设计稿的颜色和字体变量
https://app.mockplus.cn/app/xxx/develop/design/yyy

download_design_images

下载切图资源（PNG/SVG）到本地目录。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

imageRefs

string[]

✅

切图 hash 列表（从 globalVars.styles 中提取 type: IMAGE 的 imageRef）

outputDir

string

❌

输出目录，默认 ./mockplus-assets

用户：把这个页面的所有切图下载到 ./assets 目录
https://app.mockplus.cn/app/xxx/develop/design/yyy

get_design_data

get_design_context 的别名，兼容 Figma MCP 命名习惯。参数同上。

create_design_system_rules

基于 Design Token 生成设计系统规范文档。

参数

类型

必填

说明

url

string

✅

摹客设计稿 URL

framework

"react" | "vue"

❌

目标框架，默认 react

styleLibrary

"tailwind" | "css-modules" | "styled-components"

❌

样式方案，默认 tailwind

用户：基于这个设计稿生成 Tailwind 设计系统规范
https://app.mockplus.cn/app/xxx/develop/design/yyy

CLI 命令参考

moke-mcp init             # 初始化项目配置（.moke-mcp.json）
moke-mcp serve            # 启动 MCP Server

# Cookie 管理
moke-mcp cookie set       # 交互式设置 Cookie
moke-mcp cookie status    # 查看 Cookie 状态
moke-mcp cookie clear     # 清除 Cookie
moke-mcp cookie guide     # 显示 Cookie 配置完整指南

# 配置管理
moke-mcp config show      # 显示当前配置
moke-mcp config set <key> <value>  # 设置配置项

# Tool 命令组（本地直接调用 MCP Tools，无需 MCP 客户端）
moke-mcp tool get_metadata <url>              # 获取页面/分组 XML 层级树
moke-mcp tool get_design_context <url>        # 获取设计数据（YAML/JSON）
  --format yaml|json                          #   输出格式，默认 yaml
  --raw                                       #   输出未蒸馏原文
  --scale <num>                               #   （可选）单位缩放系数，如 0.5；覆盖 MOKE_SCALE/配置
  -o, --out <path>                            #   导出到文件
moke-mcp tool get_screenshot <url>            # 获取整页 @2x 截图
  -o, --output <path>                         #   PNG 保存路径
  --base64                                    #   输出 base64 到 stdout
moke-mcp tool get_variable_defs <url>         # 提取 Design Token
moke-mcp tool download_design_images <url>    # 下载切图
  --refs <hash1,hash2,...>                    #   imageRef 列表
  -o, --output <dir>                          #   输出目录
moke-mcp tool get_design_data <url>           # get_design_context 别名
moke-mcp tool create_design_system_rules <url> # 生成设计系统规范
  --framework react|vue                       #   目标框架，默认 react
  --style tailwind|css-modules|styled-components

Tool 命令示例

# 查看页面树
moke-mcp tool get_metadata "https://app.mockplus.cn/app/xxx/develop/design/yyy"

# 获取设计数据并导出为 JSON 文件
moke-mcp tool get_design_context "https://app.mockplus.cn/app/xxx/develop/design/yyy" \
  --format json -o design.json

# 默认：按画布物理像素单位输出（无需 --scale，AI 依据 device/size 自行换算）
moke-mcp tool get_design_context "https://app.mockplus.cn/app/xxx/develop/design/yyy"

# 特殊需求：按 ios2x 逻辑单位输出（物理像素 ÷ 2）
moke-mcp tool get_design_context "https://app.mockplus.cn/app/xxx/develop/design/yyy" \
  --scale 0.5

# 获取截图
moke-mcp tool get_screenshot "https://app.mockplus.cn/app/xxx/develop/design/yyy" \
  -o ./preview.png

# 提取设计变量
moke-mcp tool get_variable_defs "https://app.mockplus.cn/app/xxx/develop/design/yyy"

# 生成 Tailwind 设计规范
moke-mcp tool create_design_system_rules "https://app.mockplus.cn/app/xxx/develop/design/yyy" \
  --framework react --style tailwind

工作流示例

示例 1：读取设计稿并生成代码

你：把这个设计稿还原成 Vue 组件
   https://app.mockplus.cn/app/xxx/develop/design/yyy

AI：→ get_metadata  → 发现页面"首页"
   → get_design_context → 获取完整设计数据（YAML）
   → 分析节点树、颜色、字体、布局
   → 生成 Vue SFC 组件 + Tailwind 类名

示例 2：导出切图资源

你：下载这个页面所有切图到 ./public/assets
   https://app.mockplus.cn/app/xxx/develop/design/yyy

AI：→ get_design_context → 扫描 globalVars 中 IMAGE fill 的 imageRef
   → download_design_images → 批量下载到指定目录

示例 3：生成设计系统规范

你：为这个设计稿生成 Tailwind 配置和设计规范文档
   https://app.mockplus.cn/app/xxx/develop/design/yyy

AI：→ create_design_system_rules → 生成含颜色调色板、
   字体层级、Tailwind 配置的 Markdown 文档

项目结构

MOKE_MCP/
├── packages/
│   ├── server/             # MCP Server 核心包
│   │   └── src/
│   │       ├── api/        # HTTP 客户端（Python 子进程封装）
│   │       ├── mcp/        # MCP Tools 注册
│   │       └── services/   # 设计上下文/截图/变量提取/代码生成
│   └── cli/                # CLI 工具包
│       └── src/
│           ├── commands/   # init / serve / config / cookie / tool
│           └── utils/      # version / config-file
├── scripts/
│   └── mockplus/           # Python 数据转换脚本（基于 mockplus-context）
└── .moke-mcp.json          # 项目配置文件

原理

AI Client (Trae/Cursor/Claude)
  │ stdio (MCP JSON-RPC)
  ▼
Moke MCP Server (Node.js)
  │ child_process.spawn('python3')
  ▼
mockplus-context scripts (Python)
  │ HTTP（Cookie 认证）
  ▼
app.mockplus.cn REST API + CDN

设计数据通过摹客 DT 的 Sketch JSON API 获取，经过 Python 脚本的包含树重建、坐标相对化和 Token 去重后，以结构化 YAML 形式返回给 AI。

常见问题

Q: 提示 "Cookie 未配置" 怎么办？

A: 运行 moke-mcp cookie guide 查看完整配置指南，或直接 export MOKE_COOKIE="你的cookie"。

Q: Cookie 过期了怎么办？

A: 重新从浏览器获取 cookie，运行 moke-mcp cookie set 或更新环境变量。有效期约 30 天。

Q: 提示 "Python 3 未找到"？

A: macOS 执行 brew install python3，或从 python.org 下载安装。

Q: 支持摹客 RP 吗？

A: 当前仅支持摹客 DT（app.mockplus.cn），不支持摹客 RP（原型工具）。

Q: 与 Figma MCP 的关系？

A: Moke MCP 对标 Figma MCP 的工具集，输出格式兼容，但数据源为摹客 DT。详见 Figma MCP 对比。

致谢

MOKE_MCP 的设计灵感来自以下两个优秀项目：

  • mockplus-context by MySwallow — Agent Skill 形式的摹客设计数据获取方案，其中 mockplus.py 脚本（REST API 调用、Cookie 认证、Sketch JSON 的 transform/distill 管线）被 MOKE_MCP 通过子进程方式复用，是数据获取的核心

  • mockplus-rp-skill by Retohsaka — 摹客 RP 原型工具的数据解析方案，为多产品线支持提供了参考思路

感谢两位作者的开源贡献。

License

MIT