Figma2Code：自动化多模式设计以在野外进行编码

前端开发构成了软件工程的重要组成部分，但将设计模型转换为可用于生产的用户界面 (UI) 代码仍然是乏味且昂贵的。虽然最近的工作已经探索使用多模式 大语言模型 (MLLM) 实现此过程的自动化，但现有方法通常仅依赖于设计图像。因此，他们必须仅从图像推断复杂的 UI 细节，这通常会导致结果下降。然而，在现实世界的开发工作流程中，设计模型通常以 Figma 文件的形式提供，Figma 文件是一种广泛使用的前端设计工具，它嵌入了生成高质量 UI 所必需的丰富的多模式信息（例如元数据和资产）。为了弥补这一差距，我们引入了Figma2Code，这是一项新任务，它将设计到代码推进到多模式设置中，旨在在野外实现设计到代码的自动化。具体来说，我们从 Figma 社区收集配对的设计图像及其相应的元数据文件。然后，我们应用一系列处理操作，包括基于规则的过滤、基于人类和 MLLM 的注释和筛选以及元数据细化。此过程产生 3,055 个样本，设计人员从中整理出包含 213 个高质量案例的平衡数据集。使用此数据集，我们对十个最先进的开源和专有 MLLM 进行了基准测试。我们的结果表明，虽然专有模型实现了卓越的视觉保真度，但它们在布局响应能力和代码可维护性方面仍然有限。跨模态和消融研究的进一步实验证实了这一局限性，部分原因是模型倾向于直接从 Figma 元数据映射原始视觉属性。