视觉引导的迭代优化：前端代码生成的新范式

本文提出一种视觉引导的前端代码生成新范式，核心是使用视觉语言模型（VLM）作为自动评判器提供结构化反馈，实现前端代码的迭代优化。该方法在WebDev Arena数据集上实现17.8%的性能提升，并通过LoRA微调将部分评判能力内化到代码生成模型中，减少对多轮推理的依赖。

前端代码生成需兼顾功能与视觉质量，传统单轮推理模式难以满足需求；当前人在回路的多阶段优化成本高、难规模化，前端人工反馈更耗时且需专业知识，因此需自动化视觉反馈机制。

框架流程为：代码生成模型生成初始前端代码→渲染成截图→VLM评判器对比截图与需求，提供结构化改进反馈→生成模型根据反馈迭代优化。VLM兼具视觉理解与文本描述能力，能识别布局错位、颜色不匹配等问题并给出明确指导。

在WebDev Arena数据集（含真实前端请求）评估，三轮迭代后质量提升17.8%；第一轮修复明显功能错误与布局问题，后续轮次聚焦视觉细节与体验提升，改进模式与人类开发流程吻合。

用评判器迭代反馈数据对生成模型进行LoRA微调，结果显示微调后模型单轮推理可达最佳迭代方案25%的性能增益，token消耗无显著增加，部分评判能力成功内化，可减少迭代轮次。

启示：视觉反馈对前端优化关键，自动化评判器回路可替代人工反馈；未来方向：提升VLM细粒度识别能力、探索更高效微调方法、扩展到移动端UI开发等视觉相关代码生成任务。