# UI 设计工作流（可复用）

> 一套把"美术基调 → 设计系统 → 概念锚 → 屏幕 → 动效 → UE"串起来的可复用流程。
> 入口页：`UI_Index.html`。本作美术基调：**SCP 机密档案终端 × WH grimdark**（见记忆 `project-ui-art-direction`）。
> 适用于本项目继续做 UI，也可换主题色后复用到别的项目。

---

## 0. 套件总览（都在 `Docs/SystemDesign/`）

| 文件 | 作用 | 复用方式 |
| --- | --- | --- |
| `ui-theme.css` | **共享样式**：tokens + 组件 + 动效关键帧 | 新页 `<link rel="stylesheet" href="ui-theme.css">` |
| `UI_Template.html` | 起手模板（已引 theme + 16:9 frame + 面板骨架） | 复制改名 → 在 `.screen` 里搭 |
| `UI_StyleGuide.html` | 设计系统规范（色板/尺度/组件/无障碍/文案） | 查组件 class / 设计依据 |
| `UI_Screens.html` | 12 屏布局预览（可切换） | 抄某屏布局 / 给人看 |
| `UI_Motion.html` | 动效库（6 组 ~26 效果，点卡片重播） | 查命名效果 + 复制关键帧 |
| `UI_Index.html` | 统一入口卡片墙 | 双击开它，点开全部 |
| `img/ui_mockup.png`·`ui_doll.png` | ControlNet 厚涂概念锚 / D-Class 立绘 | 视觉目标 / 背包纸娃娃 |

---

## 1. 流程（每一步的产出）

1. **锁美术基调** → 一句话定调 + tokens（色板/字体）。本作：灰黑为骨、血红点睛、等宽数据、涂改即机制、终端化框架。写进 `ui-theme.css` 的 `:root` 与 StyleGuide ①。
2. **建/扩设计系统** → 在 `UI_StyleGuide.html` 加组件并同步进 `ui-theme.css`。组件即"积木"。
3. **出概念锚（可选但强烈推荐）** → 用 ControlNet 给关键屏/角色出一张厚涂气氛图，定"要追的感觉"（见 §2）。
4. **搭屏幕** → 复制 `UI_Template.html`，用 theme 的 class 拼布局；或加进 `UI_Screens.html` 作为新 tab。
5. **挂动效** → 从 `UI_Motion.html` / `ui-theme.css` 取命名效果（boot-in/decode/scanline/glitch…），克制使用。
6. **校验** → 跑 `check_promosite.py`（改文件名即可复用）确认标签平衡/资源不缺/无残留词。
7. **进 UE** → 把 tokens 落成 `UCSUITheme` 数据资产，组件映射到 UMG（见 §4）。

> 原则：**先在 HTML 把"看得见的预览"做扎实再进 UE**——HTML 迭代快、改色改布局即时；UE 只做最终实装。

---

## 2. ControlNet 概念锚配方（厚涂气氛图）

本地 ComfyUI 必须在跑（`F:\ComfyUI_windows_portable\run_nvidia_gpu.bat`，端口 8188）。详见记忆 `reference-comfyui-image-pipeline`。

**画彩色分区控制图 → ControlNet 按布局生成**：
1. 用 PIL 画一张"控制图"（不同颜色=不同功能区 / 或人形姿势）：参考 `Scripts/ConceptArt/make_ui_control.py`（UI 分区）、`make_doll_control.py`（人形）、`make_map_control.py`（地图）。输出到 `F:\ComfyUI_windows_portable\ComfyUI\input\<名>.png`。
2. 在 `Scripts/ConceptArt/prompts.json` 加条目，带 **`style` 字段**（绕开全局环境后缀，做"单体/界面"图）。
3. 生成：
   ```powershell
   F:\ComfyUI_windows_portable\python_embeded\python.exe -u Scripts\ConceptArt\generate_concept_art.py `
     --engine zimage --lora "Warhammer fantasy_E9.safetensors:0.8" `
     --control <名>.png --cn-strength 0.6 --upscale --force --only <条目>
   ```
   - `--cn-strength`：UI/布局严格 ~0.85；角色立绘别太死板 ~0.6（0.8 会僵）。
4.（角色/单体）抠透明：`Scripts/ConceptArt/matte_luma.py`（黑底→透明 `*_cut.png`）。
5. 放进 HTML：图当背景或 `<img>`，边缘用 CSS 径向遮罩淡入面板。

---

## 3. 约定（红线）

- **颜色**：底色灰黑（保 grimdark 身份）；红=危险/主操作、琥珀=数值/财富；其余语义/分类色只服务对应系统、点缀不铺面。色盲：别只靠色相，配图标/文字。
- **涂改即机制**：未知/未鉴定/未解锁一律 `.rd` 黑条（`.rd.peek` 可悬停解密）；鉴定/解锁=解密。把 UI 缝进"残留档案"叙事。
- **文案语气**：终端冷峻、官僚、克制；命名统一：物资清单/工单/站点档案/操作员/归档；死亡=归档。
- **字体**：中文 Noto Sans CJK / 思源黑体 + 拉丁数字 Share Tech Mono / IBM Plex Mono；**勿用微软雅黑**（授权）。
- **动效**：克制、短(≤600ms)、有信息含义；战斗 HUD 最小化；全部受 `prefers-reduced-motion` 控制。
- **可读性**：正文不用红字、不叠扫描线/重噪点；正文 ≥13px、mono 标签 ≥11px。

---

## 4. UE5 落地映射

- 建中央 **`UCSUITheme`** 数据资产（颜色/画刷/字体 tokens），所有 UMG 控件取它、**禁止逐控件硬编码**。
- 复用 `M_InteractOutline_PP` 的红做危险/聚焦统一色；噪点/扫描线用一张静态贴图叠 RetainerBox，别每控件挂 shader。
- 组件 → UMG：面板头(红封条)=Border+NamedSlot；数值条=ProgressBar+自定义 Brush；背包格=UniformGridPanel+自绘 Slot；涂改=Image 黑条覆盖+鉴定后淡出；交互提示=世界空间 Widget；Tooltip=UMG ToolTip Widget；表格=ListView/TileView。
- 动效=UMG Animation（曲线对齐 §3 的时长/缓动）。

---

## 5. 加一个新屏（清单）

1. 复制 `UI_Template.html` → `UI_<名>.html`（或在 `UI_Screens.html` 加 `<section class="screen ...">` + 一个 nav tab + LABELS 项）。
2. 用 theme 的 class 拼布局；需要的新组件先加进 `ui-theme.css` + StyleGuide。
3.（可选）ControlNet 出张该屏的厚涂锚。
4. 挂动效（取自 Motion 库）。
5. 跑 `check_promosite.py`（把里面的目标文件名改成你的）校验。
6. 在 `UI_Index.html` 加一张卡片指向它。

> ⚠️ 若新屏整屏用 `display:flex`（如 `.scr3`/`.lobby`），记得**只在 `.active` 时设 display**（`.screen.X.active{display:flex}`），否则会盖过 `.screen{display:none}` 导致多屏常显——这是踩过的坑。