figma2code

About this Skill

用"先规划、再分模块还原"的工作流，把 Mastergo 或 Figma 的复杂设计稿高保真还原成代码（HTML/CSS、React、Vue、小程序、uni-app、Taro、Flutter、SwiftUI 等），代替一把梭的整页直译。当用户提到把设计稿转代码、复杂页面还原度低、Figma to code、Mastergo 转代码、设计稿还原、还原 UI、扣图扣代码、把这个页面写出来等场景时都应使用本 skill；用户表达"之前 AI/Cursor 写的还原度不行"、"上次让 Claude/GPT 还原变形了"、"一次性还原效果不好"、"页面写出来对不上设计稿"等挫败感时也要使用——这正是本 skill 的核心目标用户。特别是页面包含多个模块、有重复组件、需要响应式、或之前一次性还原效果不好的时候，必须用本 skill 而不要直接动手写。本 skill 假设用户已经连接了 Figma 或 Mastergo 的 MCP，会引导 Claude 按 全局规划 → 组件树梳理 → 逐模块还原 → 整体拼接 四个阶段推进，并在过程中产出 PLAN.md 和 COMPONENTS.md 两份导航文档。