name	description
figma-mcp	Fetches Figma design layout and styling data via get_figma_data for accurate UI implementation. Use when implementing designs from Figma, when user pastes a Figma file/frame/group link, or when converting Figma designs to code.

Framelink Figma MCP 工具

通过 figma-developer-mcp 将 Figma 设计数据提供给 AI，用于按设计稿实现 UI。

数据源优先级（必读）

回答布局、样式、文案，或据此写代码时：

先用本地快照：根据 Figma 链接解析 fileKey 与 node-id（见下），算出目录名 <fileKey>-<node-id>，检查项目根目录 .design/<folder>/meta.json 与 figma-data.md 是否都存在。
若两者皆存在：不得仅为查阅设计数据而调用 Figma MCP（get_figma_data / download_figma_images）。使用 Read 读取 meta.json、figma-data.md，需要像素级对照时 Read preview.png（若存在）。
仅在以下情况调用 MCP：
- 本地无对应目录，或缺少 meta.json / figma-data.md 之一；
- 用户 明确要求 与 Figma 同步 / 刷新 / 更新 / 对齐最新设计稿（或同义表述）；
- 用户点名要从 Figma 源拉取（而非使用仓库内 .design）。
MCP 拉取或修正设计后：在 .design/<fileKey>-<node-id>/ 新建或更新 meta.json、figma-data.md；按需更新 preview.png。目录与命名规则见项目根目录 .design/README.md。

调用 MCP 时，工具参数中的 nodeId 通常使用 3:2069（冒号）；本地目录名仍用 URL 的 3-2069。

在以下场景下使用本技能（并遵守上文优先级）：

工具	用途
`get_figma_data`	根据 Figma 链接获取布局、样式等设计数据
`download_figma_images`	按需导出 PNG/SVG 等（如 `preview.png`）

解析链接：从用户粘贴的 URL 得到 fileKey、node-id，映射到 .design/<fileKey>-<node-id>/。
本地命中：若该目录下已有 meta.json 与 figma-data.md → 只读本地，继续实现或对照；不调用 MCP。
本地未命中或用户要求同步：调用 get_figma_data（及按需 download_figma_images）。
落盘：回写 .design/.../meta.json、figma-data.md，可选 preview.png（导出文件须落在项目仓库的 .design 下，若工具写入其它路径应复制进项目）。
生成代码：根据快照中的布局与样式信息生成实现。

MCP 会对 Figma API 返回做简化（约压缩 90%），只保留与布局、样式相关的内容，减少无关信息对模型的影响。落盘时可将该返回全文写入 figma-data.md（可用 yaml 代码块包裹便于阅读）。