jsdesign-mcp

从 即时设计 (JsDesign) 提取精确设计数据，通过 MCP 让 Claude 生成像素级还原的代码。

Extract exact design data from JsDesign and serve it via MCP for pixel-perfect code generation with Claude.

English | 中文

声明：本项目为社区开源工具，与即时设计官方无关。 Disclaimer: This is a community project, not affiliated with JsDesign officially.

---

中文

解决什么问题？

AI 从截图生成代码时，颜色、间距、字号全靠"猜"，还原度低。

jsdesign-mcp 直接从即时设计文件中提取精确数值（颜色、字体、间距、布局、阴影），通过 MCP 提供给 Claude，让 AI 基于真实设计数据生成代码，而非视觉估算。

工作流程

即时设计编辑器                 本地                         Claude
┌──────────────┐          ┌─────────────────┐          ┌──────────────┐
│  运行插件     │── JSON ──►│  MCP Server     │◄── MCP ──►│  生成精确代码  │
│  提取设计数据  │  或 HTTP  │  (端口 3333)     │  (tools)  │  像素级还原    │
└──────────────┘          └─────────────────┘          └──────────────┘

快速开始

1. 安装即时设计插件

1. 打开即时设计编辑器
2. 菜单 → 插件 → 开发者模式 → 导入本地插件
3. 选择 plugin/ 文件夹（manifest.json 所在目录）

2. 安装 MCP Server

cd mcp-server
npm install
npm run build

3. 配置 Claude

在 Claude 的 MCP 配置文件（claude_desktop_config.json 或 .claude.json）中添加：

{
  "mcpServers": {
    "jsdesign": {
      "command": "node",
      "args": ["/你的路径/jsdesign-mcp/mcp-server/dist/index.js"]
    }
  }
}

4. 使用

方式一：文件模式

1. 在即时设计中运行插件 → 点击"导出页面" → 下载 JSON
2. 将 JSON 文件放到 mcp-server/ 目录下，命名为 design-data.json
3. 对 Claude 说：“根据设计数据帮我构建这个页面”

方式二：HTTP 直连模式（推荐）

1. 在插件 UI 中输入 http://localhost:3333 作为服务器地址
2. 点击"导出页面" → 数据自动发送到 MCP Server
3. Claude 立即可以访问数据

MCP 工具列表

使用示例

你: "帮我根据设计数据构建 Header 组件"

Claude 自动执行:
1. 调用 get_page_overview → 了解页面结构
2. 调用 get_component_detail(name="Header") → 获取精确样式
3. 调用 get_node_css(name="Header") → 获取 CSS 参考
4. 生成像素级还原的 HTML + CSS 代码

---

English

What Problem Does It Solve?

When AI generates code from design screenshots, it “guesses” colors, spacings, and font sizes — leading to inaccurate results.

jsdesign-mcp extracts exact design data (colors, fonts, spacings, layout, effects) from JsDesign files and provides it to Claude via MCP. Claude then generates code based on precise values instead of visual estimation.

How It Works

JsDesign Editor                Local Machine                  Claude
┌──────────────┐          ┌─────────────────┐          ┌──────────────┐
│  Run Plugin  │── JSON ──►│  MCP Server     │◄── MCP ──►│  Generate    │
│  Extract     │  or HTTP  │  (port 3333)    │  (tools)  │  Pixel-      │
│  Design Data │          └─────────────────┘          │  Perfect Code │
└──────────────┘                                        └──────────────┘

Quick Start

1. Install the JsDesign Plugin

1. Open JsDesign editor
2. Menu → Plugins → Developer Mode → Import Local Plugin
3. Select the plugin/ folder (where manifest.json is located)

2. Set Up the MCP Server

cd mcp-server
npm install
npm run build

3. Configure Claude

Add to your Claude MCP config (claude_desktop_config.json or .claude.json):

{
  "mcpServers": {
    "jsdesign": {
      "command": "node",
      "args": ["path/to/jsdesign-mcp/mcp-server/dist/index.js"]
    }
  }
}

4. Use It

Option A: File mode

1. Run the plugin in JsDesign → click “Export Page” → download JSON
2. Place the JSON file in the mcp-server/ directory as design-data.json
3. Ask Claude: “Help me build this page based on the design data”

Option B: HTTP direct mode (Recommended)

1. In the plugin UI, enter http://localhost:3333 as the server URL
2. Click “Export Page” → data is sent directly to MCP server
3. Claude can immediately access the data

MCP Tools

---

Project Structure

jsdesign-mcp/
├── plugin/              # 即时设计插件 / JsDesign Plugin
│   ├── manifest.json
│   ├── code.js          # 提取节点数据 / Extract node data
│   └── ui.html          # 插件 UI
├── mcp-server/          # MCP Server (TypeScript)
│   ├── src/
│   │   ├── index.ts     # 入口：MCP + HTTP 服务器
│   │   ├── tools.ts     # MCP 工具定义
│   │   └── parser.ts    # 设计数据解析 & CSS 生成
│   ├── package.json
│   └── tsconfig.json
└── examples/
    └── sample-design-data.json  # 示例数据

Data Format

The plugin exports JSON with this structure:

{
  "exportVersion": "1.0.0",
  "page": {
    "name": "Homepage",
    "children": [
      {
        "id": "1:2",
        "name": "Header",
        "type": "FRAME",
        "width": 1440,
        "height": 72,
        "fills": [{ "type": "SOLID", "color": { "hex": "#FFFFFF" } }],
        "autoLayout": { "mode": "HORIZONTAL", "spacing": 24 },
        "children": []
      }
    ]
  },
  "designTokens": {
    "colors": ["#1A1A1A", "#4E6EF2"],
    "fontFamilies": ["Inter"],
    "fontSizes": [14, 16, 18, 48],
    "spacings": [8, 16, 24, 48]
  }
}

Related Links

• 即时设计 (JsDesign) - 国产在线设计工具
• 即时设计插件开发文档
• Model Context Protocol - AI 工具协议
• Claude Desktop - 支持 MCP 的 AI 助手

Contributing

欢迎贡献！请随时提交 Issue 和 Pull Request。

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT