从视觉小部件到 UI 代码：基于工具的高效生成

现有的屏幕截图到代码系统面临灵活性和可控性之间的权衡。直接多模态生成可能会产生可见细节的幻觉，而结构化管道则通过组件分解、预定义模板和定制中间表示来减少此类错误。然而，这些结构引入了额外的生成编排，并将输出限制为表示所涵盖的设计。我们研究选择性工具基础是否可以提高直接小部件到代码生成的保真度和效率权衡。我们引入 \textbf{WidgetGen}，这是一个轻量级的基于工具的框架，它提取可观察的文本和颜色证据，执行高级布局和可选的图表推理，并直接生成可执行的 JavaScript XML (\emph{JSX})。这种设计减少了对组件生成的依赖，同时避免了固定的 UI 模式。在六个多模式模型和 \(1{,}000\) 个保留小部件中，WidgetGen 在大多数视觉重建指标上都优于直接提示和结构化 Widget2Code 管道，并且在面积、易读性和风格方面具有一致的增益。最后，重建衍生的图像代码对通过监督的 微调 改进了每个报告指标的六个 Qwen 系列开放权重模型。这些结果将 WidgetGen 确立为强大的轻量级基线，并表明选择性证据基础为广泛的表示限制提供了有效的替代方案。