figma-to-code

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：

1. /plugin 装 figma plugin（一次性）
2. /mcp 完成 OAuth 授权（一次性）
3. 通过 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 是否装。