Soullies/ichni_Official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9fd5f098ab3fea65ca7cd79049169c169a52a598
ichni_Official/docs/ai-assisted-ui-art-workflow.md

16 KiB
Raw Blame History

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、一次只做一个定向修改，并把复杂文字排版留到设计工具中完成：

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、是否无文字、留白和导出用途。

示例：

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 示例：

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.

局部编辑示例：

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。

推荐未来目录：

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，至少包含：

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

命名示例：

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：

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

Reference in New Issue View Git Blame Copy Permalink