@refore-ai/html-to-jsdesign-mcp

Agent 按你的要求打开很多页面 / 浏览模块，比如一个操作流程 / 所有子模块，挨个通过这个 MCP 导入到 JSDesign 的设计稿里。

MCP (Model Context Protocol) server，让 AI agent（Claude Code、Claude Desktop、Codex、Cursor、 Windsurf 等任意 MCP 客户端）通过 JSDesign 里的 Refore 网页转设计 插件，把 HTML 文件和网页导入到 JSDesign 画布。

环境要求

• Node.js 18+
• 已在 JSDesign 安装 Refore 网页转设计 插件

配置

Claude Code

claude mcp add refore-html-to-jsdesign -- npx -y @refore-ai/html-to-jsdesign-mcp

Claude Desktop — 写入 claude_desktop_config.json，改完重启：

{
  "mcpServers": {
    "refore-html-to-jsdesign": {
      "command": "npx",
      "args": ["-y", "@refore-ai/html-to-jsdesign-mcp"]
    }
  }
}

Codex — 写入 ~/.codex/config.toml：

[mcp_servers.refore-html-to-jsdesign]
command = "npx"
args = ["-y", "@refore-ai/html-to-jsdesign-mcp"]

Cursor / Windsurf / 其它 — 用与上面 Claude Desktop JSON 相同的 command / args。

然后在 JSDesign 里打开 Refore 网页转设计 插件，进入 MCP tab 并连接，就可以让 agent 导入页面了。

工具

| 工具 | 用途 | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | import_html | 首选导入入口：导入一段 HTML 内容或一个本地 .html 文件路径。可选 assets（HTML 引用的本地文件）、viewport、target（插入到某节点下 / 替换某节点，replace 可用 nodeId 或上次导入的 taskId 定位）、wait | | no_browser_fallback | agent 无论何种原因拿不到页面 DOM 时的兜底：先让用户在「插件按 URL 抓取导入 / 用浏览器插件录制导入」中二选一，用户选前者才按 URL 匿名抓取导入（服务端从插件版本对应区域抓取，有区域局限） | | get_capture_guide | 返回 DOM 抓取标准作业指南（抓取脚本 / 大体积回传通道策略 / 导入验证重导闭环），dump 前调用一次 | | get_node_info | 查询节点位置 / 尺寸 / 可见性 / 直接子级摘要，导入后自检用 | | export_node_screenshot | 导出节点 PNG 截图（长边默认 1024px），肉眼级确认导入结果 | | remove_import | 按 taskId 删除某次导入的产物（幂等；只认本连接的任务） | | get_status | 返回 ws_port / connected / queue { mine, total, running } | | wait_task | 阻塞等一个任务落定，返回最终结果 | | get_task_status | 非阻塞查询某个任务当前的 phase / 结果 |