为什么重要
「给一张设计稿，把前端代码写出来」是产品与开发之间最昂贵的手工环节之一，也是多模态模型最被期待的落地场景。Design2Code 是第一个把这件事做成可自动评分的基准——它的贡献不只在数据集，更在那套评估指标。
难点在于「像不像」怎么量化。研究者给了三层指标：块级元素匹配（文本块、背景色、位置是否对得上）、布局 IoU（渲染结果与目标图的区域重合度）、CLIP 相似度（整体视觉语义）。同时做了人类偏好对照，验证这套自动指标与人类判断的一致性。
对数据侧的意义：这类「截图 → 代码」配对数据的获取成本不高（网页天然就有 HTML），但质量筛选是关键——大量网页依赖外部资源、JS 动态渲染，直接爬来不可离线渲染。Design2Code 的构建流程本身就是一份可复用的数据清洗规范。
构建方式
- 从真实网站采集截图与对应 HTML/CSS 源码
- 人工筛选与清洗：确保页面可离线渲染（去掉外部依赖、内联样式与资源）
- 把 HTML 中的文本、颜色、布局结构抽取出来作为结构化参考
- 评测时把模型生成的代码渲染成截图，再与参考截图比对
- 三层指标：块级元素匹配（文本 / 位置 / 颜色）、布局 IoU、CLIP 视觉相似度
- 附带人类评估，验证自动指标的可靠性
任务示例
输入：一张网页截图（含标题栏、三栏卡片区、底部页脚）
输出：
<div class="container">
<header class="hero"><h1>...</h1></header>
<section class="cards">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</section>
<footer>...</footer>
</div>评分时把这段 HTML 渲染出来，与参考截图逐块比对：标题文字对不对、卡片是不是三栏、配色是否一致、整体布局是否重合。
最新进展
- 论文提出的多指标评估框架被广泛沿用，成为视觉转代码方向的默认评测口径
- 后续工作发现：给模型先做一次「视觉描述/规划」再写代码，比直接生成效果好，说明这个任务需要中间的表示层
- WebSight 等工作用大规模合成数据（截图-代码对）显著提升了这类任务的表现，印证了「数据规模」在这条路上的有效性
关键发现
- 「像不像」可以自动量化：三层指标与人类判断相关性较高，不必每次都做人工评测
- 中间表示有帮助：先描述布局再生成代码，优于端到端直出
- 合成数据有效：网页截图-代码对可以低成本大规模合成，是少数「数据不是瓶颈」的多模态任务
- 文本与配色是主要失分点：布局容易学，但精确的文字内容与色值还原仍会出错