1 v0.3.0 更新于 2026-11-05

Figma CodeKit MCP MCP Server

Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop.

适用客户端

本地客户端

Claude Desktop、Claude Code、Cursor、Cline 等支持本地 MCP 的客户端

本地运行(npm)

{
  "mcpServers": {
    "figma-codekit-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp"
      ]
    }
  }
}

将上方 JSON 加入 MCP 客户端配置(如 Claude Desktop 的 claude_desktop_config.json 或项目的 .mcp.json)即可接入;远程接入按客户端要求填写 URL 与鉴权头。

figma_convert

获取 Figma 框架并确定性地转换为自包含 HTML(可选 React/Next.js 及响应式变体),同时生成 ir.json 和参考截图。

figma_verify

在 Chromium 中渲染 HTML,与参考图进行像素 diff、元素框 IoU 检查及绘制顺序和裁剪检查,返回针对性的修复指令。

figma_inspect

以缩进大纲形式打印 IR(角色、盒子、布局、文本、令牌),支持过滤,便于在不加载原始 Figma JSON 的情况下阅读结构。