教程 1：用 AI 制作界面（推荐）
把想要的界面讲给 AI：它写网页、构建，Unreal 一侧的蓝图或 C++ 也可以一并交给它。照下面四步就能上手，第 2 步可以跳过。
本页目录
- 下载依赖，打开 WebUIStudio你工具栏按钮；第一次先在弹出的窗口里点“下载”，再补齐界面依赖、AI 桌面应用、Node.js
- 先做 UI 样式库（可选）你选方向AI 写界面多的大型项目才需要
- 用提示词创建界面你写描述AI 写并构建显示什么、能做什么、Unreal 一侧用蓝图还是 C++
- 添加声音你指定声音或交给 AI自己在蓝图里配，或者用提示词让 AI 加
第 1 步：下载依赖，打开 WebUIStudio
- 完成安装，在编辑器里启用插件。
- 点击关卡编辑器工具栏上的 WebUIStudio 按钮。第一次会弹出“OrionBrowser 依赖”窗口：点“下载”，完成后点“打开 WebUIStudio”。
- 以后再点这个按钮，会直接打开 WebUIStudio 并载入当前工程。
然后补齐下面三样：
| 需要 | 怎么准备 |
|---|---|
| 界面依赖 | Studio 缺少时会显示提示条，点“一键安装环境” |
| Codex 或 Claude 的桌面应用 | 自行安装其中一个并登录。Studio 通过它把你的要求交给 AI |
| Node.js 22 或更新的 LTS 版本 | 自行安装，AI 构建网页时要用 |
插件请放在工程的 Plugins/，AI 写出的网页会从这里引用插件。
第 2 步（可选）：先做一套 UI 样式库
界面多的大型项目建议先做这一步：先把颜色、字体、间距和控件的样子定下来，以后每个界面都照它做，风格才统一。只做一两个界面可以跳过。
把下面的提示词发给 AI（发法见第 3 步），游戏类型和想要的感觉换成你自己的：
为这个游戏做一套 UI 样式库，以后所有 OrionBrowser 界面都按它做。 游戏：第三人称科幻生存，画面偏冷、偏暗。想要的感觉：克制、硬朗、文字少，界面贴边摆放。 平台：PC，键鼠和手柄都要能操作。设计分辨率 1920×1080。语言：简体中文、英文。 交付三样东西： 1. Docs/UI/ui-style.md：风格规则和交付前自检清单。 2. Content/UI/WebUI/Shared/src/game-ui/：设计令牌（颜色、字号、间距、时长）和控件样式，所有界面共用。 3. Tools/WebUI/UIStyleGuide：一个只供开发查看的界面，展示颜色、字体、按钮的各个状态、一块示例面板和一条 HUD。 先给 3 个明显不同的方向让我选，选定后再固化。
AI 做完后，UIStyleGuide 会出现在 Studio 左栏。逐页看，选一个方向，把要改的地方告诉它（例如“选方向 B，主色换成更暖的橙色，去掉圆角”）。以后做界面时，在提示词里加一句“按 Docs/ 做”。
第 3 步：用提示词创建界面
把要做的界面写成一段描述：显示什么、玩家能做什么、Unreal 一侧用蓝图还是 C++。下面是设置面板的例子，可以直接改着用：
做一个设置面板，界面名 SettingsPanel。 显示：音量（0–100）、画质（低 / 中 / 高）、语言（简体中文 / English）。 玩家可以：调音量、选画质、还原默认、关闭面板。 Unreal 一侧用蓝图（或者写：用 C++），也由你完成：承载界面、接收这些操作并校验、把状态发给界面。 做完后构建，并告诉我哪些步骤要我在编辑器里做、哪些没有验证。
拿不准时，先让它只出计划：在 Studio 里打开“计划模式”，或者在描述末尾加一句“先给计划，不改文件”。
在 WebUIStudio 里（推荐）
- 点左栏第一行的“新建界面”。
- “界面名”填
SettingsPanel，把上面的描述贴进“界面描述”。 - 选择 Codex 或 Claude，点“发送给…”。
你只需要写要求，该读的规则 Studio 会一并告诉 AI。完成后新界面出现在左栏。
SettingsPanel。这一步用到三处：② 左栏，第一行是“新建界面”，做好的界面也列在这里；④ 舞台，显示真实页面；⑥ 右栏，写修改要求并发送。点击图片放大。在 Codex、Claude 或其他 AI 软件里
用它打开工程根目录（.uproject 所在的目录），在描述前面加一句：
先完整阅读 Plugins/OrionBrowser/Skills/orion-webui-creation/SKILL.md，按它的规则完成下面的任务。
也可以在 Studio 的“新建界面”里点“复制提示词”，把完整提示词贴到任何 AI 软件里。
Unreal 一侧由谁来做
| 你选的 | AI 会做 | 可能留给你 |
|---|---|---|
| C++ | 写网页并构建；写好承载界面的 C++ 类 | 编译工程；按它列出的步骤在编辑器里建资产 |
| 蓝图 | 写网页并构建；它有编辑器自动化工具时，也会建资产、连节点 | 它没有这类工具时，会列出要你在编辑器里做的步骤 |
留给你的步骤照教程 3做。不要让 AI 用文本或二进制的方式修改 .uasset、.umap 文件。
看结果、提修改
- 在 Studio 里看。 点左栏的新界面，逐个视图查看。要改哪里，用工具坞的“控件”工具点中它，写下想怎么改，再在右栏选好接收方，点“发送标注”，见教程 2。
- 在 Unreal 里看。 点 Play，把每个操作实际做一遍。出了问题看教程 3 的排查。
Enter 保存。左边的滑杆图标展开“调整属性”。第 4 步：添加声音
悬停和点击的声音由 Unreal 播放，你只需要指定哪个控件用哪个声音。两种做法任选其一。
自己在蓝图里配。 在承载界面的 Widget 蓝图里加一个声音策略变量，填上默认的悬停声和点击声，需要时按控件 Id 单独指定，见教程 3：控件音效。控件 Id 在 Studio 里用“控件”工具点一下就能看到。
ControlSounds 的默认值（在 My Blueprint 里选中变量后，Details 的 Default Value）。Default Sounds 是所有控件的默认声音，这里用的是插件示例自带的 S_StationHover 和 S_StationClick；Control Overrides 按控件 Id 覆盖。图中这一条让 settings-close 的点击不出声：勾选 Override Click Sound，再取消它下面 Click Sound 的 Enabled。让 AI 来加。 把声音资产和要求告诉它，资产路径换成你工程里的：
给 SettingsPanel 加控件音效，Unreal 一侧沿用上一步的做法。 悬停用 /Game/Audio/UI/SC_Hover，点击用 /Game/Audio/UI/SC_Click。 “还原默认”按钮（settings-reset）的点击声换成 /Game/Audio/UI/SC_Confirm；音量滑块不要悬停声。 页面里不要自己播放悬停和点击声。
“保存成功”这类有业务含义的声音见教程 3：有业务含义的声音。