WebSight

为什么重要

WebSight 的意义不在「又一个基准」，而在它把视觉转代码从「数据稀缺」变成了「数据充足」。此前这类任务受限于真实网页-代码对的获取（要爬、要清洗、要处理外部依赖），规模上不去。WebSight 用合成的方式直接造出 200 万对，模型在这上面训完，在 Design2Code 上的表现大幅提升。

这是数据工程里一个很有代表性的案例：当任务的输入输出都是「可程序化生成」的，合成数据就是最优解。网页代码可以模板化生成，渲染结果是确定性的，标注（代码本身）天然精确——这种任务结构决定了合成数据的性价比远高于爬取。

配套发布的 WebSight VLM-8B 证明了这条路走得通：一个 8B 规模的模型在合成数据上训练后，在视觉转代码任务上超过了一些规模更大的通用模型。

构建方式

设计网页生成流程：以 Tailwind CSS 为主要样式框架，按模板生成结构多样的 HTML
控制变量：布局类型、配色方案、组件种类、文本长度等，保证分布多样性
渲染生成截图，与源码配对
质量过滤：剔除渲染失败、内容重复、布局异常的样本
规模化到约 200 万对，作为训练数据发布

任务示例

合成样本（简化示意）：

<!-- 生成的代码 -->
<section class="bg-slate-50 py-12">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-slate-900">Pricing</h2>
    <div class="grid grid-cols-3 gap-4 mt-6">
      <div class="p-4 bg-white rounded-lg shadow">...</div>
      ...
    </div>
  </div>
</section>

配一张渲染后的 PNG 截图，构成一对训练样本。模型训练时的输入是截图，输出是这段 HTML。

关键发现

可程序化生成的任务，合成数据是最优解：标注天然精确、规模无上限、无版权与隐私顾虑
规模带来质变：从万级到百万级，视觉转代码的布局还原能力明显跃升
多样性控制比数量更重要：模板太单一会让模型只学会几种布局，需要主动控制变量分布
中等模型也能打：8B 模型配足量合成数据，可以超过更大但缺少该领域数据的通用模型——这是「数据补模型」的典型例证

考察能力

构建信息

资源链接

为什么重要

构建方式

任务示例

最新进展

关键发现