# Figma设计稿生成Skill

> 使用 Figma MCP 工具生成/落地设计稿的规范。当需要在 Figma 中从线框、PRD 或截图生成设计稿时使用。

- Skill: `sky-cube/figma-skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sky-cube/figma-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sky-cube/figma-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: Sky-Cube (https://skillmd.com/u/sky-cube)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sky-cube/figma-skill

---

# Figma设计稿生成Skill

## 适用场景
线框/交互方案确认后,需要调用 Figma MCP 工具(mcp__figma__use_figma 等)把方案落地为可协作、可评审的 Figma 设计稿。

## 执行步骤
1. 确认设计输入:收集线框、PRD 功能清单、交互说明、已有设计系统(组件/变量/样式)清单。
2. 确定文件与画布:确认目标 fileKey(用户提供的 URL 或先建新文件),确定页面/Frame 归属位置,一个功能一个顶层 Frame。
3. 加载强制前置 Skill:调用 use_figma 前必须先加载 figma-use Skill;建新文件前先加载 figma-create-new-file Skill,禁止直接裸调工具。
4. 按页面逐帧生成:先搭布局骨架(尺寸/Auto Layout/间距),再放组件与文本,最后设变量与样式,禁止一帧内堆完所有页面。
5. 使用设计系统:优先引用已有组件与变量,禁止硬编码颜色/字号;缺失时先补变量再使用。
6. 每帧生成后自检:节点层级命名、Auto Layout 对齐、间距一致性、文本内容与 PRD 一致。
7. 汇总交付:输出文件链接 + 页面 Frame 索引(nodeId 列表)+ 与 PRD 的对应关系说明。

## 规范要点
- 工具前置条件不可跳过:figma-use / figma-create-new-file / figma-generate-design 等配套 Skill 必须先加载,否则工具会失败或产出不符合项目惯例的设计。
- 分批执行:一次 use_figma 调用只完成一个页面或一个区块,代码超过 50000 字符会失败,按 Frame 拆分调用。
- 文本内容必须来自 PRD:按钮文案、提示语、表头逐字对照,禁止生成时自行发挥文案。
- 组件优先:能引用组件实例就不用自绘图形;不能引用的先确认是否需要在组件库补充。
- 五态完整:每个页面生成默认态/空态/加载态/错误态/权限受限态对应的帧。

## 输出模板
```
# [功能名] Figma 设计稿交付说明
1. 文件链接与页面索引(页面名 → Frame nodeId)
2. 生成清单(页面/五态覆盖/使用组件/新增变量)
3. 与 PRD 对应关系(功能条目 → 设计帧)
4. 遗留问题(未落地项/需人工调整项)
```

## 自检清单
- [ ] use_figma 前已加载 figma-use Skill
- [ ] 颜色字号全部走变量,无硬编码
- [ ] 文案与 PRD 逐字一致
- [ ] 每页五态帧完整
- [ ] 节点命名规范、图层分组清晰
- [ ] 交付说明含 fileKey 与 nodeId 索引