UI2App：可执行Web应用生成中视觉交互推断的基准测试

首个评估VLM从纯截图推断Web应用交互行为的基准，揭示视觉保真度不等于交互推理能力

前置知识

视觉语言模型（VLM）

视觉语言模型是同时处理图像和文本的多模态大模型，能理解截图中的UI布局、配色、组件，并将其转化为代码。本文评测的六个前沿VLM包括Claude Sonnet 4.6、Gemini 3.1 Pro Preview、GPT-5.4、Kimi K2.5、Qwen3.5-397B-A17B、GLM-4.6V，它们接收一组截图，输出可运行的React+TypeScript应用源码。

理解VLM的能力边界——尤其是'看得准'不等于'推断得对'——是读懂本文核心论点的基础。

交互推断 vs 规格遵循（Interaction Inference vs Specification-Following）

当交互行为通过文字说明或演示视频显式给出时，模型做的是'规格遵循'：实现一个已被命名的目标。而仅给静态截图时，模型必须做'交互推断'：从像素证据中还原缺失的行为逻辑（哪个按钮可点、点击后状态如何变化、跨页数据如何同步）。后者是更难的能力，因为同一视觉状态可能对应多种正确实现。

这是本文提出的核心概念区分，UI2App正是首个在纯图像输入下测量交互推断的基准。

跨路由状态（Cross-route State / S3 scope）

Web应用的状态管理按复杂度分三层：S1是单一UI态（如折叠/展开），S2是数据态（如CRUD增删改查），S3是跨路由持久化（如在不同页面间共享购物车内容、登录态）。S3要求状态在客户端路由切换或跨组件时仍保持一致，是真实前端工程中最难的部分。本文用权重$w_{S1}=1,w_{S2}=2,w_{S3}=3$对其线性加权。

S3被证明是所有前沿模型的共同瓶颈，是基准最具饱和抗性的信号，也是理解本文结论的关键。

可运行应用生成（Executable App Generation）

区别于只生成静态HTML的截图转代码，本文要求模型输出能通过生产构建（如Vite build）、能在浏览器渲染、且路由可访问的完整前端工程。模型需先规划文件清单，再逐文件生成代码，并通过React+TypeScript脚手架约束产物结构，EXEC指标衡量代码是否真的跑得起来。

这是UI2App把任务从'视觉复刻'升级为'行为测试'的前提，EXEC是后续所有指标的准入门槛。

研究动机

现有Web应用生成方法存在根本缺陷。文本驱动方法（如WebGen-Bench、ArtifactsBench）依赖精心设计的复杂提示词：用户负担重、表达力有限，难以精确描述页面布局和跨页视觉一致性，状态管理、数据同步等功能需求很难用自然语言一致地指定。图像驱动方法（截图转代码，如Design2Code、MRWeb）更贴近设计师工作流，但现有基准几乎只关注视觉保真度，只衡量渲染输出与参考图像有多像，不衡量产物是否真正'能用'。一个生成的界面可能看起来完全正确，却只是行为惰性的'frozen façade'：按钮可点却毫无效果，购物车计数永不变，跨页状态从不更新。更关键的是，当交互行为通过文字或演示视频显式提供时模型做'规格遵循'，而仅有截图时必须做'交互推断'——这是截然不同的能力，却没有任何基准在纯图像输入下测量它。

本文的目标是本文目标是构建UI2App，第一个针对'交互推断'的可衡量基准。每个任务只提供一组截图（$M=4$–$14$张，均值7.3），要求模型输出一个可运行的多路由Web应用源码，不附带任何动作轨迹、说明或交互描述。模型必须同时调和结构、配色和推断出的跨路由行为，而非翻译单一规范视图。基准包含327张截图，组织成45个精心策划的'状态连贯截图集'，每个集合跨越多路由并捕获一致的跨页状态，为重建完整可运行应用提供必要视觉证据。任务和模型共享固定的React+TypeScript脚手架。评估目标是回答：当前前沿VLM能否仅从静态截图推断并实现完整交互行为？视觉保真度是否等价于交互能力？

与已有工作不同的是，UI2App的独特切入角度是'纯图像输入+交互推断'的组合，这是已有任何基准都未覆盖的象限。如表1所示，最接近的工作各有缺失：Design2Code是单图+无交互；MRWeb虽多页但需图+文且无交互评估；Interaction2Code、IWR-Bench虽评估交互却提供状态对截图或交互视频作为行为先验，模型只遵循给定轨迹；Vision2Web L2需图+文。UI2App则每路由只给一张规范截图、不给任何目标状态转移，使'多状态推断'成为任务的内在部分而非输入信息。此外作者提出实现无关的rubric评估，承认同一视觉状态可能对应多种正确交互实现（如搜索框可回车触发、按钮点击或实时查询），故用类别级rubric而非单一参考执行轨迹评分。

核心方法

UI2App方法分数据构造和评估协议两部分。数据来自开源GitHub项目：用24个原型感知查询跨12个应用类别得2013个候选仓库，经四阶段自动流水线（许可证、结构有效性、可构建性、登录墙检测）筛到164个，再由专家用三级rubric（页面级可辨别性、应用级复杂度、语料级多样性）选出45个，用无头浏览器在1440×900捕获水合后截图并按感知哈希去重。评估协议是一条可复现的自动+人工流水线（图3）：(1)Plan&Generate先出文件清单再逐文件生成；(2)Build&Render做生产构建和首页路由渲染得EXEC信号；(3)Self-Debug在EXEC失败时把stderr回喂模型最多3轮修复；(4)Coverage把截图映射到生成路由；(5)Visual Fidelity用无判官的DOM块级最优二部匹配算VFS；(6)人工标注NRS和IIS。

核心创新是交互推断评分IIS及其配套交互分类法。与已有方法追求匹配单一参考行为不同，IIS采用rubric评估：作者把Web应用常见交互归纳为7类（C01 toggle、C02 expand/collapse、C03 list operations、C04 data CRUD、C05 form validation、C06 notification、C07 cross-route state），每类沿三条互补轴评估——coverage（截图是否暗示该交互）、result（生成应用是否实现：完全/部分/失败，取$r_i\in\{1,0.5,0\}$）、scope（S1 UI态、S2数据态、S3跨路由持久化，权重$w_{S1}=1,w_{S2}=2,w_{S3}=3$）。这种实现无关的rubric既容纳多种语义等价的正确实现，又能在类别和层面层面定位失败，三轴分离使诊断细粒度远超单一聚合分数，是与已有'视觉相似度'评估的本质区别。

方法步骤详情

评估分标准三指标和IIS。EXEC@k：生产构建无错且首页路由渲染出有意义内容即通过；EXEC@1为一次通过率，EXEC@3为最多3轮stderr错误反馈重试后的通过率。NRS测量路由连通性：$NRS_{a,m}=\min(1,n^{reach}_{a,m}/n^{tot}_a)$，其中$n^{tot}_a$为应用a的截图数、$n^{reach}$为模型m产物中可达路由数，因嵌套菜单等无法可靠枚举而用人工验证。VFS用无判官块级匹配：每页可见内容块做最优二部匹配，对匹配对算Size/Text/Position/Color四子指标取无权平均。IIS先从截图构建参考交互清单RII，对每个生成应用按7类×3轴标注，再聚合：$QS_{a,m}=\frac{\sum_{i\in G_a}y_i\cdot\min(w_{s^{gen}_i},w_{s^{ref}_i})r_i}{\sum_{i\in G_a}w_{s^{ref}_i}}$，$IIS_m=\frac{100}{N}\sum_a QS_{a,m}$，分母为参考scope权重和使其面向recall。EXEC@3失败的应用对所有指标零填充。每模型315个IIS项，六模型共1890项，三标注员独立+仲裁，Krippendorff α在0.72–0.84。

技术新颖性

新颖性体现在四点。第一，首个纯图像输入下测量交互推断的基准，区别于所有需文本规格或交互演示的现有工作（表1中唯一四个属性全亮的行）。第二，IIS基于'实现无关rubric+交互分类法'，主动承认截图对行为的欠确定性，用类别级功能判据而非单一参考轨迹评分，解决了多正确实现无法单一匹配的难题。第三，引入scope三阶（S1/S2/S3）分层状态复杂度，使指标随模型家族提升仍保持区分度——S3成为基准最具饱和抗性的信号。第四，四指标联合协议（EXEC/NRS/VFS/IIS）配合零填充约定，使EXEC率不同的模型可直接比较，并暴露'构建驱动'vs'交互驱动'的能力差异。此外跨家族六模型加Qwen2.5-VL缩放阶梯首次建立了图像交互推断基线。

**Figure 3**: The evaluation protocol of UI2App.

实验结果

表2四指标全景：Claude Sonnet 4.6领先EXEC@1（95.6%）和IIS（39.3），EXEC@3与Gemini 3.1 Pro Preview并列100%，VFS第二（75.7）；Gemini VFS第一（78.1）但IIS仅7.5排第四；GLM-4.6V全垫底（EXEC@3 35.6%、VFS 22.6、IIS 4.5）。发现1：视觉保真度不蕴含交互推断——VFS冠军Gemini在IIS上落后IIS冠军Claude 5.2×，且C04/C06/C07三类得0.0。发现2：闭源vs开源等级不传递到IIS——Kimi(20.7)、Qwen3.5(13.2)两开源超过Gemini(7.5)、GPT-5.4(6.7)两闭源。发现3：跨路由状态是前沿级瓶颈，表3中S受限IIS随scope变难S1>S2>S3，S3端（n=22）三模型得0，仅Claude以21.6突破；模型间spread从S1的42.3收缩到S3的21.6。发现4：Admin应用是IIS持续瓶颈，六模型均值仅9.4，约为Content/Transaction一半。EXEC自调试收益高度异质：GPT-5.4恢复最多(+18)，Kimi几乎无增益。VFS差异主要由构建驱动：条件在EXEC@3通过应用上VFS范围缩到20点内，GLM-4.6V的VFS从22.6升到59.8。

**Table 1**: Benchmark comparison for web application generation.

**Table 2**: Per-category main results on UI2App.

**Table 3**: S-restricted IIS (capped, zero-imputation, §3.5).

**Figure 5**: Qwen2.5-VL scaling on UI2App (3B →72B).

查看结构化数据

任务	指标	本文	基线	提升
可执行性（EXEC@3）	构建通过率（%）	Claude Sonnet 4.6 / Gemini 3.1 Pro Preview：100%	GLM-4.6V：35.6%	最强与最弱相差约2.8倍
视觉保真度（VFS）	DOM块级匹配分（0–100）	Gemini 3.1 Pro Preview：78.1（冠军）	GLM-4.6V：22.6	Gemini领先第二名Claude（75.7）约2.4分
交互推断（IIS，核心指标）	rubric聚合分（0–100）	Claude Sonnet 4.6：39.3（冠军）	Gemini（VFS冠军）：7.5；GPT-5.4：6.7	Claude领先Gemini 5.2×
S3跨路由状态推断	S受限IIS（0–100）	Claude Sonnet 4.6：21.6（唯一有意义突破）	Gemini/GPT-5.4/GLM-4.6V：0.0（三模型全零）	揭示前沿级共同瓶颈
Qwen2.5-VL缩放相变	EXEC@3 / VFS	72B：EXEC@3 62.2%、VFS 35.2	≤32B：EXEC@3 ≤2.2%、VFS ≤0.2	可用React生成能力在32B–72B间涌现

局限与改进

作者承认的主要局限：一是规模有限，仅45个应用、327张截图，难以充分覆盖真实Web应用的交互长尾分布；二是IIS依赖人工标注（三标注员独立运行每个生成应用并逐类打分），成本高昂，这也导致Qwen2.5-VL缩放阶梯未收集NRS和IIS，只报EXEC/VFS；三是仅用React+TypeScript单一脚手架，未覆盖Vue、Svelte等其他主流前端栈，结论能否泛化存疑。我额外观察到：评估的六个模型是2026年7月的快照，能力图景会快速变化；IIS虽声称实现无关，但rubric本身依赖专家对'正确交互'的先验定义，可能引入类别偏差；S3仅22个应用支撑，统计稳定性偏弱；'零填充'约定可能对低EXEC模型系统性不利，掩盖其潜在交互能力。

独立分析的弱点

独立分析的弱点：(1)数据规模小且类别分布不均——Specialty/Transaction各仅约15%和13%，Admin应用虽是IIS瓶颈但样本量小，统计结论脆弱；改进方向是扩大到数百应用并平衡类别。(2)IIS完全人工标注，无法自动化评估，难以随模型迭代快速复评；改进方向是探索基于headless-browser的交互探针或LLM-as-judge来自动化rubric判定。(3)单一技术栈（React+TS）使结论栈绑定；改进方向是多框架对照。(4)交互分类法仅7类，未涵盖拖拽、富文本编辑、动画过渡等复杂交互；改进方向是扩展分类法。(5)S3场景数据稀少（仅22应用），作为'最具饱和抗性的信号'却样本不足；改进方向是刻意构造高跨路由状态密度的应用。(6)未涉及后端逻辑/数据库交互，仅限前端state。

未来方向

作者提出的方向：UI2App提供闭合S3余量的测试床，希望驱动VLM既增强推断又更忠实地实现截图暗示的交互。基于成果可延伸：(1)构建自动化的IIS评估管线（headless浏览器交互探针+多模态LLM判官），降低复评成本并支持更大规模基准；(2)将分类法从7类扩展到拖拽、动画、富文本编辑等，并增加后端/全栈交互；(3)研究从'单规范截图'到'多状态视频'输入的渐进谱系，量化行为先验对交互推断的边际贡献；(4)针对S3跨路由状态设计专门训练或提示策略（如显式全局状态建模、组件树推断）；(5)把基准从Web扩展到移动端、桌面端应用生成；(6)跟踪更小开源模型的'相变点'，研究何种架构或数据触发可用的React生成能力。

复现评估

复现性总体良好。作者提供了项目主页、代码和数据集（论文首页标注Project/Code/Dataset）。评估协议的自动部分（Plan&Generate、Build&Render、Self-Debug、Coverage、VFS）完全可复现，且采用固定React+TypeScript脚手架消除实现差异。数据构造流水线（24查询×12类→2013候选→四阶段筛选→164→专家三级rubric→45）描述详尽，截图在1440×900无头浏览器捕获并按感知哈希去重。然而IIS和NRS依赖人工标注，复现需招募前端工程专家，这是主要瓶颈：六模型1890项标注、三标注员独立+仲裁、Krippendorff α 0.72–0.84，成本和时间投入高。算力方面调用六家厂商API有费用门槛但无需训练。主要风险是rubric的主观性和标注者间一致性随时间漂移。

UI2App：可执行Web应用生成中视觉交互推断的基准测试 UI2App: Benchmarking Visual Interaction Inference in Executable Web Application Generation