20 · Figma 设计转代码

传统方案的问题：
  
  「截图转代码」工具（如 Anima、Zeplin 导出）
  → 只能生成 HTML/CSS 骨架
  → 无法对接现代框架（React/Vue）
  → 交互逻辑完全缺失
  → 手动修复的时间 ≈ 自己重写

  Figma 插件（Figma to Code、Tailwind CSS Plugin）
  → 只能导出单个图层或选中组
  → 无法理解页面级别的布局逻辑
  → 缺乏上下文协作

设计师给的 Figma 截图 / 源文件
       ↓
Trae Builder 多模态输入
       ↓
AI 视觉分析，理解布局、颜色、间距、组件结构
       ↓
生成对应框架的组件代码
       ↓
Webview 实时预览
       ↓
对比原始设计 → 指出偏差 → 迭代修复
       ↓
可交付的前端代码

操作步骤：
1. Figma 中选中 Frame → Export → PNG（2x）
2. 拖入 Trae Builder 底部的输入区域
3. 输入框显示缩略图预览
4. 在图片下方写一段文字指令
5. 回车，AI 开始分析

1. 在 Figma 中创建 Personal Access Token
   （Settings → Account → Personal Access Tokens）
2. 在 Trae 中配置 MCP Server，指向 Figma API
3. 在 Builder 中输入 Figma 文件链接
4. Trae 通过 MCP 自动拉取文件中的设计数据

像素阵列
   ↓
边缘检测 → 识别矩形、圆形、线条、文字区域
   ↓
区域分割 → 划分导航栏、内容区、侧边栏、页脚
   ↓
元素识别 → "这个矩形是按钮"、"这个区域是输入框"
   ↓
文字提取 → OCR 识别图中所有可见文字
   ↓
颜色提取 → 自动采集主色、辅色、背景色、文字色

┌─────────────────────────────────────────────────────┐
│ 顶部导航栏（深色背景，高度 56px，Logo + 右侧头像）      │
├──────────┬──────────────────────────────────────────┤
│ 左侧边栏  │ 右侧内容区                                │
│ 240px    │                                          │
│          │  ┌───┐ ┌───┐ ┌───┐  ← 三张统计卡片，Grid │
│ 导航项1   │  │ 12 │ │ 8  │ │ 34 │                  │
│ 导航项2   │  └───┘ └───┘ └───┘                     │
│ 导航项3   │                                          │
│          │  ┌─────────────────────────────────┐     │
│          │  │ 表格：姓名 │ 角色 │ 状态 │ 操作   │     │
│          │  ├─────────────────────────────────┤     │
│          │  │ ...                            │     │
│          │  └─────────────────────────────────┘     │
└──────────┴──────────────────────────────────────────┘

// 设计稿特征：
// 间距一致（8px 倍数）、颜色成体系（设计 token）
// AI 输出：
<div className="flex items-center gap-4 p-6 bg-white rounded-xl shadow-sm">
  <Avatar src={user.avatar} />
  <div>
    <h3 className="text-lg font-semibold text-gray-900">{user.name}</h3>
    <p className="text-sm text-gray-500">{user.role}</p>
  </div>
</div>

// 优势：代码极简，视觉一致性高
// 劣势：类名串长，学习成本

// 设计稿特征：自定义程度高、品牌色独特、组件独占样式多
// AI 输出：
.card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

// 优势：样式隔离，可读性好
// 劣势：文件多，类名管理成本

// 设计稿特征：和组件库默认风格接近
// AI 输出：
<Card sx={{ display: 'flex', p: 3, borderRadius: 2 }}>
  <CardContent>
    <Typography variant="h6">{title}</Typography>
    <Typography variant="body2" color="text.secondary">
      {description}
    </Typography>
  </CardContent>
</Card>

// 优势：内置响应式和可访问性
// 劣势：定制困难，包体积大

你的设计稿和 Tailwind 的 "utility-first" 哲学接近吗？
├── 是 → 用 Tailwind，还原度最高
└── 否 → 你现有的项目用的是什么 CSS 方案？
        ├── CSS Modules → 指定 CSS Modules
        ├── Styled Components → 指定 CSS-in-JS
        ├── 组件库（AntD/MUI）→ 指定组件库
        └── 没有现有项目 → 选 Tailwind，省心

第一层：布局还原（80-95%）
========================================
- 页面结构是否正确（导航在顶、侧边在左？）
- 组件位置关系（卡片三列？表单上下排列？）
- 间距比例（大间距 vs 小间距 的比例是否正确）
- ✅ AI 做得最好的一层

第二层：视觉还原（70-90%）
========================================
- 颜色匹配（色值偏差 ±3-8%，肉眼基本察觉不到）
- 字号层级（AI 相对准确，但行高需要检查）
- 圆角/边框/阴影（大致匹配，需微调）
- ⚠️ 需要人工 review 的主要区域

第三层：行为还原（30-70%）
========================================
- hover/active/focus 状态（AI 默认加基础样式）
- 展开/收起/弹窗 交互（需要文字明确说明）
- 动画过渡（完全缺失，需补充）
- 数据加载/空态/错误态（需要文字说明）
- ❌ AI 默认不做，必须用文字描述

         ┌──────────────────────────┐
         │  第一步：输入设计稿          │
         │  截图 / Figma MCP / PNG   │
         └───────────┬──────────────┘
                     ↓
         ┌──────────────────────────┐
         │  第二步：AI 生成代码        │
         │  Builder 分析 → 写代码     │
         └───────────┬──────────────┘
                     ↓
         ┌──────────────────────────┐
         │  第三步：Webview 预览      │
         │  本地 dev server 实时渲染  │
         └───────────┬──────────────┘
                     ↓
         ┌──────────────────────────┐
         │  第四步：人肉对比           │
         │  设计稿 vs 预览 → 列出差异  │
         └───────────┬──────────────┘
                     ↓ 有差异
         ┌──────────────────────────┐
         │  第五步：文字修正指令        │
         │  "导航栏间距缩小"、"字号调大"│
         └───────────┬──────────────┘
                     ↓ (回到第三步)
               ┌───────────┐
               │ 验收通过 ✅ │
               └───────────┘

[拖入的设计稿图片]

「这个是一个 SaaS 后台的仪表盘页面，用 React 18 + TypeScript + Tailwind CSS 实现。
顶部导航栏，左侧是折叠式边栏，右侧主内容区分为 4 块：
1. 顶部 4 张统计卡片（今日活跃用户、收入等）
2. 中间折线图
3. 下方产品列表表格
所有卡片都有微阴影 card shadow。颜色用灰色系，强调色 #6366F1。」

□ 布局：导航栏位置、侧边栏宽度、内容区占比
□ 颜色：主色、文字色、背景色、卡片色、边框色
□ 字体：标题字号、正文字号、行高、字重
□ 间距：卡片间距、内边距、列表项间距、头像大小
□ 组件：按钮样式、输入框样式、表格对齐
□ 响应式（如果指定了）：在 1440 / 1024 / 768 宽度下检查
□ 交互：hover 效果、点击态、focus 样式

❌ 不精确："这个间距不对"
✅ 精确："统计卡片之间的间距从 24px 改为 16px，卡片内边距从 20px 改为 24px"

❌ 不精确："颜色不对"
✅ 精确："导航栏背景色用截图里的深灰色 #1E293B，文字白色 #FFFFFF"

❌ 不精确："布局有问题"
✅ 精确："左侧边栏默认收起（宽度 64px），鼠标悬停时展开（240px），用 transition 动画"

第 1 轮 → AI 初版
  还原度 ≈ 82%
  主要问题：间距偏大、强调色不准确、表格没有对齐

第 2 轮 → "卡片间距改为 gap-4，强调色用 #6366F1，表格列左对齐"
  还原度 ≈ 90%
  主要问题：图表组件用的是模拟数据、导航栏高度不对

第 3 轮 → "图表用 Recharts 实现折线图，导航栏高度 64px"
  还原度 ≈ 94%
  主要问题：响应式断点还没处理

第 4 轮 → "在 768px 断点以下，侧边栏自动收起"
  还原度 ≈ 97%
  验收通过

你要从设计稿还原 UI 吗？
├── 这是一个已有的、成熟的设计系统组件吗？
│   └── 是 → 手动编码（精确控制，一次过）
│   └── 否 → 继续
│
├── 页面主要是 标准 UI 组件（按钮/表单/表格/导航）？
│   ├── 是 → 用 AI 设计转代码，迭代修复
│   └── 否 → 页面包含独特交互或复杂动画吗？
│           ├── 是 → AI 生成骨架，手动填交互细节
│           └── 否 → 仍然可以用 AI，但你需要在
│                    文字描述上花更多功夫
│
└── 你是为了快速验证想法（低保真原型）？
    └── 是 → 随便截图，AI 生成，5 分钟出结果

高还原度设计稿的特征：
✓ 使用 8px 网格或 4px 网格体系
✓ 颜色数量有限（主色 + 1-2 辅色 + 中性色）
✓ 组件使用了标准的 Figma Auto Layout
✓ 文字层级清晰（H1 / H2 / Body / Caption）
✓ 间距一致性高

低还原度设计稿的特征：
✗ 大量使用绝对定位（没有 Auto Layout）
✗ 颜色过多（一屏内超过 10 种不同色值）
✗ 组件嵌套超过 6 层
✗ 使用非常规布局（重叠元素、倾斜、旋转）
✗ 低分辨率导出（宽 < 1200px）

[设计稿图片]
照着这个写代码。

[设计稿图片]
用 Next.js 14 + TypeScript + Tailwind CSS 还原这个仪表盘页面。

技术要求：
- 组件拆分：PageHeader / KpiCards / RevenueChart / OrdersTable
- 颜色主色 #6366F1，卡片背景 white，文字色 gray-900 / gray-500
- 间距体系用 Tailwind spacing，卡片间 gap-6
- 响应式：>= 1280px 四列卡片，< 768px 两列
- 图表用 Recharts，表格用 <table> 原生语义标签
- 添加基础 hover 效果：卡片 hover:shadow-md，按钮 hover:opacity-90

文字写中文（页面上能看到的所有文字用中文）。

第一轮：给顶部导航栏 + 侧边栏 → 生成布局框架 Layout
第二轮：给内容区的统计卡片区域 → 生成 StatCard 组件
第三轮：给表格区域 → 生成 Table 组件
第四轮：给底部页脚和辅助信息 → 生成 Footer
第五轮：把所有组件组合到一个页面

第一轮必写的信息：
□ 框架：React / Vue / Next.js / Nuxt（附带版本号）
□ 语言：TypeScript（推荐）或 JavaScript
□ CSS 方案：Tailwind / CSS Modules / Styled Components
□ 组件库（如果有）：Shadcn UI / Ant Design / MUI
□ 文字语言：中文 / 英文 / 双语
□ 特殊约束：不需要后端 / 需要响应式 / 需要暗色模式

可选但推荐：
□ 颜色体系：主色值、辅助色值
□ 组件拆分偏好：大组件 or 小组件
□ 性能要求：列出重点

❌ "感觉不太对" → AI 不知道你指的是颜色、间距还是字体
❌ "整体差点意思" → 没有操作价值
❌ "看起来有点怪" → 你的直觉是对的，但 AI 没法据此行动

✅ "卡片左侧内边距从 24px 改为 16px"
✅ "按钮圆角从 8px 改为 6px，和设计稿保持一致"
✅ "表格行高从 48px 改为 40px，并添加斑马线交替背景色"
✅ "导航栏在移动端宽度从 240px 改为全屏宽度"

逐项操作检查清单：

点击测试：
□ 按钮在 hover/active/disabled 状态下是否正确
□ 链接是否可跳转
□ 下拉菜单是否展开/收起
□ 弹窗/Modal 是否出现和关闭

滚动测试：
□ 内容超出视口后是否能正常滚动
□ 固定导航栏是否保持位置
□ 长列表的滚动性能

输入测试：
□ 输入框能否正常输入
□ 表单验证是否有提示信息
□ 搜索框是否有防抖/提交逻辑

响应式测试（如果适用）：
□ 拖动窗口宽度，布局在各断点下是否正确
□ 移动端菜单切换是否工作
□ 字体大小在窄屏上是否需要调整

[拖入 Figma 截图]

用 React 18 + TypeScript + Tailwind CSS 还原这个仪表盘页面。
组件拆分：DashboardLayout、Navbar、Sidebar、StatCard、ChartWidget、OrdersTable

配色：
- 侧边栏背景 #1E293B，文字 #94A3B8，选中项背景 #334155
- 主内容区背景 #F8FAFC
- 卡片白色背景，边框 #E2E8F0
- 强调色 #6366F1
- 正文字体颜色 #334155，次要文字 #64748B

间距体系用 Tailwind spacing，所有卡片圆角 rounded-xl。
图表用 Recharts 柱状图（含图例）。
用模拟数据填充，便于预览。

所有界面文字用中文。

1. 卡片间距从 gap-6 改为 gap-4，内边距从 p-6 改为 p-5
2. 侧边栏选中项背景色改为 #334155，更深的灰色
3. 图表重新设计：柱状图颜色用 #6366F1，去掉网格线，
   坐标轴文字灰色 #64748B，字号 12px
4. 表格加一列"用户"，左侧显示圆形头像 + 用户名，
   参考设计稿第三列

1. 导航栏高度从 64px 改为 60px
2. 卡片阴影统一用 shadow-md
3. 表格中"状态"列加绿色圆点表示"正常"，红色圆点表示"异常"

正确的心智模型：
  设计稿转代码 = 帮你写好了 CSS + JSX 骨架
  不是 = 你的业务功能已经实现了

方案 A：让 AI 用 SVG 路径重绘
  → 适合简单图标（箭头、心形、设置齿轮）
  → 复杂 logo 大概率失真

方案 B：让 AI 使用图标库（Lucide / Heroicons）
  → 适合通用图标（搜索、菜单、关闭、用户）
  → 需要提前指定图标库名称

方案 C：手动导入 SVG 文件
  → 设计稿中的自定义图标导出为 .svg 文件
  → 通过组件导入使用（import { ReactComponent }）
  → 100% 精确