LaTCoder: Converting Webpage Design to Code with Layout-as-Thought
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
MLLM-based method-followed by dynamic selection to determine the optimal
output. We evaluate the effectiveness of LaTCoder using multiple backbone MLLMs
(i.e., DeepSeek-VL2, Gemini, and GPT-4o) on both a public benchmark and a newly
introduced, more challenging benchmark (CC-HARD) that features complex layouts.
The experimental results on automatic metrics demonstrate significant
improvements. Specifically, TreeBLEU scores increased by 66.67% and MAE
decreased by 38% when using DeepSeek-VL2, compared to direct prompting.
Moreover, the human preference evaluation results indicate that annotators
favor the webpages generated by LaTCoder in over 60% of cases, providing strong
evidence of the effectiveness of our method.
6892be3d8da45ffb0a2b240f
Yi Gui
claimed_verified
2025-08-06T19:17:22.322Z
6523ad818fc4884992051c8f
/avatars/fe19eb397e7c121f78b370b456e542cf.svg
Yi Gui
user
starmage520
6892be3d8da45ffb0a2b2410
Zhen Li
6892be3d8da45ffb0a2b2411
Zhongyi Zhang
6892be3d8da45ffb0a2b2412
Guohao Wang
claimed_verified
2025-08-22T07:25:06.439Z
67c94fd48670a35a7c05f36c
/avatars/a59a7872bcc58fec7747225f2d3da3f9.svg
Guohao Wang
user
NiuniuWang
6892be3d8da45ffb0a2b2413
Tianpeng Lv
6892be3d8da45ffb0a2b2414
Gaoyang Jiang
6892be3d8da45ffb0a2b2415
Yi Liu
claimed_verified
2025-08-26T09:50:55.360Z
67e92b843c7e07671579c173
https://cdn-avatars.huggingface.co/v1/production/uploads/67e92b843c7e07671579c173/0ZcZ-e1_0aIN50IQ7hmey.jpeg
Yi Liu
user
yiliu051016
6892be3d8da45ffb0a2b2416
Dongping Chen
6892be3d8da45ffb0a2b2417
Yao Wan
6892be3d8da45ffb0a2b2418
Hongyu Zhang
6892be3d8da45ffb0a2b2419
Wenbin Jiang
6892be3d8da45ffb0a2b241a
Xuanhua Shi
6892be3d8da45ffb0a2b241b
Hai Jin
LaTCoder: Converting Webpage Design to Code with Layout-as-Thought
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
MLLM-based method-followed by dynamic selection to determine the optimal
output. We evaluate the effectiveness of LaTCoder using multiple backbone MLLMs
(i.e., DeepSeek-VL2, Gemini, and GPT-4o) on both a public benchmark and a newly
introduced, more challenging benchmark (CC-HARD) that features complex layouts.
The experimental results on automatic metrics demonstrate significant
improvements. Specifically, TreeBLEU scores increased by 66.67% and MAE
decreased by 38% when using DeepSeek-VL2, compared to direct prompting.
Moreover, the human preference evaluation results indicate that annotators
favor the webpages generated by LaTCoder in over 60% of cases, providing strong
evidence of the effectiveness of our method.
LaTCoder enhances layout preservation in design-to-code tasks by dividing webpage designs into blocks and using Chain-of-Thought reasoning with MLLMs, achieving significant improvements in metrics and human preference.
Multimodal Large Language Models Chain-of-Thought Layout-as-Thought image blocks absolute positioning TreeBLEU MAE