点击下方卡片，关注「AI视界引擎」公众号
( 添加时备注：方向+学校/公司+昵称/姓名 )
Image
用户界面（User Interface, UI）编程是现代软件开发中的核心但又极为复杂的部分。
近年来，视觉语言模型（Visual Language Models, VLMs）的发展凸显了自动UI编码的潜力，但现有方法仍面临两大关键限制：多模态编码能力尚未充分发展，且单轮（single-turn）范式难以有效利用迭代式视觉反馈。为此，作者提出一种交互式UI-to-code范式，更贴近真实工作流程，并显著提升可达成性能的上限。
在此范式下，作者提出UI2CodeN，一个通过分阶段预训练、微调与强化学习训练的视觉语言模型，实现了多模态编码的基础性提升。
该模型统一了三项核心能力：UI-to-code生成、UI编辑与UI润色。作者进一步探索了推理时的扩展策略，以支持多轮交互反馈的系统性利用。在UI-to-code与UI润色基准测试中，UI2CodeN在开源模型中建立了新的最先进水平，其性能可与Claude-4-Sonnet和GPT-5等领先闭源模型相媲美。
作者的代码与模型已开源，地址为 https://github.com/zai-org/UI2Code\_N。
1 引言
视觉语言模型（Visual Language Models, VLMs）的最新进展为用户界面（User Interface, UI）编码带来了新的可能性，例如将UI截图自动转换为可执行代码。由于用户界面是软件系统的核心组成部分，自动化其开发过程有望显著降低开发成本，并扩大前端应用创建的可及性。与一般的编程任务不同，UI编码是一个循环往复、紧密交织的视觉观察、推理与代码表达过程，通过实时视觉反馈不断迭代优化。与此同时，UI开发也面临独特的挑战：从理解整体布局到准确识别嵌套组件，还需捕捉细微的视觉细节，如间距、颜色和排版。至关重要的是，所有这些元素都必须被准确无误地转化为长篇可执行代码。
Image
Image
尽管视觉语言模型（Visual Language Models, VLMs）在通用视觉理解基准上取得了显著进展，其在用户界面（UI）代码生成任务中的表现仍明显不足。定性分析表明，如图1所示，即便是先进的专有VLM模型（如Gemini-2.5-Pro，Comanici et al., 2025）和Claude-4-Sonnet-Thinking，在UI到代码的生成任务中仍面临重大挑战。定量评估显示，在Design2Code基准（Si et al., 2024）上，商业VLM如Claude4-Sonnet的得分仅为76.3，远未达到人类评估标准；而领先的开源VLM模型，如Qwen2.5-VL-72B（Bai et al., 2025）、InternVL3-78B（Zhu et al., 2025）和Step-3-321B（Team, 2025），得分均低于45/100。在更具挑战性的任务中，如UI美化以匹配目标原型或基于指令的参考设计编辑，这一差距更加显著，无论是开源还是闭源模型均持续表现不佳（见表1）。近期一些方法尝试在推理阶段构建复杂的 Agent 式（agent-style）工作流（Jiang et al., 2025a; Wan et al., 2024; Wu et al., 2025），但这些方法仍受限于僵化的启发式规则以及当前VLM能力的固有上限。
作者将在UI编码任务中VLMs当前局限性归因于两个关键挑战。首先，现有模型缺乏强大的多模态编码能力，而这种能力对于可靠地将复杂的视觉布局转换为可执行代码至关重要。这一弱点进一步受到UI到代码生成任务复杂性与高质量配对数据稀缺性之间矛盾的加剧：真实网页资源丰富，但其HTML通常包含噪声，并与外部资源纠缠在一起；而合成数据集虽然干净，却过于简单（Gui et al., 2025; Yun et al., 2024）。其次，现有单轮次UI到代码范式与真实世界UI开发工作流之间存在根本性脱节，这不仅限制了其性能上限，也削弱了实际应用价值。从根本上说，UI到代码转换本质上是一个与视觉反馈交互的推理过程：仅凭代码无法推理出渲染结果，且运行时因素（如字体回退、浏览器默认设置、DPI缩放）使得在未实际渲染的情况下，无法验证像素级的准确性。
在本工作中，作者提出了一种新颖的交互式 UI-to-Code 范式，该范式从根本上区别于以往的单轮生成方法，将 UI-to-Code 重新定义为一个迭代且交互式的生成、编辑与润色过程。该范式提供了灵活的使用方式，同时提升了性能，并支持在测试阶段进行扩展。
基于这一范式，作者提出了 UI2CodeN，这是一种通过三阶段训练流程训练的强大视觉语言模型：首先在噪声较大的真实世界数据上进行大规模预训练，以构建广泛的多模态基础；其次在合成数据集上进行监督微调，以提升代码质量；最后通过精心设计的验证器进行强化学习，从而在不依赖配对数据的情况下利用真实网页数据，同时保持生成的保真度。实验结果表明，作者的 UI2CodeN 在 UI 编码任务上达到了当前最优性能。在核心 UI-to-Code 任务的基础上，UI2CodeN 进一步拓展了其能力，支持 UI 润色与 UI 编辑。
综上所述，作者的主要贡献包括：
• 作者提出了 Interactive UI-to-Code，一种新的范式，将 UI-to-code 生成重新概念化为带有视觉反馈的迭代推理过程，从而实现灵活的代码生成与编辑。该方法自然支持测试时扩展（test-time scaling），例如通过四轮 UI 优化可实现
的性能提升。
• 作者提出 UI2CodeN，这是首个开源的视觉-语言模型（VLM），能够同时实现 UI 到代码生成、UI 美化以及 UI 编辑。UI2CodeN 在多个基准测试中取得了最先进（SOTA）的性能，包括 Design2Code（Si et al., 2024）、Flame-React-Eval（Ge et al., 2025）和 Web2Code（Yun et al., 2024），超越了 Gemini-2.5-Pro 和 Claude-4-Sonnet 等闭源领先 VLM，并在平均性能上将开源 UI 到代码技术的前沿推进了
。
• 本工作首次系统性地提出了一个基础代码视觉语言模型（VLM）的完整训练方案，全面覆盖预训练、微调以及基于新颖 Reward 设计的强化学习三个阶段。通过这一三阶段框架，作者在保持数据真实性和生成质量平衡的同时，获得了广泛的基础知识。
2 相关工作
2.1 UI-TO-CODE 基准测试
Design2Code (Si et al., 2024) 提出了首个基于真实网页构建的基准数据集，同时引入了以视觉为中心的评估指标，如 Block-Match 和 CLIP 相似性。其构建流程通过移除外部依赖并用占位符替换图像来精简原始 HTML，既保留了真实世界网页的来源，又相较于原始分布简化了生成的网页结构。后续的基准数据集，包括 Web2Code (Yun et al., 2024) 和 Flame-React (Ge et al., 2025)，进一步优化了数据处理流程，但仍高度依赖由大语言模型（LLM）生成的 HTML。最近，WebGen-Bench (Lu et al., 2025) 将评估范围扩展至功能性网站生成，采用自动化 Agent （agent）对网页的交互性与功能性进行测试。
2.2 UI-TO-CODE 数据集
UI-to-code 生成技术的进步主要得益于数据集的规模扩展。早期的大规模研究主要依赖于合成数据。例如，WebSight（Laurenc¸on et al., 2024）利用 Tailwind CSS 生成了两百万对合成的截图-代码配对。类似地，Web2Code（Yun et al., 2024）通过结合 LLM 生成的数据与经过优化的现有资源，构建了一个大规模的指令微调数据集。后续的工作如 WebCode2M（Gui et al., 2025）和 Vision2UI（Gui et al., 2024）则从真实网页（如 Common Crawl（Common Crawl Foundation, 2007–））中构建了百万级数据集，随后进行了广泛的修剪与过滤。尽管这些数据集保持了结构完整性，但修剪过程往往导致网页过于简化。尽管规模庞大，上述所有数据集均依赖于 LLM 生成的内容，或经过大幅修剪的 HTML，移除了诸如 CSS 等依赖关系，从而限制了其对复杂真实网页分布的保真度。
2.3 用户界面到代码生成模型与系统
大规模视觉-语言模型（Large-scale Vision-Language Models, VLMs）在众多多模态任务中表现出色，但在UI到代码生成任务中表现不佳，常常生成不完整、不准确或无法编译的代码。早期的研究尝试训练独立的模型，例如 Pix2code（Beltramelli, 2018）、SightSeer（Laurenc¸on et al., 2024）、Flame（Ge et al., 2025）和 WebCode2M（Gui et al., 2025），这些模型使用合成数据集进行训练。然而，这些模型泛化能力有限，频繁出现失败情况，且目前尚未向社区公开。
相比之下，一系列近期工作转向通过基于 Agent （agent-based）的工作流来利用商业视觉语言模型（VLM）。DECLARUI（Zhou et al., 2024）将UI到代码的转换分解为检测、分割和分类；DCGen（Wan et al., 2025）采用分而治之的策略；ScreenCoder（Jiang et al., 2025b）提出了一种模块化多 Agent 框架，包含定位（grounding）、规划（planning）和生成（generation）三个模块。
3 方法
3.1 交互式 UI-to-Code 范式
UI 编码本质上是一个由交互和视觉反馈驱动的持续推理过程。在实际开发中，开发者很少孤立地编写代码。为了将原型转化为可运行的前端代码，他们通常首先编写一个高保真度的草稿实现，力求尽可能贴近原型，然后进行迭代——将代码编辑器与实时渲染的输出并列显示，持续将结果与预期设计进行比对。开发者也可能直接从参考截图生成 UI 代码，并通过有针对性的视觉调整进行优化（例如，生成与网页截图对齐的代码，但适配新的配色方案）。这一工作流说明了为何交互式编码是自然的：该过程本身围绕代码与渲染之间的即时反馈循环而构建。
从技术角度看，交互性不仅是自然的，而且是必要的。即使是非常熟练的开发者，能够编写出精确的 HTML 并确定性地映射到像素，也无法在没有反馈的情况下保证视觉保真度，因为渲染结果依赖于运行时因素，如字体回退、浏览器默认设置以及 DPI 缩放。在未实际渲染输出的情况下，1px 的偏差是无法察觉的。因此，一次性生成方法在正确性方面存在根本性局限，无法突破性能上限。相比之下，交互式编码将反馈机制融入开发流程，使开发者能够检测并修正这些细微差异，从而实现更高的准确性和更广泛的应用性。
因此，为了支持基于代码的视觉语言模型（coding VLMs）在现实世界中的开发，实现交互式 UI-to-code 生成至关重要。交互性不仅能够提升代码生成的性能上限，还能拓展应用的范围与质量。然而，现有的大多数 UI-to-code 方法忽视了这一需求。早期基于 coding VLMs（以及基于 VLM 的 agent 工作流）的研究及其评估，如 WebSight（Laurenc¸on et al., 2024）、Web2Code（Yun et al., 2024）和 ScreenCoder（Jiang et al., 2025a），主要将 UI 编码视为一个单轮次的图像到文本任务，忽略了现实世界开发中迭代性与反馈驱动的本质。
为弥补这一空白，作者提出一种新范式：交互式UI-to-code生成。与传统的单次生成范式不同，该范式扩展了传统UI-to-code的定义，将其重新界定为一个迭代且交互的过程。该范式明确捕捉了开发者在实际工作中的行为模式，强调草稿撰写、迭代优化以及基于渲染反馈的精准编辑。
该范式包含三个关键组成部分。
(1) UI-to-code。工作流的入口点，模型直接从给定的UI图像生成UI代码。这与先前对UI-to-code的定义一致。尽管该阶段可生成可用的草稿，但实现像素级保真度仍然是一个挑战。
(2) UI优化。该阶段通过三个输入对草稿代码进行精细化处理：目标UI图像、初始代码以及其渲染输出。模型随后生成更符合设计的改进代码。通过多次迭代，残余差异可逐步减少，使生成的UI逐渐逼近更高的视觉保真度——实现从UI2Code到UI2CodeN的转化。一方面，该过程显式利用了视觉语言模型（VLM）对图像进行推理的能力：由生成的文本 Token 所衍生的渲染输出，为代码优化提供了额外的视觉反馈。另一方面，该过程也可被视为一种推理时扩展（test-time scaling）机制：通过递归应用UI优化，可在推理成本与输出质量之间实现权衡。
(3) UI编辑。除了美化之外，UI编辑还针对现有UI需要针对性修改的场景。给定视觉参考和修改指令，模型生成反映所需变更的代码。这支持灵活的、以用户为中心的适应性调整，并将范式从静态复现扩展到交互式设计协作。
参考UI图像
3.2 多阶段训练
尽管最近的视觉语言模型（Visual Language Models, VLMs）在通用视觉基准测试中表现出显著进展，其在用户界面（UI）编码任务上的表现仍然有限。这些挑战主要源于两个方面。
首先，UI编码任务本身的固有难度。模型必须准确感知UI风格的图像，捕捉图标、字体、线条样式等细粒度细节——尽管这些图像的分布与大多数预训练中使用的自然图像存在显著差异。此外，模型还需应对代码本身的复杂性，因为HTML代码常常超过10,000个token，且与CSS和JavaScript紧密交织。除此之外，还要求UI图像与代码之间实现精确对齐，涵盖从整体布局结构到单个元素的各个层面。
其次，现有训练数据的局限性。尽管真实网页数量庞大，但其HTML通常存在噪声且与外部资源纠缠，难以直接使用。相比之下，合成数据或经过修剪的数据集虽然结构清晰，却缺乏真实世界中的复杂性（Gui et al., 2025；Yun et al., 2024）。面对这一权衡，以往的视觉语言模型（VLM）通常依赖合成数据或经过大幅修剪的数据集，以确保基本的UI到代码生成能力（Laurenc¸on et al., 2024；Yun et al., 2024）。然而，这种依赖使得大规模真实世界网页数据无法纳入预训练过程，导致复杂网页被排除在训练域之外，从而限制了其在实际应用中的性能表现。
为应对这些挑战，作者采用三阶段训练流程。首先，作者在大规模真实网页图像–HTML配对数据上进行持续预训练，以建立广泛的UI编码知识。随后，作者在干净、精心筛选的数据集上进行监督微调，以增强多种功能，如UI到代码转换、UI美化和UI编辑。最后，作者利用强化学习使模型适应复杂的现实世界分布，而无需依赖成对的真实HTML标签。接下来，作者将详细阐述每个阶段及其定制化的数据与训练策略。
3.2.1 持续预训练
持续预训练的目标是从大规模但噪声较多的网络数据中获取知识。作者的主要语料库通过爬取同时包含HTML和完整页面截图的网页构建而成，共获得约
个UI–代码对。直接使用Common Crawl（Common Crawl Foundation, 2007–）被证明不可行，因为其缺少关键组件（如图像、CSS），导致页面无法准确渲染。因此，作者采用其URL作为大规模爬取的种子，随后进行标签白名单筛选和冗余去除。为更好地对齐UI块与DOM元素并控制序列长度，作者采用GUI指代表达生成范式（Hong et al., 2024）。在训练过程中，模型接收完整的网页和一个随机采样的DOM节点的边界框，需预测对应的HTML，从而确保UI片段与底层代码之间具有更紧密的对齐。此外，作者还引入了外部的UI-to-code数据集，包括WebCode2M（Gui et al., 2025）和WebSight（Laurenc¸on et al., 2024）。尽管它们的HTML为合成或剪枝版本，但仍保留了高保真的图像–代码映射关系，能够补充作者爬取的语料库，并提升整体页面的对齐效果。为保持通用视觉–语言能力并增强迁移性，作者将在编码相关数据与广泛的VLM任务（如图像描述生成、视觉问答VQA、光学字符识别OCR、视觉定位、视频理解）之间交替训练。此外，作者还引入了超过10亿个token的语言–代码数据，以强化基础编码能力。
训练从 GLM-4.1V-9B-Base（Hong et al., 2025）的早期预训练权重初始化，学习率设置为 2e-5，张量并行规模为 2，全局批量大小为 1,536。持续预训练总共涵盖约 20M 个视觉-代码样本。
3.2.2 监督微调
为了使模型具备多样化的用户界面编码能力（包括UI-to-code、UI美化和UI编辑），并为强化学习阶段做好准备，作者引入了一个基于深度推理格式的监督微调（Supervised Fine-Tuning, SFT）阶段。
为进一步提升模型的鲁棒性，作者精心设计了任务特定的数据构建策略。在UI美化任务中，作者通过多个视觉语言模型（VLMs）（包括08195、GLM-4.5V (Hong et al., 2025)、Claude-4-Sonnet）生成多样化的渲染输入，并通过VLM生成的对比结果推导推理轨迹，而非直接使用 Prompt （prompt），从而获得更准确的推理过程。在UI编辑任务中，作者覆盖了添加、删除、替换和调整等操作，利用启发式规则与人工检查筛选候选样本，并通过反转高质量的删除对来解决组件添加的困难。尽管这些细节工作耗时费力，但有效保障了数据的多样性、精确性与可靠性，体现了作者在监督微调（SFT）阶段所投入的精心设计。总计构建了80K条高质量样本，训练5个epoch，序列长度为32,768，批量大小为256（采用packing技术），学习率为5e-6。
3.2.3 强化学习
强化学习（RL）在预训练和监督微调（SFT）中相较于教师强制（teacher-forcing）目标具有两个优势：首先，它直接优化视觉相似性，而非逐 Token （token-level）准确率，更符合人类判断。其次，它直接从截图中进行训练，避免了噪声HTML的影响，提升了模型的可迁移性。
作者采用 GRPO（Shao et al., 2024）方法联合训练互补的 UI-to-code 与 UI 精炼任务，不使用 KL 散度和熵正则化以提升性能上限并增强训练稳定性。训练语料库包含 12K 个真实网页（来自 Mind2Web（Deng et al., 2023））以及 30K 个由大语言模型合成的样本。在精炼阶段，输入的 HTML 代码通过 GLM-4.5V、UI2CodeN 预训练权重、Claude-4-Sonnet 以及强化学习中间结果进行多样化处理。额外数据来自早期的 UI2CodeN 运行，其中生成的代码被反复精炼
轮。作者采用 64 的批量大小，rollout 数量为 16，总共进行 400 步强化学习训练。
Reward 设计是核心挑战。基于CLIP的相似性度量（Si et al., 2024）具有脆弱性——对位置偏移和背景颜色过于敏感，却对细微细节视而不见。因此，作者采用当前领先的开源视觉语言模型GLM-4.5V作为验证器，以兼顾稳定性与可扩展性。第二个难点在于校准：在UI美化任务中，候选方案往往在视觉上高度相似，但VLM会给出不一致的绝对评分。
作者通过三项改进来解决这些问题。首先，为每个候选方案计算一个 Baseline 验证器评分
，若渲染失败则记为
，若劣于参考图像则记为
；然而，独立 Query 会导致校准漂移。为缓解此问题，作者引入一个比较函数
，该函数在单次 Query 中联合评估候选方案与参考图像，确保评分尺度的一致性；同时，使用监督微调（SFT）对 GLM-4.5V 进行微调以提升其鲁棒性。最后，为确保在多次 rollout（
）下的公平性，作者采用轮转比较器（round-robin comparator）：候选方案两两比较，每个候选方案的得分等于其获胜次数，从而在付出
次调用代价的前提下获得一致的排名。
4 实验
4.1 评估设置
基准测试：为评估 UI2CodeN 在 UI-to-Code 生成任务中的有效性，作者在多个广泛使用的基准测试上进行了实验，包括 Design2Code（Si 等，2024）、Flame-React-Eval（Ge 等，2025）以及 Web2Code（Yun 等，2024）。然而，这些基准测试主要由相对简单的截图组成，可能无法充分反映真实网页的复杂性。为解决这一局限性，作者进一步构建了 UI2Code-Real，该基准测试包含从真实场景中收集的 115 个网页。该基准测试提供了一个更为真实的评估环境，使作者能够评估在合成数据和精选数据上训练的模型是否能够有效泛化到真实世界的 UI-to-code 场景。针对 UI 美化任务，作者还构建了 UIPolish-bench，该基准测试包含 100 个合成网页和 100 个真实网页，从而在受控场景与真实场景之间提供平衡的评估。这些基准测试的更详细描述，以及作者精心整理的 UIPolish-bench 和 UI2Code-Real，详见附录 A.4。
评估指标：作者考虑两种主要的评估方法：(1) CLIP评分，利用基于CLIP的相似性来评估语义对齐程度，如Design2Code（Si et al., 2024）所示；(2) VLM评分，借助视觉大语言模型（Visual Large Language Models, VLMs）提供与人类判断一致的设计保真度和可用性评估，如Web2Code（Yun et al., 2024）所示。在本工作中，鉴于VLM在视觉和语义能力上的更强表现，作者遵循Hong et al. (2025) 的方法，采用基于VLM的评分指标。这一选择进一步得到了作者强化学习消融实验（第4.3.2节）的支持，其中VLM Reward 始终优于基于CLIP的 Reward 。对于UI美化任务，作者设计了一种基于与原始UI截图对比的评估协议。给定初始截图
，模型首先通过UI-to-code生成对应的渲染结果
，随后生成经过美化的渲染结果
。评估过程比较
与
的视觉相似性是否优于
与
的相似性。若
相对于真实设计的相似性高于
，则将该实例记为成功美化，并将准确率加一。
4.2 主要结果
为验证
的有效性，作者在两类 UI 编码任务上进行了实验，包括 UI-to-code 生成和 UI 优化（polishing）。表1 展示了与多种开源和闭源视觉语言模型（VLM）的对比实验结果。相较于多个开源 VLM，作者提出的 UI2CodeN-9B-SFT 和 UI2CodeN-9B-RL 在所有基准测试中均取得了显著提升。特别是在 UI-to-code 基准测试上（包含三个公开数据集 Design2Code、Flame、Web2Code，以及一个精心构建的真实世界 UI2Code-Real 基准），UI2CodeN 表现出一致且显著的优势。值得注意的是，现有开源 VLM 在 UI 优化任务上的表现普遍不理想。如表1 所示，所有开源 VLM 在真实和合成优化基准上的准确率均低于
。直观上，作者将
设为一个阈值：若模型成功优化给定 UI 截图的概率低于
，则认为该模型无法展现可靠的优化能力。根据这一标准，现有开源 VLM 无法被视为具备真正的 UI 优化能力。相比之下，作者的 UI2CodeN-9B-RL 在 UIPolish-Real 上达到
，在 UIPolish-Synthetic 上达到
，显著超越所有开源模型，甚至接近领先闭源系统（如 Claude-4-Sonnet-thinking 和 Gemini-2.5-pro）的性能。这些结果验证了作者的交互式范式结合多阶段训练，不仅显著增强了 UI-to-code 生成能力，还赋予模型强大的 UI 优化能力。
Image
测试时缩放与界面美化。交互式 UI-to-code 生成范式赋予了 UI2CodeN 在测试时进行缩放的能力。
4.3 消融研究： Reward 设计的影响
在本节中，作者对强化学习（RL） Reward 设计的影响进行了全面的消融实验，涵盖UI美化（UI polishing）和UI到代码（UI-to-code）两个方面。所有消融实验均从UI2CodeN的SFT预训练权重开始，采用批量大小为32、rollout数量为16、学习率为1e-6的RL训练策略。
4.3.1 针对UI打磨的 Reward 设计
Image
为了优化用户界面（UI）的视觉呈现，作者设计了第3.2.3节中描述的 Reward 函数。作者评估了三种用于评估UI优化性能的策略：基础验证器（vanilla verifier）、带有比较函数的验证器，以及同时采用比较函数和轮转策略（round-robin strategy）的验证器。表3a中的结果揭示了 Reward 设计的两个关键发现。首先，轮转比较验证器（round-robin comparator verifier）始终取得最佳效果。与基于局部判断的 Reward 设计不同，该方法能够对候选方案进行全局排序，更贴近UI优化的实际目标——从多个备选方案中选出最优改进。其次，基于比较器的 Reward 效果高度依赖于底层视觉-语言模型（VLM）的可靠性。当使用未经微调的GLM-4.5V作为验证器时，准确率下降，性能降低了
；而作者定制的验证器则带来了显著提升。这表明，弱化或噪声较大的 Reward 信号可能误导强化学习过程，而非真正促进其优化。
(b) UI-to-code生成任务中的 Reward 设计
(a) UI打磨任务中的 Reward 设计
4.3.2 用户界面到代码生成的 Reward 设计
为了实现UI-to-code生成中的强化学习，作者利用自动相似性度量和人类对齐的判断来探究其作为 Reward 信号的有效性。具体而言，作者设计了两种实验设置：
1）采用CLIP分数（Radford et al., 2021）提供连续且细粒度的 Reward ，以反映生成HTML代码所渲染出的UI与原始UI截图之间的语义一致性；
2）采用VLM分数，即利用开源视觉语言模型（如GLM-4.5V）对布局保真度进行人类对齐的评估。如表3（b）所示，GLM-4.5V Reward 在Design2Code和Flame-React-Eval两个基准上均持续优于CLIP Reward 。此外，作者观察到，使用CLIP Reward 不仅未能提升性能，反而相较于SFT Baseline 导致性能下降。
这表明，仅依赖视觉相似性信号不足以捕捉UI-to-code生成所需的语义和结构保真度，甚至可能误导优化过程。这些发现凸显了 Reward 设计的重要性：单纯依赖视觉相似性度量可能导致强化学习的偏差，而基于VLM的 Reward 则能提供更丰富且更可靠的反馈。
4.4 消融研究：真实网页在强化学习阶段的影响
为了进一步探究真实网页在
的强化学习（Reinforcement Learning, RL）阶段中的作用，作者在相同的数据预算（20k RL样本）和训练步数（100次迭代）下进行受控对比实验，以隔离引入真实网页对RL阶段的影响。
尽管合成数据集能够提供具有清晰标注且覆盖多样化UI模式的受控环境，但它们可能无法捕捉真实界面中常见的复杂性、噪声以及分布偏移。为弥合这一差距，作者在RL阶段引入了一组精心筛选的真实网页，其原始UI截图来自真实场景中的采集来源。
5 结论
作者提出 UI2CodeN，一个具有 90 亿参数的视觉-语言模型（Vision-Language Model, VLM），具备先进的 UI 编码能力。
作者进一步提出了交互式 UI-to-Code 生成范式 （Interactive UI-to-Code Generation Paradigm），将 UI-to-Code 任务建模为一种迭代、交互式的过程，显著提升了模型的性能与适用范围。UI2CodeN 在 UI-to-Code 与 UI 优化（UI polishing）基准测试中均取得了当前最优（state-of-the-art）结果，超越了包括 Claude-4-Sonnet 和 Gemini-2.5-Pro 在内的领先 VLM 模型。作者已开源 UI2CodeN，以支持更广泛的应用与研究。
参考
[1]. UI2CODEN: A VISUAL LANGUAGE MODEL FOR TESTTIME SCALABLE INTERACTIVE UI-TO-CODE GENERATION
点击上方卡片，关注「AI视界引擎」公众号