AwesomeREA.org

2025 · 会议论文

Sketch2Code：评估视觉语言模型的交互式网页设计原型生成能力

Sketch2Code: Evaluating Vision-Language Models for Interactive Web Design Prototyping

Ryan Li; Yanzhe Zhang; Diyi Yang

Sketch2Code 评测视觉语言模型把粗略手绘线框草图转换为 HTML 网页原型的能力。众包标注者为来自 Design2Code 测试集的 484 个真实网页绘制了 731 张草图。十个模型（八个商业模型与两个 8B 开源模型）既直接生成页面，也在两种与 GPT-4o 模拟用户进行的多轮场景中工作：遵循其反馈，或向其提出澄清问题。输出依据 Design2Code 视觉相似度，以及基于文本块、图像、导航栏、表单与按钮等组件类型的新 IoU 布局相似度评分。Claude 3.5 Sonnet 与 GPT-4o 在单轮布局相似度上领先，而反馈轮次对商业模型的帮助大于提问方式。

研究范围与局限

生成的页面是原型，依据与参考截图的视觉和布局相似度评分，并非恢复的源代码；论文不评估行为、交互性或代码等价性，页面中的图片也被替换为占位图。草图有意省略了大部分文本与样式，因此相似度绝对值较低，单轮布局相似度最高约为 22%。模拟用户由 GPT-4o 担任，人工标注认为其 83.3% 的反馈可靠、86.7% 的回答准确。开源模型只运行了 8B 规模，每个多轮示例需要 40,000 至 160,000 个输入词元。用户研究访谈了八位 UI／UX 专家。结果对应 2024 年的模型版本。

与本合集的关联

补充基于草图与多轮交互的网页生成研究，与本节基于截图和设计稿的网站重建基准互补。

发表与复核详情

发表载体
NAACL 2025
发表状态
会议论文
出版／提交日期
2025 年 4 月
日期依据
ACL Anthology 记录的论文集出版月份为 2025 年 4 月；Crossref 只记录年份。会议于 2025 年 4 月 29 日至 5 月 4 日举行，本条目不推定具体出版日。
arXiv 首次提交
2024 年 10 月 21 日
arXiv
2410.16232
已复核的 arXiv 版本
v1
DOI
10.18653/v1/2025.naacl-long.198

ACL Anthology 页面、最终 PDF 与 Crossref 确认三位作者顺序、DOI、NAACL 2025 第 1 卷论文集及第 3921–3955 页。审阅了 arXiv v1（2024-10-21），即唯一版本，注释为“preprint, 9 pages”；简介依据 35 页的论文集 PDF。论文通过项目页面链接代码与数据。在所审阅的 21dfd1d 提交中，SALT-NLP/Sketch2Code 采用 MIT 许可证，固定了 torch 2.4.0、transformers 4.44.1 与 playwright 1.43.0 等 Python 依赖版本，并需要 OpenAI、Anthropic 或 Gemini API 密钥来运行商业模型。Hugging Face 数据卡声明 ODC-By 许可，论文也说明源网页由 Design2Code 以 ODC-By 许可收集。本次未下载数据，也未运行代码或实验。

来源复核于

本合集仅做来源复核，未重新运行论文实验。请通过原始论文或 BibTeX 引用原作者。

报告条目过时 建议修正翻译

一手来源

  1. https://aclanthology.org/2025.naacl-long.198/
  2. https://aclanthology.org/2025.naacl-long.198.pdf
  3. https://aclanthology.org/2025.naacl-long.198.bib
  4. https://api.crossref.org/works/10.18653/v1/2025.naacl-long.198
  5. https://arxiv.org/abs/2410.16232v1
  6. https://salt-nlp.github.io/Sketch2Code-Project-Page/
  7. README.md GitHub · SALT-NLP/Sketch2Code · 修订 21dfd1d
  8. LICENSE GitHub · SALT-NLP/Sketch2Code · 修订 21dfd1d
  9. requirements.txt GitHub · SALT-NLP/Sketch2Code · 修订 21dfd1d
  10. https://huggingface.co/datasets/SALT-NLP/Sketch2Code/blob/ce28bf4e62f9242cde5c5beaa8775efccfa8502b/README.md