华中科大团队破解AI网页设计痛点：让机器像人类一样"分块思考"生成代码

这项由华中科技大学计算机科学与技术学院的桂艺、李振、张仲毅、王国豪等十三位研究者组成的团队完成的研究，发表于2025年8月3-7日的第31届ACM SIGKDD知识发现与数据挖掘大会(KDD 2025)。有兴趣深入了解技术细节的读者可以通过DOI链接https://doi.org/10.1145/3711896.3737016获取完整论文。

当你在Instagram上看到一个精美的页面设计，能否让AI自动生成对应的网页代码？这听起来很简单，但实际上却是困扰程序员和AI研究者很久的难题。目前，超过75.8%的前端开发者都在使用AI工具来提高效率，但现有的AI在处理网页设计转换时，总是会"丢失"一些重要的布局信息，就像一个健忘的建筑师在建房时忘记了某些房间的具体位置。

研究团队发现了一个有趣的现象：当前最先进的多模态大语言模型，比如GPT-4V、Gemini等，在看到一张网页截图时，虽然能够生成相应的代码，但经常会把原本应该水平排列的元素误排成垂直排列，或者完全搞错了元素的相对位置。这就好比让人看着一张房间的照片来画平面图，结果把本该在客厅旁边的卧室画到了厨房后面。

为了解决这个问题，华中科大的研究团队想到了一个巧妙的方法：既然AI在处理整张复杂图片时容易"迷路"，那为什么不先把图片切成小块，让AI一块一块地处理，然后再把结果拼接起来呢？这就像拼图游戏一样，先完成每个小区域，最后组成完整的图案。

他们把这种方法命名为LaTCoder，其中的"LaT"代表"Layout-as-Thought"（布局即思维），借鉴了人工智能领域著名的"Chain-of-Thought"（思维链）概念。就像人类解决复杂问题时会把大问题分解成小问题逐一解决一样，LaTCoder把复杂的网页设计分解成多个简单的图像块来处理。

一、神奇的图片切割术：让AI看得更清楚

LaTCoder的第一步工作就像一个精明的裁缝，需要把一张完整的网页设计图精准地裁剪成若干个有意义的小块。这个过程听起来简单，实际上却需要相当的技巧。研究团队设计了一个专门的算法来寻找网页中的"分割线"。

这些分割线必须满足几个条件：首先，它们必须是单一颜色的直线，就像用尺子画出的标准线条；其次，相邻分割线之间的距离不能太近，避免把图片切得过于琐碎；最重要的是，这些分割线不能穿过任何文字区域，否则就会把一个完整的句子从中间劈开。

为了确保文字的完整性，研究团队还整合了光学字符识别（OCR）技术。这就好比给算法装上了一双能够识别文字的眼睛，确保切割过程不会破坏任何文本内容。同时，为了提高效率，他们采用了网格采样技术，不需要逐个像素地扫描，而是按照固定间隔进行检查，就像走路时不需要测量每一步的精确距离，大步流星地前进即可。

在实际操作中，算法会忽略图片边缘的几个像素点，因为边缘区域往往包含一些干扰信息。通过这种方法，一张复杂的网页设计图就被巧妙地分割成了多个独立的图像块，每个块都有明确的位置坐标（专业术语叫"边界框"或BBox），就像给每个房间标注了详细的地址。

为了避免产生过小的无意义碎片，算法还会自动合并那些面积小于预设阈值的小块。这就像整理房间时，会把一些小物件归类到相邻的大容器中，保持整体的整洁和实用性。

二、逐块生成：化整为零的编程魔法

完成图片分割后，LaTCoder开始了第二阶段的工作：逐个处理每个图像块。这个过程就像请一位经验丰富的程序员，针对每个小区域单独编写代码。研究团队精心设计了一套提示词系统，指导AI如何处理每个图像块。

这套提示词系统遵循几个重要原则。首先是使用统一的网页模板，就像所有的房间都使用相同的建筑标准，确保最终拼接时不会出现风格冲突。其次是优先考虑外观和布局的一致性，然后才关注内容的准确性，这就像装修房子时先确定整体风格，再添置具体的家具。

最关键的是，这个过程采用了"思维链"的方法，让AI按步骤进行思考：先分析图像块的内容和结构，然后生成初始的HTML和CSS代码，接着检查文字内容、颜色搭配、背景样式等细节，最后进行整体优化。这个过程就像一个细心的手工艺人，先打草稿，再精雕细琢，最后进行最终的润色。

研究团队还针对不同能力的AI模型提供了不同版本的提示词。对于上下文长度较短的较弱模型，比如DeepSeek-VL2，他们提供了简化版本的提示，避免超出模型的处理能力。这就像给不同年龄的学生提供不同难度的作业，确保每个人都能在自己的能力范围内完成任务。

三、巧妙拼接：两种策略的完美结合

生成了所有图像块的代码后，LaTCoder面临最后一个挑战：如何把这些代码片段组装成完整的网页？研究团队开发了两种不同的拼接策略，就像准备了两种不同的拼图方法。

第一种策略叫做"绝对定位组装"，这种方法就像在一张大画布上，根据每个图像块的原始坐标位置，精确地放置每个代码片段。这种方法的优点是位置绝对准确，不会出现偏差，特别适合那些上下文处理能力较弱的AI模型。

第二种策略叫做"基于AI的组装"，这种方法更加灵活，让AI模型根据原始设计图和每个图像块的位置信息，智能地决定如何最好地组合这些代码片段。虽然这种方法对AI模型的能力要求更高，但往往能产生更加美观和自然的结果。

为了选择最佳的组装结果，研究团队还开发了一个"动态选择器"。这个选择器就像一位经验丰富的评委，能够比较两种组装方法的结果，选择更好的那一个。评判标准结合了像素级别的准确性（通过平均绝对误差MAE测量）和语义级别的相似性（通过CLIP模型测量），确保选择的结果既在细节上准确，又在整体感观上协调。

有趣的是，研究团队最初尝试让AI模型直接担任评委，但发现即使设计了精心的提示词，AI模型在图像相似性判断方面仍然不够可靠。因此，他们最终选择了传统的自动化评估指标，这个决定体现了科学研究中务实和严谨的态度。

四、严格测试：新数据集的挑战

为了验证LaTCoder的效果，研究团队进行了全面的实验评估。他们不仅在现有的公开数据集Design2Code-HARD上进行了测试，还专门创建了一个更具挑战性的新数据集CC-HARD。

Design2Code-HARD虽然被认为是相对困难的测试集，但研究团队发现它的复杂性主要体现在文本长度上，而在布局和结构方面仍然相对简单。为了更好地测试AI模型在处理复杂网页布局方面的能力，他们从Common Crawl数据集中精心挑选了128个具有复杂布局的网页样本，构建了CC-HARD数据集。

通过统计分析可以发现，CC-HARD数据集在布局复杂度方面确实更具挑战性。虽然两个数据集的总体长度相似，但CC-HARD中的代码标签数量更多（平均274个对比251个），DOM树深度更深（平均16层对比10层），独特标签类型也更丰富（平均27种对比23种）。这些数字表明CC-HARD更像是现实世界中复杂网站的真实写照。

实验结果令人印象深刻。在Design2Code-HARD数据集上，当使用GPT-4o作为基础模型时，LaTCoder在TreeBLEU指标上提升了17.65%，在CLIP相似度上提升了1.27%，在视觉评分上提升了3.8%，平均绝对误差降低了37.41%。在更具挑战性的CC-HARD数据集上，改善幅度更加明显：TreeBLEU提升了60%，CLIP相似度提升了2.53%，视觉评分提升了2.56%，平均绝对误差降低了43.23%。

特别值得注意的是，LaTCoder对较弱的AI模型帮助更大。当使用DeepSeek-VL2模型时，在CC-HARD数据集上的TreeBLEU指标提升了66.67%，平均绝对误差降低了38%。这说明LaTCoder的"分而治之"策略确实能够有效减轻AI模型的处理负担，让它们在力所能及的范围内发挥更好的效果。

五、人类评判：真实用户的反馈

除了自动化的评估指标，研究团队还进行了人类评判实验。他们邀请了六位标注人员，让他们比较LaTCoder生成的网页与其他基准方法的结果，并投票选择更接近原始设计的版本。

评判过程采用了配对比较的方式，每次向评判者展示原始设计图和两个不同方法生成的网页，询问"哪一个更接近设计图并且质量更高？"为了减少主观性的影响，研究团队采用了多数投票的机制来确定最终结果。

人类评判的结果进一步验证了LaTCoder的有效性。在与各个基准方法的比较中，人类评判者在至少60%的情况下更偏好LaTCoder的结果。特别是在与DCGen方法的比较中，LaTCoder的胜率达到了79.7%，这个差距相当明显。

这种人类评判实验的价值在于，它反映了真实用户的主观感受，而不仅仅是数字化的客观指标。毕竟，网页设计的最终目标是让人类用户满意，因此人类评判者的偏好具有重要的参考价值。

六、深入分析：成功的秘密与局限性

研究团队还进行了详细的消融研究（ablation study），试图理解LaTCoder成功的关键因素。他们发现，"思维链"式的提示设计对最终效果有重要影响。当使用简化的提示词时，各项性能指标都出现了明显下降，这说明让AI按步骤思考确实有助于提高代码生成的质量。

关于两种组装策略的比较，研究发现它们各有优势。绝对定位组装在位置准确性方面表现更好，特别是在平均绝对误差这个指标上优势明显。这是因为绝对定位严格保持了每个图像块的原始位置，避免了任何可能的偏移。而基于AI的组装虽然在位置精度上稍逊一筹，但往往能产生更加自然和美观的整体效果，各个部分之间的过渡更加平滑。

研究团队还测试了不同规模AI模型的表现。有趣的是，LaTCoder对较小规模的模型帮助更加显著。比如对于DeepSeek-VL2-tiny模型，性能提升幅度达到了175%，而对于更大的模型，虽然绝对性能更高，但相对提升幅度较小。这个发现很有实际意义，因为它意味着即使使用计算资源有限的小模型，通过LaTCoder也能获得不错的效果。

当然，LaTCoder也有一些局限性。研究团队诚实地指出了两个主要问题。首先是布局错误，即使分块处理，AI模型有时仍会错误地安排某个块内部元素的位置，比如把应该在顶部的内容放到了底部。其次是"偷懒"问题，某些AI模型（特别是Gemini）在组装代码时有时会省略一些代码片段，导致最终网页缺少某些区域。

七、技术创新的深层意义

LaTCoder的创新不仅仅在于解决了一个具体的技术问题，更重要的是它提供了一种新的思维方式来处理AI的局限性。当我们发现AI在处理复杂任务时容易出错，与其试图让AI变得更强大，不如巧妙地分解任务，让AI在其能力范围内发挥最佳效果。

这种"分而治之"的策略在很多领域都有应用前景。比如在自动化软件测试中，可以把复杂的系统分解成多个模块分别测试；在自然语言处理中，可以把长文档分段处理后再组合；在图像处理中，可以把大图片分块处理以提高精度。

从更宏观的角度看，LaTCoder体现了人工智能发展的一个重要趋势：不是简单地追求更大更强的模型，而是通过巧妙的工程设计来充分发挥现有模型的潜力。这种方法不仅更加经济高效，而且更容易在实际应用中部署和维护。

研究团队还创建的CC-HARD数据集为整个研究社区提供了一个更具挑战性的测试平台。这个数据集的公开发布将有助于推动整个领域的进步，让更多研究者能够在更接近真实世界复杂度的环境中测试他们的方法。

LaTCoder的成功也为前端开发行业带来了实际价值。随着这种技术的成熟和普及，设计师和开发者之间的协作将变得更加高效。设计师可以专注于创意和用户体验，而繁重的代码实现工作可以更多地交给AI助手。这不会完全取代程序员，但会让他们能够把更多精力投入到更有创造性的工作中。

说到底，LaTCoder解决的是一个看似简单实则复杂的问题：如何让机器更好地理解和重现人类的设计意图。通过借鉴人类解决复杂问题的思维方式——分步骤、分区域、逐个击破，这项研究为AI与创意设计的结合开辟了新的可能性。虽然目前的技术还不能完全替代人类设计师和程序员，但它已经展现出了作为强大辅助工具的潜力。

对于普通用户而言，这意味着在不久的将来，创建专业网页可能会变得像使用PPT一样简单。你只需要画出或者找到一个喜欢的网页设计，AI就能帮你生成相应的代码，大大降低了网页开发的门槛。这种技术民主化的趋势，最终将让更多人能够参与到数字内容的创造中来。

Q&A

Q1：LaTCoder是什么？它是怎么工作的？

A：LaTCoder是华中科技大学研究团队开发的一种AI网页代码生成方法。它的工作原理就像拼图一样：先把完整的网页设计图切割成多个小块，让AI分别为每个小块生成代码，最后再把所有代码片段拼接成完整的网页。这种"分而治之"的方法能够显著提高AI生成代码的准确性，特别是在保持原始设计布局方面。

Q2：LaTCoder比现有的AI代码生成方法好在哪里？

A：LaTCoder的主要优势是能够更好地保持网页的原始布局。传统方法让AI一次性处理整张设计图时，经常会搞错元素的位置关系，比如把应该水平排列的元素排成垂直的。LaTCoder通过分块处理避免了这个问题，实验显示它在多个评估指标上都有显著提升，特别是在复杂布局的处理上表现更佳。

Q3：普通用户什么时候能使用LaTCoder技术？

A：目前LaTCoder还处于研究阶段，研究团队已经在GitHub上开源了相关代码和数据集。虽然普通用户暂时还不能直接使用成熟的产品，但这项技术为未来的网页开发工具奠定了基础。预计随着技术的进一步完善，类似的功能将会集成到各种设计和开发工具中，让网页制作变得更加简单易用。