即时 MCP - 即时设计 MCP 桥接插件

即时 MCP 是一个连接即时设计与 MCP (Model Context Protocol) 的桥接插件，允许 AI 助手（如 Claude）直接操作即时设计中的设计稿。

功能特性

• 获取设计数据：读取当前页面节点、选中元素、节点层级结构
• 导出图片：支持 PNG、JPG、SVG、PDF 格式导出，可指定缩放比例
• 保存到本地：将设计元素导出并保存到指定路径
• 执行脚本：在插件环境中执行自定义 JavaScript 代码
• 批量下载图标：批量导出选中节点为 SVG 格式

系统要求

• Node.js 18+
• 即时设计桌面版或网页版
• MCP 客户端（如 Claude Desktop）

快速开始

1. 安装全局MCP服务包

npm i -g @jiujiang/jishi-mcp-server

2. 配置 MCP 客户端

在 MCP 客户端配置文件中添加（如 claude_desktop_config.json）：

{
  "mcpServers": {
    "jishi-design": {
      "command": "npx",
      "args": ["-y", "@jiujiang/jishi-mcp-server"]
    }
  }
}

3. 启动插件

1. 打开即时设计
2. 打开九匠即时MCP插件，等待状态显示 "Connected to MCP Server"（绿色）

架构说明

┌─────────────────┐      stdio         ┌─────────────────┐
│   MCP Client    │ ◄─────────────────► │   MCP Server    │
│  (Claude等)     │                     │  (Node.js)      │
└─────────────────┘                     └────────┬────────┘
                                                 │
                                          WebSocket:19999
                                                 │
                                        ┌────────▼────────┐
                                        │   Plugin UI     │
                                        │   (ui.html)     │
                                        └────────┬────────┘
                                                 │
                                          postMessage
                                                 │
                                        ┌────────▼────────┐
                                        │   Plugin Code   │
                                        │   (code.js)     │
                                        └────────┬────────┘
                                                 │
                                           jsDesign API
                                                 │
                                        ┌────────▼────────┐
                                        │    即时设计      │
                                        └─────────────────┘

可用工具

| 工具名称 | 说明 | |---------|------| | get_page_nodes | 获取当前页面所有顶层节点（画板）列表 | | get_selection | 获取当前选中的节点详细信息 | | get_node_children | 获取指定节点的子节点 | | save_image | 导出节点为图片并保存到指定路径 | | download_icons | 批量下载选中节点为 SVG | | execute_script | 执行自定义 JavaScript 代码 |

文件结构

即时MCP/
├── manifest.json      # 插件清单文件
├── code.js           # 插件主代码
├── ui.html           # 插件 UI（WebSocket 桥接）
├── server/           # MCP Server
│   ├── src/
│   │   └── index.ts  # Server 源码
│   ├── dist/         # 编译产物
│   └── package.json
├── README.md         # 项目简介
└── USAGE.md          # 使用说明

故障排除

• 状态显示 "Disconnected"：确保 MCP Server 正在运行，端口 19999 未被占用

许可证

MIT License