ScreenCoder：通过模块化多模态智能体推进前端自动化的视觉代码生成

将用户界面（UI）设计自动转换为前端代码，对于加速软件开发和普及设计工作流具有巨大潜力。尽管最近的大型语言模型（LLM）在文本到代码生成方面取得了进展，但许多现有方法仅依赖自然语言提示，这限制了它们在捕捉空间布局和视觉设计意图方面的有效性。相比之下，实践中的UI开发本质上是多模态的，通常从视觉草图或模型图开始。为了弥补这一差距，我们引入了一个模块化的多智能体框架，该框架通过三个可解释的阶段执行UI到代码的生成：定位、规划和生成。定位智能体使用视觉语言模型来检测和标记UI组件，规划智能体利用前端工程先验知识构建层次化布局，而生成智能体则通过自适应的基于提示的合成来生成HTML/CSS代码。与端到端的黑盒方法相比，这种设计提高了鲁棒性、可解释性和保真度。此外，我们将该框架扩展为一个可扩展的数据引擎，能够自动生成大规模的图像-代码对。利用这些合成样本，我们对一个开源的视觉语言模型（VLM）进行微调和强化，从而在UI理解和代码质量方面取得了显著提升。大量实验表明，我们的方法在布局准确性、结构一致性和代码正确性方面达到了业界领先水平。我们的代码已在 https://github.com/leigest519/ScreenCoder 公开发布。