Figma to Code：用 AI 将设计稿自动转换为前端代码

设计稿还原一直是前端开发中最机械、最耗时的环节之一。设计师在 Figma 里画好了每个像素，开发者却要用肉眼量间距、取色值、写布局——这个过程既容易出错，又没有太多创造性。

Figma to Code 是一套基于 AI（Claude）的自动转码方案，核心思路是：把 Figma 的设计数据结构化，再通过分步工作流让 AI 生成可用的前端代码。不是简单地截图让 AI "看图写代码"，而是给 AI 提供精确的节点树和设计 Token，让输出结果可控且可维护。

项目参考：

Melody86/CaludeSkill/figma-to-code

为什么不直接截图让 AI 写代码？

直接把设计稿截图丢给 GPT/Claude 说"帮我写出来"，确实能得到一些代码，但实际项目中几乎没法用：

问题	原因
尺寸不准	AI 只能目测像素，无法获取精确数值
颜色偏差	从图片采样的颜色和设计稿定义的色值有误差
布局方式猜测	AI 不知道设计师用的是 Flex 还是绝对定位
无法识别组件复用	看起来一样的卡片，AI 可能会生成 N 份重复代码
资源缺失	图标和图片没有实际文件，只能用占位符

所以更靠谱的思路是：先用 Figma 插件把设计数据导出为结构化 JSON，再让 AI 基于精确数据生成代码。

整体工作流

整个转码分为 5 个步骤，每一步都有明确的输入输出：

Step 0: 检查目标项目
  → 了解已有组件/布局/适配方案，避免重复开发
       ↓
Step 1: 生成 Mermaid UI 结构图
  → 将 Figma 节点树转为可视化的组件层级
       ↓
Step 2: 选择技术栈
  → Flutter 或 React + SCSS
       ↓
Step 3: 提取可复用组件
  → 识别重复模式，抽取为独立组件
       ↓
Step 4: 生成代码
  → 基于模板规则，生成符合项目规范的代码

Step 0: 检查目标项目

这一步容易被忽略，但非常关键。在动手生成代码之前，先扫描目标项目：

主页面目录（Flutter: lib/screens/，React: src/pages/）
公共组件目录（lib/widgets/ 或 src/components/）
屏幕适配方案（是否已用 flutter_screenutil、MediaQuery、CSS 媒体查询等）
已有的 Header、NavBar、背景组件

核心原则：如果项目里已经有一个 AppHeader 组件，就不要从 Figma 再生成一个。在后续的结构图中标记为"蒙版"，代码生成时直接引用现有组件。

Step 1: Figma 节点树 → Mermaid 结构图

这是整个流程中最核心的一步。把 Figma 导出的 JSON 节点树转化为 Mermaid 流程图，用来描述 UI 的组件层级关系。

mermaid

flowchart TB
    subgraph Page [Frame 640]
        subgraph Header [Header]
            Title[Pal list]
            AddBtn[Plus]
            Profile[Avatar]
        end
        subgraph Content [Content]
            PalCard1[PalCard: Pal's name]
            PalCard2[PalCard: Mily]
            PalCard3[PalCard: Pal's name]
            Hint[Max 3 pals can be added]
        end
        subgraph Nav [BottomNav]
            Home[Home]
            Play[Play]
            Pals[Pals active]
        end
    end

结构图中还可以标注每个元素的坐标和尺寸，方便后续精确还原：

titleNode["标题: 欢迎登录\nx:150, y:50, width:200, height:40"]

装饰层处理

Figma 设计稿中通常包含系统级 UI（状态栏、Home Indicator 等）。这些在代码中不需要实现，在结构图中直接标记 decorative: true 或忽略即可。

蒙版标记

对于项目中已有的组件，用蒙版标记避免重复：

headerNode["Header(AppHeader)\nmask: existing-component"]

Step 2: 技术栈适配

根据目标平台选择代码模板：

Flutter — 以 750px 设计宽为基准，用 MediaQuery.of(context).size.width / 750 做缩放
React + SCSS — 根据设计尺寸设置 max-width、媒体查询断点

不同技术栈有各自的布局映射规则：

Figma 属性	Flutter	React/CSS
`layoutMode: "HORIZONTAL"`	`Row`	`flex-direction: row`
`layoutMode: "VERTICAL"`	`Column`	`flex-direction: column`
`layoutMode: "NONE"`	`Stack`	`position: absolute`
`color: { r, g, b }` (0-1 范围)	`Color.fromRGBO(r255, g255, b*255, a)`	`rgb(r255, g255, b*255)`

Step 3: 识别可复用组件

从节点树中找出重复模式：

识别规则	判断依据	提取结果
列表项	多个结构相同的 FRAME（如 Frame 649/650/651）	`PalCard` 组件
导航项	多个 icon + label 布局的 FRAME	`NavItem` 组件
头部	固定结构的顶部区域	`PageHeader` 组件
图标	重复的 VECTOR/BOOLEAN_OPERATION 节点	SVG 文件

判断两个节点是否可复用：对比 children 结构、width/height、填充样式。如果命名有重复前缀（Frame 8、Frame 647、Frame 648），大概率是同一组件的多个实例。

Step 4: 生成代码

最后按照模板规则输出代码文件：

先生成公共组件（Step 3 提取的）
再生成页面/屏幕组件
最后输出主题文件（颜色、字体、间距常量）

资源文件的路径映射：Figma 中 isAsset: true 的节点，根据 id 字段对应到本地图片文件（如 924-2353.png）。

Figma 节点的解析要点

Figma 插件导出的 JSON 包含这些核心字段：

节点类型映射

Figma type	含义	代码对应
FRAME	容器/布局	`div`、`Column/Row`、`View`
RECTANGLE	填充矩形	带 `background` 的 `div`
ELLIPSE	圆形/椭圆	`border-radius: 50%` 或 `Circle`
TEXT	文本节点	`Text` / `span`
VECTOR	路径/形状	SVG 或图标组件
GROUP	未分组容器	`div` / `Stack`

颜色转换

Figma 中颜色值是 0-1 的浮点数，需要转换：

javascript

// Figma: { r: 0.235, g: 0.968, b: 0.827 }
// → Hex:    #3CF5D3
// → CSS:    rgb(60, 247, 211)
// → Flutter: Color(0xFF3CF5D3)

渐变处理

json

{
  "gradientStops": [
    { "color": { "r": 0.937, "g": 0.474, "b": 0.294 }, "position": 0 },
    { "color": { "r": 0.235, "g": 0.968, "b": 0.827 }, "position": 1 }
  ]
}

转换为：

CSS: linear-gradient(to bottom right, #EF7A4B 0%, #3CF5D3 100%)
Flutter: LinearGradient(colors: [Color(0xFFEF7A4B), Color(0xFF3CF5D3)])

和其他方案的对比

方案	原理	精确度	可维护性
截图 → AI 写代码	纯视觉理解	低	差
Figma 官方 Dev Mode	手动查看+复制	高	取决于开发者
Figma to Code (本方案)	结构化数据 + AI 生成	高	好 (组件化输出)
Anima / Locofy	商业插件自动转码	中	差 (生成代码难修改)

本方案的核心优势是可控性：通过 Mermaid 结构图做中间层，开发者可以在代码生成前审查和调整组件拆分；蒙版标记机制确保和已有项目无缝集成；技术栈模板让输出代码符合团队编码规范。

实践建议

Figma 插件选择 — 需要一个能导出 trimmed JSON（去除冗余字段、替换图片引用）的插件，原始 Figma API 数据太冗余
设计规范先行 — 如果设计师在 Figma 中就遵循组件化原则（Auto Layout、命名规范），转码的效果会好很多
渐进式采纳 — 先在新页面上试跑，生成的代码作为起点手动调整，逐步建立对输出质量的信心
配合 Code Review — AI 生成的代码一定要 review，尤其是响应式布局和边界 case

小结

Figma to Code 的核心不是"让 AI 替你写 UI"，而是把设计稿还原这件事从非结构化（看图写代码）变成结构化（解析数据 → 规则映射 → 模板生成）。AI 在这里的角色是执行者，真正的技术方案在于如何拆解 Figma 节点、如何定义组件提取规则、如何用模板约束输出质量。

这套工作流的思路也不限于 Figma，任何能导出结构化设计数据的工具（Sketch + MeasurePlugin、Adobe XD）都可以套用类似的流程。

为什么不直接截图让 AI 写代码？ ​

整体工作流 ​

Step 0: 检查目标项目 ​

Step 1: Figma 节点树 → Mermaid 结构图 ​

装饰层处理 ​

蒙版标记 ​

Step 2: 技术栈适配 ​

Step 3: 识别可复用组件 ​

Step 4: 生成代码 ​

Figma 节点的解析要点 ​

节点类型映射 ​

颜色转换 ​

渐变处理 ​

和其他方案的对比 ​

实践建议 ​

小结 ​