前言¶
把设计稿交给 AI「整页直译」成前端代码，常见结果是布局错位、组件边界混乱、和设计稿对不上。页面越复杂——多模块、重复组件、响应式约束——一次性生成的代码越难修。下面介绍 SkillHub 社区 Skill figma2code（@user_3141f90e/figma2code，v1.0.0）：用「先规划、再分模块还原」的流程，在已连接 Figma 或 Mastergo MCP 的前提下，引导 Agent 分阶段产出代码，并留下 PLAN.md、COMPONENTS.md 两份导航文档，便于对照设计稿逐块核对。
这是什么¶
figma2code 是 SkillHub 上分类为 dev-programming 的社区 Skill，发布者为 user_3141f90e，标签标明 requires_api_key=false，无需额外 API Key。它面向「设计稿转代码」「Figma to code」「Mastergo 转代码」「还原 UI」等需求，核心不是替代 MCP 读稿，而是在读稿能力之上，规定 全局规划 → 组件树梳理 → 逐模块还原 → 整体拼接 四步，避免一把梭整页生成。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/user_3141f90e/figma2code
- API 坐标：https://api.skillhub.cn/user_3141f90e/figma2code
核心功能¶
依据官方简介，本 Skill 已核实的能力包括：
- 工作流分阶段推进：按全局规划、组件树梳理、逐模块还原、整体拼接四个阶段执行，而不是单次提示词覆盖整页。
- 多技术栈输出：支持将设计稿还原为 HTML/CSS、React、Vue、小程序、uni-app、Taro、Flutter、SwiftUI 等（具体栈由你在对话中指定）。
- 过程文档：执行过程中产出
PLAN.md（整体规划）与COMPONENTS.md（组件树与模块划分），方便后续改稿和对照设计。 - 触发场景内置：当用户提到复杂页面还原度低、一次性还原效果不好、或表达对 Cursor / Claude / GPT 还原结果不满时，Skill 会引导采用上述流程，而不是直接手写整页。
前提：需已连接 Figma 或 Mastergo 的 MCP，由 MCP 提供设计稿节点与样式信息；本 Skill 负责组织还原步骤与代码结构。
安装与启用¶
安装方式遵循 SkillHub 官方说明：先按 SkillHub 安装与优先源配置 准备 CLI，再安装本 Skill 到当前 Agent 的 skills 目录。
1、检查是否已安装 skillhub：
command -v skillhub && skillhub --version
2、若未安装，可使用官方脚本（完整安装或仅 CLI，按需选择）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
3、安装 figma2code 时，必须用 --dir 指向当前环境的 skills 目录，否则默认装到 ./skills/ 可能不会被 Agent 加载：
skillhub install user_3141f90e/figma2code --dir <你的 skills 目录>
常用客户端 skills 路径（来自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
也可在对话中让 Agent 按官方提示安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3141f90e/figma2code。
安装后按你所用客户端的要求重启或刷新 Skill 列表，再在对话中引用设计稿链接或节点，并说明目标框架（例如 React + Tailwind）。
典型用法¶
官方未提供单独的可复制「示例项目」，典型用法来自 Skill 自述的工作流，可复现步骤如下。
1、确认 Figma 或 Mastergo MCP 已连接，并能读取目标页面或 Frame。
2、在对话中说明需求，例如：把某 Figma 链接中的首页还原为 Vue 3 组件，页面含导航、列表、底部栏等多个模块。
3、让 Agent 启用 figma2code，按四阶段执行：先写 PLAN.md 划定模块与还原顺序；再写 COMPONENTS.md 梳理组件树与复用关系；然后逐模块生成代码；最后拼接入口与样式，做整体对齐。
4、每完成一个模块，对照设计稿检查间距、字体、颜色；再进入下一模块，避免整页一次性大改。
适合在对话里明确写出：目标技术栈、是否响应式、哪些 Frame/页面范围需要还原。
适用场景与注意¶
更适合：
- 多模块、有重复组件的复杂页面；
- 需要响应式或之前「一次性还原」效果不佳的稿；
- 已配置 Figma / Mastergo MCP，希望提高还原度而非从零猜布局。
限制与注意：
- 未连接设计工具 MCP 时，Skill 假设不成立，需先完成 MCP 配置。
- 本 Skill 组织流程与文档，不替代设计稿数据质量；图层命名混乱仍会增加梳理成本。
- SkillHub 页面显示版本为 v1.0.0；社区来源（
community），维护节奏以 SkillHub 与发布者更新为准。
结尾¶
figma2code 的价值在于把「设计稿转代码」从单次生成改成可核对的分阶段还原，并用 PLAN.md、COMPONENTS.md 固定上下文。若你正在处理 Figma / Mastergo 复杂页且对 AI 直出代码不满意，可在配置好 MCP 后从 SkillHub 安装 @user_3141f90e/figma2code 试用。
官方地址：https://www.skillhub.cn/skills/user_3141f90e/figma2code
