UI Design to Code MCP server

UI Design to Code MCP

中文 | English

<!-- mcp-name: io.github.Kinglions/ui-design-to-code-mcp -->

MCP server for Codex, Cursor, and Claude Code that turns UI screenshots, source images, Figma MCP node JSON, and Figma-plus-screenshot hybrid input into traceable design-to-code artifacts.

npx -y ui-design-to-code-mcp@latest install --client codex

Use it when you need more than a one-shot screenshot-to-code prompt:

• Decode UI screenshots and Figma data into source manifests, reference analysis, Vision IR, Node Compression IR, and Semantic UI node trees.
• Preserve traceability from generated code plans back to visual primitives, grouped candidates, and source pixels.
• Generate adapter-ready artifacts for Web, iOS, Android, and other UI implementation targets.
• Run audit gates for text overflow, media coverage, navigation structure, visual review evidence, and cleanup.

Links:

• npm:
• MCP Registry: io.github.Kinglions/ui-design-to-code-mcp
• GitHub:
• Quick feedback:
• GitHub Issues:

中文

ui-design-to-code-mcp 是一个用于 UI design-to-code 流程的 MCP server。它可以把 UI 截图、Figma MCP 节点 JSON，或 Figma 节点 + 截图的混合输入，接入一套结构化、可追踪、可校验的产物流水线。

它不替代真正写代码的 agent/model。它的职责是标准化运行目录、输入清单、Figma 数据集、中间 IR 合约、目标平台布局产物、代码生成记录、精确切图产物、视觉验收门禁、产物校验和清理流程。

功能介绍

适用场景

• 需要把 UI 截图、参考图、GPT Image mockup、Figma URL、Figma MCP 节点 JSON 或 Figma 导出图转成可追踪的设计实现流程。
• 需要先解析设计结构、节点树、布局语义、组件层级、状态和资产，再进入代码实现。
• 需要 Web、iOS、Android 等多目标平台的 Target Layout IR 或实现计划。
• 需要对生成实现做截图验收、视觉差异复核、文本溢出检查、底部导航检查、资产覆盖检查和产物清理。

不适用场景

• 只想让模型基于一张图直接写最终代码，且不需要中间产物、追踪关系或验收证据。
• 纯 MCP 安装、版本、doctor、配置排查请求；这类请求不应该创建 design run。
• 没有设计源，也没有 design-to-code / design-decoding 意图的普通前端开发任务。

核心能力

• 支持 Codex、Cursor、Claude Code。
• 创建隔离的标准运行目录：generated/ui-design-to-code/ 或 /private/tmp/ui-design-to-code/。
• 统一接入截图、图片、Figma 节点 JSON、Figma + 截图混合输入。
• 覆盖完整流程：decode、planning、target IR、codegen、自动视觉验收、runtime review、validate、cleanup。
• 提供 Semantic UI IR、Cross-platform Node Data、Target Layout IR、视觉验收、产物生命周期等 schema 合约。
• 支持基于 source_bbox 的源图精确 bitmap/icon 切图。
• Codex 安装后使用本地稳定 serve 命令，避免每次 MCP 启动都执行 npx @latest。

产出物

• artifact-run-manifest.json：一次运行的产物清单、保留策略和清理边界。
• design-source-manifest.json / source image manifest：设计源、像素尺寸、坐标系和输入假设。
• figma-source-dataset.json：Figma 节点、样式、组件、注释、截图和资产下载信息。
• Reference Image Analysis、Vision IR、Node Compression IR、Semantic UI IR、Cross-platform Node Data。
• Target Layout IR、codegen 记录、visual review plan/result、QA audit 和 cleanup dry-run 结果。

使用手册

快速开始

安装到 Codex

npx -y ui-design-to-code-mcp@latest install --client codex

配置 Figma token：

ui-design-to-code-mcp setup-figma-token

该命令会提示粘贴 token，并写入 ~/.codex/config.toml 的 [mcpservers.uidesigntocode.env]。如果要在脚本里使用：

printf %s '<YOUR_FIGMA_TOKEN>' | ui-design-to-code-mcp configure-figma-token --client codex --stdin

安装到 Cursor 项目级配置

npx -y ui-design-to-code-mcp@latest install \
  --client cursor \
  --scope project \
  --project-dir .

配置 Figma token：

ui-design-to-code-mcp configure-figma-token --client cursor --scope project --project-dir . --token <YOUR_FIGMA_TOKEN>

一次安装到所有支持的本地客户端

npx -y ui-design-to-code-mcp@latest install \
  --clients cursor,claude-code,codex \
  --scope project \
  --project-dir .

检查或直接启动服务

npx -y ui-design-to-code-mcp@latest doctor
npx -y ui-design-to-code-mcp@latest serve

反馈与改进入口

如果你在使用中遇到模式选择不清晰、Figma token 检测不符合预期、视觉还原不稳定、资产同步路径错误、运行时验收失败或文档示例缺失，可以直接提交反馈：

Shortened. The full README is on GitHub.