Figma 设计稿转代码

问题在哪

前端里有一类工作几乎无法省略：把 Figma 里的视觉规格落到代码里。手动对照截图时，间距、色值、字号和圆角往往在几轮改稿里才接近设计稿，而设计文件里其实已经有 Auto Layout、组件变体和 Styles/Variables 等结构化信息，却常常没被系统化用起来。

技能如何工作

Figma To Code 让 WorkBuddy 直接读取 Figma 的结构化数据（Figma 链接或本地导出），而不是只靠截图猜布局。核心流程可以概括为：

• 设计令牌：从稿子里汇总颜色并归类；缺色阶时会补全类似 primary-50～900 的层级；间距按 8px 基准网格 映射到 Tailwind 类（如 gap-4），不规则值会提示就近归格；同时处理字体、圆角与阴影。
• 组件映射：按节点特征识别语义组件（按钮、卡片、输入框、表格、导航栏、侧边栏等），并把 Figma Variants 转成代码里的变体系统。
• 代码生成：默认偏向 React + Tailwind，也支持 Vue/Svelte、CSS Modules、Next.js 等组合；生成后会做设计还原度验证，便于和设计师对稿。

文档建议与 frontend-design-pro 搭配：前者偏像素级还原，后者偏整体视觉质量。

边界与注意

• 稿越规范，输出越稳：优先用 Components/Variants、Auto Layout、清晰命名和 Variables/Styles；大量手动定位会降低推断精度。
• 只有截图时仍可走视觉推断，但精度低于 Figma API 数据；设计变更可用同步流程重新提取并对比差异。
• 生成结果接近生产代码，上线前仍需人工补交互状态（loading/error）、无障碍属性，复杂 Smart Animate 往往要手调。