ܧ 提 (JsDesign) 提,MCP 过 生成原原的原。 · JsDesign에서 정확한 디자인 데이터를 추출하고 Claude를 가진 pixel-perfect 부호 발생을 위한 MCP를 통해 봉사하십시오.

영어 | 中文

** 스티브 明**:일본의 目情社区,。 ** 면책 사항**: 이것은 JsDesign와 공식적으로 제휴하지 않는 커뮤니티 프로젝트입니다.

---

한국어

?

AI AI生成,、间距、字、字。

** m 中 中** 中**(中、字、m、m、m、m、m、 MC),过 AI AI AI生生成代码,。

####################

# # # # # # # # # # #

###1 安 件

· 2. 本 本 3. plugin/ [T1]] [T1]] [T1]] [T] [T]] [T0]] [T1]] [T1]] [T1]] [T1]] [T] [T]] [T] [T]] [T]] [T] [T]] [T] [T]] [T]] [T]] [T] [T]] [T] [T] [T] [T]] [T]] [T]] [T]] [T]] [T]] [T] [T]] [T] [T]] [T] [T] [T]]] [T] [T] [T] [T] [T]] [T] [T] [T] [T] [T] [T] [T] [T] [T] [T] [T] [T] [T]] [T] [T] [T]]] [T] [T] [T] [T]] [T] [T]]]]] [T]]] [T] [T]]]]

###2. 安smith MCP 서버

###3.

claude_desktop_config.json] .claude.json]]])中中:

###4. 칫

方式一:文件式

1. 下中行行件 → 下"“” → 下载 JSON
2. ☸ 文件放題 mcp-server/] 目下,名名古 [T5]] 3.:“”"

方式二:HTTP 式(짐)

1. 中件 UI 中中 http://localhost:3333 中地
2. “”" → MC MCP 서버
3. 클로드

MCP

|브랜드 |브랜드 | |------|------|------| | get_page_overview | 후쿠오카 현 | get_design_tokens | 후쿠오카시 공식 관광 정보 사이트 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션 인포메이션

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 │