Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

MRWeb: An Exploration of Generating Multi-Page Resource-Aware Web Code from UI Designs

Yuxuan Wan, Yi Dong, Jingyu Xiao, Yintong Huo, Wenxuan Wang, Michael R. Lyu

TL;DR

MRWeb addresses the gap between design-to-code and real-world web development by enabling multi-page, resource-aware web UI generation from UI designs. It introduces a resource list data structure, curates a 500-site MRWeb dataset (300 synthetic, 200 real-world), and develops an evaluation framework with novel IQA metrics and a functional similarity measure. Empirical results show that resource lists substantially improve navigation (RER from 0% to 66-80%) and visual alignment, while exposing limitations in MLLMs' visual grounding and sensitivity to input complexity. A practical MRWeb tool is demonstrated and released to support end-to-end full-stack generation, laying groundwork for scalable, real-world web UI automation.

Abstract

Multi-page websites dominate modern web development. However, existing design-to-code methods rely on simplified assumptions, limiting to single-page, self-contained webpages without external resource connection. To address this gap, we introduce the Multi-Page Resource-Aware Webpage (MRWeb) generation task, which transforms UI designs into multi-page, functional web UIs with internal/external navigation, image loading, and backend routing. We propose a novel resource list data structure to track resources, links, and design components. Our study applies existing methods to the MRWeb problem using a newly curated dataset of 500 websites (300 synthetic, 200 real-world). Specifically, we identify the best metric to evaluate the similarity of the web UI, assess the impact of the resource list on MRWeb generation, analyze MLLM limitations, and evaluate the effectiveness of the MRWeb tool in real-world workflows. The results show that resource lists boost navigation functionality from 0% to 66%-80% while facilitating visual similarity. Our proposed metrics and evaluation framework provide new insights into MLLM performance on MRWeb tasks. We release the MRWeb tool, dataset, and evaluation framework to promote further research.

MRWeb: An Exploration of Generating Multi-Page Resource-Aware Web Code from UI Designs

TL;DR

MRWeb addresses the gap between design-to-code and real-world web development by enabling multi-page, resource-aware web UI generation from UI designs. It introduces a resource list data structure, curates a 500-site MRWeb dataset (300 synthetic, 200 real-world), and develops an evaluation framework with novel IQA metrics and a functional similarity measure. Empirical results show that resource lists substantially improve navigation (RER from 0% to 66-80%) and visual alignment, while exposing limitations in MLLMs' visual grounding and sensitivity to input complexity. A practical MRWeb tool is demonstrated and released to support end-to-end full-stack generation, laying groundwork for scalable, real-world web UI automation.

Abstract

Multi-page websites dominate modern web development. However, existing design-to-code methods rely on simplified assumptions, limiting to single-page, self-contained webpages without external resource connection. To address this gap, we introduce the Multi-Page Resource-Aware Webpage (MRWeb) generation task, which transforms UI designs into multi-page, functional web UIs with internal/external navigation, image loading, and backend routing. We propose a novel resource list data structure to track resources, links, and design components. Our study applies existing methods to the MRWeb problem using a newly curated dataset of 500 websites (300 synthetic, 200 real-world). Specifically, we identify the best metric to evaluate the similarity of the web UI, assess the impact of the resource list on MRWeb generation, analyze MLLM limitations, and evaluate the effectiveness of the MRWeb tool in real-world workflows. The results show that resource lists boost navigation functionality from 0% to 66%-80% while facilitating visual similarity. Our proposed metrics and evaluation framework provide new insights into MLLM performance on MRWeb tasks. We release the MRWeb tool, dataset, and evaluation framework to promote further research.

Paper Structure

This paper contains 47 sections, 10 figures, 8 tables.

Table of Contents

  1. Introduction
  2. Related Work
  3. Task Formulation
  4. Resource List
  5. Task Definition
  6. Dataset Collection
  7. Synthetic Data Collection
  8. Link insertion.
  9. Image replacement.
  10. Real-world Data Collection
  11. Resource List Extraction
  12. Automation & Dataset Statistics
  13. Study Setup
  14. Evaluated Models
  15. Prompting Strategies
  16. ...and 32 more sections

Figures (10)

  • Figure 1: Comparison between self-contained webpage and multi-page resource-aware webpage (MRWeb). MRWeb supports multi-page navigation, real-image loading and backend routing.
  • Figure 2: Topic distribution of real-world web data in MRWeb dataset.
  • Figure 3: GPT-4o performance decreases with input image size (million pixels) and resource list length.
  • Figure 4: Summary statistics for external/backend links, internal links, and images count.
  • Figure 5: Detailed analysis.
  • ...and 5 more figures