Design to Code

问题：设计到代码的手动转换效率低、误差大

手动切图时代：
设计稿 → 人工量尺寸 → 人工取色值 → 人工写 CSS → 人工还原布局
耗时：2-3 天/10 页，像素误差 2-5px

解决：AI 自动解析设计文件，生成可运行代码

Figma MCP 时代：
Figma 设计稿 → MCP Server 解析节点树 → 提取设计令牌 → AI 生成组件代码
耗时：分钟级，像素误差 < 1px

┌───────────────────────────────────────┐
│        设计文件解析                     │  ← Figma REST API / MCP Server
│        读取 JSON 节点树                │
└─────────────────┬─────────────────────┘
                  │ 节点树遍历
                  ▼
┌───────────────────────────────────────┐
│        布局分析                        │  ← Auto Layout → Flexbox / Grid
│        识别嵌套关系和对齐方式           │
└─────────────────┬─────────────────────┘
                  │ 布局规则映射
                  ▼
┌───────────────────────────────────────┐
│        样式提取                        │  ← 设计令牌 → CSS Variables
│        颜色、字体、间距、阴影           │
└─────────────────┬─────────────────────┘
                  │ 令牌标准化
                  ▼
┌───────────────────────────────────────┐
│        代码生成                        │  ← AI 模型生成组件代码
│        React / Vue / HTML + CSS        │
└───────────────────────────────────────┘

// Figma API 返回的节点树结构（简化）
{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [
      {
        "id": "1:2",
        "name": "Page 1",
        "type": "CANVAS",
        "children": [
          {
            "id": "2:3",
            "name": "Button/Primary/Large",
            "type": "COMPONENT",
            "layoutMode": "HORIZONTAL",
            "itemSpacing": 8,
            "paddingLeft": 16,
            "paddingRight": 16,
            "paddingTop": 12,
            "paddingBottom": 12,
            "fills": [{ "type": "SOLID", "color": { "r": 0.2, "g": 0.4, "b": 1 } }],
            "children": [
              {
                "id": "2:4",
                "name": "Label",
                "type": "TEXT",
                "characters": "Click me",
                "style": { "fontSize": 16, "fontWeight": 600 }
              }
            ]
          }
        ]
      }
    ]
  }
}

// Figma 中的设计令牌 → CSS Variables
// 颜色令牌
--color-primary: #3366FF;
--color-secondary: #6C5CE7;
--color-text-primary: #1A1A2E;
--color-text-secondary: #6B7280;
--color-background: #FFFFFF;
--color-surface: #F9FAFB;

// 间距令牌（基于 4px 网格）
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;

// 字体令牌
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;

组件识别流程：

设计稿中的重复模式
├── Button/Primary/Large  ×12  →  提取为 <Button variant="primary" size="large" />
├── Button/Primary/Small  ×8   →  同一组件的不同 variant
├── Card/Product          ×6   →  提取为 <ProductCard />
└── Avatar/User           ×20  →  提取为 <Avatar />

识别后：
1 个 Button 组件 + 2 个 props（variant, size）= 替代 20 个重复图层

┌───────────────────────────────────────┐
│        AI 助手（Claude / Cursor）      │
└─────────────────┬─────────────────────┘
                  │ MCP 协议（本地 HTTP，JSON-RPC）
                  ▼
┌───────────────────────────────────────┐
│        Figma MCP Server               │  ← Figma 官方 Dev Mode MCP Server
│        读取 Figma 设计文件             │
└─────────────────┬─────────────────────┘
                  │ Figma REST API
                  ▼
┌───────────────────────────────────────┐
│        Figma 设计文件                  │  ← 节点树、样式、组件、变量
└───────────────────────────────────────┘

阶段 1: 连接与认证
├── AI 助手连接本地 Dev Mode MCP Server（默认 127.0.0.1:3845）
├── 复用 Figma 桌面端的登录态与席位权限
└── 建立与 Figma 文件的连接

阶段 2: 设计文件读取
├── AI 发送 Figma 文件 URL 或 node-id
├── MCP Server 调用 Figma REST API 获取节点树
├── 解析节点类型、布局属性、样式信息
└── 提取设计令牌（颜色、字体、间距）

阶段 3: 代码生成
├── MCP Server 将解析结果返回给 AI
├── AI 根据节点树结构生成组件代码
├── Auto Layout 属性映射为 CSS Flexbox
└── 设计令牌映射为 CSS Variables

// MCP 配置文件（以 Cursor 的 mcp.json 为例，字段随客户端略有差异）
{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

用户: 帮我把这个 Figma 设计稿转成 React 组件
      https://www.figma.com/file/xxxxx/Page-Design

AI 助手（通过 MCP 调用）:
1. 读取 Figma 文件 → 获取节点树
2. 识别组件结构 → Button、Card、Navigation
3. 提取设计令牌 → 颜色、间距、字体
4. 生成 React 代码 → 使用 Tailwind CSS + 设计令牌

// AI 根据 Figma 设计稿生成的 React 组件
function ProductCard({ product }) {
  return (
    <div className="bg-surface rounded-lg p-md shadow-sm">
      <img
        src={product.image}
        alt={product.name}
        className="w-full h-48 object-cover rounded-md"
      />
      <div className="mt-md">
        <h3 className="text-text-primary font-semibold text-lg">
          {product.name}
        </h3>
        <p className="text-text-secondary text-sm mt-xs">
          {product.description}
        </p>
        <div className="flex items-center justify-between mt-md">
          <span className="text-primary font-bold text-xl">
            {product.price}
          </span>
          <Button variant="primary" size="sm">
            加入购物车
          </Button>
        </div>
      </div>
    </div>
  );
}

// V0 的工作方式：文本 → 代码
// 用户输入: "一个带有图片、标题、描述和价格的产品卡片"
// V0 输出: React + Tailwind CSS 组件代码

// Locofy 的工作方式：设计稿 → 代码
// 输入: Figma 设计稿 URL
// Locofy 读取节点树 → 解析布局 → 生成 React/Vue 代码

// Figma MCP 的工作方式：设计稿 → AI → 代码
// AI 通过 MCP 读取 Figma → 理解设计意图 → 生成任意框架代码

你的场景是什么？
├── 有设计稿，需要精确还原
│   ├── 需要多框架支持（Vue/React/HTML）→ Locofy / Anima
│   ├── 需要集成到 AI 工作流 → Figma MCP
│   └── 只需要查看 CSS 属性 → Figma Dev Mode
│
├── 没有设计稿，从想法开始
│   ├── 需要 React + Tailwind → V0
│   └── 需要其他框架 → Figma MCP + AI 助手
│
└── 企业级设计系统
    ├── 需要设计令牌管理 → Figma Variables + MCP
    └── 需要组件库同步 → Figma MCP + 自定义 Skill

❌ 错误命名（AI 无法理解意图）：
Frame 123、Group 5、Rectangle 3、Text 7

✅ 正确命名（语义化、可映射到代码）：
Navigation/TabBar/Home
Button/Primary/Large
Card/Product/Image
Avatar/User/Online

❌ 错误做法：用绝对定位布局
所有元素用 x/y 坐标定位，不用 Auto Layout
→ AI 生成 position: absolute 代码，无法响应式

✅ 正确做法：全部使用 Auto Layout
容器用 HORIZONTAL / VERTICAL 方向
设置 itemSpacing（gap）和 padding
→ AI 生成 Flexbox 代码，天然响应式

❌ 错误做法：重复图层
同一个按钮在 10 个页面各画一遍，样式微调
→ AI 生成 10 个不同的按钮代码

✅ 正确做法：使用 Component + Variants
定义 Button 组件，用 Variants 管理 Primary/Secondary/Large/Small
页面中使用 Instance，只覆盖文本内容
→ AI 生成 1 个 Button 组件 + props 调用

// AI 生成的原始代码（能用，但有优化空间）
function Header() {
  return (
    <div style={{ display: "flex", padding: "16px", gap: "12px" }}>
      <img style={{ width: "40px", height: "40px", borderRadius: "20px" }} />
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span style={{ fontSize: "16px", fontWeight: 600 }}>用户名</span>
        <span style={{ fontSize: "14px", color: "#6B7280" }}>在线</span>
      </div>
    </div>
  );
}

// 优化后的代码（生产级）
function Header({ user }) {
  return (
    <header className="flex items-center gap-3 p-4">
      <Avatar src={user.avatar} alt={user.name} status="online" />
      <div className="flex flex-col">
        <span className="text-base font-semibold text-text-primary">
          {user.name}
        </span>
        <span className="text-sm text-text-secondary">在线</span>
      </div>
    </header>
  );
}

设计系统集成架构：

Figma 设计系统
├── Variables（颜色、间距、字体）
├── Components（Button、Card、Input）
└── Styles（文本样式、效果样式）
        │
        │ Figma MCP / Token Studio
        ▼
设计令牌 JSON
├── colors.json
├── spacing.json
├── typography.json
└── shadows.json
        │
        │ Style Dictionary / Tailwind Config
        ▼
前端代码
├── CSS Variables（:root { --color-primary: ... }）
├── Tailwind 配置（theme.extend.colors.primary）
└── 组件库（React / Vue 组件）

// 设计令牌同步示例：Figma → JSON → CSS Variables
// tokens/colors.json（从 Figma 导出）
{
  "color": {
    "primary": { "value": "#3366FF", "type": "color" },
    "secondary": { "value": "#6C5CE7", "type": "color" },
    "text": {
      "primary": { "value": "#1A1A2E", "type": "color" },
      "secondary": { "value": "#6B7280", "type": "color" }
    }
  }
}

// Style Dictionary 转换为 CSS Variables
:root {
  --color-primary: #3366FF;
  --color-secondary: #6C5CE7;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #6B7280;
}

// Tailwind 配置中引用
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
      }
    }
  }
}