Deterministic Component Mining for Multi-framework UI2Code Generation

Abstract

Automating User Interface (UI) generation substantially improves productivity and accelerates development by reducing engineering time and manual effort. Despite recent progress of Large Language Models (LLMs) in UI-to-Code, most existing approaches focus on a single HTML/CSS form and fail to systematically incorporate front-end frameworks such as React, Vue, and Angular. Moreover, their outputs are often verbose and hard to reuse at the component level. To address those issues, we propose Deterministic Component Mining (DCM) method, a multi-stage pipeline that couples MLLM prompting with a compact intermediate representation to enable multi-framework and component-oriented generation. Firstly, a lightweight structure model predicts the representation of DOM tree in JSON format capturing the coarse layout from webpage screenshot. Subsequently, we formulate deterministic rules to normalize the predicted DOM tree and mine reusable components and repetitive patterns via hashing and clustering, thereby yielding a portable intermediate representation. Finally, we employ a framework-conditioned LLM prompt governed by a binding specification and a file-block protocol to emit HTML/React/Vue/Angular code with explicit component props and repeat constructs. Experiments demonstrate that DCM significantly outperforms baselines on automatic evaluation metrics and component-level reuse, while delivering consistent gains in multi-framework portability and code structural quality.