Menú
将 Figma 设计稿翻译为业务代码。触发场景：用户给出 figma.com 链接要求生成 UI 代码；用户要求"把这个设计实现一下"、"按 Figma 实现页面/组件"、"对照 Figma 改一下样式"；任务包含 Figma frame/component 截图或 node-id；需要把 Figma 设计系统映射到代码组件。优先引导用户走 `@frontend/figma-to-code` 包（公司内部工具，按业务设计系统翻译），复杂场景再用 Figma MCP 兜底。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
在任意空目录中从零创建数字人智能体应用。自动识别场景（业务流/纯对话/能力展示），从内置模板复制项目文件，引导用户改配置、本地调通。Use when 用户说"新建数字人应用""开发智能体""做 XX 场景的 Demo""搭一个数字人""创建一个数字人项目"。
接到"加 Biz 类型 / 加新消息类型 / 加新消息样式 / 发某某卡片 / 想发个表单让用户填 / 消息发出去对端没收到"等需求时触发。引导决策：基础类型 vs 已有 BIZ vs 新增 BIZ；新增 BIZ 必须走后端专属接口 + 前后端共同约定 4 步流程；前端职责仅"调发送接口 + 写展示卡片"。
合并 master 前检查 swagger-repo.json 是否残留 feat 分支，半自动逐条切回并重跑 gen:api。**触发场景**：准备合并到 master 之前（由 git-ship skill 自动调用）/ 修改过 swagger-repo.json 的 branch 字段 / 拉到陌生分支后想确认 API 类型来源 / 用户输入 /check-api-branch。
多模型并行 Code Review。**自动触发场景**：用户拍板 plan 后改完代码（中等 / 复杂任务），AI 主动询问「需要 code review 吗？」**手动触发**：用户输入 `/code-review` 或说「review 一下这次改动 / 帮我看看这次提交」。按改动复杂度分级派 SubAgent，**轻量改动只派 1 个 sonnet 兜底，复杂任务才派 3 个含 opus 架构师**——不浪费最强模型在简单任务上。
公司前端通用编码规范（从 11 个项目 + 飞书知识库抽取）。当用户开始编写/修改前端 TS/TSX/Vue/SCSS 代码，或者需要 code review / 检查规范一致性时，**必须**加载本 skill 作为硬性规则基础。
启动开发环境 + 调试。触发场景："看一下效果 / 跑起来看看 / 启动一下 / 打开看看 / 启动 dev / 跑 dev"。本 skill 读 profile.devServer 配置 → 校验前置 → 后台 spawn dev server → 等 ready → 拼带 token 的真实域名 URL → open 浏览器。同时含项目特定的"关键调试场景"片段（按 profile 加载）。
| 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"] |
本 skill 是引导层，不重复 @frontend/figma-to-code 自身的工作流。后者会注入自己的 skill（.claude/commands/figma.md），由它负责完整流程。
本 skill 只解决：用户提到 Figma 时，确保 figma-to-code 已初始化，然后把控制权交给它。
test -f .claude/commands/figma.md && echo OK || echo MISSING
OK → figma-to-code 已就位，按 .claude/commands/figma.md 描述的流程执行MISSING → 进入 Step 2npx @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。
读 .claude/commands/figma.md，按里面定义的流程执行。该文件由 figma-to-code 包维护，是其工作流的唯一权威源。
如果 figma-to-code 处理不了（如跨 frame 状态、复杂动画），用 Figma MCP plugin：
/plugin 装 figma plugin（一次性）/mcp 完成 OAuth 授权（一次性）MCP 路径贵且慢（按 token 计费），不要默认走。
.claude/commands/figma.md，自己写一套 figma-to-code 调用流程（细节会和 figma-to-code 升级不同步）npx @frontend/figma-to-code <url> 生骨架（缺 figma-context.md 翻译会翻车）@frontend/figma-to-code 是独立维护的包，自带工作流（递归生成子组件、PAT 优先级、CLI 参数等）。这些细节会随包版本演进，写死在本 skill 里必然偏移。
本 skill 的边界是"引导用户初始化 + 兜底 MCP 入口"，流程细节交给 figma-to-code 包注入的 .claude/commands/figma.md。
FIGMA_PAT 是否可得、.claude/commands/figma.md 是否在、Figma MCP 是否装。