摘要
将用户界面（UI）设计自动转换为前端代码，对于加速软件开发进程以及推动设计工作流程的普及化具有重要意义。尽管近期大型语言模型（LLMs）在文本到代码生成方面已取得进展，但许多现有方法仅依赖自然语言提示，难以有效捕捉布局空间结构与视觉设计意图。相比之下，实际的UI开发本质上是多模态的，通常始于视觉草图或原型图。为弥合这一差距，我们提出一种模块化的多智能体框架，通过三个可解释的阶段实现UI到代码的生成：定位（grounding）、规划（planning）与生成（generation）。其中，定位智能体利用视觉-语言模型检测并标注UI组件；规划智能体基于前端工程先验知识构建分层布局；生成智能体则通过自适应提示驱动的合成方法输出HTML/CSS代码。该设计在鲁棒性、可解释性及生成结果保真度方面，均优于端到端的黑箱方法。此外，我们将该框架扩展为一个可扩展的数据引擎，能够自动生成大规模的图像-代码配对数据。利用这些合成样本，我们对一个开源视觉-语言模型（VLM）进行微调与强化，显著提升了其在UI理解能力与代码质量方面的表现。大量实验表明，我们的方法在布局准确性、结构一致性与代码正确性等方面均达到当前最优水平。相关代码已公开发布于 https://github.com/leigest519/ScreenCoder。