WebUI: Real-world UI Screenshots with Source Code and Bounding Boxes

Featuring 36,807 rows of real-world UI screenshots paired with their original HTML, CSS, and JavaScript source code, released by ronantakizawa in February 2026. It features per-viewport bounding boxes for every visible DOM element and natural language descriptions generated by GPT-4.1 vision across three responsive breakpoints.

Use Cases

• Training code-generation models to map visual screenshots to HTML/CSS/JS source code
• Fine-tuning object-detection models using per-viewport bounding boxes for UI elements
• Developing image-to-text systems using GPT-4.1 vision descriptions to explain UI layouts

Strengths

• 36,807 rows of non-synthetic, real-world data
• Includes per-viewport bounding boxes for every visible DOM element
• Provides three responsive breakpoints for every UI sample
• Paired with GPT-4.1 vision descriptions for multimodal training

Limitations

• Geographic bias toward US-based design systems and English language
• Potential label noise inherent in automated GPT-4.1 vision descriptions

Provenance

Source

Public design systems, component libraries, and open-source projects

Collection Method

Scraped and rendered from real-world community code

Freshness

Last updated February 2026.

Geography

United States