| name | figma-to-code |
| description | 将 Figma 设计稿翻译为业务代码。触发场景：用户给出 figma.com 链接要求生成 UI 代码；用户要求"把这个设计实现一下"、"按 Figma 实现页面/组件"、"对照 Figma 改一下样式"；任务包含 Figma frame/component 截图或 node-id；需要把 Figma 设计系统映射到代码组件。优先引导用户走 `@frontend/figma-to-code` 包（公司内部工具，按业务设计系统翻译），复杂场景再用 Figma MCP 兜底。 |
| allowed-tools | ["Bash","Read","Write","Edit"] |
figma-to-code 集成（引导层）
本 skill 是引导层，不重复 @frontend/figma-to-code 自身的工作流。后者会注入自己的 skill（.claude/commands/figma.md），由它负责完整流程。
本 skill 只解决：用户提到 Figma 时，确保 figma-to-code 已初始化，然后把控制权交给它。
执行流程
Step 1: 检查是否已初始化
test -f .claude/commands/figma.md && echo OK || echo MISSING
OK → figma-to-code 已就位，按 .claude/commands/figma.md 描述的流程执行MISSING → 进入 Step 2
Step 2: 引导初始化
npx @frontend/figma-to-code init
- 命令幂等，已存在的文件不会覆盖
- 跑完会生成
.claude/commands/figma.md、.claude/figma-context.md、.claude/project-tokens.md
- 详细参数（
--ui=dangoui 等）见 figma-to-code 包自身的 README
跑完后回到 Step 1。
Step 3: 交接
读 .claude/commands/figma.md，按里面定义的流程执行。该文件由 figma-to-code 包维护，是其工作流的唯一权威源。
兜底（Figma MCP）
如果 figma-to-code 处理不了（如跨 frame 状态、复杂动画），用 Figma MCP plugin：
/plugin 装 figma plugin（一次性）/mcp 完成 OAuth 授权（一次性）- 通过 MCP 工具读 Figma node tree
MCP 路径贵且慢（按 token 计费），不要默认走。
反模式（禁止）
- ❌ 跳过
.claude/commands/figma.md，自己写一套 figma-to-code 调用流程（细节会和 figma-to-code 升级不同步）
- ❌ 没初始化就直接调
npx @frontend/figma-to-code <url> 生骨架（缺 figma-context.md 翻译会翻车）
- ❌ 同一个 frame 同时用 figma-to-code 和 Figma MCP（重复 token 消费）
设计理由（为什么不写流程细节）
@frontend/figma-to-code 是独立维护的包，自带工作流（递归生成子组件、PAT 优先级、CLI 参数等）。这些细节会随包版本演进，写死在本 skill 里必然偏移。
本 skill 的边界是"引导用户初始化 + 兜底 MCP 入口"，流程细节交给 figma-to-code 包注入的 .claude/commands/figma.md。
配套工具
- env-check skill：会检测 figma-to-code CLI 是否装、
FIGMA_PAT 是否可得、.claude/commands/figma.md 是否在、Figma MCP 是否装。
