视觉正确、运行正确：多屏移动应用生成的项目级基准

arXiv cs.AI 论文
benchmark mobile-apps multimodal-llms design-to-code evaluation navigation-testing

摘要

MobileForge 是一个面向项目级多屏移动应用生成的基准测试，用于评估多模态大语言模型在构建成功、跨页导航、视觉保真度、可维护性和效率方面的表现。对六个前沿多模态大语言模型的实验表明，当前模型能够编译并到达目标页面，但在交互式导航和视觉质量方面仍存在困难。

arXiv:2607.28645v1 公告类型：交叉 摘要：近年来的多模态大语言模型可以将视觉设计直接转换为可执行代码，但真实的移动产品需要多个截图才能成为具有共享组件和可用导航的可构建代码库。这种项目级设置暴露了现有设计到代码基准的三个局限：它们侧重于单页生成而非完整代码库，无法评估跨页导航，也不衡量项目范围的可维护性。我们推出 MobileForge，这是首个面向项目级多屏移动应用生成的基准测试，包含真实移动应用、人工审核的屏幕、结构化页面关系标注和导航测试规范。MobileForge 支持构建、导航、视觉保真度、代码可维护性和效率五个维度的评估。我们还提出了状态隔离的导航测试，以避免导航评估中的级联故障，以及一种锚定参考的列表式视觉评估协议，以提高视觉评判的可靠性。在六个前沿多模态大语言模型上的端到端运行中，当前模型可以构建可编译且能到达正确页面的移动应用项目，但交互式导航仍然不可靠，视觉保真度和可维护性也仍然滞后。该基准及支持材料可在 https://github.com/anoa12159-hue/mobileforge_eval 获取。
查看原文
查看缓存全文

缓存时间: 2026/08/03 07:34 

# 面向多屏移动应用生成的项目级基准

来源: https://arxiv.org/html/2607.28645

## 看起来正确，运行正确：面向多屏移动应用生成的项目级基准

范武 &崔云高 &黄一鸣111footnotemark:1计算机科学与技术，哈尔滨工业大学。邮箱:[email protected]。通讯作者。杨潇 &陈玉佳11footnotemark:1&廖清11footnotemark:1

###### 摘要

近期的多模态大语言模型能够将视觉设计直接转换为可执行代码，但真实的移动产品需要多张截图才能形成一个可构建的代码库，其中包含共享组件和可工作的导航。这种项目级设置暴露出现有设计到代码基准的三个局限：它们专注于单页面生成而非完整代码库，无法评估跨页面导航，也不衡量项目级别的可维护性。我们提出了**MobileForge**，这是第一个面向项目级多屏移动应用生成的基准，包含2929个真实移动应用、309个人工审核的屏幕、结构化的页面关系标注，以及701个导航测试规范。MobileForge支持对构建、导航、视觉保真度、代码可维护性和效率五个维度的评估。我们还提出了*状态隔离的导航测试*，以避免导航评估中的级联失败，以及一种*锚点参考的列表式视觉评估协议*，以提高视觉评判的可靠性。通过对六个前沿多模态LLM的174次端到端运行，当前模型能够构建可编译并到达正确页面的移动应用项目，但交互式导航仍然不可靠，视觉保真度和可维护性也仍有差距。该基准和相关支持材料可在 https://github.com/anoa12159-hue/mobileforge_eval 获取。

## 看起来正确，运行正确：面向多屏移动应用生成的项目级基准

范武††thanks:计算机科学与技术，哈尔滨工业大学。邮箱:[email protected]。崔云高††thanks:通讯作者。黄一鸣11footnotemark:1 杨潇††thanks:中国科学院信息工程研究所。陈玉佳11footnotemark:1 廖清11footnotemark:1

## 1 引言

多模态LLM能否读取一个移动应用截图文件夹，并生成该应用的源代码？将设计师的截图直接转化为可运行应用的想法已经推动了十年的研究，从pix2code的CNN-LSTM屏幕到DSL流水线Beltramelli (2018)，到多模态LLM将网页截图作为输入并一次性生成HTML+CSS的方法Siet al.(2025); Laurençonet al.(2024); Guiet al.(2025)。近期关于带有丰富设计工具元数据的单页面设计到代码的研究也进一步反映了这种对单个页面的持续关注Guiet al.(2026)。然而，真实产品从来不是单个屏幕。它是一个截图文件夹，必须整体成为一个可构建的代码库，其中包含共享组件、一致的设计令牌、可工作的路由和可导航的用户体验。现有的设计到代码基准在三个方面存在不足，而这些不足正是由项目级设置暴露出来的。

(1) 单一页面焦点。它们一次只针对一个网页，不评估多屏项目的整体，导致跨页面一致性和共享组件复用不在考虑范围内。

(2) 不评估交互式导航。它们无法测试生成应用的全局路由是否正确地将标签页转换和父-子页面转换连接到预期目标，尽管导航正确性是可用应用的基本功能要求。

(3) 不衡量项目级代码可维护性。它们忽略了组件复用、死组件普遍性、跨页面设计令牌一致性等指标，这些指标在生成项目移交给团队时会直接影响下游工程成本。

为弥补这些空白，我们引入了**MobileForge**，这是第一个项目级多屏移动应用生成基准，同时提供一个面向多屏项目的五维评估框架（图1）。我们对六个前沿多模态LLM的174次端到端运行的实验表明，当前模型与项目级交互式代码生成的要求之间存在明显差距，而这些差距是单页面基准无法暴露的。

参见图注

图1:先前的设计到代码基准将*单个*截图作为输入，仅通过视觉相似性对生成的HTML页面打分（顶部）。MobileForge将真实移动应用的全套截图和页面关系描述作为输入，要求一个智能体化工具链生成可运行的多页面项目，并在五个正交维度上打分：构建、导航、视觉保真度、代码可维护性和效率（底部）。

#### 主要贡献

- **任务与基准**。我们将项目级多屏移动应用生成定义为一个新任务，并发布MobileForge，这是该设置下的第一个基准，包含29个面向市场的消费应用、30个人工审核的屏幕、结构化的页面关系描述，以及70个导航测试规范。
- **评估框架**。我们开发了一个覆盖构建、导航、视觉保真度、代码可维护性和效率的五维评估框架。框架中锚定了两种新的评估技术：*状态隔离的导航测试*，它从固定的源页面路由运行每个导航规范，而不是链式遍历；以及*锚点参考的列表式视觉评估协议*，该协议以人类评分者为校准依据，并基于点式VLM评判已被记录的可信度问题而提出。
- **大规模实证研究**。我们评估了六个前沿多模态LLM，进行了174次端到端运行，发现当前模型能够构建可编译并到达正确页面的移动应用项目，但交互式导航不可靠，视觉保真度和代码可维护性仍有很大改进空间。我们发布MobileForge、评估工具链以及所有运行产物，以支持可复现性。

## 2 相关工作

#### 截图到代码与设计到代码。

Pix2CodeBeltramelli (2018) 引入了从单个GUI截图进行神经代码生成。现代浪潮，包括Design2CodeSiet al.(2025)、WebSightLaurençonet al.(2024)、WebCode2MGuiet al.(2025)，以及近期以VLM为中心的工作Geet al.(2025); Jianget al.(2025); Yanget al.(2025)，将任务重新定义为对网页截图的多模态提示。然而，它们仍将每个示例视为单个网页。Figma2CodeGuiet al.(2026) 研究了一种基于Figma设计文件的互补设置，其中模型可获得结构化组件定义。一个由部分重叠作者提交的并行工作Anonymous (2026) 对*交互式*单文件HTML/CSS/JavaScript网页上的MLLM进行基准测试，并明确排除了组件框架、多文件项目和多页面导航，而这些正是MobileForge所针对的场景。

MobileForge与上述工作的区别在于两方面。首先，它仅使用截图，不假设任何结构先验。其次，它针对的是跨多个屏幕的项目级生成，而非单页面生成。

#### 移动UI语料库、智能体与代码生成基准。

大量工作针对静态UI*感知*，包括RicoDekaet al.(2017)和后续理解工作Wanget al.(2021); Liet al.(2020); Baechleret al.(2024); Youet al.(2024); Honget al.(2024b); Luet al.(2024)，或者训练智能体去*操作*运行中的应用Zhanget al.(2025a); Wanget al.(2024a); Chenget al.(2024); Xieet al.(2024)。MobileForge将这两个方向都反转，要求模型*生成*项目。在代码方面，基准已从函数级（HumanEvalChenet al.(2021)、MBPPAustinet al.(2021)）发展到仓库级（SWE-bench及其变体Jimenezet al.(2024); Yanget al.(2024); Denget al.(2024); Tianet al.(2026)）和更广泛的智能体套件Liuet al.(2024b); Maet al.(2024)，但没有一个以视觉设计作为输入。我们的单智能体工具链借鉴了迭代式工具使用范式Yaoet al.(2023b, a); Madaanet al.(2023); Schicket al.(2023); Wanget al.(2024b); Xiaet al.(2025); Wanget al.(2025); Liuet al.(2024a)；我们刻意固定单智能体设置，以便观察到的差异可归因于模型本身而非编排机制Honget al.(2024a); Qianet al.(2024); Chenet al.(2024); Zhanget al.(2025b)。

#### VLM作为评判者。

视觉语言评判者已成为在没有金标准输出时进行评估的标准工具Leeet al.(2024); Liet al.(2026); Feiziet al.(2025)，相关文献记录了逐点评分的两种失败模式：跨会话的尺度漂移和中间平局压缩。成对和列表式协议更可靠，其中列表式可以 O(N) 而非 O(N²) 的调用成本产生完整排序。我们的锚点参考列表式协议（§4.3）在列表式评判基础上增加了评估中的健全性检查，并通过实证比较验证了这一选择（附录C）。

## 3 MobileForge基准

图2总结了MobileForge的四个阶段：数据集构建、标注、生成和五维评估。本节其余部分和§4将详细描述。

参见图注

图2:MobileForge流程。(1) 数据集构建从三个设计原则出发：真实性、项目粒度和可运行评估。它收集了14个类别桶中的29个在售应用，具有连贯的多页截图集（30个屏幕，每个应用平均10.7个）。(2) 标注先使用VLM对截图进行自动草拟，然后由人工审阅者编辑页面关系描述和导航测试规范。(3) 生成将审核后的截图和页面关系描述交给单智能体工具链（8个工具、预搭建目录、验证-修复循环）。(4) 评估使用状态隔离的导航测试（§4.2）和锚点参考的列表式视觉评判器（§4.3），在构建、导航、视觉保真度、代码可维护性和效率五个维度上对生成项目打分。

### 3.1 设计原则

MobileForge由三个原则塑造：(i) 真实性，每个实例都是真实在售消费应用，而非合成原型；(ii) 项目粒度，每个实例是一个截图文件夹，从而检验跨页面一致性和路由；(iii) 可运行评估，金标准是*构建*、*导航*和*视觉匹配*的组合，而非像素级复现，因为后者脆弱且欠定义。

### 3.2 应用选择与采集

我们采样了14个类别桶（媒体、金融、社交、导航、电商、生产力、通讯等）中的29个应用，优先考虑广泛的文化认知度。对每个应用，我们采集了一组连贯的截图，覆盖主要标签页结构及关键子屏幕，共30个屏幕（每个应用平均10.7个，标准差3.8，范围5–21）。完整应用列表和每个应用的统计信息见附录B（表5）。

### 3.3 标注模式

每个应用的标注包含两部分。第一部分是**页面关系描述**，作为模型输入进入生成流程。它描述应用的标签页结构，即应用根部可见的主导航标签页，以及屏幕之间的父子关系，编码为自然语言语句，形式为“*屏幕X是屏幕Y的子页面，通过点击搜索图标触发*”。这是模型规划多页路由所需的结构信息。第二部分是一组**导航测试规范**，仅在评估时使用。每个规范属于三类之一：*页面存在性*（给定屏幕是否在预期路由可达）、*标签页导航*（点击标签项是否路由到正确屏幕）、以及*父-子导航*（在父屏幕上触发已知交互是否转换到预期子页面）。每个测试记录起始屏幕、带有策略提示的操作（DOM选择器、文本匹配、标签位置）以及预期目标屏幕。完整基准包含29个应用中的70个此类规范（每个应用平均24.2个，范围11–41），分布为12个页面存在性、39个标签页导航和18个父-子用例。

### 3.4 标注流程与质量

标注采用两阶段流程：视觉语言模型草拟§3.3中的模式条目，然后人工标注者在标注界面（图4）中审阅每个字段，并可编辑、添加或删除条目，最终形成金标准。三个属性确保了数据集的可信度。(i) *数据质量*：每个保留的标注都经过了人工审阅。(ii) *标注框架准确性*：与审阅后的金标准相比，自动草拟在页面级别达到96.8%的召回率和94.3%的精确率，在

相似文章