Image2Code 数据集总览

Diff-guided Image-to-Code Agent Loop -- 数据集调研与样本展示 (2026-06-21)

30+
追踪数据集
13
可公开访问
6
Grade A 可用
6M+
总样本量（估计）
6
任务大类
12
关联论文

推荐 v1 数据组合

角色推荐数据集数据来源选择理由
主评测集（Web/UI）Design2Code真实网页最接近「截图 -> 前端代码」的真实任务，附带视觉保真度评测指标（NAACL 2025）
主训练/冒烟数据源WebSightLLM 合成最大直接可用截图-代码对（270万条，CC-BY-4.0）
大规模真实训练WebCode2M真实爬取317万条真实网页，附带布局标注和质量分数（WWW 2025）
可控渲染评测ChartMimic / Plot2Code论文真实图表渲染器和指标更确定性，适合视觉反馈闭环（ICLR 2025）
管线调试用pix2code / im2latex-100k合成/半合成体量小、格式简单，适合调试 pipeline
辅助 Judge 训练RICO + ChartQA/PlotQA真实截图提供视觉-结构反馈信号，无需代码 target

P0: 网页 / UI 截图转代码

WebSight

Grade A P0 训练 / 评测 LLM 合成
任务：网页截图 -> HTML/CSS 代码
规模：2,745,658 条（v0.2: 192万 + v0.1: 82万）/ 317 GB
许可证：CC-BY-4.0
可达性：✓ 公开 HF 可直接访问
字段：image, text (HTML/CSS), llm_generated_idea
渲染器：浏览器（HTML/CSS，Tailwind）
数据来源：LLM 生成网页创意 -> 代码 -> 渲染截图（全合成）
HuggingFace M4 团队发布的大规模合成数据集。用 LLM 生成网页创意描述，再生成 HTML/CSS（Tailwind 风格），最后渲染为截图。全流程合成，无真实网站。是当前最大的直接可用 image2code 训练源。
论文： Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset (arXiv:2403.09029, 2024.03)
使用者： 训练了 HuggingFaceM4/VLM_WebSight_finetuned 模型；Design2Code 评测中使用
HuggingFace
真实样本展示（已下载 3 条）
WebSight sample 0
样本 0 - Fashion Brand 页面（全合成）
WebSight sample 1
样本 1 - Tailwind CSS 风格布局
WebSight sample 2
样本 2 - 不同色彩方案
<!-- 样本 0 对应 HTML（Tailwind CSS） -->
<html>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<body class="bg-gray-100">
  <div class="flex flex-col items-center justify-center h-screen">
    <h1 class="text-4xl font-bold text-center text-gray-800">Fashion Brand</h1>
    <p class="mt-4 text-lg text-center text-gray-600">...</p>
    ...
  </div>
</body>
</html>
字段类型说明
imagePIL Image渲染后的网页截图
textString完整 HTML/CSS 源码（344-6310 字符）
llm_generated_ideaStringLLM 生成的网页创意描述

Design2Code

Grade A P0 评测基准 真实网页
任务：网页截图 -> 前端代码（HTML/CSS/JS）
规模：484 个真实网页测试样本 / 105 MB
许可证：ODC-By（Open Data Commons Attribution）
可达性：✓ GitHub + HF + 项目页
评测指标：视觉相似度、DOM 结构匹配、文本内容匹配
渲染器：浏览器（完整网页渲染）
数据来源：C4 验证集中的真实网页（图片已替换为占位符 rick.jpg）
SALT-NLP 发布的首个真实场景 image2code 评测基准。484 个来自 C4 验证集的真实网页，手工整理。测试多模态 LLM 能否将真实网页截图自动转为可运行的前端代码。附带多维度评测脚本。是当前项目最核心的 Web/UI 评测集。还发布了 Design2Code-HARD 难集。
论文： Design2Code: How Far Are We From Automating Front-End Engineering? (arXiv:2403.03163, NAACL 2025)
评测模型： GPT-4o, GPT-4V, Gemini Pro Vision, Claude 等前沿多模态模型
关键发现： 模型在「回忆视觉元素」和「生成正确布局」上仍有较大差距
HuggingFace GitHub 项目主页 HARD 变体

WebCode2M / Vision2UI

Grade A/B P0 大规模训练集 真实爬取
任务：网页设计/截图 -> HTML/CSS 源码
规模：2,560,000（论文）/ 3,170,000（HF viewer）条 / 1.1 TB
许可证：CC-BY-4.0
可达性：✓ 公开 HF
字段：image, bbox, text, scale, lang, tokens, score, hash
渲染器：浏览器（HTML/CSS）
数据来源：真实网页爬取 + 质量模型过滤（非合成）
来自真实互联网的超大规模截图-代码对。用爬虫采集真实网页并截图，再经质量评分模型过滤掉美学缺陷或不完整的实例。附带 20 种语言标注、布局 bbox、token 数等丰富元数据。还有净化版 xcodemind/webcode2m_purified。
论文： WebCode2M: A Real-World Dataset with Layout for Code Generation from UI Designs (arXiv:2404.06369, WWW 2025)
提出模型： WebCoder（基于 ViT）
提出指标： TreeBLEU（衡量结构层级召回）
HuggingFace 项目主页

Web2Code

Grade B P0 数据集 / 框架 混合（合成+增强）
任务：网页视觉 -> HTML 代码 + 网页理解 QA
规模：827,934 训练 + 5,990 评测 / 31.5 GB
许可证：CC-BY-4.0（MIT on GitHub）
可达性：✓ HF + GitHub
字段：id, image, conversations（多轮对话格式）
渲染器：浏览器
数据来源：4 部分混合：GPT-3.5 合成新网页 + 增强现有数据集 + 合成QA + GPT-4 增强 WebSRC
MBZUAI 发布，NeurIPS 2024 Datasets & Benchmarks。混合 4 种数据来源：(1) GPT-3.5 合成新网页代码对 (2) 增强现有代码生成数据 (3) 合成文本 QA (4) GPT-4 增强 WebSRC QA。图片来自 WebSight、pix2code 和自生成。LLaVA 指令对话格式。
论文： Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs (arXiv:2406.20098, NeurIPS 2024 D&B)
训练模型： LLM360/CrystalChat-7B-Web2Code
参考数据源： WebSRC, WebSight, Pix2Code
HuggingFace GitHub 项目主页

pix2code

Grade B P0 经典数据集 / 基线 程序合成
任务：GUI 截图 -> DSL 代码
规模：约 1,500 样本（iOS / Android / Web 三平台）
许可证：Apache-2.0
可达性：✓ GitHub 公开
渲染器：DSL 编译器 -> 平台 UI
数据来源：程序化生成（随机组合 UI 组件 -> 渲染截图），全合成
2017 年的经典 GUI 转代码工作。通过程序化随机组合简单 UI 组件（按钮、文本框等），用 DSL 描述并渲染截图。数据全部合成，UI 风格简单老旧。正因体积小、渲染确定性高，非常适合管线调试。
论文： pix2code: Generating Code from a Graphical User Interface Screenshot (Beltramelli, 2017)
被引用： Web2Code 等后续工作将 pix2code 数据作为参考来源之一
GitHub

CREW: Figma-to-Code

Grade B P1 Agent 评测 真实设计 新发现
任务：Figma 设计稿 -> React + Tailwind CSS 应用
规模：37 个任务（7 个复杂度级别，6-40 专家小时）
许可证：MIT
可达性：✓ HuggingFace
字段：id, url (Figma), tags, description, figma_data (JSON)
数据来源：真实 Figma 社区设计 + 企业授权设计（人工设计师创作）
Metaphi Labs 2026 年发布的 Figma 设计到代码 agent 评测基准。来自 Figma Community 公开设计和企业授权设计，均由人工设计师创作。Agent 需通过 MCP 工具访问 Figma 文件，提取设计系统，生成 React 组件并部署。已评测 Claude Code、Codex、Gemini CLI。
基准： CREW: Enterprise Agent Benchmarks (Metaphi Labs, 2026)
评测模型： Claude Code (Opus 4.6), Codex (GPT-5.2), Gemini CLI (3.1 Pro)，96 次运行
评测方式： 人工 ELO 对比 + VLM 视觉比较 + 技能验证器
HuggingFace

WebUI-7K

Grade B P1 UI 表征学习 真实爬取 新发现
任务：网页截图 -> UI 语义表征学习
规模：约 7,000 样本 / 8.36 GB
许可证：Other（需查看 COPYRIGHT.txt）
可达性：✓ HuggingFace
数据来源：真实网站爬虫采集（含多设备截图）
BigLab 发布，用爬虫采集真实网站的多设备截图。HF 版本因内容过滤比论文使用量少。可用于 UI 表征预训练和 web 语义理解。
论文： Learning Mobile User Interface Representation with Web Semantics (CHI 2023)
项目： uimodeling.github.io
HuggingFace

MMCode

Grade B P1 多模态编码评测 真实题目 新发现
任务：视觉丰富的编程题 -> 代码解题
规模：3,548 题 + 6,620 张图片
许可证：CC-BY-NC-SA 4.0
可达性：✓ GitHub 公开
数据来源：10 个编程竞赛网站的真实题目
首个多模态编码基准，评测 MLLM 在视觉丰富上下文中的算法问题求解能力。来自真实编程竞赛，需要模型理解图片中的数据结构、图表等视觉信息来生成正确代码。不是直接 image2code 但测试视觉理解+代码生成的联合能力。
论文： MMCode: Benchmarking Multimodal Large Language Models for Code Generation with Visually Rich Programming Problems (EMNLP 2024)
关键发现： 当前最优模型在需要视觉推理的编程题上仍表现困难
GitHub

ScreenCoder / Screen-10K

Grade D P0 数据集 / 方法
任务：UI 截图 -> 前端代码
可达性：⚠ 未确认公开
任务定义贴合但公开数据和许可证未确认，列入观察名单。

FLAME / Flame-React-Eval

Grade D P0 合成 / 评测 合成
任务：截图/指令 -> React UI 代码
可达性：⚠ 未确认公开
面向现代 React 代码生成。需确认数据和评测是否公开。

P0/P1: 图表 / 绘图转代码

ChartMimic

Grade A P0 评测基准 论文真实图表
任务：图表图片 -> Python matplotlib 代码
规模：4,800 条（figure, instruction, code）三元组
许可证：Apache-2.0
可达性：✓ HF + GitHub
渲染器：Python matplotlib（确定性渲染）
数据来源：人工从真实科学论文中筛选图表（Physics, CS, Economics 等），人工整理
ICLR 2025 收录。从真实科学论文中人工筛选图表，覆盖 18 种常规 + 4 种高级图表类型，细分 201 个子类。两种任务：Direct Mimic（精确复现）和 Customized Mimic（按指令修改）。已被 Qwen3-VL 等采用为多模态编码能力评测基准。
论文： ChartMimic: Evaluating LMM's Cross-Modal Reasoning Capability via Chart-to-Code Generation (arXiv:2406.09961, ICLR 2025)
评测模型（14 个）： GPT-4V, Claude 3 Opus, Gemini Pro Vision, InternVL, Phi-3-vision, MiniCPM, DeepSeek-VL, LLaVA 系列, Idefics2, QwenVL
已被采用： Qwen3-VL 将其作为多模态编码评测基准之一；已集成进 VLMEvalKit
HuggingFace GitHub
真实样本展示（已下载 3 条）
ChartMimic sample 0
样本 0 (3d_1) - 3D 图表
ChartMimic sample 1
样本 1 (3d_2) - 3D 图表
ChartMimic sample 2
样本 2 (3d_3) - 3D 图表
字段类型说明
TaskString任务类型 (direct_600, customized_1800 等)
InstructionString任务描述指令
InputFigurePreviewImage bytes需模仿的源图表预览
GroundTruthFigureCode路径Ground truth matplotlib 代码

Plot2Code

Grade B P0 评测基准 文档真实示例
任务：科学图表 -> Python 绘图代码
规模：132 个手工筛选的 matplotlib 图 + Python/R plotly 图
许可证：Apache-2.0（学术用；商用需授权）
可达性：✓ GitHub | HF: 401
来源：TencentARC
渲染器：Python matplotlib / plotly
数据来源：从 Matplotlib Gallery 和 Plotly 文档爬取的真实示例图（半真实）
腾讯 ARC 实验室发布。从 Matplotlib Gallery 和 Plotly 文档手工筛选 132 个高质量示例图，每个附带源代码和 GPT-4 总结的描述指令。三种评测模式：纯文本生成、纯图片生成、图文结合生成。
论文： Plot2Code: A Comprehensive Benchmark for Evaluating Multi-modal Large Language Models in Code Generation from Scientific Plots (arXiv:2405.07990, 2024.05)
评测模型（14 个）： GPT-4V, Gemini Pro, Mini-Gemini 等开闭源模型
提出指标： code pass rate, text-match ratio, GPT-4V overall rating
关键发现： 多数 MLLM 在文本密集图表上表现不佳，严重依赖文本指令
GitHub

ChartQA / PlotQA / FigureQA

Grade C P1 辅助（QA） 真实+合成混合
任务：图表图片 -> QA 答案（非代码）
用途：Judge / 验证器训练
数据来源：ChartQA: 真实+增强；PlotQA: 合成；FigureQA: 合成
不直接产出代码，但可用于训练视觉语义判别器。

P1: 公式 / 文档 / LaTeX

im2latex-100k

Grade A/B P1 训练 / 评测 论文真实公式
任务：公式图片 -> LaTeX 公式代码
规模：67,900 条（train/validation/test）
可达性：✓ HF 公开
渲染器：LaTeX (pdflatex / KaTeX)
数据来源：从真实学术论文 PDF 中提取公式并渲染截图
经典窄域 image-to-code 基准。从真实学术论文提取 LaTeX 公式，渲染为图片。渲染确定性极高，适合管线调试。
论文： What You Get Is What You See: A Visual Markup Decompiler (Deng et al., 2017)
HuggingFace
真实样本展示（已下载 3 条）
im2latex sample 0
样本 0
\alpha_{1}^{r}\gamma_{1} + \dots + \alpha_{N}^{r}\gamma_{N} = 0
im2latex sample 1
样本 1
\Gamma(z+1) = \int_{0}^{\infty} dx \, x^{z} e^{-x}
im2latex sample 2
样本 2
\frac{d}{ds} {\bf C}_{i} = \frac{1}{2} \epsilon_{ijk}...

CROHME

Grade B/C P1 评测基准 真实手写
任务：手写公式 -> LaTeX
数据来源：真实手写（竞赛数据收集）
手写域基准，测试噪声输入下的泛化能力。

Nougat / 科学 PDF 解析

Grade C P1 辅助 真实论文
任务：PDF 页面 -> Markdown / LaTeX
数据来源：真实学术论文 PDF
适合未来 PDF-to-code 扩展。
论文： Nougat: Neural Optical Understanding for Academic Documents (Blecher et al., 2023)

P1: 前端 Agent / 工作流评测基准

Interaction2Code

Grade B P1 评测基准 真实网页 新发现
任务：交互原型 -> 含交互逻辑的网页代码
规模：127 个网页 / 374 个交互实例 / 15 种网页类型 / 31 种交互类别
会议：ASE 2025
可达性：✓ GitHub 公开
数据来源：真实交互网页原型（人工整理，非合成）
首个系统性研究 MLLM 生成含交互功能网页的基准。超越静态 design-to-code，要求模型生成带动态交互的功能性 UI 代码。发现 4 类 MLLM 局限和 10 种失败类型。
论文： Interaction2Code: Benchmarking MLLM-based Interactive Webpage Code Generation from Interactive Prototyping (ASE 2025)
关键发现： MLLM 在生成交互元素 vs. 完整页面方面表现不佳，对「视觉上不明显的交互」理解困难
提出策略： Interactive Element Highlighting, Failure-aware Prompting 等 4 种增强策略
GitHub

Vision2Web

Grade B/D P1 评测基准
任务：网站视觉规格/截图 -> 网站代码
用途：Agent 循环评测
可达性：⚠ 待确认
覆盖完整网站开发生命周期。需确认输入格式和公开状态。

FrontendBench / FullFront / WebGen-Bench

Grade C/D P1 评测基准
任务：前端任务/工作流/提示 -> 代码/网站
用途：前端工程能力基线、工作流评测
适合通用前端能力和多步工作流评测，只有包含截图或视觉参考时才算直接 image2code。

P2: SVG / 矢量 / 图表即代码

SVG-Stack / SVG 图标语料

Grade B/C P2 训练集 真实 SVG
任务：文本/图像 -> SVG 代码
数据来源：从公开 SVG 仓库采集的真实矢量图
适合代码即矢量制品任务。

IconShop

Grade C P2 训练 / 方法 合成
任务：文本提示 -> SVG 图标
SVG 代码生成风格和质量评估参考。

Mermaid / Graphviz 合成图表

Grade C P2 合成数据源 需自行合成
任务：图表图片 -> Mermaid/DOT 代码
数据来源：需从模板自行生成
代码可渲染且拓扑可符号检查。适合扩展视觉反馈循环到结构化图表。

P1: 辅助 UI 数据

RICO

Grade B/C P1 移动 UI 语料 真实 App
规模：约 72,000 UI 界面 / 9,700 Android 应用
可达性：✗ 403 / 404
数据来源：真实 Android 应用自动采集（截图 + 视图层级树）
提供完整 UI 视图层级树，支持结构感知验证器和伪代码生成。访问路径需手动确认。
论文： Rico: A Mobile App Dataset for Building Data-Driven Design Applications (Deka et al., UIST 2017)

Screen2Words

Grade C P1 UI 描述 真实截图+人工标注
任务：移动端截图 -> 自然语言描述
可达性：✓ GitHub
数据来源：RICO 截图 + 人工标注描述（Google Research）
基于 RICO 截图的人工标注 UI 描述数据。适合 prompting 和 judging。
GitHub

论文-数据集关联总表

论文会议/年份创建/使用的数据集数据来源数据规模
WebSight arXiv 2024.03 WebSight (创建) LLM 全合成 270万条
Design2Code NAACL 2025 Design2Code (创建) C4 真实网页 484 条
Vision2UI / WebCode2M WWW 2025 WebCode2M (创建) 真实网页爬取 256万条
Web2Code NeurIPS 2024 D&B Web2Code (创建); 使用 WebSight, pix2code, WebSRC 合成+增强混合 82.8万条
ChartMimic ICLR 2025 ChartMimic (创建) 论文真实图表（人工筛选） 4,800 条
Plot2Code arXiv 2024.05 Plot2Code (创建) Matplotlib/Plotly 文档示例 132 条
Interaction2Code ASE 2025 Interaction2Code (创建) 真实交互网页原型 127 页面 / 374 交互
MMCode EMNLP 2024 MMCode (创建) 10 个竞赛网站真实题目 3,548 题 / 6,620 图
pix2code (Beltramelli, 2017) 2017 pix2code (创建) 程序化合成 约 1,500 条
CHI 2023 (WebUI-7K) CHI 2023 WebUI-7K (创建) 真实网站爬取 约 7,000
CREW (Metaphi Labs, 2026) 2026 CREW Figma-to-Code (创建) 真实 Figma 设计 37 任务
Deng et al., 2017 2017 im2latex-100k (创建) 真实论文公式 67,900 条

访问状态总表

数据源入口状态数据来源备注
WebSightHuggingFace✓ 200LLM 合成270万条，317 GB，CC-BY-4.0
WebCode2MHuggingFace✓ 200真实爬取317万条，1.1 TB，CC-BY-4.0
Design2CodeGitHub + HF✓ 200真实网页484 条，ODC-By
Web2CodeHuggingFace + GitHub✓ 200合成+增强82.8万条，CC-BY-4.0
ChartMimicHuggingFace + GitHub✓ 200论文真实图4,800 条，Apache-2.0
Plot2CodeGitHub✓ 200文档示例132 条，Apache-2.0
pix2codeGitHub✓ 200程序合成约 1,500 条，Apache-2.0
im2latex-100kHuggingFace✓ 200真实论文67,900 条
Interaction2CodeGitHub✓ 200真实网页127 页面，ASE 2025
MMCodeGitHub✓ 200真实竞赛题3,548 题，CC-BY-NC-SA
CREW FigmaHuggingFace✓ 200真实设计37 任务，MIT
WebUI-7KHuggingFace✓ 200真实爬取约 7K，8.36 GB
Screen2WordsGitHub✓ 200真实+人工标注Google Research
RICO项目站✗ 403真实 App需手动确认下载

数据获取管线

大数据存放：/home/jinjiang/data_zoos/
案例存放：dashboard/samples/
策略：metadata -> 冒烟样本（20-100条）-> 确认后全量下载

冒烟测试检查清单

检查项核心问题
可达性能否下载或 streaming？是否需 token？
许可证允许研究 / 评测 / 训练 / manifest 再分发？
Schema同时有视觉输入 + instruction + 目标代码？
数据来源合成 / 真实 / 混合？质量和多样性如何？
可渲染性目标代码可自动渲染？（浏览器 / Python / LaTeX / DSL）
划分有 train/val/test？能否按 source 去重切分？
去重/泄漏与基准或训练数据交叉泄漏风险？
质量空图、坏 HTML、缺资源、代码-截图不匹配？