3.7.1 设计稿转代码（多模态）

在设计稿转代码的场景中，多模态能力通常指的是同时利用图像（设计稿截图）与结构化描述（如标注、组件层级、设计系统信息）来生成前端代码。下面介绍一种实用、真实可落地的流程。

1. 准备阶段：统一设计稿输出格式

让设计师导出一张高保真截图（PNG/JPEG，2x 分辨率），以及对应的设计 Token 或标注文件（JSON 格式，含颜色、间距、字号、组件名等）。
示例 JSON 片段：

  {
    "component": "Button",
    "props": {
      "text": "提交",
      "type": "primary",
      "size": "medium"
    }
  }

这一步很关键，不能只丢一张图，否则多模态退化成了纯图生码，准确率会大幅下降。

2. 选择多模态模型或工具链

方案 A：直接使用 GPT-4V / Claude 3.5 Sonnet 等多模态大模型。将截图和 JSON 一起上传，配合系统提示词，让模型输出代码。
方案 B：使用专用工具（如 screenshot-to-code 开源项目、figma-to-code 插件），它们内部组合了视觉模型与代码生成模型，并对常见 UI 模式做过微调。

3. 编写提示词（Prompt）

提示词需明确指定目标技术栈、组件库和约束条件。实用模板：

你是一个前端专家。请根据设计稿截图的UI和提供的结构化描述，生成一个可以使用 [React + Ant Design] 的组件代码。
要求：
- 使用 TypeScript
- 样式使用 CSS Modules
- 组件需与截图完全一致，包括颜色、圆角、阴影
- 结构化描述如下：{...}
请直接输出完整组件代码，无需解释。

把截图和 JSON 一同作为输入，模型就能“看图”对齐像素，用结构化描述纠正组件类型与文案。

4. 自动化流水线实现（以 Node.js 脚本为例）

import { readFileSync } from 'fs';
import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

async function designToCode(imagePath, designJson) {
  const imageBase64 = readFileSync(imagePath, 'base64');
  const response = await openai.chat.completions.create({
    model: 'gpt-4-vision-preview',
    messages: [
      {
        role: 'user',
        content: [
          { type: 'text', text: `根据设计稿和下面的结构化描述生成React组件代码：${JSON.stringify(designJson)}` },
          { type: 'image_url', image_url: { url: `data:image/png;base64,${imageBase64}` } }
        ]
      }
    ],
    max_tokens: 2000
  });
  return response.choices[0].message.content;
}

真实使用中，建议加上重试与格式校验，确保产出的代码可直接运行。

5. 后处理与质量校验

自动提取代码块（去除非代码文字），写进项目文件。
用 ESLint + Prettier 格式化。
启动无头浏览器截图，与原始设计稿进行像素级对比（可用 pixelmatch 等库），差异大于阈值则标记人工复核。

6. 实践中的可靠经验

越小越准：一次只转一个组件，而不是整页，准确率大幅提升。
必须有结构化数据：仅靠图像，模型容易把“取消”按钮识别为普通文本，加上 JSON 后就固定了组件语义。
建立组件库映射：内置一套从设计组件名到代码组件的映射表（如 “Btn/Primary” → <Button type="primary">），可避免模型随意捏造样式。
人机协作：把生成结果作为初稿，开发人员只需微调状态管理和事件绑定，效率可提升 50% 以上。

这样一套多模态设计稿转代码流程，简单、可落地，并且已经在不少团队中实际使用。