CodeGenie 基于图片生成鸿蒙应用 UI 代码，提升 5 类应用场景 UI 开发效率

你是否曾遇到过这样的场景：看到一个精美的 APP 界面，想要借鉴实现却苦于手动编写代码的过程繁琐耗时？或者作为开发者，你拿到了产品经理发的截图，却需要从头开始编码实现？

现在，这一切都有了革命性的变化！鸿蒙 AI 辅助编程工具 CodeGenie 的最新功能——根据图片自动生成鸿蒙应用页面代码，正在重新定义应用开发流程。

一、从“手敲页面代码”到“图生页面代码”

只需将你的 APP 截图或设计稿截图（JPG/PNG）上传至 CodeGenie ，即可生成可编译运行的鸿蒙 ArkTS 页面代码，包括 ArkUI 组件、布局结构、组件属性等，快速完成页面框架搭建。

这不仅仅是简单的图像识别，而是真正理解页面结构的智能生成。当上传图片后，AI 会进行多层次的信息分析和处理，包括基础元素识别、布局结构解析、样式与文本提取，从而实现从“手敲页面代码”到“图生页面代码”的梦想：

基础元素识别：

· 组件类型判断：可以区分不同类型的 UI 组件，如按钮、输入框、列表项等

· 图像区域划分：识别图片、图标、背景图等视觉元素，并分析尺寸与比例

布局结构解析：

· 容器关系推断：通过元素的空间分布推断布局容器类型，识别 Column、Row、Grid 等布局关系

· 间距尺寸测量：计算元素自身的尺寸及其相互间的间距关系，生成对应的布局参数

· 对齐与分布：识别左/右/顶/底对齐、等距/两端分布等，并输出对应配置参数

样式与文本提取：

· 样式属性解析：识别背景色、字体、边框等视觉属性，生成对应的样式代码

· 文本内容提取：提取界面中的文字信息，包括标题、正文、按钮文字等，并尽量保持原文风格和格式

二、为什么“只靠图片也能还原”

“图生代码“业界挑战：

“图生码”即为 Screenshot2code 场景，比较早的研究包括基于小模型的 pix2code 和 img2cook，以及当前基于大模型的 Flame-Code-VLM 和各种依托 VLM/LLM 构建的 AI 辅助产品（比如 Cursor、V0 等）。 当前业界的挑战主要有以下 2 点：

1. 视觉理解精度不足：

生成代码编译预览后，与原始输入图片进行比较可直观反映还原效果，因此视觉还原度往往是评价生成质量的首要标准。UI 页面通常涵盖组件类型、尺寸、样式、布局与相对位置等多种元素，不同于 UX 稿已经包含了详细的样式信息， 图片的样式是以像素承载的，需要额外去进行解析。如果图片理解准确度不高，会导致生成结果与原设计在视觉一致性上出现显著偏差。

2. 代码效果质量不稳定:

对于生成的代码，可从“可编译预览率”与“代码质量”两个维度进行评估：

可编译预览率：

对于大颗粒的工程级代码生成场景，若生成的代码无法即时预览，会比较大的影响用户体验，特别是在 0-1 原型构建的场景。实时预览可使用户快速判断生成结果是否可用，也可以为后续调整提出方向。当前基于 VLM/LLM 的方式单次生成编译预览率低，往往需要人工调试修复，通常耗时 10min 以上且预览依旧难以保证。而且在鸿蒙场景下，模型更容易出现幻觉。

代码质量：

仅还原视觉布局与样式并不足以满足生产要求，代码还需符合软件工程规范（如合理使用循环结构 foreach、避免变量冗余等）。当前大模型在复杂场景下，对开发框架与编码规范的理解和实现能力仍存在较大差距，制约了生成代码的实际可用性。

我们的解法：

针对以上挑战，我们在鸿蒙场景下探索了多种生成方式，考虑到当前 VLM/LLM 在端到端图片到代码生成中的可用性仍较低，我们最终选择了“先解析、后生成”的架构方案。首先基于 VLM 与目标检测模型实现高精度视觉解析，达到 85%以上的元素解析准确率，然后基于鸿蒙知识库增强，构建需求分析、代码生成、验证修复三类 Agent 协同生成最终的 ArkTS 代码。目前可实现 2min 左右完成页面代码生成，可编译预览率接近 100%，自 Beta 试用以来线上采纳率约 40%。

1. 大小模型结合的高精度元素解析：

直接基于 VLM 执行目标检测面临输出 token 易超长、推理耗时高，以及标签体系与模型本身不匹配导致的细粒度解析不稳定等问题。综合考虑微调成本、时延，我们采取了先用小模型分块，再用 VLM 进行详细解析的方式。

模块划分：首先我们引入了专用 UI 元素检测小模型对图片进行初步区域识别，输出各个模块的位置和类别信息。模型输出的区域用于后续精细化解析，而标签体系一部分可以直接映射到鸿蒙容器组件。

VLM 进行详细解析：在拿到一层模块后，我们用 VLM 每个模块进行并发解析，解析出各个模块的组件名称、大小高度、文字、字体、位置等信息，最终构建出完整的组件树。过程中还融入了鸿蒙知识库中预定义的常用字体和布局信息，以降低生成噪声和模型幻觉。

解析结果举例：

{  "global_info": {    "app_type": "xx...",    "page_function": "首页/个人中心/...",    "color_scheme": ["主色HEX", "辅色HEX"]  },
  "layout_structure": [    {      "area_type": "顶部导航栏",      "components": [        {          "component_type": "返回按钮",          "position": [[5%,3%], [15%,10%]],          "style": {            "icon": "箭头方向(left)",            "color": "# 333333",            "size": "24x24pt"          },          "interaction": {            "type": "clickable",            "target": "返回上一页"          }        }      ]    }  ],  "detail_annotations": {    "key_elements": ["搜索框", "主功能入口"],    "dynamic_area": "轮播图(第3屏)",    "business_flow": "旅游酒店预订流程入口"  }}

2. 基于 LLM + DSL2Code 的混合生成架构：

尽管当前 LLM 对 ArkTS 的生成能力已有显著提升，但在大颗粒工程代码生成中，仍存在混淆 TypeScript 语法、版本兼容性问题等挑战。为此，我们构建了融合 LLM 生成与 DSL 转换的双路径机制。

鸿蒙知识增强的 LLM 生成链路：

在获取组件树后，求分析 Agent 会进一步明确页面布局与功能设计，再由 LLM 生成对应代码。为提升准确性，我们引入了鸿蒙相关组件文档与样例代码作为 RAG 知识库，增强模型对 ArkTS 的生成能力。由于单次生成仍可能存在缺陷，系统还集成了验证-修复循环机制：通过获取编译结果、报错信息让 LLM 进行迭代验证修复，确保输出代码具备可运行性。

DSL2Code 确定型生成路径: 

考虑到基于 LLM 的生成任有不确定性和时延开销，对于一些比较明确的场景，我们实现了一套 DSL2Code 系统，直接将解析所得的组件树转换为代码。DSL2Code 有高效、确定性强的优点，但生成的代码在工程规范性上可能不足，因此系统会进一步调用重构 Agent，对输出进行自动化重构与规范整理，提升代码可维护性。

三、一分钟了解工作流

如何使用“图生代码”功能？以下我们以生成“鸿蒙世界 APP 首页”为例，演示从截图生成鸿蒙页面代码的完整流程：

第一步：启动生成命令

在 CodeGenie 窗口输入框输入"/"，调出指令面板，选择 Generate Page，进入页面生成界面

第二步：上传页面截图

在窗口界面中点击添加图片，上传鸿蒙世界 APP 首页截图，点击右下角“飞机”图标发送。

第三步：AI 自动解析与生成

工具将自动完成以下任务：

· 解析组件和布局，包括搜索框、顶部背景图、主内容区域、文章列表、底部导航栏等。

· 还原文本内容，如标题、描述、统计数据和右侧分类图标等。

· 提取样式信息，包括颜色、字体大小、间距等视觉属性。

· 生成 ArkTS 代码并实时预览渲染效果，确保视觉一致性。

第四步：保存并集成至工程

点击保存到工程，工具将自动生成：

· 完整的 ArkTS 代码文件

· 配套的资源文件

· 可直接编译运行的项目

生成所有代码文件默认保存在 generated 目录下，可以直接编译运行，能够有效减少调试的成本。

当前版本已对美食、旅游、购物、新闻和教育等重点垂直领域进行了深度优化，生成效果较为精准。同时，其它领域也具备一定的泛化能力，我们也会持续提升生成质量与适用范围。

结语：开发新范式已来

这不仅仅是效率提升工具，更是连接视觉设计与代码实现的智能桥梁。它将开发者从繁琐的界面编码中解放出来，让每个人都能更专注于业务逻辑和用户体验创新。

无论你是想要快速原型验证的创业者，还是需希望提升开发效率的开发者，这款工具都将为你打开新的可能性。快来试试用一张图片，生成你的第一个鸿蒙页面吧。