# LGUI：为 Agent 而生的游戏 UI 开发新范式

> 2026 年 10 月 30 日 LumioGames 发布游戏 GUI 框架 LGUI 0.3.0，给 AI Agent 用。界面、逻辑、测试都在浏览器和 Node 里完成，不用装游戏引擎，上线时一条命令导出到 Unity，游戏代码不改。实测用 Codex 6.1-sol 从一张原型图做到 Unity Windows 包跑起来，用时不到 30 分钟。源码公开，许可为 PolyForm Shield 1.0.0。

- 来源: https://blog.lumio.games/posts/lgui-launch.html
- 作者: Lumio
- 发布: 2026-10-30
- 更新: 2026-10-30
- 标签: LumioGames, LGUI, 游戏UI, AI Native, Agent, Unity, FairyGUI

---

**在线演示：**[lumiogames.github.io/LGUI](https://lumiogames.github.io/LGUI/)

**开源仓库 Star it ⭐：**[github.com/LumioGames/LGUI](https://github.com/LumioGames/LGUI)

今天，我们正式开源发布了 LGUI（[LumioGames/LGUI](https://github.com/LumioGames/LGUI)）。这是 [Lumio Games](https://lumio.games/) 专门为 AI Agent 打造的游戏 GUI 框架。

9 月一开始，我们就说过要完整开源一套游戏研发的 AI Native 工作流。一个多月过去，我们上线了 DS 服务器架构，官网放出了 8 人联机 Demo，平台联机 SDK 也将在下周发布。而今天发布的，正是整个游戏研发链路里最核心的一个模块：游戏 UI 界面。

## AI 做游戏界面，到底卡在哪

现在的 AI 做游戏界面方案，基本都是围绕引擎转的。让 AI 改一个界面，就得连 MCP 启动引擎、加载一堆资源、进到界面，再截个图看对不对。整套流程改一次等一次，非常繁琐。

对独立开发者来说更折腾。没有专职美术，往往得用各种文生图工具跑出原型图，再生成碎图、UI 素材；接着自己写脚本或工具把素材倒进 PSD 或 Figma，再费劲转成 Unity 的 Prefab。时间全耗在写转接工具、修适配、切图这些杂活上，真正核心的玩法设计和游戏逻辑，反而没有精力顾及。但在我们看来，游戏的设计与逻辑，才该是开发者真正倾注心力的地方。

所以我们彻底反着来：先脱离引擎，让 Agent 在浏览器里把切图、UI 素材生成、写代码、测试到验收全部跑完，最后一步再一键导入引擎。

## 30 分钟，从零打磨出一套背包界面

我们拿游戏中很常见的「背包系统」试了一把。使用 Codex 6.1-sol 配合 LGUI，从一张原型图开始，到最终在 Unity 里打出 Windows 包，全程用了不到 30 分钟。

![旅者背包原型图，下方是从原型图里切出来的物品图标](https://s3.lumio.games/lumio-blog/blog/lgui-launch/lgui-prototype-split.jpg)

前面繁琐的工作全由 Codex 在浏览器里自主完成。Agent 照着原型图切图、生成素材、编写 TypeScript 界面逻辑，然后自己跑 `lgui check` 检查规范、跑 `lgui test` 跑测试、跑 `lgui verify` 截图验证。而我们作为开发者，只需要在浏览器里看一下效果、点击验收确认。我们在 GitHub 仓库里也放了一个在线体验版本，大家可以在线感受实机效果（[在线体验](https://lumiogames.github.io/LGUI/)）。

![左边是原型图，右边是 Unity 打出的 Windows 包实机运行效果](https://s3.lumio.games/lumio-blog/blog/lgui-launch/lgui-30min-compare.jpg)

接着跑一条 `lgui unity export`，同一份代码和资源直接生成 Unity 要的界面包、图集、翻译和脚本。游戏代码一行没动，Unity 直接打 Windows 包，页签、格子、详情面板、按钮操作都是好的。

## 全在 Web：实时预览、编辑与人机协同

我们的 FairyGUI 可视化编辑器也是纯 Web 化的。人可以在浏览器里自由拖拽控件、排版布局，Agent 也可以随时用 `lgui editor props` 直接改属性，两边的修改实时生效、无缝同步，整个协作过程极为顺畅。

更省心的是屏幕适配。框架完美支持横竖屏自动切换与实时预览。同一份 `ui/` 资源与业务逻辑，横屏显示为左右两栏，转成竖屏后自动重排为上下布局，View 实例完全保留，代码里不需要写任何横竖屏的判断分支。此外，我们也专门对异形屏、刘海屏做了安全区适配，全屏界面自动规避遮挡，弹窗永远居中在安全区域。

![背包界面：横屏左右两栏，竖屏自动上下排布](https://s3.lumio.games/lumio-blog/blog/lgui-launch/lgui-landscape-portrait.jpg)

大家用手机打开[体验链接](https://lumiogames.github.io/LGUI/)，转动屏幕，就能当场感受到横竖屏自动重排与刘海适配的效果。

## 为什么用 TS，为什么用 FairyGUI

语言我们在 Lua、Python、C# 和 TS 之间深入评估过，最后坚定选择了 TypeScript，让浏览器端和 Agent 能无缝跑同一套业务代码。在 Unity 侧，我们依托优秀开源项目 [PuerTS](https://github.com/Tencent/puerts) 来运行 TS。这里要衷心感谢为这些开源项目长期贡献的开发者们；也非常欢迎相关生态的作者和同仁联系我们，期待未来有更深入的合作与共建。

之所以选择 FairyGUI 作为底层，是因为它是 UI 开发领域久经考验的老牌框架，成熟度极高。相比于当前主流的“先有引擎、再外接 AI”的常规开发链路，我们选择倒转过来：以 Web 端为原点，先让 Agent 在浏览器里跑顺全链路，再把游戏引擎作为最终的执行态。通过这种方式，界面研发彻底摆脱了对引擎的重依赖，真正实现了开发态与执行态的分离。

## LGUI 核心特性一览

### 做界面

| 功能 | 说明 |
| :-- | :-- |
| 一个界面源 | 界面只放在 `ui/`（FairyGUI 格式）。网页和 Unity 用的界面包都由命令生成，不会出现两份对不上 |
| 横竖屏 | 横版和 `@portrait` 竖版两套布局，转屏时自动换，View 实例保留。游戏代码里不写横竖屏判断 |
| 排布模板 | `lgui new view --pattern` 有分栏、标签页、网格、弹窗四种，一次生成横竖两版 |
| 安全区 | 全屏界面里的 `safe` 区域自动避开刘海，弹窗放在安全区正中 |
| 控件 | 按钮、文字、图片、装载器、列表、树、标签、输入框、滑动条、下拉框、序列帧动画、美术字 |
| 动效 | `ui/` 里做好的动效，代码里能播放、等它播完；界面被盖住时暂停，关掉时停 |
| 编辑器 | `lgui editor` 打开可视化编辑器，存回 `ui/`。编辑器开着时 Agent 也能改控件属性，画面马上变 |
| AI 出图 | 让 AI 一次画一整张网格大图，`lgui art split` 拆成小图并缩放到要的尺寸，整套风格一致 |
| 多语言 | 文本表、`lgui.t`、复数和格式化、运行中换语言、带字图片按语言换、伪翻译检查。`lgui i18n extract` 从 `ui/` 提取要翻译的字 |

### 写逻辑

| 功能 | 说明 |
| :-- | :-- |
| MVC | Model 放要显示的数据，View 用绑定表把数据接到控件上，Controller 处理操作，Service 连服务器 |
| 界面管理 | hud、page、popup、modal、toast 五层。打开、关闭、返回、被盖住再露出来都由框架管；弹窗关闭时把结果交回给打开它的界面 |
| 输入 | 点击、双击、长按、拖拽、滑动、双指缩放、滚轮、悬停；按键动作、返回键、操作提示栏 |
| 拖放 | 游戏里那种拖放，拖起来有跟手的图标，放到目标上才调用 Controller |
| 请求 | `lgui.request` 管「请求中」、超时和失败提示 |
| 声音 | 背景音乐跟着界面切换，换曲淡入淡出；按钮音；代码里放音效。音乐和音效分开调音量、静音，设置自动保存 |
| 常用工具 | 定时器（跟着界面暂停和取消）、广播站、红点、通用弹窗（提示、确认、加载中）、图片占位、本地存储、日志 |

### 检查和测试

| 命令 | 说明 |
| :-- | :-- |
| `lgui dev` | 网页预览，改了界面或代码自动刷新 |
| `lgui check` | TypeScript 类型检查，加上 UI、MVC、多语言规范检查 |
| `lgui test` | 用 headless 后端在 Node 里跑界面流程测试，不开浏览器；用假时钟，倒计时不用真等 |
| `lgui verify` | 在真浏览器里按手机、平板、电脑的标准尺寸，横竖两个方向各截一张 |
| 调试快照 | 预览里按 F8 看当前界面树，代码里用 `lgui.debug.snapshot()` |
| 给 Agent 读 | 所有命令都支持 `--json`，错误码统一编号，报错带文件、行号和改法 |

### 导出到引擎

| 命令 | 说明 |
| :-- | :-- |
| `lgui unity export` | 把同一份 `ui/`、`src/`、`i18n/` 导出到 Unity 工程，生成界面包、图集、翻译、脚本和启动场景 |
| `lgui upgrade` | 把插件里的新版框架和 Unity 包同步进工程 |

## 如何快速上手体验

最省事的办法，把仓库地址丢给你的 Agent（Claude Code 或 Codex），跟它说「照 README 把 LGUI 装好」。电脑上有 Node 24 和 Chrome 或 Edge 就够了，TypeScript、打包、截图、拆图这些工具插件会一起装上。

想自己装，在 Claude Code 里跑这两行。

```bash
claude plugin marketplace add LumioGames/LGUI
claude plugin install lgui@lumio-lgui
```

装完开个新会话，跟它说「用 LGUI 做一个横竖屏都能用的商店界面」，看看它能做成什么样。

## 接下来的计划

下周，我们将正式发布官网游戏平台的 SDK。核心能力包括完整的实时聊天、在线云存档以及用户信息获取。

紧接着，我们还会推出一套专为 AI Native 打造的策划工作流，包含面向 Agent 的策划配表工具集；同时，我们还准备了一套面向 Agent 的性能 Profile 分析工具，帮助 Agent 自主定位与优化性能瓶颈。这些工具都会在接下来的节奏中陆续发布。

最后，我们会集中最大的精力，去攻克游戏研发中最为繁重的美术资产难题，尤其是美术 2D/3D 模型与动作生成这一块。目前我们内部已经验证了一套方案，大家敬请期待。

源码在 [github.com/LumioGames/LGUI](https://github.com/LumioGames/LGUI)，欢迎 Star、提交 PR，也欢迎参与我们的讨论。用着有问题，来 QQ 群 972220164 或者[飞书话题群](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=b24vf257-5a2b-41ce-935e-bc4ce19dc396)找我们。