# Sketch2Code：评估视觉语言模型的交互式网页设计原型生成能力
> Sketch2Code 评测视觉语言模型把粗略手绘线框草图转换为 HTML 网页原型的能力。众包标注者为来自 Design2Code 测试集的 484 个真实网页绘制了 731 张草图。十个模型（八个商业模型与两个 8B 开源模型）既直接生成页面，也在两种与 GPT-4o 模拟用户进行的多轮场景中工作：遵循其反馈，或向其提出澄清问题。输出依据 Design2Code 视觉相似度，以及基于文本块、图像、导航栏、表单与按钮等组件类型的新 IoU 布局相似度评分。Claude 3.5 Sonnet 与 GPT-4o 在单轮布局相似度上领先，而反馈轮次对商业模型的帮助大于提问方式。
- 作者：Ryan Li; Yanzhe Zhang; Diyi Yang
- 原标题：Sketch2Code: Evaluating Vision-Language Models for Interactive Web Design Prototyping
- 发表载体：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
- 来源复核于：2026-10-27
- 收录于：2026-11-03
- 原始论文：
- PDF：
- 代码：
- 项目：
- BibTeX：
- 目录页面：
- 记录 JSON：
- 英文版：[English](https://awesomerea.org/papers/paper-sketch2code/index.md)
## 研究范围与局限
生成的页面是原型，依据与参考截图的视觉和布局相似度评分，并非恢复的源代码；论文不评估行为、交互性或代码等价性，页面中的图片也被替换为占位图。草图有意省略了大部分文本与样式，因此相似度绝对值较低，单轮布局相似度最高约为 22%。模拟用户由 GPT-4o 担任，人工标注认为其 83.3% 的反馈可靠、86.7% 的回答准确。开源模型只运行了 8B 规模，每个多轮示例需要 40,000 至 160,000 个输入词元。用户研究访谈了八位 UI／UX 专家。结果对应 2024 年的模型版本。
## 与本合集的关联
补充基于草图与多轮交互的网页生成研究，与本节基于截图和设计稿的网站重建基准互补。
## 发表与复核说明
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 许可收集。
## 一手来源
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
## 关于此条目
已依据论文及一手来源复核。请通过原始论文或 BibTeX 引用原作者。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。