内容
# 设计适配
**验证 AI 构建的前端与其 Figma 设计 — 不使用截图差异化。**
`designfit` 是一个 MCP 服务器 + Claude 代码技能，它检查渲染实现与其 Figma 设计，并为编码代理提供机器可行的修复列表。它比较 **设计令牌** 和 **几何** （相对于屏幕根的元素框）— 而不是原始像素 — 因此字体渲染噪声永远不会使代理振荡。确定性输入，确定性输出。
[](https://github.com/as9978/designfit/actions/workflows/ci.yml)
## 为什么是几何，而不是像素
截图差异化 AI 构建的 UI 与 Figma 框架会产生冲突：抗锯齿和子像素偏移被视为“仍然错误”，因此代理永远修复。designfit 比较设计师实际捕获的内容 — 错误的颜色、错误的大小、错位、缺失的元素 — 作为 **确定性测量与明确的公差**。相同的输入，相同的输出，没有振荡。
## 安装
```bash
npm install -g designfit
npx playwright install chromium
```
添加到您的 MCP 客户端（例如 Claude Code）：
```json
{ "mcpServers": { "designfit": { "command": "designfit" } } }
```
> **Windows:** 一些 MCP 客户端无法启动一个裸 `designfit`（它解析为 `designfit.cmd`）。使用 `{ "command": "npx", "args": ["-y", "designfit"] }`，或直接指向二进制文件 `{ "command": "node", "args": ["<absolute-path>/node_modules/designfit/dist/index.js"] }`。
## 使用
连接 Figma 的 MCP，然后要求您的代理实施一个框架。`designfit-fidelity-loop` 技能驱动：构建 → 使用 `data-designfit-id` 标记元素 → `designfit_validate` → 修复 → 重复直到 `pass`。
技能在包的 `skill/SKILL.md` 中提供。技能不会从 npm 依赖项自动加载 — 将其复制到您的代理技能目录（对于 Claude Code：`.claude/skills/designfit-fidelity-loop/SKILL.md`），以便可以发现它。
一个工具，`designfit_validate`，接受 `{ url, viewport, design, componentMap, tolerances? }` 并返回 `{ pass, score, violations, unmapped }`。
有关实际 Figma 框架的完整演练 — 循环、复制粘贴提示和故障排除 — 请参阅 [docs/validating-a-figma-frame.md](docs/validating-a-figma-frame.md)。
## v1 范围
一个视口。令牌 + 几何 + 存在检查。响应式多断点和感知 VLM 回落正在路线图中，不在 v1 中。
## 许可证
MIT
