Trae AI+AirUI：快速实现一个嵌入式UI界面

AI能否用于嵌入式AirUI 代码生成 ，是很多开发者关心的问题，本文通过实际项目进行验证。

传统嵌入式UI开发流程繁琐，需兼顾硬件适配与交互逻辑；AI在网页、App界面生成方面已较为成熟，但在嵌入式硬件场景中的实用性，仍需实际测试验证。 AirUI框架封装了常用组件、事件管理等功能，提供Lua开发接口，搭配PC 模拟器 可实现无硬件调试，降低了嵌入式UI的开发门槛。基于此，本次尝试通过AI将网页原型转换为可运行的AirUI代码，验证该方式的可行性与效率。

本次通过真实项目测试AI在嵌入式AirUI开发中的实际表现，具体核心流程如下： 第一步，借助DeepSeek生成所需的HTML布局文件，搭建基础UI原型； 第二步，通过Trae软件调用合宙luatos- docs -code-101智能体，将生成的HTML布局，直接转换为可运行的AirUI项目代码。

一、为什么选择AirUI？

AirUI是LuatOS的图形化开发核心库，封装了常用组件、事件管理、输入控制及基础视觉主题，提供Lua开发接口，可在支持LuatOS的硬件设备及PC模拟器上运行。 AirUI与传统嵌入式UI方案相比，核心特点如下：

AirUI 是面向嵌入式场景的轻量 UI 开发框架，核心优势与开发者价值可总结为：

1. 组件丰富：提供开箱即用的控件，无需开发者从零绘制；
2. 集成 hzfont 矢量字库：省去外挂字库芯片，有效降低产品 BOM 成本；
3. 基于 Lua 脚本开发：上手门槛低，让嵌入式 UI 开发不再依赖底层专家；
4. 支持 PC 模拟器即时交互：无需硬件即可迭代 UI，大幅提升调试效率。

适用场景： 工业HMI面板、智能家居控制屏、环境监测仪表、物联网设备本地交互界面等。无论你的产品需要LCD显示+触摸交互，还是需要与4G/Wi-Fi数据采集结合，AirUI都能快速搭建原型并量产。

二、准备工作：环境搭建与工具配置

完成开发环境的搭建，让后续AI生成代码的过程更加顺畅。

2.1 创建空项目文件夹

新建一个文件夹，我这里命名为airui（名称可自定义）。

2.2 下载并配置Trae软件

下载Trae软件（www.trae.cn）；

打开Trae，将airui文件夹作为项目打开；

切换为Solo模式（单人开发模式）：

2.3 安装luatos-docs-code智能体

参考合宙官方教程安装智能体、规则和技能，这是后续AI能够正确生成LuatOS项目代码的基础。

**智能体详细教程参见：**https://docs.openluat.com/ai/trae%2Bluatos-docs-code/manage/

▼ 重要提醒（必读）▼

在正式开始项目开发之前，有几个关键点需要特别注意：

**验证安装：**当配置好智能体、规则和技能后，务必参考验证文档（luatos-docs-code创建成功、规则和技能创建成功）确认配置正确。

**模型选择：**Trae内置的免费大模型经常需要排队，性能也不稳定。推荐订阅收费大模型（约40元/月），能大幅提升体验。如果不想付费，可在非工作时间使用免费模型，勉强够用。

**模型对比：**实测MiniMax和GLM效果较好，建议根据实际情况选择。

三、从HTML到AirUI：生成项目代码

核心环节分为两个部分，下面是具体的操作指令和生成结果。

3.1 通过DeepSeek生成HTML示例

3.1.1输入需求：

打开DeepSeek网页版，输入以下需求。

帮我生成一个 html，用于嵌入式设备UI演示；窗口横屏，分辨率w=480, h=320；包含开机窗口显示1.5 秒、待机窗口和主菜单窗口可以切换。

3.1.2 DeepSeek生成文件： DeepSeek生成了包含开机窗口、待机窗口、主菜单窗口的HTML文件。

- 开机窗口 -

- 待机窗口 -

- 主菜单窗口 -

3.1.13 保存到本地

将生成的HTML保存到本地，我这里放在：

C:\Users\luat\Downloads\deepseek_html_20260327_d5969e.html

3.2 通过Trae调用智能体生成项目代码

3.2.1 输入指令：

在Trae中打开airui空文件夹，输入以下指令。

/plan

参考以下需求，先帮我制定plan，仅输出plan文件并保存，创建一个以项目命名+时间的空文件夹生成的项目文件放里面。制定plan时，除了输出你规划中的plan文件内容，还要输出项目功能需求和业务逻辑分析，项目总体设计，项目详细设计这几部分的内容。

帮我生成一个LuatOS项目代码，功能需求如下：

1、硬件模组：Air8000A

2、软件功能需求：

参考C:\Users\luat\Downloads\deepseek_html_20260327_d5969e.html的页面布局

严格遵守AirUI文档接口和参数进行窗口UI设计，使用exwin进行管理，通过消息机制来打开窗口，不使用接口直接调用窗口。

窗口横屏，分辨率w=480,h=320；

使用airui的方式初始化显示、触摸和字体。

3、按照plan创建完整的项目代码

3.2.2 按项目文件plan生成代码

AI首先输出了一个plan文件，包含功能需求分析、业务逻辑、总体设计、详细设计等内容。确认plan后，让Trae继续生成完整的项目代码。

3.3 得到项目代码

四、模拟器运行与项目优化

下面按时间顺序记录我遇到的问题及解决方法。

4.1 第一次运行报错

使用PC模拟器运行代码，出现错误：

4.2 让AI解决错误

错误原因在于exwin未被正确加载，让AI分析错误并修改代码，但问题仍然存在。

4.3 关键问题：exwin需要require

告知AI，exwin为扩展库，没有内置到LuatOS内核固件中，使用时需要exwin = require("exwin ")加载后才能正常调用exwin的功能。（注：目前最新的合宙智能体已更新此技能。）

4.4 修改后继续报错

告知AI全局使用不能使用local exwin = require “exwin” ，需要使用exwin = require “exwin”。（注：目前最新的合宙智能体已更新此技能。）

4.5 模拟器运行无画面

代码不报错了，但模拟器上什么也没有显示。

告知AI现在代码逻辑require “lcd_drv” 和require “tp_drv” 并不会运行这两个文件内的函数，同时修改了demo，简化了显示和触摸初始化代码，加载即可完成初始化，自动判断在模拟器上运行还是真机上运行。

AI正确找到了问题所在并进行了修改：

4.6 画面不够美观

这次修改后，画面终于出现了！但布局混乱不好看。

4.7 让AI优化排版

让AI继续调整字体大小、控件间距、对齐方式、颜色搭配等，效果逐步改善。

4.8 最后再让AI检查代码

AI确认了win_id仅在运行期间有效，对实际功能无影响，代码可以正常使用。

五、效果对比与总结

此时生成的界面与原始HTML在布局上基本一致，细节还需手动调整一下。

实测小结：

通过这次实践，我们看到AirUI开发已经能够通过AI辅助完成从网页设计到嵌入式UI代码的转换任务。虽然还不能做到“一键完美生成”，但配合正确的工具链和细节调试，效率提升是实打实的。

AirUI开发建议：

1. 1、善用AI生成初始框架，人工专注细节调优；
2. 2、遇到问题时，准确描述现象并引导AI分析原因；
3. 3、获取AirUI最新API文档：https://docs.openluat.com/osapi/

AirUI接口规范、文档清晰，为AI理解业务意图提供了良好基础，也让更多嵌入式开发者看到嵌入式UI高效开发的可能性。