State-Aware Generation of Deployable Websites from Visual Prototypes and Requirements

Abstract

Generating deployable websites from visual prototypes and textual requirements is increasingly feasible with multimodal models, yet keeping generated projects consistent with their prototypes remains challenging. Prototypes specify layouts and visual elements, while requirements describe interaction workflows and deployment constraints. Existing UI-to-code methods and coding agents often treat layout reconstruction, interaction implementation, and project editing separately, allowing visual elements, files, workflows, dependencies, and render evidence to lose their correspondence across generation, verification, and update. We call this problem prototype-to-project state drift. We propose VisStateCoder, a state-aware framework that maintains these correspondences in a Project State Graph. The graph connects four types of state nodes through typed links and supports prototype grounding, graph-guided generation, and render-evidence-guided scoped updates that map failed checks to affected files while preserving files outside the update scope. We evaluate VisStateCoder on Vision2Web using five foundation models across Static Webpage, Interactive Frontend, and Full-Stack Website tasks. Averaged across models, VisStateCoder improves overall scores over the strongest baseline for each model by 26.1 and 22.6 points on Interactive Frontend and Full-Stack Website tasks, respectively. It also reduces verified-state drift, measured by checks that pass in one update round but fail later, compared with alternative state representations. An annotation study of 50 tasks finds that the constructed graphs achieve 95.6% edge-level F1.