Trae+AirUI：嵌入式 UI 开发真的能提速吗？实测来了

在嵌入式UI开发领域AI技术的应用可行性一直存在争议“AI写嵌入式UI到底靠不靠谱”这一疑问本质上是对AI在硬件导向型开发场景中适配性的考量。传统嵌入式UI开发存在耗时费力的痛点而AI在网页、App界面开发中的成熟应用与嵌入式场景的硬件关联性差异让其适用性备受质疑。即便AirUI框架通过Lua接口与PC模拟器降低了开发门槛仍有进一步提升效率的空间因此通过真实项目验证AI将网页原型转换为可运行AirUI代码的可行性成为理性探究这一问题的关键路径。AirUI框架封装了常用组件、事件管理等功能提供Lua开发接口搭配PC模拟器可实现无硬件调试降低了嵌入式UI的开发门槛。基于此本次尝试通过AI将网页原型转换为可运行的AirUI代码验证该方式的可行性与效率。本次通过真实项目测试AI在嵌入式AirUI开发中的实际表现具体核心流程如下第一步借助DeepSeek生成所需的HTML布局文件搭建基础UI原型第二步通过Trae软件调用luatos-docs-code-101智能体将生成的HTML布局直接转换为可运行的AirUI项目代码。一、为什么选择AirUIAirUI是LuatOS的图形化开发核心库封装了常用组件、事件管理、输入控制及基础视觉主题提供Lua开发接口可在支持LuatOS的硬件设备及PC模拟器上运行。AirUI与传统嵌入式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演示窗口横屏分辨率w480, h320包含开机窗口显示1.5 秒、待机窗口和主菜单窗口可以切换。3.1.2 DeepSeek生成文件DeepSeek生成了包含开机窗口、待机窗口、主菜单窗口的HTML文件。- 开机窗口 -- 待机窗口 -- 主菜单窗口 -3.1.13 保存到本地将生成的HTML保存到本地我这里放在C:\Users\luat\Downloads\deepseek_html_20260327_d5969e.html3.2 通过Trae调用智能体生成项目代码3.2.1 输入指令在Trae中打开airui空文件夹输入以下指令。/plan参考以下需求先帮我制定plan仅输出plan文件并保存创建一个以项目命名时间的空文件夹生成的项目文件放里面。制定plan时除了输出你规划中的plan文件内容还要输出项目功能需求和业务逻辑分析项目总体设计项目详细设计这几部分的内容。帮我生成一个LuatOS项目代码功能需求如下1、硬件模组Air8000A2、软件功能需求参考C:\Users\luat\Downloads\deepseek_html_20260327_d5969e.html的页面布局严格遵守AirUI文档接口和参数进行窗口UI设计使用exwin进行管理通过消息机制来打开窗口不使用接口直接调用窗口。窗口横屏分辨率w480,h320使用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告知AIexwin为扩展库没有内置到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开发建议善用AI生成初始框架人工专注细节调优遇到问题时准确描述现象并引导AI分析原因获取AirUI最新API文档https://docs.openluat.com/osapi/整个流程走下来AI 生成框架 人工微调确实比纯手写快太多嵌入式 UI 开发也能轻松不少。AirUI接口规范、文档清晰为AI理解业务意图提供了良好基础也让更多嵌入式开发者看到嵌入式UI高效开发的可能性。今天的分享就到这里了。