Sketch2Code: Hand-Drawn Wireframes to HTML/Tailwind Dataset

This dataset consists of paired visual-programming examples mapping hand-drawn UI wireframes to their corresponding production-ready frontend implementations. Each sample contains a low-fidelity sketch of a user interface and a semantically equivalent HTML representation styled using Tailwind CSS via CDN.

The primary objective of this dataset is to support research in multimodal learning and vision-language modeling for automated user interface generation. In particular, it is designed for training and evaluating models that translate visual design artifacts into structured code, bridging the gap between UI/UX ideation and implementation.

The dataset covers a diverse range of modern web application layouts, including e-commerce product pages, SaaS dashboards, social media feeds, kanban boards, search interfaces, and abstract layout compositions. This diversity enables robust evaluation of spatial reasoning, layout understanding, and structured code generation capabilities in multimodal models.

All HTML outputs are single-file implementations following semantic HTML5 standards and modern frontend practices. Styling is implemented exclusively using Tailwind CSS via CDN, ensuring consistency and eliminating external dependencies. The code is human-verified and refined to ensure alignment between visual structure and rendered output.

The dataset is intended for:(i) fine-tuning vision-language models (e.g., LLaVA, Qwen-VL, InternVL),(ii) benchmarking multimodal code generation systems,(iii) research in layout understanding and UI synthesis,(iv) development of automated prototyping tools that convert sketches into functional web interfaces.

By providing aligned visual-code pairs, Sketch2Code enables research on cross-modal alignment between spatial visual representations and structured programming languages, contributing to the broader goal of automated software synthesis from human intent.