嵌入式UI开发，长期以来都是一项耗时费力的“体力活”。从布局微调到事件响应，每一行代码都在考验开发者的耐心。如今，AI在网页和App界面生成上已大显身手，但它能否跨越硬件门槛，解决嵌入式开发的真实痛点？

本文将基于AirUI框架，进行一次大胆的实测：让AI将网页原型直接“翻译”成可运行的嵌入式UI代码。 我们将完整记录从HTML到LuatOS项目的转换过程，客观评估方案的可行性、遇到的坑以及最终带来的效率提升。

一、AirUI是什么？

AirUI是LuatOS的图形化开发核心库，把常用组件、事件管理、输入和基础视觉主题封装为极易上手的Lua接口，便于在支持LuatOS的设备和PC上统一开发。

相比传统嵌入式UI方案，AirUI有几个很实在的优势：

适用场景： 工业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代码的转换任务。虽然还不能做到“一键完美生成”，但配合正确的工具链和细节调试，效率提升是实打实的。