Menu
将 Figma 设计稿翻译为业务代码。触发场景：用户给出 figma.com 链接要求生成 UI 代码；用户要求"把这个设计实现一下"、"按 Figma 实现页面/组件"、"对照 Figma 改一下样式"；任务包含 Figma frame/component 截图或 node-id；需要把 Figma 设计系统映射到代码组件。优先引导用户走 `@frontend/figma-to-code` 包（公司内部工具，按业务设计系统翻译），复杂场景再用 Figma MCP 兜底。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
在任意空目录中从零创建数字人智能体应用。自动识别场景（业务流/纯对话/能力展示），从内置模板复制项目文件，引导用户改配置、本地调通。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 是否装。