designfit

本地服务

github.com开发工具73 周前更新

代码仓库访问官网

关于 designfit

designfit 是用于对照 Figma 设计检查前端实现的 MCP 服务和 Claude Code 技能。它按设计令牌和元素几何信息进行带容差的比较，并生成可执行的修复清单，而非依赖像素差异。

主要功能

01从 Figma 提取设计数据
02校验令牌与元素几何信息
03报告违规项和未映射元素
04返回带评分的校验结果
05通过保真技能迭代检查

适用场景

01核对 AI 构建的页面与 Figma 画框
02发现布局和颜色偏差
03指导前端逐轮修复

MCP 相关

它向 MCP 客户端提供 `designfit_extract` 和 `designfit_validate` 工具。提取工具接受 Figma 链接或提供的节点数据；校验工具返回通过状态、评分、违规项和未映射元素。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "as9978-designfit": {
      "command": "npx",
      "args": [
        "-y",
        "designfit"
      ],
      "env": {
        "FIGMA_TOKEN": "<FIGMA_TOKEN>"
      }
    }
  }
}

启动命令npx -y designfit

需要配置的环境变量

FIGMA_TOKEN密钥Figma personal access token. Lets designfit_extract fetch frames; without it, pass the /nodes JSON instead.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmdesignfit0.2.1stdio

工具

收录的工具列表 · 更新于 2 周前

参数	类型	必填
url	string	是
design	object	是
design.root	object	是
design.root.id	string	是
design.root.name	string	是
design.root.frame	object	是
design.root.frame.h	number	是
design.root.frame.w	number	是
design.root.frame.x	number	是
design.root.frame.y	number	是
design.root.tokens	object	是
design.root.tokens.fill	string	否
design.root.tokens.color	any	否
design.root.tokens.opacity	number	否
design.root.tokens.fontSize	number	否
design.root.tokens.fontFamily	string	否
design.root.tokens.fontWeight	number	否
design.root.tokens.lineHeight	number	否
design.root.tokens.borderColor	any	否
design.root.tokens.borderWidth	number	否
design.root.tokens.borderRadius	number	否
design.root.tokens.letterSpacing	number	否
design.root.children	array	是
design.root.tokenSources	object	否
viewport	object	是
viewport.width	number	是
viewport.height	number	是
tolerances	object	否
tolerances.color	object	否
tolerances.color.deltaE	number	否
tolerances.fontSize	object	否
tolerances.fontSize.px	number	否
tolerances.geometry	object	否
tolerances.geometry.size	number	否
tolerances.geometry.position	number	否
tolerances.lineHeight	object	否
tolerances.lineHeight.px	number	否
tolerances.borderWidth	object	否
tolerances.borderWidth.px	number	否
tolerances.borderRadius	object	否
tolerances.borderRadius.px	number	否
tolerances.letterSpacing	object	否
tolerances.letterSpacing.px	number	否
componentMap	array	是

详细介绍

designfit

根据 Figma 设计验证 AI 构建的前端 — 无需反复进行截图差异比较。

https://github.com/user-attachments/assets/01df52c9-90eb-4abc-b56c-fe18b31076cd

在一个包含 360 个节点的 Figma 画板上进行的实际运行：designfit_extract 根据链接读取画板，然后 designfit_validate 对三次构建迭代进行评分，结果从 87 到 89，再到 100 pass。整个过程中完全没有进行截图差异比较。

designfit 是一个 MCP 服务 + Claude Code 技能，用于检查渲染后的实现是否符合其 Figma 设计，并向编码 Agent 提供机器可执行的修复清单。它比较的是设计令牌和几何形状（元素框相对于屏幕根节点的位置），而非原始像素，因此字体渲染噪声不会让 Agent 来回反复调整。输入确定，输出也确定。

为什么比较几何形状，而非像素

将 AI 构建的 UI 与 Figma 画板进行截图差异比较，会让人陷入反复调整：抗锯齿和亚像素偏移会被判定为“仍然不对”，于是 Agent 会不停修复。designfit 比较的是设计师实际会注意到的问题 — 颜色错误、尺寸错误、未对齐、元素缺失 — 并将其作为带有明确容差的确定性测量结果。相同的输入，相同的输出，不会反复调整。

详细说明：为什么对 AI 构建的 UI 进行截图差异比较会导致反复调整，以及几何比较如何解决问题。

安装

Claude Code — 作为插件安装：

/plugin marketplace add as9978/designfit
/plugin install designfit@designfit

然后只需执行一次，获取测量引擎所用的浏览器：

npx playwright install chromium

该插件会一并注册 designfit_extract 和 designfit_validate MCP 工具，以及 designfit-fidelity-loop 技能，并会提示你输入一次 Figma 个人访问令牌（可选：不提供令牌时，extract 可接受粘贴的 /nodes JSON）。

其他 MCP 客户端 — 手动安装：

npm install -g designfit
npx playwright install chromium

{ "mcpServers": { "designfit": { "command": "designfit", "env": { "FIGMA_TOKEN": "<token>" } } } }

Windows： 某些 MCP 客户端无法启动裸命令 designfit（它会解析为 designfit.cmd）。请使用 { "command": "npx", "args": ["-y", "designfit"] }，或直接指定二进制文件 { "command": "node", "args": ["<absolute-path>/node_modules/designfit/dist/index.js"] }。上面的插件安装已经使用 npx 形式，因此不受影响。

使用

让你的 Agent 实现一个 Figma 画板，并提供该画板的链接。designfit-fidelity-loop 技能会驱动以下流程：designfit_extract → 构建 → 使用 data-designfit-id 标记元素 → designfit_validate → 修复 → 重复，直到 pass → 删除标记。

如果你安装了插件，技能已完成注册。手动安装时则不会自动注册：技能不会从 npm 依赖中自动加载，因此请将随包提供的 skill/SKILL.md 复制到 Agent 的技能目录中（对于 Claude Code：.claude/skills/designfit-fidelity-loop/SKILL.md），以便系统发现该技能。

两个工具：

designfit_extract 接受 Figma 链接（{ url }）、{ fileKey, nodeId }，或粘贴的 GET /v1/files/:key/nodes 响应正文（{ nodes }），以及可选的 maxDepth，并返回 { design, componentMap, viewport }。获取数据需要在 MCP 服务的环境中设置 FIGMA_TOKEN。隐藏节点会被跳过，仅由矢量组成的画板会作为一个叶节点处理。
designfit_validate 接受 { url, viewport, design, componentMap, tolerances? }，并返回 { pass, score, violations, unmapped }。