ui-screenshot-to-code

UI Screenshot to Code 是一个大规模数据集，将真实世界的用户界面截图与其原始的 HTML、CSS 和 JavaScript 源代码配对。该数据集通过抓取公共设计系统、组件库、开源项目和社区代码构建而成，而非合成生成。数据集包含约 21,200 行数据，涵盖约 7,068 个独特的 UI 样本，每个样本在桌面（1280x720）、平板（768x1024）和移动（375x812）三种视口下呈现。数据来源包括 GitHub、CodePen、W3Schools、组件库和模板仓库等。每个数据样本包含截图图像、HTML 源代码、CSS 源代码、JavaScript 源代码、视口类型、来源名称、来源 URL、GPT-4.1 生成的描述、使用的 JS 框架、CSS 框架、组件类型、元素数量、是否包含 JavaScript 和动画等信息。该数据集适用于训练截图到代码的模型、UI 理解、代码生成基准测试、设计系统分析和响应式设计研究等任务。

UI Screenshot to Code is a large-scale dataset that pairs real-world user interface screenshots with their original HTML, CSS, and JavaScript source code. The dataset is constructed by scraping public design systems, component libraries, open-source projects and community code, rather than being synthetically generated. It contains approximately 21,200 rows of data, covering about 7,068 unique UI samples, with each sample rendered under three viewports: desktop (1280x720), tablet (768x1024), and mobile (375x812). Data sources include GitHub, CodePen, W3Schools, component libraries, template repositories, etc. Each data sample includes screenshot images, HTML source code, CSS source code, JavaScript source code, viewport type, source name, source URL, descriptions generated by GPT-4.1, used JS framework, CSS framework, component type, number of elements, whether it contains JavaScript and animations, and other relevant information. This dataset is suitable for tasks such as training screenshot-to-code models, UI understanding, code generation benchmark testing, design system analysis and responsive design research.

原始信息汇总

WebUI 数据集概述

数据集基本信息

• 数据集名称：WebUI
• 数据集地址：https://huggingface.co/datasets/ronantakizawa/ui-screenshot-to-code
• 语言：英语
• 许可证：MIT
• 数据规模：10K<n<100K
• 任务类别：图像到文本、文本生成、目标检测
• 标签：代码生成、用户界面、截图、HTML、CSS、Web开发、设计系统、前端、边界框、多视口、响应式设计

数据集内容与结构

核心内容

该数据集大规模地配对了真实世界的用户界面截图与其原始的HTML、CSS和JavaScript源代码，为每个可见的DOM元素提供了每个视口的边界框，以及GPT-4.1视觉描述。每个样本均在三个响应式断点下渲染。数据来源于公共设计系统、组件库、开源项目和社区代码，而非合成生成。

数据规模与划分

• 总行数：36,807
• 唯一用户界面样本数：12,269
• 数据划分：
  • 训练集：29,409 行（对应 9,803 个样本）
  • 验证集：3,702 行（对应 1,234 个样本）
  • 测试集：3,696 行（对应 1,232 个样本）
• 每个样本的视口数量：3个（桌面端、平板端、移动端）
• 数据来源数量：40个

关键特性

• 多视口渲染：每个样本包含桌面端（1280x720）、平板端（768x1024）和移动端（375x812）的渲染，通过 sample_id 关联。
• 带DOM层级的每视口边界框：为所有可见DOM元素提供带类型的坐标和 parent_index，保留了用于布局和代码生成的父子树结构。
• 分离的CSS/JS列：将样式和脚本提取到独立的列中，提供结构化的HTML。
• 精选的高质量来源：包括设计系统文档（如SAP、Grommet、Carbon、Fluent UI、Primer等）在内的40个指定来源。
• 丰富的元数据：包括框架检测、CSS框架检测、组件分类、动画标志、元素计数。
• 视觉-大语言模型描述：每个样本都由GPT-4.1视觉生成描述。

数据集模式

每一行代表一个用户界面样本的一个视口。共享相同 sample_id 的行显示同一用户界面在不同断点下的情况。

主要字段

字段名	类型	描述
sample_id	string	唯一ID，用于关联每个用户界面样本的3个视口行
image	Image	该视口下渲染的用户界面PNG截图
html	string	HTML源代码（内联样式/脚本已提取到单独的列；base64和SVG冗余内容已去除）
css	string	CSS源代码（从外部文件和内联 <style> 块合并而来）
js	string	JavaScript源代码（如果有）
viewport	string	视口类型：desktop（1280x720）、tablet（768x1024）或 mobile（375x812）
source_name	string	来源名称（例如 github、codepen、awwwards）
source_url	string	组件/页面的原始URL
description	string	GPT-4.1视觉生成的描述，带有视口类型前缀
framework	string	JS框架：vanilla、angular、react、vue、svelte
css_framework	string	CSS框架：vanilla、tailwind、bootstrap、material、antd、chakra
component_type	string	用户界面类型：button、page、form、component、card、navbar 等
element_count	int32	HTML元素数量
has_animations	bool	CSS/HTML是否包含动画或过渡效果
bboxes	Sequence	每个可见DOM元素的带类型边界框序列

边界框模式

bboxes 列是一个结构体类型的序列，无需JSON解析。

字段	类型	描述
tag	string	HTML标签名（例如 div、button、h1）
x	int32	左侧边缘位置（像素）
y	int32	顶部边缘位置（像素）
width	int32	元素宽度（像素）
height	int32	元素高度（像素）
text	string	文本内容（前80个字符）
id	string	元素的 id 属性
class	string	元素的 class 属性
parent_index	int32	该数组中最近可见父元素的索引，根元素为 -1

数据划分详情

划分在来源级别进行——来自同一来源的所有样本仅出现在一个划分中。这可以防止来自同一来源的共享编码模式、CSS框架或模板结构造成数据泄露。

划分	行数	样本数	来源数	来源名称（部分）
训练集	29,409	9,803	32	github, codepen, sap-fundamental-styles, grommet, orbit-kiwi, fluent-ui-react-v9, backstage, lapaninja, primer-react, workday-canvas, wordpress-gutenberg, contentful-forma-36, monday-vibe, nextui, w3schools, grafana-ui, three-drei, audi-ui, mistica-web, jetbrains-ring-ui, tailwind-starter-kit, siteinspire, storybook-design-system, daisyui, bulma, zendesk-garden, mui, tailadmin, radix, shadcn, volt-bootstrap, chakra
验证集	3,702	1,234	4	wordpress_themes, awwwards, adobe-spectrum, chakra-ui-storybook
测试集	3,696	1,232	4	onepagelove, frontend_mentor, carbon, glitch

数据来源分布

主要来源类别

• GitHub：占样本的35%。通过GitHub搜索API发现。
• CodePen：占样本的25%。通过GitHub代码搜索和标签/热门页面爬取发现。
• 设计系统：占样本的16%。从SAP Fundamental Styles、Grommet、Orbit (Kiwi)、Fluent UI、Carbon、Primer React等众多设计系统的文档和Storybook实例中提取。
• WordPress主题：占样本的5%。来自公开可用的WordPress主题演示。
• 精选画廊：占样本的10%。来自Awwwards、One Page Love、SiteInspire、LapaNinja等。
• 其他来源：占样本的9%。包括Frontend Mentor提交、W3Schools教程、Tailwind入门套件、DaisyUI/Bulma/MUI/Radix/Shadcn/Chakra组件库、Glitch项目等。

数据分布洞察

按框架分布

框架	样本数	占比
Vanilla HTML/CSS	6,760	55%
Angular	3,647	30%
React	1,580	13%
Vue	251	2%
Svelte	31	<1%

按CSS框架分布

CSS框架	样本数	占比
Vanilla CSS	6,787	55%
Tailwind CSS	4,601	38%
Bootstrap	406	3%
Material	224	2%
Ant Design	224	2%
Chakra	27	<1%

按组件类型分布

类型	样本数	占比
Button	5,910	48%
Page	2,064	17%
Form	1,060	9%
Component	812	7%
Card	653	5%
Navbar	578	5%
Other	1,192	9%

主要应用场景

• 截图到代码模型：训练模型从用户界面图像生成HTML/CSS。
• 用户界面理解与空间推理：带类型的边界框支持元素定位、布局分析和基于基础的用户界面理解。
• 响应式设计研究：使用 sample_id 比较同一用户界面在桌面端、平板端和移动端视口下的表现。
• 代码生成基准测试：评估模型在复现真实世界用户界面模式方面的能力。
• 用户界面上的目标检测：使用边界框标注训练模型以检测和分类用户界面组件。
• 设计系统分析：研究16个以上生产设计系统中的模式。

引用

bibtex @dataset{webui_2026, title={WebUI}, author={Ronan Takizawa}, year={2026}, url={https://huggingface.co/datasets/ronantakizawa/webui}, note={Real-world UI screenshots with multi-viewport rendering, per-element bounding boxes, and separated HTML/CSS/JS source code} }

许可证说明

该数据集聚合了遵循各种开源许可证（MIT、Apache-2.0、GPL等）的代码。使用时请尊重各个许可证。

搜集汇总

数据集介绍

构建方式

在用户界面设计领域，数据集的构建质量直接影响模型对视觉元素与代码映射关系的理解。WebUI数据集通过系统化采集真实世界中的用户界面资源，构建了一个大规模、多视角的配对数据集。其构建过程整合了来自40个不同来源的公开设计系统、组件库和开源项目，包括GitHub、CodePen以及多个知名设计系统文档。每个样本均经过多视口渲染，分别生成桌面、平板和移动设备三种分辨率下的截图，并利用自动化工具提取对应的HTML、CSS和JavaScript源代码。此外，数据集还通过GPT-4.1视觉模型为每个样本生成了详细的自然语言描述，并为所有可见DOM元素提供了带有层级关系的边界框标注，确保了数据的完整性与结构性。

特点

该数据集在用户界面代码生成研究领域展现出多项独特优势。其核心特点在于每个样本均包含三种响应式视口的完整数据，通过统一的样本ID进行关联，为研究跨设备界面适配提供了坚实基础。数据集提供了详尽的边界框标注，不仅包含每个可见元素的坐标与尺寸，还通过parent_index字段保留了DOM树的层级结构，支持空间推理与布局分析。源代码部分经过精心处理，将HTML、CSS和JavaScript分离存储，并清除了冗余的Base64编码与SVG数据，确保了代码的整洁性与可用性。丰富的元数据覆盖了前端框架、CSS框架、组件类型等多个维度，辅以GPT-4.1生成的视觉描述，共同构成了一个多层次、高结构化的数据集合。

使用方法

研究人员可利用该数据集推动多个前沿方向的发展。在模型训练方面，该数据集适用于训练从屏幕截图生成HTML/CSS代码的端到端模型，其分离的代码结构与边界框标注为模型学习视觉元素与代码语义的对应关系提供了监督信号。在评估基准构建上，数据集按来源层级划分的训练、验证和测试集有效防止了数据泄露，可用于公平评估代码生成模型在未见数据上的泛化能力。此外，借助多视口数据和元素边界框，研究者可深入分析响应式设计模式，或训练用于UI组件检测与分类的计算机视觉模型。数据加载过程通过Hugging Face Datasets库实现，支持按样本ID、视口类型、来源或组件类型进行灵活筛选与查询。

背景与挑战

背景概述

在人工智能与前端工程交叉领域，自动化界面生成技术长期面临高质量数据稀缺的困境。为应对这一挑战，研究人员Ronan Takizawa于2026年构建了WebUI数据集，该数据集系统性地采集了真实世界中的用户界面截图，并精确配对了对应的HTML、CSS与JavaScript源代码。其核心研究问题聚焦于如何通过多模态学习，实现从视觉设计到可执行代码的端到端转化，旨在推动截图转代码模型、界面空间理解以及响应式设计分析等前沿方向的发展。该数据集凭借其多视口渲染、细粒度边界框标注以及丰富的元数据，已成为评估与训练界面智能生成模型的重要基准，显著提升了模型对真实网页布局与组件层次结构的感知能力。

当前挑战

该数据集致力于解决前端界面自动化生成这一复杂领域问题，其核心挑战在于如何准确建立高保真视觉界面与结构化代码语义之间的映射关系。具体而言，模型需克服网页元素多样、布局动态响应以及视觉样式与代码分离等多重困难。在数据集构建过程中，挑战同样显著：首先，需从GitHub、CodePen及各类设计系统等异构来源大规模采集并清洗配对数据，确保源代码与渲染截图的一致性；其次，为每个可见DOM元素标注跨视口的精确边界框并保留层级关系，涉及复杂的视觉解析与树结构重建；此外，还需处理不同前端框架与CSS库带来的代码范式差异，并设计合理的按源分割策略以防止数据泄露。

常用场景

经典使用场景

在界面设计工程化领域，该数据集为屏幕截图到代码生成模型提供了核心训练资源。通过将真实界面截图与对应的HTML、CSS和JavaScript源代码精确配对，研究人员能够构建端到端的视觉到代码转换系统。数据集包含桌面、平板和移动端三种视口的渲染结果，使模型能够学习响应式设计的跨平台适配规律。每个可见DOM元素都标注了类型化边界框和层级关系，为空间布局理解提供了结构化监督信号。

解决学术问题

该数据集有效解决了界面逆向工程中的多模态对齐难题，为计算机视觉与前端代码生成交叉研究搭建了桥梁。通过提供精确的元素级空间标注和源代码对应关系，它支持界面布局理解、组件检测、代码语义解析等基础问题的探索。数据集的跨视口设计特性，为响应式界面生成这一长期挑战提供了系统性研究平台。其丰富的元数据标注框架，使得界面设计模式分析与代码风格迁移研究成为可能。

衍生相关工作

基于该数据集衍生的经典研究包括Pix2Code架构的改进版本，实现了从单一样例到多视口生成的扩展。UI2Code系列工作利用其边界框标注数据，提出了结合视觉布局理解与代码语法树的混合生成模型。Design2Code项目则专注于设计系统组件识别，通过数据集的框架标注实现跨设计语言的代码转换。近期工作如Vision-UI-Coder结合GPT-4视觉描述，探索了多模态大模型在界面代码生成中的零样本能力。