现在的时代，借助 AI IDE，开发者们可以通过一条指令快速生成一个前端界面。具体方法可参考我们此前的文章AWS AI IDE「Kiro」深度体验：免费解锁最强编程模型。

但是，现有很多方法仅依赖自然语言提示，而实际工作中的 UI 开发通常始于视觉草图或原型，是多模态的。

为填补这一差距，香港中文大学 MMLab 实验室提出了 ScreenCoder 大模型，一个用于 UI 到前端代码生成的模块化多智能体。

在多种UI设计上的实验结果表明，该模型在视觉保真度、结构对齐和代码正确性方面达到了SOTA。

代码已开源至 GitHub（地址见文末）。

从UI到代码生成的模块化多智能体框架

ScreenCoder 多智能体框架将任务分解为三个连续的智能体：定位智能体、规划智能体和生成智能体，每个智能体处理一个特定的子问题。

• 定位智能体首先利用视觉语言大模型（VLM）识别 UI 图像中的关键结构组件并添加标签。

• 规划智能体基于CSS Grid的网页设计知识，将这些组件组织成结构化布局。

• 生成智能体则基于自适应提示，将这种结构化布局转换为可执行的HTML/CSS代码。

上图为该模型从 UI 到代码的流程示例，展示了定位分区、布局规划以及前端代码生成过程。

该模型框架还能生成训练数据，进一步用到后续的训练，以增强 VLM 在 UI 到代码生成方面的能力。

双阶段后训练增强 VLM

ScreenCoder 通过两阶段训练流程：冷启动监督微调（SFT）和结合视觉-语义奖励的强化学习（RL）。

• 冷启动监督微调：研究者们利用该模型框架自动生成由UI设计图像与HTML/CSS代码配对组成数据集，接着将这个数据集应用于Qwen-VL-2.5进行冷启动微调。

• 结合视觉-语义奖励的强化学习：为了改进模型与布局结构和视觉保真度的对齐，采用GRPO强化学习方法，定义了一个复合奖励（块匹配奖励、文本相似性奖励、位置对齐奖励），最终引导语法有效且视觉逼真的HTML/CSS输出。

与现有大模型对比

除了开头提到的定量实验，研究者们还通过定性示例来展示该模型与现有大模型的对比。

如上图所示，最终，ScreenCoder 生成的结果更准确、视觉上对齐，并且与原始设计在语义上保持一致。

结语

研究者们在讨论部分提到进一步开发和优化该模型，还可以用到移动应用、桌面界面，甚至游戏UI的设计到代码的生成。

喜欢前端开发的小伙伴可以试试通过这个项目,基于自己喜欢的 UI 界面生成自己的前端代码。