从设计图到可运行代码，华中科技大学如何让开源鸿蒙多设备UI开发“快人一步” ——开源鸿蒙技术课题成果

课题名称：多设备场景下的UI智能构建

挑战方向：跨设备、跨系统、跨平台的一次开发多端部署平台

揭榜年份：2023年

揭榜单位：华中科技大学开源鸿蒙技术俱乐部

课题负责人：赵彦杰，华中科技大学开源鸿蒙技术俱乐部指导老师

1

课题背景

在移动应用开发中，UI代码的编写一直是人力投入的大头。设计师交付一张精美的界面稿，开发者需要逐行将其翻译成声明式框架代码——布局、组件、状态、跳转逻辑，缺一不可。这个过程不仅耗时，而且极易出错，尤其在面对手机、平板、折叠屏、车机等多种设备时，适配工作更是成倍增长。

赵彦杰老师团队聚焦这一痛点，开发了DeclarUI智能生成系统，能够直接从UI设计图生成可编译、可运行、且具备多设备自适应能力的ArkUI代码

·

2

现状：为什么大模型不能直接“看图写代码”？

直接用多模态大模型（MLLM）把设计图转成代码，听起来顺理成章，但实际效果并不理想。团队在调研中发现，直接调用GPT-4o或Claude-3.5生成代码，存在以下局限性：

组件识别不准：复杂设计中的按钮、卡片、列表项常常被误判，分割边界模糊。

交互逻辑缺失：大模型只能看到单张静态图，无法理解“点击登录后跳转到首页”这样的导航流程，生成的页面是孤立的。

多页面行为不一致：不同页面的顶部栏、底部导航等公共组件，风格和逻辑各自为政。

代码编译不过：生成的代码经常违反ArkUI的语法约定，报错不断，开发者需要手动修改大量细节。

框架知识匮乏：主流大模型对开源鸿蒙的ArkUI框架了解甚少，而React Native或Flutter的代码生成质量相对较好，但开源鸿蒙生态急需自己的解决方案。

·

3

破局：从“看图识字”到“看懂逻辑”

团队意识到，单纯依赖MLLM的视觉能力是不够的，必须给模型补充结构化的上下文。为此，他们设计了一套五环相扣的技术路线。

第一环，让模型先“读懂”页面怎么跳转。他们提出了PTG（页面转换图）的概念，本质上是一个JSON结构，明确定义了应用中所有页面节点以及它们之间的跳转条件和动作。团队通过精心设计的提示词，让MLLM根据一系列设计图自动生成PTG，再由开发者进行审核修正。这样一来，静态图片背后的交互逻辑被显式地提取出来，为后续代码生成提供了导航蓝图。

第二环，让模型“看清”每个组件的真面目。传统的目标检测需要大量标注数据，团队没有走这条路。他们组合了Grounding DINO和SAM两个模型，实现了零样本的组件检测与精准分割。首先，Grounding DINO不需要任何训练就能识别出按钮、文本框等元素位置，然后SAM根据这些位置生成精确的像素级掩码。最后，将分割出来的每个组件图像送给MLLM，由它判断组件类型和功能描述。这一步输出的不是简单的标签，而是包含了空间位置、视觉特征和语义信息的结构化组件列表。

第三环，给模型装上“开源鸿蒙知识库”。这是解决框架知识匮乏的关键。团队构建了针对ArkUI的知识图谱，里面存放了各种组件的属性、事件、布局规则以及最佳实践。当模型要生成某个组件的代码时，系统会先从知识图谱中检索相关说明，并拼接进提示词。这相当于给MLLM配了一本实时查阅的“开源鸿蒙开发手册”，明显提升了生成代码的框架契合度。

第四环，把分散的信息“揉”成一份精准的提示词。提示词合成模块将PTG、组件分析结果、完整UI截图以及知识图谱检索到的信息，整合成一段结构清晰、任务明确的指令。这段提示词不仅描述了页面布局，还包含了导航关系、组件功能描述，甚至明确了输出格式要求。团队还设计了动态调整机制，根据设计复杂度自动调整提示的详略程度。

第五环，用“编译-反馈-修改”闭环打磨质量。生成代码只是第一步，能否编译通过、导航是否完整，才是检验标准。团队构建了迭代优化流程：首先生成初版代码，然后进行静态检查，比对PTG看是否有遗漏的跳转；接着执行编译，捕获所有报错信息，将错误类型和代码片段一起反馈给MLLM进行针对性修正。这个过程最多循环三次，实测绝大多数问题都能在两次内解决。同时，针对多设备适配，团队采用了Flex布局，并通过模拟器自动截图对比，利用图像相似度算法检测布局异常，将检测结果再次反馈给模型，驱动进一步的适配优化。

4

成效：数据说话

这套系统在50套App设计（共250个页面）上进行了全面测试，结果相当亮眼：

编译成功率大幅提升：在ArkUI目标下，DeclarUI的编译成功率达到92%，而直接使用原生GPT-4o仅为76%。平均迭代次数仅1.6次，意味着大部分代码只需一次修正就能通过编译。

代码质量显著优于直接生成：即便遇到编译失败的情况，开发者手动修正的平均时间仅为43.5秒——这说明错误大多是小瑕疵，而非结构性缺陷。

视觉与导航的精准度：CLIP语义相似度得分0.85，SSIM结构相似度0.66，PTG导航覆盖率达到95.9%，远超直接使用基础模型的水平。

用户研究也验证了实用性：5位专业React Native开发者对生成代码进行了可用性、可读性、可维护性及修改时间四项打分，DeclarUI在所有维度上均明显优于大模型直接生成的代码。

课题组寄语

赵彦杰：UI代码自动生成是具备长期研究价值的方向，本文工作仅为课题组阶段性初步探索。现阶段我们团队正持续深耕，一方面研发高个性化UI代码生成方案，另一方面搭建通用性更强、适配场景更广的生成框架。期待和大家多多交流，携手共建开源鸿蒙生态社区！

写在最后

目前，该课题的核心代码已计划开源，并配套详尽文档和示例。团队希望借此降低鸿蒙应用开发的门槛，让设计师也能参与“代码生成”环节，加速设计到开发的协同。同时，他们也呼吁社区共建知识图谱，持续更新ArkUI的最新特性，让这套系统与时俱进。

未来，团队计划将适配设备类型扩充至更多IoT形态，并探索基于用户偏好的个性化UI生成，真正实现“一次设计，多端运行”的智能化愿景。这项成果的相关论文已被CCF-A类会议FSE 2025接收，期待它在学术界和工业界都能激起更多回响。

附录：

发表论文：

[1] “DeclarUI: Bridging Design and Development with Automated Declarative UI Code Generation.”

本文经AI辅助，人工审校后发布。

审核编辑 黄宇