figma-agent-kit: Skill for Cursor

Figma UI 1:1 还原（Figma Agent Kit）

沟通：简体中文。

定位

本 Skill 指导 Agent 用 本仓库配套工具链完成通用 UI 稿还原：

组件	用途
Figma Agent Kit 插件	Figma Desktop 中运行；桥客户端、可选切图 UI
figma-agent-mcp	stdio MCP：读节点 / 截图 / save_screenshots 等

不是：某一活动仓专用流水线；不绑定 partyActivity / hh-active / fe-prd-plan。
是：任意前端项目里「对着 Figma scope 做结构还原 + 切图 + 验收」的通用流程。

前置文档（需要时 Read）：

• 上手 / 工具表：仓库 docs/zh/getting-started.md、docs/zh/tools.md 或文档站
• 桥协议：docs/zh/bridge-protocol.md

---

一句话总览

锁 scope →（确认门）→ list_files → get_node 读结构 → TEXT 全量归类
  → 切图打标 → get_screenshot 基准图 → save_screenshots×3 落盘
  → bounds 落码 → 分块对照 → 验收清单勾完才能说「1:1」

默认 figmaMode: strict。仅用户明文「快速 / fast」时可压缩步骤 3 的冗长层级表、可省略步骤 5 落盘基准图；不得跳过 3b TEXT 清单与步骤 4 切图粒度，不得整页一图兜底。

---

流程总图

flowchart TD
  A[用户给 Figma URL] --> B[解析 scopeNodeId]
  B --> C{实现向确认门?}
  C -->|未确认| D[禁止 get_node / 切图 / 落码<br/>仅 list_files + 定输出目录]
  C -->|已确认| E[list_files → connected fileKey]
  E --> F[get_node 读子树结构 + bounds]
  F --> G[步骤 3b TEXT 全量清单归类]
  G --> H[步骤 4 非 TEXT 打标 skin/whole-btn/panel-bg]
  H --> I[get_screenshot 基准图]
  I --> J[save_screenshots scale3 落 images]
  J --> K[步骤 7 bounds→样式单位落码]
  K --> L[步骤 7b 分块对照基准图]
  L --> M{块通过?}
  M -->|否| K
  M -->|是| N[对照验收清单]
  N --> O{全通过?}
  O -->|否| K
  O -->|是| P[可写「已按 scope 1:1 对照验收」]

---

0. 前置检查（工具链）

- [ ] Figma Desktop 已打开目标文件（设计模式；勿依赖易休眠的浏览器标签）
- [ ] 已 Import 并运行 Plugins → Development → Figma Agent Kit
- [ ] 插件显示 MCP Bridge 已连接（绿色）
- [ ] Cursor（或其它宿主）已配置 figma-agent-mcp：npx -y figma-agent-mcp
- [ ] MCP 面板可见工具（约 37 tools）
- [ ] node-id：URL 中 1-234 → MCP 用 1:234

MCP 调用约定

1. 优先使用已连接的 figma-agent-mcp（宿主里名称可能是 figma-agent-mcp / user-figma-agent-mcp 等）。
2. 先 list_files，用返回的 connected fileKey；勿只用 URL 里的 fileKey（易出现 No plugin connected）。
3. 默认端口 1998（与 bridge.config.json / 插件构建一致）；自定义端口须 MCP 与插件同改。
4. 调用前用 GetMcpTools（若环境要求）确认参数 schema。

常用工具：

用途	工具
探活 / 取 fileKey	list_files
读选区	get_selection
读节点树	get_node（nodeIds，可选 depth）
选中 / 聚焦	set_selection、scroll_and_zoom_into_view
视觉基准（Agent 侧预览）	get_screenshot（默认 PNG，scale 默认 2；基准建议 scale 1～2）
切图落盘	save_screenshots（scale: 3，PNG compress: true）