LaTCoder: Converting Webpage Design to Code with Layout-as-Thought
Yi Gui, Zhen Li, Zhongyi Zhang, Guohao Wang, Tianpeng Lv, Gaoyang Jiang, Yi Liu, Dongping Chen, Yao Wan, Hongyu Zhang, Wenbin Jiang, Xuanhua Shi, Hai Jin

TL;DR
LaTCoder is a novel method that improves webpage design to code conversion by enhancing layout preservation through a layout-as-thought approach, utilizing chain-of-thought prompting and strategic assembly, leading to significant accuracy improvements.
Contribution
We introduce LaTCoder, a new approach that combines layout segmentation, chain-of-thought prompting, and assembly strategies to better preserve webpage layouts during code generation.
Findings
TreeBLEU scores increased by 66.67% with DeepSeek-VL2.
MAE decreased by 38% on the new CC-HARD benchmark.
Over 60% human preference for LaTCoder-generated webpages.
Abstract
Converting webpage designs into code (design-to-code) plays a vital role in User Interface (UI) development for front-end developers, bridging the gap between visual design and functional implementation. While recent Multimodal Large Language Models (MLLMs) have shown significant potential in design-to-code tasks, they often fail to accurately preserve the layout during code generation. To this end, we draw inspiration from the Chain-of-Thought (CoT) reasoning in human cognition and propose LaTCoder, a novel approach that enhances layout preservation in webpage design during code generation with Layout-as-Thought (LaT). Specifically, we first introduce a simple yet efficient algorithm to divide the webpage design into image blocks. Next, we prompt MLLMs using a CoTbased approach to generate code for each block. Finally, we apply two assembly strategies-absolute positioning and an…
Peer Reviews
No public reviews on file for this paper yet. If you reviewed it on a platform where reviews are public (OpenReview, ICLR, NeurIPS, ICML), you can paste yours below so the community can read it here.
Code & Models
Videos
No videos yet. Explain this paper in a talk, walkthrough, or lecture? Add one.
