2025 · Conference paper
LaTCoder: Converting Webpage Design to Code with Layout-as-Thought
LaTCoder converts webpage design images to HTML/CSS by making layout an explicit intermediate step. A rule-based divider recursively finds solid-colored horizontal or vertical lines that avoid OCR-detected text, then merges small regions into grid-aligned blocks. An MLLM writes code for each block with a chain-of-thought prompt. The blocks are then assembled by absolute positioning or by the MLLM, and a reference-free verifier combining MAE and CLIP picks the better result. The paper also introduces CC-HARD, 128 complex-layout pages manually sampled from Common Crawl.
Scope and limitations
Targets static HTML/CSS from a design image; JavaScript behavior, interactions, navigation and backends are outside the method, and it does not recover a site's original source. Evaluation uses Design2Code-HARD (80 pages) and CC-HARD (128 pages), scoring generated code and screenshots against references with TreeBLEU, CLIP, Visual Score and MAE. Reported gains are relative changes on small absolute scores: with DeepSeek-VL2 on CC-HARD, TreeBLEU rises from 0.09 to 0.15 (+66.67%), and CLIP falls slightly on Design2Code-HARD. The divider assumes rectangular, solid-colored separators and fixed pixel thresholds; the block-merge area was tuned on CC-HARD. Short-context models use absolute positioning only, which fixes block positions from the design. Block content can still be misplaced, and Gemini sometimes omitted blocks during assembly. Pairwise human preference (at least 60% for LaTCoder) covers GPT-4o on CC-HARD only, by majority vote of six annotators. GPT-4o, Gemini and DeepSeek-VL2 results are historical baselines, not current rankings.
Why it fits this collection
Adds layout-first, block-wise screenshot-to-code generation with explicit assembly and verification, complementing DCGen's divide-and-conquer prompting and end-to-end website reconstruction benchmarks.
Publication and review details
- Venue
- KDD 2025
- Status
- Conference paper
- Publication / posting date
- August 3, 2025
- Date source
- ACM-deposited Crossref metadata gives 3 August 2025 for both online and print publication; this date is not inferred solely from the August 3–7 conference schedule.
- First arXiv submission
- August 5, 2025
- arXiv
- 2508.03560
- Reviewed arXiv version
- v1
- DOI
- 10.1145/3711896.3737016
Crossref and arXiv agree on the 13-author order and DOI. arXiv v1 of 2025-08-05 is the KDD-formatted paper, with comment “KDD 2025 v2”; the ACM landing page refused automated retrieval, so bibliographic details follow Crossref. The paper links examples/latcoder on the naturalcc main branch. The reviewed snapshot is main at 5f840620 (2026-06-02); the directory was added on 2025-09-25. The repository is MIT-licensed at its root; the example README also says MIT but links a LICENSE file absent from that directory, and its project-page link is malformed. The directory contains the divider, generation and assembly agents, adapted Design2Code baselines, evaluation for MAE, Visual Score, CLIP and TreeBLEU, a human-evaluation notebook, and data/CC-HARD.parquet. That file matches the byte size of the Hugging Face dataset xcodemind/CC-HARD, which has 128 image–HTML rows under a CC-BY-4.0 card; rights in the sampled Common Crawl pages were not reviewed. Design2Code-HARD and the DCGen baseline must be obtained separately. requirements.txt pins openai 1.55.3, google-generativeai 0.8.3 and transformers 4.45.2, but installs CLIP and DeepSeek-VL from moving main branches plus a vLLM nightly wheel. GPT-4o is called through Azure OpenAI with placeholder credentials; DeepSeek-VL2 is served through vLLM. The paper reports runs on four A800 80 GB GPUs. Source files were read; no data was downloaded and no code or experiments were run.
Sources reviewed
Source review only; experiments were not rerun for this collection. Cite the original authors using the linked paper or BibTeX.
Primary sources
- https://doi.org/10.1145/3711896.3737016
- https://api.crossref.org/works/10.1145/3711896.3737016
- https://arxiv.org/abs/2508.03560
- https://arxiv.org/pdf/2508.03560v1
- examples/latcoder/README.md GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/requirements.txt GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/main.py GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/smart_blocker.py GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/my_datasets.py GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/vendors/openai__.py GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/evaluation/evaluate.py GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/latcoder/data GitHub · CGCL-codes/naturalcc · Revision 5f84062
- LICENSE GitHub · CGCL-codes/naturalcc · Revision 5f84062
- https://huggingface.co/datasets/xcodemind/CC-HARD/blob/f9339b3d2098fd856bef000d9ce6234032176f7b/README.md