「设计稿出码」（design-to-code）听起来像个工程问题——把一张图变成 HTML。但真正读进去会发现，它更像一面镜子：每一代 AI 技术照进来，照出的都是那一代方法的能力边界。这篇我把这个方向最经典的两篇国外论文读透，pix2code（2017）和斯坦福的 Design2Code（2024），中间隔着整整一个「深度学习 → 大模型」的时代。
一句话主线
设计稿出码这七年，模型从「学一个截图到代码的映射」变成了「直接理解一张图并写代码」；但真正没被解决的核心难题一直没变——不是「能不能生成代码」，而是「怎么知道生成得好不好」，以及「怎么把图里所有元素一个不漏地还原出来」。
先把这句话记住，后面所有细节都挂在它上面。
为什么这是个值得较真的问题
一个前端每天在干的事，本质是把设计师给的视觉稿翻译成代码。这件事有三个特点，恰好让它成为 AI 的绝佳靶子：
- 输入输出都结构化：输入是图（像素），输出是代码（token 序列），两端都能被机器表示。
- 有海量天然训练数据：整个互联网就是「网页截图 ↔ 源码」的成对数据集。
- 评价看似客观：渲染出来长得像不像原图，好像一眼就能看出来。
但第 3 点是个陷阱——「长得像」到底怎么量化？这正是整个领域最深的坑，我们放到后面讲。
第一站：pix2code（2017）——把问题第一次形式化
作者 Tony Beltramelli（欧洲，后来创立 UIzard）。这篇的历史地位在于：它第一个把「截图→代码」当成一个端到端可学习的问题，而不是靠人写规则去识别按钮、输入框。
架构：一个「看图说话」模型的变体
如果你熟悉 image captioning（看图生成文字描述），pix2code 的结构会非常眼熟——它就是把「文字描述」换成了「代码 token」。三个部件：
1. CNN 视觉编码器——把图压成一个固定长度向量
- 输入统一 resize 到 256×256（不保持宽高比）
- 借用 VGGNet 的思路：3×3 小卷积核、stride 1，每两次卷积接一次 max-pooling 下采样
- 通道数逐层加宽：32 → 64 → 128
- 最后两层全连接（各 1024，ReLU），输出视觉向量
p
2. LSTM 语言模型——理解「已经写到哪了」
- 两层 LSTM，每层 128 个 cell
- token 用 one-hot 编码（不用 word embedding），输出语言向量
q_t - 带 forget gate，专门用来处理「开了一个代码块要记得闭合」这种长程依赖
3. 多模态解码器——把「看到的」和「写到的」拼起来继续写
- 把
p和q_t拼接成r_t - 喂进第二个更大的 LSTM 解码器（两层 × 512 cell）
- 最后 softmax 到 DSL 词表，本质是个多分类
整个模型约 1.09 亿参数，三个平台共用一套结构不单独调参。
关键设计：不直接生成 HTML，而是先生成 DSL
这是我认为 pix2code 最聪明也最能说明「2017 年的算力现实」的一步。
它没有让模型直接吐 HTML/CSS，而是自己设计了一套极简 DSL（领域特定语言），只描述三件事：布局、有哪些组件、组件之间的关系——连按钮上的文字都直接忽略。
为什么？因为直接生成真实代码，词表爆炸、序列超长，2017 年的模型根本扛不住。用 DSL 把词表压到极小，才能用 one-hot、才不用训练昂贵的词向量、才能让搜索空间小到可学。
这里藏着一个至今仍然成立的工程直觉:当端到端太难时，先设计一个中间表示（IR）。DSL 就是 pix2code 的 IR。你会看到这个思路在后面的方法演进里反复出现（比如先生成 DOM 结构、再填样式）。
数据与结果
没有现成数据集，作者用一个随机 UI 生成器合成——每个平台 1500 训练 / 250 测试：
| 平台 | 训练 | 测试 |
|---|---|---|
| iOS (Storyboard) | 1500 | 250 |
| Android (XML) | 1500 | 250 |
| Web (HTML/CSS) | 1500 | 250 |
训练细节：滑窗展开长度 T=48 token，RMSProp，学习率 1e-4，梯度裁剪到 [-1,1]，dropout 25%~30%，batch 64。推理用贪心搜索和 beam search（宽度 3、5）。
token 级错误率（越低越好）：
| 平台 | 贪心 | Beam 3 | Beam 5 |
|---|---|---|---|
| iOS | 22.73% | 25.22% | 23.94% |
| Android | 22.34% | 23.58% | 40.93% |
| Web | 12.14% | 11.01% | 22.35% |
对应摘要里说的「三个平台 >77% 准确率」。
它诚实交代的短板（关键）
pix2code 自己列的局限，几乎预言了后面七年的所有研究方向：
- 参数少、数据集小、训练轮次有限；
- 经常选错颜色/样式；
- 一旦 UI 里有「长列表」这种重复结构就崩；
- one-hot 不携带 token 之间的语义关系，也无法扩展到大词表；
- 作者建议的改进：加 attention、预训练语言模型拿 embedding、爬真实网页替代合成数据。
回头看，「加 attention + 预训练 + 真实数据」——这三条恰恰就是通往大模型时代的路标。
第二站：Design2Code（2024）——大模型来了，问题却变了
七年后，斯坦福 NLP 组（Chenglei Si、Diyi Yang 等）的 Design2Code 发表（NAACL 2025）。这时候技术底座完全换了：多模态大模型（GPT-4V、Gemini）可以直接看一张网页截图，直接吐出完整 HTML/CSS，不需要 DSL、不需要为每个平台单独训练。
但这篇论文真正的贡献不在模型——模型是现成的 GPT-4V。它的贡献在于回答了那个被忽略了七年的问题:这个任务到底该怎么评？
任务定义变了：从「合成」到「真实世界」
pix2code 用合成 UI，Design2Code 反过来——手工精选 484 个真实网页做测试集。这是从「玩具环境」到「真实分布」的关键一跃。真实网页有嵌套、有真实文案、有各种脏东西，这才是前端每天面对的东西。
核心贡献：一套「怎么算像」的评价体系
这是整篇最该学的地方。他们把「长得像」拆成两个层次：
① 高层视觉相似度（High-level）——用 CLIP 把「原图渲染结果」和「生成代码渲染结果」都过 CLIP，比较视觉嵌入的相似度。这抓的是整体观感：配色、风格、大布局对不对。
② 低层元素匹配（Low-level）——block-match 这才是硬核。它把两个页面都拆成一个个视觉块（block），然后做匹配，逐块比较四个维度：
- 文本（text）：文字内容对不对
- 位置（position）：块在页面上的坐标对不对
- 颜色（color）：块的颜色对不对
- 尺寸/匹配（size / block-match）：块有没有被召回、大小对不对
为什么要拆成两层？因为它们会撒不同的谎。一个模型可能整体观感（CLIP）很高，但仔细看少了一半元素——高层指标看不出来，低层的 block-match 才抓得住。反过来，元素都在但配色全错，高层指标会暴跌。单一指标一定会骗你，这是我从这篇学到的最通用的一课，远超出出码这个场景。
结果：GPT-4V 是「明确的赢家」，但赢在哪很有意思
参与对比的主要是 GPT-4V、Gemini Pro Vision，以及他们自己微调的开源模型 Design2Code-18B。
最反直觉的是人工评测：
- 49% 的情况下，标注员认为 GPT-4V 生成的网页可以直接替代原始参考页（视觉和内容都够用）；
- 更夸张的是 64% 的情况下，标注员觉得 GPT-4V 的产出比原网页还好看。
第二个数字第一眼很唬人，但要冷静解读：这不代表模型”超越人类前端”。更可能的原因是——真实网页里有大量广告位、杂乱排版、老旧样式，而 GPT-4V 倾向于生成干净、现代、规整的布局。它赢在”审美中庸且规整”，不是赢在”高保真还原”。这恰恰暴露了下一个问题。
最难的骨头：元素召回和布局
细粒度指标显示，无论是开源模型还是前沿模型，最弱的环节高度一致:
- 召回视觉元素（recall visual elements）——图里的东西，代码里经常漏；
- 生成正确的布局（layout）——元素都在，但摆错位置。
而文本内容和颜色，只要好好微调就能大幅改善。他们的 Design2Code-18B 微调后，就在文本和着色上追平了 Gemini Pro Vision。
把这个发现和 pix2code 的短板并排看，你会心头一震:
| pix2code (2017) | Design2Code (2024) | |
|---|---|---|
| 最弱环节 | 颜色/样式、长列表（重复结构） | 元素召回、布局 |
| 相对容易 | —— | 文本、颜色（微调可解） |
七年过去，“颜色”从难题变成了可解项，但”把所有元素按正确的空间关系摆对”——这个空间/结构问题，依然是天花板。 这不是巧合。像素是二维平铺的，代码却是一维 token 序列且带嵌套层级，这个「2D 空间 → 1D 带层级序列」的鸿沟，是这个任务永恒的核心难点。
中间那条路：方法是怎么一步步逼近的
pix2code 和 Design2Code 之间，以及 Design2Code 之后，一批工作都在攻同一个「空间→结构」的鸿沟。归纳成三种思路（都指向同一个直觉：别让模型一步到位）：
- 结构感知的注意力：解码时用 token 级 attention mask，让模型显式知道当前节点的父/兄弟/自身关系（Liang et al., 2024）。——本质是把 DOM 的树形结构喂给注意力。
- 图结构的多模态条件：用 GCN 在组件集合上建图，边的类型来自空间关系和语义关系（Vu et al., 2025）。——把「元素间关系」显式建模成图。
- 分治 + 聚合：自顶向下拆分生成、自底向上聚合样式，换取模块化（Chen et al., 2025）。——大页面拆成小块各个击破，正面回应 pix2code「长列表就崩」的老问题。
还有一条正交的路——换更富的输入。截图只有像素，信息本就有损。Figma2Code 这类工作直接吃 Figma 的 JSON 元数据（层级结构、元素属性、切图资源），PSD2Code 吃 Photoshop 源文件。与其让模型从像素里反推结构，不如直接把结构喂给它——这是对「元素召回/布局」难题最釜底抽薪的一招。
提醒一句客观事实：这个方向近两年最密集的产出（ScreenCoder、LaTCoder、WebCode2M、Interaction2Code、UI2Code^N、PSD2Code、Figma2Code 等）大多来自国内或华人团队。若只看「纯国外」奠基工作，主线就是 pix2code → Design2Code / Sketch2Code（斯坦福） 这一条。
我读完后沉淀的三个可迁移的判断
跳出出码这个具体场景，这两篇论文给我三个能用到别处的思考：
1. 端到端太难时，先造一个中间表示。 pix2code 的 DSL、后续工作的 DOM 树/组件图，本质都是同一招:在输入和输出之间插一个更接近答案结构的 IR，把一个大跳跃拆成两个小跳跃。这个直觉对任何「跨模态/跨表示」的生成任务都成立。
2. 单一指标一定会骗你，要按「谎言的种类」去设计指标。 Design2Code 的高层 CLIP + 低层 block-match 双层体系，值得任何做生成评测的人抄作业。核心不是「用几个指标」，而是想清楚你的模型会以哪几种不同的方式失败，然后为每一种失败配一个抓得住它的指标。
3. 认清哪些是「数据/微调能解」的，哪些是「结构性」的难题。 七年下来，颜色、文本这类「局部属性」被数据和微调抹平了；而元素召回、空间布局这类「全局结构」问题依然坚挺。判断一个 AI 任务的天花板在哪，就看它的难点是「局部属性」还是「全局结构」——前者会随规模消失，后者需要方法上的突破。
建议的入门路径
如果你想真正吃透这个方向，而不是收藏一堆 PDF：
- 先读 pix2code：理解问题最初怎么被形式化（看图说话的变体 + DSL 作为 IR）。它够老够简单，能让你看清骨架。
- 再读 Design2Code：把重心放在评价体系上，而不是「GPT-4V 很强」这个结论。那套双层指标是这篇的灵魂。
- 最后扫一眼输入侧的工作（Figma2Code / PSD2Code）：理解「换更富的输入」为什么是对核心难题最直接的回应。
参考文献
- pix2code: Generating Code from a Graphical User Interface Screenshot — Tony Beltramelli, 2017. arXiv:1705.07962 · 代码
- Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering — Chenglei Si, Yanzhe Zhang, Ryan Li, Zhengyuan Yang, Ruibo Liu, Diyi Yang, NAACL 2025. arXiv:2403.03163 · 项目主页
- Sketch2Code: Evaluating Vision-Language Models for Interactive Web Design Prototyping — Ryan Li, Yanzhe Zhang, Diyi Yang, 2024. arXiv:2410.16232
- Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs — Sukmin Yun et al., NeurIPS 2024.
写在最后：设计稿出码这七年的故事，本质是 AI 从「学一个窄映射」到「通用理解 + 生成」的缩影。但那个最硬的核——把二维空间里的所有东西，无损地翻译成一维带层级的代码——七年没变，可能还要再陪我们走一段。