mcpField
B
build-figma

build-figma

github.com/cursor设计与 UI14.5k99 次安装今天更新
代码仓库

关于 build-figma

将 Figma 设计转为生产 UI 的编排技能，面向在代码仓库中工作的编码 Agent。它要求安装 Figma 插件并连接 MCP，以及 cursor-team-kit，并通过实现前后的输入和视觉验证关卡。

主要功能

  1. 01解析 Figma 文件和节点 ID
  2. 02获取设计上下文与截图
  3. 03将节点映射到仓库组件
  4. 04采用产品界面自身的样式系统
  5. 05依据 Figma 基准验证实时 UI
  6. 06报告证据和未解决差距

适用场景

  1. 01在现有仓库中实现 Figma 设计
  2. 02核对设计令牌与组件映射
  3. 03将实时 UI 截图与 Figma 截图比较
  4. 04跟踪视觉验证阻碍

MCP 相关

需要 Figma 插件及其连接的 MCP，以获取设计上下文、截图和资源 URL，并据此指导生产 UI 的实现。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/cursor/plugins --skill build-figma

安装后在 Claude Code 中输入/build-figma确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
design-system-discovery.md
failure-lessons.md
visual-judge.md

详细介绍

构建 Figma

将 Figma 编排为生产级 UI。它不会取代以下技能。每个阶段开始时都要阅读相应技能；不要在此重述。

需要 figma（插件和已连接的 MCP）以及 cursor-team-kit。先查看 ../dyl-mode/references/requirements.md。缺少依赖 → 停止并告知用户运行 /add-plugin <name>。

影响这些关卡设计的故障模式：references/failure-lessons.md。

委派给以下技能（不要复制）

阶段阅读
Figma MCP 机制每次调用 get_design_context 前，先阅读 Figma 插件中的 figma-design-to-code
设计系统清单references/design-system-discovery.md，然后阅读它发现的任何仓库本地设计系统技能或规则
视觉声明 / 判定格式cursor-team-kit 中的 verify-this + references/visual-judge.md
操控实时 UIcursor-team-kit 中的 control-ui，或仓库中针对该界面自身的操控技能

关卡

Build-figma progress:
- [ ] 0. Parse fileKey + nodeId (refuse file-only URLs)
- [ ] 1. Intake done before any product UI edit (see below)
- [ ] 2. Mapped to the repo's primitives/tokens only
- [ ] 3. Styling in the surface's own styling system
- [ ] 4. Visual judge VERIFIED per visual-judge.md (verify-this claim shape)

关卡 1 会阻止编码。“先实现功能，之后再润色视觉效果”是主要故障模式。

工作流（精简版）

0. 解析 URL

figma.com/design/:fileKey/...?node-id=1-2 → fileKey、nodeId（1-2 → 1:2）。分支 URL 使用 branchKey 作为 fileKey。没有 node-id → 停止。

1. 收集输入（阻塞）

遵循 figma-design-to-code。调用 get_design_context 和 get_screenshot。如果响应内容过少或过大，拆分为可实现的子节点。从 MCP URL 下载品牌资源；绝不要重绘 Logo。

运行设计系统发现。然后写入 /tmp/build-figma/<slug>/intake.md：

  • 目标界面、代码路径，以及如何在实时环境中操控它。
  • 节点树。
  • 度量表。 Figma px → 令牌；没有匹配令牌时使用固定值。
  • 节点 → 基础组件映射。 将每个 Figma 节点映射到现有组件。没有匹配项的节点标记为新建，并说明原因。
2. 实现

使用界面所采用的样式系统和映射后的组件。如果 Figma px 与基础组件的默认尺寸不一致，在该样式系统中固定 Figma 度量值。不要全局修改基础组件的默认值。以下情况严格禁止。

3. 视觉判定（阻塞）

结合 references/visual-judge.md 对 verify-this 进行专项调整。将 Figma 截图作为基准，将实时捕获图作为处理结果。先匹配主题明暗，再应用评估标准并写出判定结果。判定为 NOT VERIFIED 后，修复未通过的行，重新捕获，并再次应用评估标准。重复此过程，直到 VERIFIED 或 INCONCLUSIVE。判定为 INCONCLUSIVE 后，停止并报告阻塞因素；不要声称已完成关卡 4。

4. 报告

输入文件路径、映射重点、判定结果 + 证据路径、剩余差距。

严格禁止

  1. 将 Figma MCP Tailwind/React 直接粘贴为产品代码。
  2. 在 Figma 或仓库已有品牌资源时自行编造。
  3. 用“差不多”的基础组件替代结构不同的 Figma 设计。
  4. 未检查 Figma px 就相信文本/按钮/对话框的尺寸令牌。
  5. 未经视觉判定就声称视觉工作已完成。
  6. 在 intake.md 创建之前编辑产品 UI。

评论

支持 Markdown