一、创作背景

2025年注定是不平凡的一年啊，从年初AI的那波热度，一直到现在依旧不减。各大厂也都纷纷加入AI行列，推广自己的AI产品，像豆包、元宝已然是卤煮日常开发不可或缺的工具。与此同时，2025年也是鸿蒙生态加速发展、开拓板块的一年。华为推出的 CodeGenie（代码精灵），在DevEco Studio开发工具中即可唤出，支持智能知识问答、代码生成、页面生成、万能卡片生成、单元测试用例生成、代码智能解读和编译报错智能分析等能力，帮助开发者提高编码效率。这么好用怎么可能不安利一波，正如华为的推广文案，与CodeGenie结伴，进行卤煮项目实战与分享。

二、实操步骤

1. 开发准备

• 注册成为开发者
  在华为开发者联盟网站上，注册成为开发者，并完成实名认证，从而享受联盟开放的各类能力和服务。

• 创建应用
  在AppGallery Connect（简称AGC）上，参考创建项目和创建应用完成HarmonyOS应用的创建，从而使用各类服务。

• 配置安装DevEco Studio
  安装最新版DevEco Studio。具体安装指导请参见安装DevEco Studio。

• 使用DevEco Studio创建应用工程
  使用DevEco Studio创建应用工程。具体创建工程指导请参见创建一个新的工程。

卤煮的电脑已经全部配置好了，有需要的小伙伴移步这里：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-overview

2. 项目实战

2.1 初始化项目，直接创建空的项目，后续页面让CodeGenie帮我们辅助开发

2.2 唤起CodeGenie，默认右边工具栏可以打开AI窗口，注册为开发者的登录一下就可以对话了

2.3 使用CodeGenie，生成页面

输入“/”，选择生成页面的模式，随后弹出生成页面的交互页面，支持三种模式，这里选择3

1.自由输入：在输入框中详细描述您的页面需求，例如所需场景、核心功能或业务目标。
2.快捷模板：直接勾选下方的行业领域和常用功能标签，系统将自动为您生成专业的需求描述。
3.上传截图：上传一张页面参考截图，AI将智能解析页面结构与功能，精准识别您的需求。

2.4 上传UI图，直接喂到AI嘴里，让TA帮我们生成页面代码

2.5 页面还原度前后对比

2.6 使用1自由输入指令打磨页面，最终还原如下：

2.7 还原度很高，将页面保存到我们的项目

使用CodeGenie，直接将我们的UI图味给TA，生成页面的详细步骤就是这样啦，无敌详解，小白也可无脑上手！！！
剩下的就是微调我们的页面，写我们自己的业务逻辑代码啦

三、体验感受​

• 交互式输出代码：互动性强，可以准备的按照指令微调页面

• 高效率代码生成：CodeGenie提示2-5分钟输出页面，卤煮实操情况下，差不多40秒就已经输出代码

• 低耦合生成策略：CodeGenie自动抽取组件，整合模块代码，符合接口隔离原则

• 高效可维护性：代码逻辑清晰、结构完整，模块拆分合理，大大提高了代码可维护性

四、总结

在 2025 年 AI 与鸿蒙生态双热的浪潮中，CodeGenie 以「深度集成 + 精准赋能」的姿态，重新定义了鸿蒙页面开发的效率边界。从本次项目实战来看，这款嵌入 DevEco Studio 的 AI 助手，早已超越「代码生成工具」的单一属性，成为覆盖需求解析、UI 实现到代码落地的全流程伙伴。

对于我们这些开发者、程序员来说，我们已然离不开AI的辅助编程，卤煮以前自封自己为CV工程师，现在卤煮是面向AI编程工程师。在AI迅速崛起的时代下，我们紧跟技术洪流的浪潮，才有可能摆脱35就回家养老的困境。让我们一起紧跟鸿蒙生态迅速崛起的脚步，卤煮在这，欢迎小伙伴们加入鸿蒙知识共建交流群！！！！！