324 lines
16 KiB
Markdown
324 lines
16 KiB
Markdown
# ChatGPT / Codex 辅助 UI 与美术资产工作流
|
||
|
||
> 文档状态：Active
|
||
> 首次建立：2026-07-18
|
||
> Scope 更新：2026-07-18 — Chapter 0 首发；Windows、Android、iOS；`en`、`zh-CN`、`ja`、`ko`、`vi-VN`
|
||
> 适用项目：`ichni Official`
|
||
> 关联路线图：`docs/release-readiness-roadmap.md` 的 `UI-001`–`UI-007`
|
||
|
||
## 1. 结论
|
||
|
||
**目前可以使用 ChatGPT/Codex 辅助 ichni 的 UI 优化和美术资产重制，并且不需要先雇佣其他人。** 当前工具可以根据文字或参考图生成、编辑 Raster Image，适合制作：
|
||
|
||
- 对话界面背景、章节背景、装饰性插画和氛围图。
|
||
- UI Panel、Frame、Divider、Button Skin、Badge 和装饰层的视觉方案。
|
||
- Icon 方向探索、Loading Illustration、Placeholder、Sprite Sheet 初稿。
|
||
- 根据现有 Mockup 做局部替换、去除元素、改色、扩图、重新构图。
|
||
- 从一个成熟页面提炼同系列视觉变体，建立统一风格。
|
||
|
||
它不能独立保证以下生产要求：
|
||
|
||
- 自动交付结构准确、命名规范且完全可编辑的 PSD/Figma Layer。
|
||
- 像素级一致的多状态组件、精确 9-slice 边界、可靠 Vector/SVG。
|
||
- 直接在图片中生成大量正确的中英日韩越正式文本。
|
||
- 自动完成 Alpha Edge、Texture Compression、Sprite Slice、Prefab State 和多分辨率验证。
|
||
- 自动判断每一项训练/参考/第三方素材的商业许可。
|
||
|
||
因此推荐“**AI 生成/定向编辑 + 免费图形工具清理 + Codex 自动化检查 + Unity 真机验证**”的混合流程。
|
||
|
||
本轮只服务 Chapter 0 首发。Chapter 1 的 UI/背景只能在不影响 Chapter 0 的设计、实现、LQA 和三平台性能验证时制作；`IchniCreatorStudio` 不在此工作流范围内。
|
||
|
||
OpenAI 当前官方说明支持在 Codex 中使用 `$imagegen`，也可以用 Image Generation API 做批量生产；官方建议使用少量参考图、短而具体的 Prompt、一次只做一个定向修改，并把复杂文字排版留到设计工具中完成：
|
||
|
||
- [OpenAI Image Generation in Codex](https://learn.chatgpt.com/docs/image-generation)
|
||
- [OpenAI Image Generation API Guide](https://developers.openai.com/api/docs/guides/image-generation)
|
||
|
||
## 2. ichni 当前视觉基线
|
||
|
||
### 已有优势
|
||
|
||
- 已形成深蓝、青色高光、轨道/圆环/细线装饰、低饱和背景的可识别风格。
|
||
- Start、Chapter Selection、Song Selection、Settings、Dialogue、Summary 都已有整屏视觉参考。
|
||
- 多数页面已有拆分 Sprite 和 Prefab 基础，不需要从空白重新设计整个产品。
|
||
- 视觉语言与音游、轨道、星空/轨道站意象相符，适合建立 Original Style Guide 后继续扩展。
|
||
|
||
### 当前风险
|
||
|
||
- 背景纹理和装饰层偏密集，小字号与低对比标签容易被吞没。
|
||
- 多处 Icon-only Control，缺少 Hover/Focus/Disabled 和可访问性定义。
|
||
- Scene 中混用 `1920×1080`、`2560×1440` Reference Resolution；移动端 Safe Area 尚未建立。
|
||
- Runtime `Assets` 中同时存在大体积 PSD、整屏 Mockup 和拆分图，源文件与运行时导出没有清晰边界。
|
||
- Scene 仍有硬编码/测试文本；如果文字继续烘焙进图片，会扩大本地化和返工成本。
|
||
- 许多 UI Texture 的实际用途、状态和引用尚无 Manifest，批量重制容易产生孤儿资产或破坏 Prefab 引用。
|
||
|
||
## 3. 先建立的三条原则
|
||
|
||
1. **文字不进入背景图。** 所有会本地化、变化或显示数据的文字都使用 TMP/Localization；图片只包含不可读的抽象纹理和装饰。
|
||
2. **先拆 UI 责任，再生成图片。** AI 不负责决定 Screen Flow、信息层级和 Interaction State；先完成 UI Inventory 和 Design Tokens。
|
||
3. **每次只验证一个小批次。** 先做 Dialogue Pilot，进入 Unity 验证后，再扩到其他 Screen，避免批量生成一套无法切片或不可读的资产。
|
||
|
||
## 4. 免费工具组合
|
||
|
||
| 任务 | 推荐工具 | 用途 |
|
||
|---|---|---|
|
||
| 生成与定向修改 | ChatGPT/Codex `$imagegen` | Background、Illustration、Panel/Frame 方案、局部编辑 |
|
||
| 批量生成 | OpenAI Image Generation API | 经 Pilot 批准后的受控批次与变体 |
|
||
| Raster 清理 | Krita / GIMP / Photopea | Mask、Alpha、Layer、Color、Edge Cleanup、PSD 导出 |
|
||
| Vector/Icon | Inkscape | 几何 Icon、SVG、可缩放线条和 Logo 形状 |
|
||
| Unity 集成 | Unity Sprite Editor / SpriteAtlas | Slice、Border、Packing、Compression、Prefab State |
|
||
| 自动验证 | Codex 编写 Editor Tool / CI Validator | Naming、Dimensions、Import Settings、Missing Reference、Build Size |
|
||
|
||
不雇佣其他人的可行性取决于 Scope：背景、Panel、装饰和有限 Icon 可以由现有团队完成；如果要求大量高精度角色立绘、复杂动画、Logo 品牌系统或多章节插画，仍应先缩小首发资产数量，而不是让 AI 无限制扩张内容。
|
||
|
||
## 5. 资产生产管线
|
||
|
||
### Stage A — UI Inventory
|
||
|
||
在生成任何新资产前，为每个 Screen 建立清单：
|
||
|
||
| Field | 示例 |
|
||
|---|---|
|
||
| Asset ID | `UI-DIALOG-BG-001` |
|
||
| Screen | Dialogue |
|
||
| Role | Background / Frame / Panel / Button / Icon / Decoration |
|
||
| Current Path | `Assets/Sprites/UITextures/...` |
|
||
| Prefab/Scene References | Dialogue Prefab、`MenuScene` |
|
||
| State | Normal / Hover / Pressed / Selected / Disabled / Focused |
|
||
| Size / Aspect | 2560×1440、9-slice、64×64 等 |
|
||
| Locale Text | 必须为 `None`，文字由 TMP 承担 |
|
||
| Replace / Keep | 要替换的层与必须保留的层 |
|
||
| Owner / Status | TODO / REVIEW / APPROVED / IN UNITY / DONE |
|
||
|
||
Inventory 完成后，才能判断哪些整屏图片只是 Reference，哪些 Sprite 被 Runtime 真正引用。
|
||
|
||
### Stage B — Lightweight Art Bible
|
||
|
||
至少定义：
|
||
|
||
- Color Tokens：Background、Surface、Primary Cyan、Secondary Blue、Warning、Error、Disabled、Text Levels。
|
||
- Typography：TMP Font、Size Scale、Line Height、CJK/Latin Fallback、数字样式。
|
||
- Shape：Corner Radius、Line Width、Panel Border、Cut Corner、Orbit Motif 使用密度。
|
||
- Spacing：4/8 px Grid 或项目选择的统一 Grid。
|
||
- Lighting：高光方向、Glow 强度、是否允许 Bloom-like Edge。
|
||
- Texture：Noise 粒度、背景对比、装饰透明度上限。
|
||
- Motion：出现/消失时长、Easing、Focus/Selected 反馈。
|
||
- Accessibility：最小文字尺寸、最低对比、状态不能只依赖颜色。
|
||
|
||
描述风格时使用原创特征，例如：
|
||
|
||
> Original dark navy and cyan sci-fi rhythm-game interface, restrained orbital-line motifs, layered translucent panels, precise geometric framing, quiet star-field ambience, high readability, no text, no logo, no imitation of any named artist or franchise.
|
||
|
||
不要要求模仿具体在世艺术家、品牌或游戏的独特风格。
|
||
|
||
### Stage C — Decompose Full-screen Mockup
|
||
|
||
整屏 UI 应拆成以下层：
|
||
|
||
1. `Background`：全屏、无文字、低信息密度，可按 Aspect Crop/Extend。
|
||
2. `Atmosphere`：Glow、Dust、Stars、Fog，必要时独立以控制透明 Overdraw。
|
||
3. `Structural Frame`：顶栏、底栏、边框、轨道线；优先 Vector 或 9-slice。
|
||
4. `Panel Skin`：可重复使用的 9-slice Surface，不给每个 Screen 单独生成一张。
|
||
5. `Decorative Overlay`：非交互性的角花、圆环、扫描线；数量要受性能预算约束。
|
||
6. `Interactive Components`：Button、Tab、Slider、Toggle、Dropdown，每个状态明确。
|
||
7. `Icons`：统一 Grid、Stroke、Padding、Optical Weight。
|
||
8. `Text/Data`：全部由 TMP、Localization 和 Runtime Data 渲染。
|
||
|
||
AI 最适合负责 1、2、5 和部分 3/4 的视觉素材；6、7 最终应由规则化组件和 Vector/手工清理保证一致性。
|
||
|
||
### Stage D — Generate / Edit
|
||
|
||
每次请求必须包含四部分：
|
||
|
||
1. **Context**：它属于哪个 Screen、玩家在做什么。
|
||
2. **Keep**：现有参考图中必须保留的构图、色彩或留白区域。
|
||
3. **Change**：本轮只改变什么。
|
||
4. **Output Contract**：尺寸、Aspect、Alpha、是否 Tileable、是否无文字、留白和导出用途。
|
||
|
||
示例：
|
||
|
||
```text
|
||
Using the attached ichni dialogue mockup as a visual reference, create an original
|
||
2560x1440 dialogue background layer only. Keep the dark navy/cyan palette, orbital
|
||
line motifs, and the quiet sci-fi station atmosphere. Remove every panel, portrait,
|
||
button, icon, logo, and all readable text. Reserve calm low-detail negative space in
|
||
the lower 38% for the dialogue panel and on the left 28% for a character portrait.
|
||
Avoid bright focal points behind future text. Full-bleed raster background, no frame,
|
||
no watermark, no embedded typography.
|
||
```
|
||
|
||
Panel Skin 示例：
|
||
|
||
```text
|
||
Create one original transparent PNG UI panel skin for ichni: a dark navy translucent
|
||
surface with a restrained cyan 2 px geometric border and subtle cut corners. Front
|
||
view, perfectly rectangular, symmetrical, no perspective, no glow outside the canvas,
|
||
no text, no icon, no logo, large clean center, designed for 9-slice use. Provide one
|
||
normal-state asset; do not create a screen mockup.
|
||
```
|
||
|
||
局部编辑示例：
|
||
|
||
```text
|
||
Edit only the highlighted upper-right decoration. Reduce its brightness and visual
|
||
density by about one third so it no longer competes with the title. Keep all other
|
||
pixels, dimensions, palette, composition, and transparency unchanged.
|
||
```
|
||
|
||
如果结果不理想，下一轮只提出一个具体修改，例如“扩大底部留白”“降低背景亮点”“保持边框不动，仅移除文字”，不要同时重新设计所有层。
|
||
|
||
### Stage E — Cleanup and Export
|
||
|
||
AI Output 进入 Unity 前必须经过：
|
||
|
||
- 删除假文字、Watermark-like Shape、脏边和随机不可解释细节。
|
||
- 检查 Alpha Premultiplication、半透明边缘和深色背景 Halo。
|
||
- 几何边框重新拉直；需要精确重复的形状用 Inkscape/Krita 重建。
|
||
- 对 9-slice 资产保证四角固定、边缘可拉伸、中心无不可拉伸纹理。
|
||
- 保留 Working Source（Krita/PSD/SVG）与最终 PNG；不要只保存聊天输出。
|
||
- 生成时的 Prompt、Reference、Model/Date 和人工修改说明进入 Manifest。
|
||
|
||
推荐未来目录：
|
||
|
||
```text
|
||
ArtSource/
|
||
UI/
|
||
Dialogue/
|
||
Working/
|
||
References/
|
||
Prompts/
|
||
Assets/
|
||
Sprites/
|
||
UITextures/
|
||
Dialogue/
|
||
Backgrounds/
|
||
Panels/
|
||
Icons/
|
||
```
|
||
|
||
`ArtSource` 是否放在主 Git、Git LFS 或独立美术仓库应另行决定。在完成引用审计之前，不要直接移动当前 PSD/PNG；先复制、重新导出、替换引用，再删除旧资产。
|
||
|
||
### Stage F — Unity Import
|
||
|
||
推荐默认值需按目标平台复核：
|
||
|
||
| 类型 | Texture Type | Mip Maps | Alpha | Compression | 备注 |
|
||
|---|---|---|---|---|---|
|
||
| UI Background | Sprite (2D and UI) | Off | 按需 | 平台压缩 | 控制 Max Size，避免不必要的 Alpha |
|
||
| Panel / Button | Sprite (2D and UI) | Off | On | 高质量/平台适配 | 配置 Border，验证 Pixel Edge |
|
||
| Icon | Sprite (2D and UI) | Off | On | 高质量 | 统一 PPU、Padding、尺寸 |
|
||
| Repeatable Pattern | Sprite / Default | 视 Shader | 按需 | 平台适配 | 验证 Wrap Mode 与 Seams |
|
||
|
||
集成检查：
|
||
|
||
- Sprite 引用落在 Prefab，而不是只在 Scene 内临时替换。
|
||
- Button 的 Normal/Highlighted/Pressed/Selected/Disabled/Focused 状态齐全。
|
||
- Dynamic Batching 不是透明 UI 性能解决方案；用 Canvas 分组、Atlas、覆盖面积和 Overdraw 实测。
|
||
- 进入 SpriteAtlas 后检查 Padding、Alpha Bleed、Build Size 和首屏加载。
|
||
- 目标 Locale 文本使用 TMP Overlay 验证，不得回到烘焙文字。
|
||
|
||
### Stage G — Review and Approve
|
||
|
||
只有同时通过四个 Gate 才能标记 `APPROVED`：
|
||
|
||
1. **Visual Gate**：符合 Art Bible、层级清楚、不抢文字、同系列一致。
|
||
2. **UX Gate**：信息与交互优先级正确，所有状态可识别，Keyboard/Controller/Touch 可用。
|
||
3. **Technical Gate**：尺寸、Alpha、9-slice、Import、Atlas、Memory、Overdraw、Safe Area 合格。
|
||
4. **Rights Gate**：来源、Prompt、Reference 权限和人工修改有记录，没有未经授权的 Logo/角色/商标。
|
||
|
||
## 6. 推荐的 Dialogue Pilot
|
||
|
||
第一轮只制作以下资产：
|
||
|
||
- `UI-DIALOG-BG-001`：无文字 Dialogue Background。
|
||
- `UI-PANEL-BASE-001`：通用 9-slice Panel Skin。
|
||
- `UI-BUTTON-PRIMARY-001`：Normal、Highlighted/Focused、Pressed、Disabled 四个 State。
|
||
- `UI-DIALOG-DECOR-001`：一组低密度装饰 Overlay。
|
||
|
||
Pilot 步骤：
|
||
|
||
1. 从现有 Dialogue Mockup 导出一张 Reference，并标记必须保留/删除区域。
|
||
2. 为四个资产分别写 Asset Contract，不要求一次生成整屏成品。
|
||
3. 用 `$imagegen` 生成 2–4 个方向，只选择一个继续。
|
||
4. 在 Krita/GIMP/Inkscape 完成精确 Layer、Alpha、Border 和状态变体。
|
||
5. 在一个复制的 Dialogue Prefab/测试 Scene 中集成，避免直接覆盖生产 Prefab。
|
||
6. 用 `1920×1080`、`2560×1440`、16:10、Android 刘海/挖孔设备与 iOS Safe Area 截图对比；首发固定横屏。
|
||
7. 对比旧版/新版的文字对比度、Draw Calls、Texture Memory、Overdraw 和加载时间。
|
||
8. 只有通过 Review Gate 后，才扩展到 Start、Chapter、Song Selection、Settings、Summary。
|
||
|
||
## 7. Codex 可以进一步自动化的工作
|
||
|
||
在 Pilot 规格稳定后，可以让 Codex 实现以下 Unity Editor 工具：
|
||
|
||
- 扫描 UI Texture 的 Naming、尺寸、Texture Type、Mip Maps、Alpha、Compression、Max Size。
|
||
- 输出“Sprite → Prefab/Scene”引用报告，辅助安全清理旧 PSD/PNG。
|
||
- 读取 Asset Manifest，检查缺失 State、Locale Text 烘焙风险和未批准资产。
|
||
- 批量创建/更新 SpriteAtlas 和平台 Override，但必须先由项目确认规范。
|
||
- 生成多分辨率 Screenshot Matrix，辅助人工视觉回归。
|
||
- 扫描 Scene/Prefab 中硬编码 TMP 文本和缺失 Localization Key。
|
||
- 统计 Texture Memory、StreamingAssets 平台冗余与 Build Size 变化。
|
||
|
||
这些自动化应在 Pilot 确认后编写，否则工具会把尚未决定的美术规范固化到工程里。
|
||
|
||
## 8. AI Asset Manifest 模板
|
||
|
||
建议保存为 CSV/JSON，至少包含：
|
||
|
||
```text
|
||
asset_id
|
||
screen
|
||
role
|
||
source_path
|
||
runtime_path
|
||
dimensions
|
||
alpha_required
|
||
slice_border
|
||
states
|
||
prompt_version
|
||
reference_ids
|
||
reference_rights
|
||
generation_date
|
||
manual_edits
|
||
unity_import_profile
|
||
prefab_references
|
||
review_status
|
||
reviewer
|
||
notes
|
||
```
|
||
|
||
命名示例：
|
||
|
||
```text
|
||
ui_dialog_bg_ch00_v001.png
|
||
ui_panel_base_9s_v003.png
|
||
ui_button_primary_normal_v002.png
|
||
ui_button_primary_focused_v002.png
|
||
ui_icon_settings_gear_v001.png
|
||
```
|
||
|
||
不要把“final”写进文件名；版本和 Approval 状态由 Manifest 管理。
|
||
|
||
## 9. 质量与安全红线
|
||
|
||
- 不生成或保留可识别的第三方 Logo、角色、UI Trade Dress 或受保护品牌元素。
|
||
- 不用具体艺术家/游戏名要求模仿；用颜色、构图、材质、密度、光线、形状等可验证特征描述。
|
||
- 不让 AI 在资产里生成玩家会阅读的正式文本。
|
||
- 不直接覆盖现有生产资产；先做新文件、替换引用、A/B 验证，再清理旧资源。
|
||
- 不因为“看起来更精细”就接受更高的 Texture Memory、透明覆盖和 Loading 成本。
|
||
- 不批量生成大量近似资产；优先复用 Panel、Icon Grid、Token 和 Shader。
|
||
- 不把聊天记录当作唯一 Source；保存 Prompt、Reference、Working File 和 Export。
|
||
|
||
## 10. 何时可以开始
|
||
|
||
满足以下条件即可开始 Dialogue Pilot：
|
||
|
||
- [x] `release-readiness-roadmap.md` 的 `DEC-001`、`DEC-003` 已确认：Windows、Android、iOS，以及 `en`、`zh-CN`、`ja`、`ko`、`vi-VN`。
|
||
- [ ] `UI-001` UI Inventory 至少完成 Dialogue Screen。
|
||
- [ ] `UI-002` 有一版可用的 Color/Type/Spacing/Shape Token。
|
||
- [ ] 选定一张现有 Dialogue Mockup 作为 Reference。
|
||
- [ ] 明确 Pilot 的性能预算，并将 Windows、Android、iOS 横屏与 Safe Area 写入 Asset Contract。
|
||
- [ ] 先建立复制的测试 Prefab/Scene，不直接覆盖生产资源。
|
||
|
||
满足后，可以直接让 Codex 执行：
|
||
|
||
> “按照 `docs/ai-assisted-ui-art-workflow.md`，为 Dialogue Pilot 创建 Asset Contract，并使用现有 Dialogue Mockup 生成 `UI-DIALOG-BG-001` 的候选图。”
|