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

在线演示：lumiogames.github.io/LGUI

开源仓库 Star it ⭐：github.com/LumioGames/LGUI

今天，我们正式开源发布了 LGUI（LumioGames/LGUI）。这是 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 分钟。

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

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

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

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

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

大家用手机打开体验链接，转动屏幕，就能当场感受到横竖屏自动重排与刘海适配的效果。

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

语言我们在 Lua、Python、C# 和 TS 之间深入评估过，最后坚定选择了 TypeScript，让浏览器端和 Agent 能无缝跑同一套业务代码。在 Unity 侧，我们依托优秀开源项目 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 里跑这两行。

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，欢迎 Star、提交 PR，也欢迎参与我们的讨论。用着有问题，来 QQ 群 972220164 或者飞书话题群找我们。