技能介绍

问题

复杂设计稿一次性转代码时，模型常同时追踪整页节点、token、断点和布局，容易出现组件不一致、间距漂移、视觉层级被压扁、响应式行为丢失。问题不在单次生成能力，而在上下文超载后细节被挤掉。

工作方式

figma2code 把规划和执行拆开。它要求先连接 Figma 或 Mastergo MCP，用结构化节点数据读取类型、布局、填充等，并用渲染图做视觉对照。阶段 1 先确认目标框架、TypeScript、样式方案、现有组件库、token 主题、产物路径、响应式范围和基准宽度，再产出一份 PLAN.md，列清设计 token 与模块清单。阶段 2 生成 COMPONENTS.md，合并同款组件，优先判断 Element Plus、Vant、Ant Design、shadcn/ui 或内部组件库是否可直接使用、wrap 或自建，并补全 hover、disabled、loading 等状态。阶段 3 按 token、原子、复合、模块的顺序逐块实现，每个模块都拉取节点数据、渲染 2x 参考图、对照写代码，并检查颜色、间距、字号、布局等必修差异。阶段 4 拼接整页，核对跨模块一致性、断点行为，并交付文件清单、复用清单、未修复差异和使用说明。

适用边界

它适合有明显分区、重复组件或之前还原不好的页面；单个小按钮不需要走完整流程。没有设计 MCP 时不能仅靠截图替代，因为间距、颜色和字体 token 需要结构化数据。小程序、Flutter、SwiftUI、React Native 场景要额外注意 rpx、安全区、原生组件层级、行高和阴影差异；动效、空状态、错误态和可访问性若不明确，不应从静态截图盲猜。