# 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` 的候选图。”