003 诗词闯关

作者：祖丽娟　|　最后修改：2026-05-12

重要提醒：

1、当你安装配置好智能体、规则和技能后，最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确；

2、Trae 中内置的免费大模型，会经常排队，并且性能不可控，容易出问题，所以推荐参考：001 发送会话请求时，提示排队，如何解决？的方法，订阅收费的大模型（目前每月 40 元）；这样可以大大提高 AI 性能；如果不想使用收费模型，在非正常工作时间段内，使用内置的免费模型也能勉强凑合；

3、选择收费大模型时，经过我们的实际测试，根据工作任务的不同，可以按照如下建议选择（仅供参考，具体情况还需要根据你自己的实际使用情况来定）：

代码开发任务，优先选择 GLM（可能是使用的人数太多，有时候处理较慢）；如果 GLM 处理太慢，再考虑切换到 MiniMax；
其他任务，可以首先选择 ark-code-latest，其次选择 MiniMax，最后选择 GLM（可能是使用的人数太多，有时候处理较慢）；

APP UI分辨率自适应说明

1、APP UI分辨率：我们定义了竖屏，横屏，方屏三种；

水平分辨率小于竖直分辨率是竖屏；例如320*480，480*854，720*1280都是竖屏分辨率
水平分辨率大于竖直分辨率是横屏；例如1024*600是横屏分辨率
水平分辨率等于竖直分辨率是方屏；例如480*480是方屏分辨率
合宙引擎主机8000W的默认出厂软件使用的竖屏分辨率320*480
合宙引擎主机1602的默认出厂软件有两种，一种是竖屏分辨率720*1280，另一种是横屏分辨率1024*600
合宙引擎主机8101的默认出厂软件使用的竖屏分辨率480*854

2、当你基于合宙引擎主机或者模拟器开发app时，在不改变默认出厂软件的情况下，你需要注意以下几点：

你设计的app的UI界面，必须和合宙引擎主机默认出厂软件的分辨率保持一致；例如使用合宙引擎主机8000W开发app时，你设计的app的UI界面，必须是竖屏的320*480分辨率
虽然你的app UI界面只是基于某一种分辨率来设计，但是一旦你在这一种分辨率开发调试通过之后，你开发的这个app UI部分，不需要做任何修改，可以自适应到其他相同分辨率方向的任意分辨率上
例如，你基于合宙引擎主机8000W竖屏的320*480分辨率，设计了app UI界面，这部分界面代码不需要做任何修改，直接可以在合宙引擎主机1602竖屏的720*1280分辨率、合宙引擎主机8101竖屏的480*854分辨率上显示，布局不做任何改变，各个UI组件会自动放大或者缩小

3、因为历史原因，在很早以前，我们已经写了一些480*800分辨率的app开发指南文章，这些指南文章的内容适用于所有竖屏分辨率的合宙引擎主机；

4、例如本文描述的“诗词闯关”app，就是基于竖屏480*800分辨率设计的，这篇文章的内容，同样适用于合宙引擎主机8000W竖屏的320*480分辨率、合宙引擎主机1602竖屏的720*1280分辨率、合宙引擎主机8101竖屏的480*854分辨率；

5、所以，如果你正在使用合宙引擎主机8000W竖屏的320*480分辨率来设计新的app，完全可以参考了本文描述的“诗词闯关”app开发内容，在设计你自己的app时，将本文内容中的480*800分辨率替换为320*480分辨率来设计即可；

概述：

本篇旨在讲述在合宙引擎 8101 开发诗词闯关 app（SCCG）项目的详细过程。

诗词闯关 app，是一款使用合宙 AirUI 轻量化图形开发框架，基于工业引擎 Air8101 V001 畅玩板硬件和 LuatOS 系统软件开发的一款 UI 应用程序。

诗词闯关 app 核心功能：

以答题闯关为主线，设置关卡和难度
以诗词库为内容基础，提供学习和查阅功能
将诗词学习包装成游戏化的闯关体验

app ui 界面：

一、准备硬件环境

1、WIN10 以及 WIN10 以上的 Windows 操作系统电脑一台

2、合宙引擎主机8000W一块或者合宙引擎主机1602一块或者合宙引擎主机8101一块 +type-c 接口 usb 数据线一根

3、如果没有上述 2 的硬件设备，可以直接在电脑端 pc 模拟器上开发调试 app

二、准备软件环境

2.1 代码仓库

合宙引擎主机的项目代码在 LuatOS 仓库的 master 分支；

点击这里可以通过网络浏览器打开 LuatOS 代码仓库的 master 分支；

3、（本步骤和步骤 2，二选一即可）通过 TortoiseGit 或者其他客户端工具拉取上述 master 分支代码到自己的电脑上，以便后续通过客户端提交代码到仓库，只本地运行的话可以不用客户端克隆/下载，直接步骤 2 下载即可；

4、参考这里使用 TortoiseGit 克隆/拉取代码，点击查看 TortoiseGit 详细使用教程

5、master 分支代码放在你本地任何你觉得合适的位置，比如本文这里新建了存放的路径是 D:\app：

2.2 PC 模拟器

点击此处学习 LuatOS 模拟器；

使用模拟器时，直接使用在本文 2.1.3 章节下载的 LuatOS 代码进行学习；

在本小节，使用 LuatOS 模拟器 + LuatOS 代码，可以正常运行起来一个 UI 项目就算达标；

2.3 AI 工具

AI 工具有很多种，有 Trae，Copilot 等等，每一种 AI 工具都可以配置不同的大模型，我们并不限制你使用哪一种 AI 工具；

各种 AI 工具使用的基本思路都是相同的，在本文，我们仅仅基于 Trae 这种 AI 工具来介绍，如果你使用其他 AI 工具，遇到不懂的问题，可以自行解决；

参考 Trae 的安装和智能体概念理解和安装 luatos-docs-code 智能体、规则和技能安装好 Trae，配置 luatos-docs-code 智能体，配置项目规则和技能；其中：在 Trae 的安装和智能体概念理解第三章节中，不用再新建项目，直接打开自己电脑上的 LuatOS-develop 目录即可；

Trae 的配置使用有以下三点特别重要：

1、当你安装配置好智能体、规则和技能后，最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确；

2、Trae 中内置的免费大模型，会经常排队，并且性能不可控，容易出问题，所以推荐参考：001 发送会话请求时，提示排队，如何解决？的方法，订阅收费的大模型（目前每月 40 元）；这样可以大大提高 AI 性能；如果不想使用收费模型，在非正常工作时间段内，使用内置的免费模型也能勉强凑合；

3、选择收费大模型时，经过我们的实际测试，根据工作任务的不同，可以按照如下建议选择（仅供参考，具体情况还需要根据你自己的实际使用情况来定）：

代码开发任务，优先选择 GLM（可能是使用的人数太多，有时候处理较慢）；如果 GLM 处理太慢，再考虑切换到 MiniMax；
其他任务，可以首先选择 ark-code-latest，其次选择 MiniMax，最后选择 GLM（可能是使用的人数太多，有时候处理较慢）；

三、定义自己的 app 原始需求

接下来，我们以一个实际的 app 需求为例，来演示完整的开发过程；

这个 app 的名字叫做：诗词闯关

如果需求不是特别明确，就简单描述一下即可；如果需求特别明确，则详细描述每个页面如何设计，以及业务逻辑如何设计；

在本示例中，因为诗词闯关 app 是一个游戏，没有太多的思路，所以我们描述的原始需求比较简单，看 AI 如何发挥，如下所述：

设计一个可用于嵌入式设备的诗词填空项目的页面和交互业务逻辑，分辨率为480*800，输出可以交互的html页面

四、根据 app 需求，借助 AI 工具，生成 html 文件和图片等资源文件

本步骤是借助 AI 工具，根据定义的 app 需求，生成 html 文件和图片等资源文件。

AI 工具可以使用 Trae，也可以使用网页版的豆包，也可以使用网页版的 deepseek，生成“包含业务逻辑、可交互体验”的 html 文件；你可以根据自己的实际情况来对比选择使用其他的 AI 工具，经我们对比，网页版的 deepseek 生成的 html ui 效果比较符合需求。

在这一章节记录了使用 deepseek 网页版来生成钉钉机器人 app 的 html 的过程：

4.1 生成 ui 界面.html 文件

浏览器搜索打开 deepseek,输入如下指令：帮我生成一个html，用于嵌入式设备UI 演示窗口竖屏，适用480*800分辨率，实现诗词填空的功能，选择题形式

4.2 查看 ui 效果

等待 deepseek 思考完成后，运行查看生成效果；运行后有分为封面和游戏界面两张，点击【开始闯关】即可预览全部

4.3 修改 ui 效果

deepseek 首次生成的 ui 效果不一定能满足 app 需求，可以进行多次对话交互修改效果，比如，去除多余的功能、修改整体色调、添加按钮、添加提示文字等，直至达到满足需求的 ui 效果；

4.4 下载保存.html 文件

直接双击 SCCG.html 在浏览器打开即可查看 ui 效果。

4.5 导出.html 中的图片、图标、表情等资源

修改到最终的 ui 效果后，继续给 deepseek 发指令：帮我导出这里面的所有图片资源大小32*32，背景透明色
由于很多时候效果图中只有 Emoji 表情，所以可以给 deepseek 发指令：帮我把这里的Emoji表情转换成图片资源，32*32，背景透明色

deepseek 思考完成后，点击运行，在运行页面可以一键下载图片资源。

4.6 总结

这个阶段，主要就是根据需求，不断的和 AI 交互，生成 html；
根据自己对实际 app 的规划以及实际运行的效果，可能需要调整多次才行；
按照同样的交互思路，进行多轮交互即可，直到生成的 html 界面和交互逻辑可以满足你的需求；
最后再导出来用到的所有图片资源；
具体到本项目，最终输出了 SCCG.html 和 SCCG_images.zip 两个文件；
我们在接下来的编码环节会用到这两个文件；

五、根据 html 文件 + 图片等资源文件 + 代码仓库，让 AI 工具生成 app 代码

本步骤全程在 trae AI 下进行。

在进行本步骤之前，一定确保 2.3 章节 4.验证规则和技能都没有问题，如果验证异常，按照 2.3 章节 2-3-4 步骤重来一遍即可。

app 代码的基本格式要求

app 代码有基本的格式要求；

我们先来看看 2.1.3 章节下载下来的 LuatOS 代码仓库中的 LuatOS/module/AirUI/app_store/vertical_app 目录，在 vertical_app 内，每个子目录都是一个单独的 app，如下图所示：

5.1 Trae 生成 app 代码

为了演示整个过程的细节，此处拆分为多步来逐步生成

5.1.1 在app_store\vertical_app下创建 SCCG 目录

首先我们在 LuatOS-master\app_engine\app_store\vertical_app 下创建一个 SCCG 目录；

创建目录的方式有很多种，此处仅仅演示使用 Trae 创建的过程；

1、在工具右侧的资源管理器中，找到 LuatOS-master\app_engine\app_store\vertical_app 目录，鼠标点击右键，在弹出的菜单中，选择 添加到对话

2、在会话窗口继续输入 在这个目录下创建一个SCCG目录，如下图所示，然后点击发送箭头按钮

3、创建成功后，会话窗口输入：在SCCG目录下创建res，user目录

最终创建成功，如下图所示

5.1.2 把第四章节生成的 html 和图片文件复制过来

这一步就不借助 Trae 完成了，直接人工手动操作：

1、手动将 4.4 中保存的 SCCG.html 复制到 SCCG 目录下；

2、将 4.5 中导出的 SCCG_images.zip 中的图片解压，然后复制到 SCCG/res 目录下

3、参考 3.5 的交互生成诗词填空图标图片，下载后修改图片名称为 icon.png，复制图片到 SCCG 目录下.

完成以上三步后最终如下所示:

5.1.3 第一次自动生成 app 代码

1、在会话窗口输入以下内容（LuatOS路径需要根据你自己电脑上的实际路径来修改），并且发送：

1、参考：D:\app\LuatOS-master\app_engine\app_store\vertical_app\SCCG\SCCG.html 中的UI界面和交互逻辑，在SCCG中生成LuatOS代码
2、代码文件格式以及内容参考D:\app\LuatOS-master\app_engine\app_store\vertical_app下的其他目录，包含main.lua，meta.json，SCCG\user目录下存储具体UI和业务功能的lua代码文件
3、代码中需要的图片资源在SCCG\user目录下，代码中用到的图片资源，使用\luadb\xxx.png的路径方式