@a9i5k4/dsh-auto-memory 3.0.0 → 3.0.1

package/docs/internal/ART-DIRECTION-WIREFRAME.md

@@ -1,181 +1,191 @@
-# 美术方向与动效规格（线框稿 · EVA 式克制线描 · 24fps）
-
-> 生成时间：2026-09-10 · 配套：`docs/internal/DESIGN-OVERHAUL-PRE-RESEARCH.md`（排期与边界）
-> 本文用途：把「线框稿 + 克制线描 + 动漫人物 + 24 帧动效」翻译成**可施工的规格**；其中 §5 是**可直接交给 Astra 的交付契约**。
-> 待补输入：官方 DSH 网页的确切 URL/截图（你提供后并入 §1.1）。
-
----
-
-## 1. 参考系（三层，已核实）
-
-### 1.1 官方 DSH（代码级）
-- 品牌元件：`@deepseek-ai/dsh-client-ui-primitives` 的 **`FishLogo`（鲸鱼标）** + **`BrandWordmark`（字标）**；官方品牌插件 `dsh-client-ui-brand-official` 只注册侧栏的 `sidebar.brand.mark` / `sidebar.brand.name` 两个插槽。
-- 视觉底座：`dsh-client-ui-theme` 定义 **`--dsw-*` 令牌**（79 个公开语义别名，纯颜色层，亮/暗自动切换）。
-- 结论：**官方语言 = 记号（鲸鱼）+ 克制排版 + 令牌化配色**——与"线框稿 + 克制色"的方向天然一致。
-
-### 1.2 本项目首页现有令牌（可复用，别推翻）
-`docs/landing/index.html` 的 `:root`：暖纸 `#F4F1EB` / 次纸 `#ECE8DF` / 墨 `#17171A` / 灰墨 `#5A5A60` / 浅墨 `#9B9BA0` / 实线 `#17171A` / 软线 `rgba(23,23,26,.16)` / **信号橙 `#E9470C`** / 橙墨 `#B23708`；`--max:1240px`、`--gutter:24px`；自述"现代主义·国际主义：纯色底+墨字、单一信号橙、12 列网格、1px 细线、无渐变无圆角"。
-
-**关键判断：这套配色本身就是「线描 + 克制色」的现成实现。** 你新给的方向不需要推翻它，而是**从它长出来**——把水彩插画换成线稿插画，把动效从"渐显上浮"换成"24fps 线描绘制"。这是本次首页改造工作量可控的根本原因。
-
-### 1.3 现有角色资产
-- 定妆：`docs/banner.jpg`（1672×941）——**蓝发蓝眼的水彩/厚涂动漫少女**，深蓝底、金线星图、手中书本与记忆卡匣。
-- 六幕宣传图：`docs/screenshots/promo/promo-1..6-*.png`（1280×720，共 3.11 MB）。
-- 生图规范：`artifacts/logo/BANNER-SERIES-PROMPTS.md`（含"角色辨识内核：蓝发蓝眼的动漫少女"与逐幕 prompt）。
-
----
-
-## 2. 风格定义：线框稿（Wireframe）× EVA 式克制线描
-
-### 2.1 可执行色板（4 主色 + 3 灰阶）
-
-| 角色 | 值 | 用途 | 占比 |
-| --- | --- | --- | --- |
-| 纸 | `#F4F1EB` | 底 | — |
-| 墨 | `#17171A` | 结构线、正文 | 线为主 |
-| 灰墨 / 浅墨 | `#5A5A60` / `#9B9BA0` | 标注、次级线、禁用态 | ~15% |
-| **信号橙** | `#E9470C`（墨版 `#B23708`） | **唯一强调色**：焦点、当前态、关键数字 | **≤5%** |
-| 警示黄 | `#E8C584`（仅警示条） | 限制/已知问题 | 极少量 |
-| 蓝（仅角色） | 发丝 `#2B4A8B`→`#6E8FD8`、瞳孔 `#2B6FD8` | **只给角色**，不参与 UI | 极少量 |
-
-**铁律**：任一屏内「信号橙」出现面积不超过 5%；蓝**只属于角色**，若 UI 里出现蓝，视觉上就会被读成"另一个角色"。
-
-### 2.2 线宽层级（工程图语言）
-
-| 层级 | 线宽 | 用在哪 |
-| --- | --- | --- |
-| 网格/标注线 | 0.75px（`stroke-width:.75`） | 坐标网格、尺寸线、引线 |
-| 结构线 | 1px | 分区、卡片边、表头 |
-| 轮廓线 | 1.5px | 角色外轮廓、图标主形 |
-| 重点线 | 2.5px | 标题下划线、当前页签、CTA 边框 |
-
-### 2.3 工程图元素（把"可审计/有证据链"的产品性格画出来）
-
-- **尺寸标注**：`|←—— 128k ——→|` 形式的 token 配额标注；
-- **剖面线**：45° 细排线（`repeating-linear-gradient`）用于"归档/压缩"这类被压缩过的区域；
-- **编号圆点**：`①②③` 与模块编号（M1–M7 已有叙事基础）；
-- **CAUTION 条**：黄底黑字的横条，用于"已知限制""默认关闭"；
-- **图注**：等宽小字 `FIG.03 — 三层记忆的数据流`。
-
-### 2.4 禁止项（与现有 landing 自述一致，写成硬约束）
-渐变、投影、玻璃（`backdrop-filter`）、圆角卡片、装饰性光效、emoji 堆砌、"营销腔"形容词。
-
----
-
-## 3. 角色规范（水彩 → 线稿）
-
-- **辨识内核不可丢**：蓝发蓝眼。（沿用 `BANNER-SERIES-PROMPTS.md` 已确立的口径）
-- **迁移要点**：①以轮廓线为主，蓝色只保留在**发丝高光与瞳孔**两处（着色面积 ≤ 角色面积 12%）；②服装从厚涂简化为 **3-4 组结构线**（衣领/袖口/裙摆/腰带）；③去掉水彩晕染与星光粒子，改用**工程图排线**做阴影；④手中的书本/记忆卡匣保留——它们是"记忆"的具象道具。
-- **表情/姿态最小集**（每套都要出定妆）：①静立持书（Hero 基准）②呼吸（3 帧循环）③眨眼（3 帧）④侧目看屏幕 ⑤抬手点化（技能固化）⑥翻页（日志/检索）。
-- **定妆图先出**：一张正面全身 + 一张 3/4 侧（线稿，透明底 PNG，2x）。**这是后续所有素材的基准**，也是 Astra 的输入。
-
----
-
-## 4. 动效规范（24fps）
-
-### 4.1 帧率与时序表
-
-| 场景 | 时长 | 帧数（24fps） | 循环 | 优先级 |
-| --- | --- | --- | --- | --- |
-| Hero 线稿自绘（线条从 0 画出） | 1.5s | 36 | 一次性 | P0 |
-| 角色呼吸 | 3s | 72 | 循环 | P0 |
-| 角色眨眼 | 0.25s | 6 | 每 4-8s 随机触发 | P0 |
-| 数据流动线（观察→检索→注入→证据） | 2s | 48 | 循环 | P1 |
-| 章节转场（出现/擦除） | 0.6s | 14 | 一次性 | P1 |
-| 六幕宣传图轮播 | 每幕 5s | — | 循环 | P2 |
-
-### 4.2 技术形态与分工（关键：可拼装）
-
-| 形态 | 谁做 | 优点 | 代价 |
-| --- | --- | --- | --- |
-| **SVG 路径自绘**（`stroke-dashoffset`） | **我** | 矢量无极缩放、体积小（KB 级）、可随主题变色、可无障碍降级 | 画不了手绘角色细节 |
-| **PNG 序列帧**（24fps，透明底） | **Astra** | 手绘质感最好、逐帧可控 | 体积大（需严格预算）、要用 JS 播放器 |
-| **WebM / MP4**（无音轨，循环点对齐） | Astra（或我压缩） | 体积/质量平衡好 | 兼容与自动播放需处理，不能透明（可用 chroma/遮罩近似） |
-| **CSS `steps()` 逐帧** | 我 | 实现简单、无 JS | 只适合短循环 |
-
-**推荐组合（分工清晰、可并行）**：角色表演 = **Astra 出 PNG 序列（透明底）**；线条/网格/数据流/版式动效 = **我出 SVG + CSS**；最后由我在 `index.html` 里合成并做性能与无障碍降级。
-
-### 4.3 性能与无障碍预算（硬指标）
-
-- 首屏动效总体积：**≤400 KB 原始 / ≤250 KB gzip**；移动端首屏只允许 **2 个动效同屏**。
-- **LCP 不退化**：动效资源在 `load` 之后启动（`requestIdleCallback`），首帧静态图先行（`<img>` 占位，尺寸写死避免 CLS）。
-- **`prefers-reduced-motion: reduce` 必须降级为静态首帧**（现有 landing 已有该分支，扩展即可）。
-- 24fps 序列帧播放器：预解码前 N 帧后立即播放，其余流式解码；切到后台标签页暂停。
-
----
-
-## 5. 交给 Astra 的交付契约（可直接转发）
-
-**任务**：为 `dsh-auto-memory` 官网首页制作 **24fps 角色动画**（线框稿 + EVA 式克制线描风）。
-
-**风格约束**
-1. 线描为主，纸白底（`#F4F1EB`）+ 墨线（`#17171A`）；允许的彩色只有两处：发丝与瞳孔的蓝（`#2B4A8B`–`#6E8FD8` / `#2B6FD8`），以及**面积 ≤5%** 的信号橙（`#E9470C`）点缀。
-2. 禁止：渐变、投影、玻璃质感、圆角卡片、水彩晕染、星光粒子。阴影用 45° 工程排线表达。
-3. 角色辨识内核：**蓝发蓝眼的动漫少女**（参考 `docs/banner.jpg`），服装简化为 3-4 组结构线。
-
-**交付物清单**
-1. **定妆图 2 张**：正面全身 + 3/4 侧；线稿；透明底 PNG；2x（角色高 ≥1600px）。
-2. **动画序列帧**（三段，各自独立目录）：
-   - `hero/` Hero 线稿自绘：36 帧，一次性，末帧=完整静帧；
-   - `idle/` 呼吸+眨眼：呼吸 72 帧循环（首尾帧必须一致）+ 眨眼 6 帧（独立段，随机触发）；
-   - `gaze/` 侧目/抬手点化：可选，24-48 帧。
-3. **格式**：PNG-24 + alpha，sRGB，**不烘焙背景**；命名 `hero_0000.png … hero_0035.png`（4 位补零，从 0000 起）。
-4. **分层**：角色层与道具层（书/卡匣）分开导出，便于我做视差与合成。
-5. **可选**：整段 WebM（VP9，无音轨，`yuv420p`），循环段首尾帧对齐。
-
-**验收清单**
-- [ ] 循环段首尾帧**逐像素一致**（无跳帧感）
-- [ ] 透明边缘无白边/灰边（导出前做 1px 收缩）
-- [ ] 锚点固定：角色脚底中线在每帧同一像素坐标（我会给画布与锚点坐标）
-- [ ] 单帧 ≤150 KB（2x、透明）；单段总 ≤8 MB
-- [ ] 线条粗细与 §2.2 的线宽层级一致（轮廓 1.5px / 结构 1px @1x）
-- [ ] 无渐变、无投影、无玻璃（对照 §5 风格约束逐条）
-- [ ] 提供一张"动效节拍表"：每段的关键帧号与其含义（便于我对齐 SVG 图层）
-
-**画布与锚点（我这边定的）**
-- 画布：`1200×1200` @1x（导出 2x = 2400×2400），透明底；
-- 角色锚点：脚底中线位于 `(600, 1080)` @1x；角色高约 900px；
-- 头顶安全区：上留 120px（给标注线与编号圆点）。
-
-**我这边的集成点**
-- 挂载位：`docs/landing/index.html` 的 `<section id="hero">` → `<div data-dam-anim="hero">`（占位与回退首帧 `<img>` 已预留）；
-- 播放策略：IntersectionObserver 进入视口才启动；`prefers-reduced-motion` 直接显示静态首帧；
-- 体积超预算时我会先做 WebP/AVIF 转码或降帧（24→12fps）处理，并同步告知。
-
----
-
-## 6. 分工与我的能力边界（诚实评估）
-
-| 工作 | 谁 | 说明 |
-| --- | --- | --- |
-| 版式、网格、线稿风格的系统化（SVG/CSS） | **我** | 这是我的强项：矢量线条、自绘动画、响应式与双语、性能预算 |
-| 数据流/标注/网格/转场等**非角色**动效 | **我** | SVG `stroke-dashoffset` + CSS `steps()`，体积 KB 级 |
-| 角色**手绘逐帧表演**（呼吸/眨眼/发丝/翻页） | **Astra** | 逐帧手绘的质感与"高级感"目前更靠得住；我给规格、给画布、给锚点、负责合成 |
-| 角色**线稿化再设计**（水彩→线稿） | Astra（或你指定的画师/模型） | 若你另有角色设定图，以你的为准 |
-| 页面工程、集成、性能与无障碍降级 | **我** | 与 §4.3 预算绑定 |
-
-一句话：**"24 帧动效"里，线条与版式部分我现在就能做；角色的逐帧表演交给 Astra 更稳——我把交接契约写好了，两边可以并行。**
-
----
-
-## 7. 时间线重估（AI 协作节奏）
-
-| 阶段 | 内容 | AI 协作下的现实耗时 | 卡点 |
-| --- | --- | --- | --- |
-| D0 | 设计令牌冻结（色板/线宽/间距/字号）+ 定妆图线稿化 | 0.5 天 | 需要你 1 次评审 |
-| D1-D2 | 界面一期：令牌落地 + 7 个组件原语 + 设置台分组 + 幽灵键/焦点态修复 | **2 天**（可发版） | 我能连续产出；你目视签收 |
-| D3 | 面板 IA 重排（插槽 spike → 侧栏面板/右侧文档页/对话内状态条） | 1 天 | spike 结果未知（有回退） |
-| D4 | 首页线稿版**静态稿**（版式 + 线稿插画位 + 工程图元素） | 1 天 | 需要角色线稿就位（可先用占位） |
-| D5 | 动效叠加：SVG 自绘 + 数据流 + 转场（我做） ⊕ Astra 序列帧（到货即插） | 1 天 + 等 Astra | **美术排期是外部依赖** |
-| D6 | 22 张界面图重拍 + 六幕宣传图更新 | 0.5 天 | 需 UI 冻结 + 重启 dsh web（你操作） |
-| D7 | 文档终校（此刻才对功能说明逐条核对）+ 发版 | 1 天 | 你说的"最后再核对功能说明"就在这一步 |
-
-**结论**：**「两三天」对界面一期（D1-D3）成立**；整套（含首页美术、动效、重拍、文档终校）串行约 **7 天**，其中真正的外部依赖是 **Astra 的动画排期** 与 **你的评审轮次**，不是我写代码的速度。
-
----
-
-## 8. 现在需要你给的 3 件东西
-
-1. **官方 DSH 网页的确切 URL 或截图**（我全网搜到的都是第三方介绍文，没有官方落地页；拿到后我把它的版式/色彩并入 §1）。
-2. **角色基准**：用 `docs/banner.jpg` 这张水彩版去线稿化，还是你另有角色设定图/三视图？（有的话给我文件路径）
-3. **是否现在就出风格探针**：我可以立刻生成 2-3 张探针图（线稿 + EVA 色板 + 工程图元素，含"角色站在线框稿舞台上"的 Hero 构图），先定调再进入 D1——需要你在「Ark9 生图」面板点一次批准。
+# ~~美术方向与动效规格（线框稿 · EVA 式克制线描 · 24fps）~~
+
+> ## ⛔ 本文已作废（2026-09-20）
+> **用户裁定**：「不能用原有的了……把原有的那个色调和风格丢掉，主要采用 **DeepSeek 主页**的形式。」
+> **取代文档**：`docs/internal/ART-DIRECTION-DEEPSEEK-20260920.md`
+> **作废理由**：本文 §2.4 禁止「玻璃 / 圆角卡片 / 投影 / 装饰光效」，而 **DeepSeek 官网自己全部在用**（`--ds-blur-glass:12px` · `--ds-radius-card:24px` · 三层阴影 · 60fps sparkle）⇒ 两套语言根本冲突。
+> **保留原因**：作历史参考（§3 角色迁移要点、§4.3 性能预算、§5 交付契约格式仍有借鉴价值）。
+
+---
+
+# 美术方向与动效规格（线框稿 · EVA 式克制线描 · 24fps）
+
+> 生成时间：2026-09-10 · 配套：`docs/internal/DESIGN-OVERHAUL-PRE-RESEARCH.md`（排期与边界）
+> 本文用途：把「线框稿 + 克制线描 + 动漫人物 + 24 帧动效」翻译成**可施工的规格**；其中 §5 是**可直接交给 Astra 的交付契约**。
+> 待补输入：官方 DSH 网页的确切 URL/截图（你提供后并入 §1.1）。
+
+---
+
+## 1. 参考系（三层，已核实）
+
+### 1.1 官方 DSH（代码级）
+- 品牌元件：`@deepseek-ai/dsh-client-ui-primitives` 的 **`FishLogo`（鲸鱼标）** + **`BrandWordmark`（字标）**；官方品牌插件 `dsh-client-ui-brand-official` 只注册侧栏的 `sidebar.brand.mark` / `sidebar.brand.name` 两个插槽。
+- 视觉底座：`dsh-client-ui-theme` 定义 **`--dsw-*` 令牌**（79 个公开语义别名，纯颜色层，亮/暗自动切换）。
+- 结论：**官方语言 = 记号（鲸鱼）+ 克制排版 + 令牌化配色**——与"线框稿 + 克制色"的方向天然一致。
+
+### 1.2 本项目首页现有令牌（可复用，别推翻）
+`docs/landing/index.html` 的 `:root`：暖纸 `#F4F1EB` / 次纸 `#ECE8DF` / 墨 `#17171A` / 灰墨 `#5A5A60` / 浅墨 `#9B9BA0` / 实线 `#17171A` / 软线 `rgba(23,23,26,.16)` / **信号橙 `#E9470C`** / 橙墨 `#B23708`；`--max:1240px`、`--gutter:24px`；自述"现代主义·国际主义：纯色底+墨字、单一信号橙、12 列网格、1px 细线、无渐变无圆角"。
+
+**关键判断：这套配色本身就是「线描 + 克制色」的现成实现。** 你新给的方向不需要推翻它，而是**从它长出来**——把水彩插画换成线稿插画，把动效从"渐显上浮"换成"24fps 线描绘制"。这是本次首页改造工作量可控的根本原因。
+
+### 1.3 现有角色资产
+- 定妆：`docs/banner.jpg`（1672×941）——**蓝发蓝眼的水彩/厚涂动漫少女**，深蓝底、金线星图、手中书本与记忆卡匣。
+- 六幕宣传图：`docs/screenshots/promo/promo-1..6-*.png`（1280×720，共 3.11 MB）。
+- 生图规范：`artifacts/logo/BANNER-SERIES-PROMPTS.md`（含"角色辨识内核：蓝发蓝眼的动漫少女"与逐幕 prompt）。
+
+---
+
+## 2. 风格定义：线框稿（Wireframe）× EVA 式克制线描
+
+### 2.1 可执行色板（4 主色 + 3 灰阶）
+
+| 角色 | 值 | 用途 | 占比 |
+| --- | --- | --- | --- |
+| 纸 | `#F4F1EB` | 底 | — |
+| 墨 | `#17171A` | 结构线、正文 | 线为主 |
+| 灰墨 / 浅墨 | `#5A5A60` / `#9B9BA0` | 标注、次级线、禁用态 | ~15% |
+| **信号橙** | `#E9470C`（墨版 `#B23708`） | **唯一强调色**：焦点、当前态、关键数字 | **≤5%** |
+| 警示黄 | `#E8C584`（仅警示条） | 限制/已知问题 | 极少量 |
+| 蓝（仅角色） | 发丝 `#2B4A8B`→`#6E8FD8`、瞳孔 `#2B6FD8` | **只给角色**，不参与 UI | 极少量 |
+
+**铁律**：任一屏内「信号橙」出现面积不超过 5%；蓝**只属于角色**，若 UI 里出现蓝，视觉上就会被读成"另一个角色"。
+
+### 2.2 线宽层级（工程图语言）
+
+| 层级 | 线宽 | 用在哪 |
+| --- | --- | --- |
+| 网格/标注线 | 0.75px（`stroke-width:.75`） | 坐标网格、尺寸线、引线 |
+| 结构线 | 1px | 分区、卡片边、表头 |
+| 轮廓线 | 1.5px | 角色外轮廓、图标主形 |
+| 重点线 | 2.5px | 标题下划线、当前页签、CTA 边框 |
+
+### 2.3 工程图元素（把"可审计/有证据链"的产品性格画出来）
+
+- **尺寸标注**：`|←—— 128k ——→|` 形式的 token 配额标注；
+- **剖面线**：45° 细排线（`repeating-linear-gradient`）用于"归档/压缩"这类被压缩过的区域；
+- **编号圆点**：`①②③` 与模块编号（M1–M7 已有叙事基础）；
+- **CAUTION 条**：黄底黑字的横条，用于"已知限制""默认关闭"；
+- **图注**：等宽小字 `FIG.03 — 三层记忆的数据流`。
+
+### 2.4 禁止项（与现有 landing 自述一致，写成硬约束）
+渐变、投影、玻璃（`backdrop-filter`）、圆角卡片、装饰性光效、emoji 堆砌、"营销腔"形容词。
+
+---
+
+## 3. 角色规范（水彩 → 线稿）
+
+- **辨识内核不可丢**：蓝发蓝眼。（沿用 `BANNER-SERIES-PROMPTS.md` 已确立的口径）
+- **迁移要点**：①以轮廓线为主，蓝色只保留在**发丝高光与瞳孔**两处（着色面积 ≤ 角色面积 12%）；②服装从厚涂简化为 **3-4 组结构线**（衣领/袖口/裙摆/腰带）；③去掉水彩晕染与星光粒子，改用**工程图排线**做阴影；④手中的书本/记忆卡匣保留——它们是"记忆"的具象道具。
+- **表情/姿态最小集**（每套都要出定妆）：①静立持书（Hero 基准）②呼吸（3 帧循环）③眨眼（3 帧）④侧目看屏幕 ⑤抬手点化（技能固化）⑥翻页（日志/检索）。
+- **定妆图先出**：一张正面全身 + 一张 3/4 侧（线稿，透明底 PNG，2x）。**这是后续所有素材的基准**，也是 Astra 的输入。
+
+---
+
+## 4. 动效规范（24fps）
+
+### 4.1 帧率与时序表
+
+| 场景 | 时长 | 帧数（24fps） | 循环 | 优先级 |
+| --- | --- | --- | --- | --- |
+| Hero 线稿自绘（线条从 0 画出） | 1.5s | 36 | 一次性 | P0 |
+| 角色呼吸 | 3s | 72 | 循环 | P0 |
+| 角色眨眼 | 0.25s | 6 | 每 4-8s 随机触发 | P0 |
+| 数据流动线（观察→检索→注入→证据） | 2s | 48 | 循环 | P1 |
+| 章节转场（出现/擦除） | 0.6s | 14 | 一次性 | P1 |
+| 六幕宣传图轮播 | 每幕 5s | — | 循环 | P2 |
+
+### 4.2 技术形态与分工（关键：可拼装）
+
+| 形态 | 谁做 | 优点 | 代价 |
+| --- | --- | --- | --- |
+| **SVG 路径自绘**（`stroke-dashoffset`） | **我** | 矢量无极缩放、体积小（KB 级）、可随主题变色、可无障碍降级 | 画不了手绘角色细节 |
+| **PNG 序列帧**（24fps，透明底） | **Astra** | 手绘质感最好、逐帧可控 | 体积大（需严格预算）、要用 JS 播放器 |
+| **WebM / MP4**（无音轨，循环点对齐） | Astra（或我压缩） | 体积/质量平衡好 | 兼容与自动播放需处理，不能透明（可用 chroma/遮罩近似） |
+| **CSS `steps()` 逐帧** | 我 | 实现简单、无 JS | 只适合短循环 |
+
+**推荐组合（分工清晰、可并行）**：角色表演 = **Astra 出 PNG 序列（透明底）**；线条/网格/数据流/版式动效 = **我出 SVG + CSS**；最后由我在 `index.html` 里合成并做性能与无障碍降级。
+
+### 4.3 性能与无障碍预算（硬指标）
+
+- 首屏动效总体积：**≤400 KB 原始 / ≤250 KB gzip**；移动端首屏只允许 **2 个动效同屏**。
+- **LCP 不退化**：动效资源在 `load` 之后启动（`requestIdleCallback`），首帧静态图先行（`<img>` 占位，尺寸写死避免 CLS）。
+- **`prefers-reduced-motion: reduce` 必须降级为静态首帧**（现有 landing 已有该分支，扩展即可）。
+- 24fps 序列帧播放器：预解码前 N 帧后立即播放，其余流式解码；切到后台标签页暂停。
+
+---
+
+## 5. 交给 Astra 的交付契约（可直接转发）
+
+**任务**：为 `dsh-auto-memory` 官网首页制作 **24fps 角色动画**（线框稿 + EVA 式克制线描风）。
+
+**风格约束**
+1. 线描为主，纸白底（`#F4F1EB`）+ 墨线（`#17171A`）；允许的彩色只有两处：发丝与瞳孔的蓝（`#2B4A8B`–`#6E8FD8` / `#2B6FD8`），以及**面积 ≤5%** 的信号橙（`#E9470C`）点缀。
+2. 禁止：渐变、投影、玻璃质感、圆角卡片、水彩晕染、星光粒子。阴影用 45° 工程排线表达。
+3. 角色辨识内核：**蓝发蓝眼的动漫少女**（参考 `docs/banner.jpg`），服装简化为 3-4 组结构线。
+
+**交付物清单**
+1. **定妆图 2 张**：正面全身 + 3/4 侧；线稿；透明底 PNG；2x（角色高 ≥1600px）。
+2. **动画序列帧**（三段，各自独立目录）：
+   - `hero/` Hero 线稿自绘：36 帧，一次性，末帧=完整静帧；
+   - `idle/` 呼吸+眨眼：呼吸 72 帧循环（首尾帧必须一致）+ 眨眼 6 帧（独立段，随机触发）；
+   - `gaze/` 侧目/抬手点化：可选，24-48 帧。
+3. **格式**：PNG-24 + alpha，sRGB，**不烘焙背景**；命名 `hero_0000.png … hero_0035.png`（4 位补零，从 0000 起）。
+4. **分层**：角色层与道具层（书/卡匣）分开导出，便于我做视差与合成。
+5. **可选**：整段 WebM（VP9，无音轨，`yuv420p`），循环段首尾帧对齐。
+
+**验收清单**
+- [ ] 循环段首尾帧**逐像素一致**（无跳帧感）
+- [ ] 透明边缘无白边/灰边（导出前做 1px 收缩）
+- [ ] 锚点固定：角色脚底中线在每帧同一像素坐标（我会给画布与锚点坐标）
+- [ ] 单帧 ≤150 KB（2x、透明）；单段总 ≤8 MB
+- [ ] 线条粗细与 §2.2 的线宽层级一致（轮廓 1.5px / 结构 1px @1x）
+- [ ] 无渐变、无投影、无玻璃（对照 §5 风格约束逐条）
+- [ ] 提供一张"动效节拍表"：每段的关键帧号与其含义（便于我对齐 SVG 图层）
+
+**画布与锚点（我这边定的）**
+- 画布：`1200×1200` @1x（导出 2x = 2400×2400），透明底；
+- 角色锚点：脚底中线位于 `(600, 1080)` @1x；角色高约 900px；
+- 头顶安全区：上留 120px（给标注线与编号圆点）。
+
+**我这边的集成点**
+- 挂载位：`docs/landing/index.html` 的 `<section id="hero">` → `<div data-dam-anim="hero">`（占位与回退首帧 `<img>` 已预留）；
+- 播放策略：IntersectionObserver 进入视口才启动；`prefers-reduced-motion` 直接显示静态首帧；
+- 体积超预算时我会先做 WebP/AVIF 转码或降帧（24→12fps）处理，并同步告知。
+
+---
+
+## 6. 分工与我的能力边界（诚实评估）
+
+| 工作 | 谁 | 说明 |
+| --- | --- | --- |
+| 版式、网格、线稿风格的系统化（SVG/CSS） | **我** | 这是我的强项：矢量线条、自绘动画、响应式与双语、性能预算 |
+| 数据流/标注/网格/转场等**非角色**动效 | **我** | SVG `stroke-dashoffset` + CSS `steps()`，体积 KB 级 |
+| 角色**手绘逐帧表演**（呼吸/眨眼/发丝/翻页） | **Astra** | 逐帧手绘的质感与"高级感"目前更靠得住；我给规格、给画布、给锚点、负责合成 |
+| 角色**线稿化再设计**（水彩→线稿） | Astra（或你指定的画师/模型） | 若你另有角色设定图，以你的为准 |
+| 页面工程、集成、性能与无障碍降级 | **我** | 与 §4.3 预算绑定 |
+
+一句话：**"24 帧动效"里，线条与版式部分我现在就能做；角色的逐帧表演交给 Astra 更稳——我把交接契约写好了，两边可以并行。**
+
+---
+
+## 7. 时间线重估（AI 协作节奏）
+
+| 阶段 | 内容 | AI 协作下的现实耗时 | 卡点 |
+| --- | --- | --- | --- |
+| D0 | 设计令牌冻结（色板/线宽/间距/字号）+ 定妆图线稿化 | 0.5 天 | 需要你 1 次评审 |
+| D1-D2 | 界面一期：令牌落地 + 7 个组件原语 + 设置台分组 + 幽灵键/焦点态修复 | **2 天**（可发版） | 我能连续产出；你目视签收 |
+| D3 | 面板 IA 重排（插槽 spike → 侧栏面板/右侧文档页/对话内状态条） | 1 天 | spike 结果未知（有回退） |
+| D4 | 首页线稿版**静态稿**（版式 + 线稿插画位 + 工程图元素） | 1 天 | 需要角色线稿就位（可先用占位） |
+| D5 | 动效叠加：SVG 自绘 + 数据流 + 转场（我做） ⊕ Astra 序列帧（到货即插） | 1 天 + 等 Astra | **美术排期是外部依赖** |
+| D6 | 22 张界面图重拍 + 六幕宣传图更新 | 0.5 天 | 需 UI 冻结 + 重启 dsh web（你操作） |
+| D7 | 文档终校（此刻才对功能说明逐条核对）+ 发版 | 1 天 | 你说的"最后再核对功能说明"就在这一步 |
+
+**结论**：**「两三天」对界面一期（D1-D3）成立**；整套（含首页美术、动效、重拍、文档终校）串行约 **7 天**，其中真正的外部依赖是 **Astra 的动画排期** 与 **你的评审轮次**，不是我写代码的速度。
+
+---
+
+## 8. 现在需要你给的 3 件东西
+
+1. **官方 DSH 网页的确切 URL 或截图**（我全网搜到的都是第三方介绍文，没有官方落地页；拿到后我把它的版式/色彩并入 §1）。
+2. **角色基准**：用 `docs/banner.jpg` 这张水彩版去线稿化，还是你另有角色设定图/三视图？（有的话给我文件路径）
+3. **是否现在就出风格探针**：我可以立刻生成 2-3 张探针图（线稿 + EVA 色板 + 工程图元素，含"角色站在线框稿舞台上"的 Hero 构图），先定调再进入 D1——需要你在「Ark9 生图」面板点一次批准。

package/docs/internal/ART-DIRECTION-WIREFRAME.md.bak-superseded

@@ -0,0 +1,181 @@
+# 美术方向与动效规格（线框稿 · EVA 式克制线描 · 24fps）
+
+> 生成时间：2026-09-10 · 配套：`docs/internal/DESIGN-OVERHAUL-PRE-RESEARCH.md`（排期与边界）
+> 本文用途：把「线框稿 + 克制线描 + 动漫人物 + 24 帧动效」翻译成**可施工的规格**；其中 §5 是**可直接交给 Astra 的交付契约**。
+> 待补输入：官方 DSH 网页的确切 URL/截图（你提供后并入 §1.1）。
+
+---
+
+## 1. 参考系（三层，已核实）
+
+### 1.1 官方 DSH（代码级）
+- 品牌元件：`@deepseek-ai/dsh-client-ui-primitives` 的 **`FishLogo`（鲸鱼标）** + **`BrandWordmark`（字标）**；官方品牌插件 `dsh-client-ui-brand-official` 只注册侧栏的 `sidebar.brand.mark` / `sidebar.brand.name` 两个插槽。
+- 视觉底座：`dsh-client-ui-theme` 定义 **`--dsw-*` 令牌**（79 个公开语义别名，纯颜色层，亮/暗自动切换）。
+- 结论：**官方语言 = 记号（鲸鱼）+ 克制排版 + 令牌化配色**——与"线框稿 + 克制色"的方向天然一致。
+
+### 1.2 本项目首页现有令牌（可复用，别推翻）
+`docs/landing/index.html` 的 `:root`：暖纸 `#F4F1EB` / 次纸 `#ECE8DF` / 墨 `#17171A` / 灰墨 `#5A5A60` / 浅墨 `#9B9BA0` / 实线 `#17171A` / 软线 `rgba(23,23,26,.16)` / **信号橙 `#E9470C`** / 橙墨 `#B23708`；`--max:1240px`、`--gutter:24px`；自述"现代主义·国际主义：纯色底+墨字、单一信号橙、12 列网格、1px 细线、无渐变无圆角"。
+
+**关键判断：这套配色本身就是「线描 + 克制色」的现成实现。** 你新给的方向不需要推翻它，而是**从它长出来**——把水彩插画换成线稿插画，把动效从"渐显上浮"换成"24fps 线描绘制"。这是本次首页改造工作量可控的根本原因。
+
+### 1.3 现有角色资产
+- 定妆：`docs/banner.jpg`（1672×941）——**蓝发蓝眼的水彩/厚涂动漫少女**，深蓝底、金线星图、手中书本与记忆卡匣。
+- 六幕宣传图：`docs/screenshots/promo/promo-1..6-*.png`（1280×720，共 3.11 MB）。
+- 生图规范：`artifacts/logo/BANNER-SERIES-PROMPTS.md`（含"角色辨识内核：蓝发蓝眼的动漫少女"与逐幕 prompt）。
+
+---
+
+## 2. 风格定义：线框稿（Wireframe）× EVA 式克制线描
+
+### 2.1 可执行色板（4 主色 + 3 灰阶）
+
+| 角色 | 值 | 用途 | 占比 |
+| --- | --- | --- | --- |
+| 纸 | `#F4F1EB` | 底 | — |
+| 墨 | `#17171A` | 结构线、正文 | 线为主 |
+| 灰墨 / 浅墨 | `#5A5A60` / `#9B9BA0` | 标注、次级线、禁用态 | ~15% |
+| **信号橙** | `#E9470C`（墨版 `#B23708`） | **唯一强调色**：焦点、当前态、关键数字 | **≤5%** |
+| 警示黄 | `#E8C584`（仅警示条） | 限制/已知问题 | 极少量 |
+| 蓝（仅角色） | 发丝 `#2B4A8B`→`#6E8FD8`、瞳孔 `#2B6FD8` | **只给角色**，不参与 UI | 极少量 |
+
+**铁律**：任一屏内「信号橙」出现面积不超过 5%；蓝**只属于角色**，若 UI 里出现蓝，视觉上就会被读成"另一个角色"。
+
+### 2.2 线宽层级（工程图语言）
+
+| 层级 | 线宽 | 用在哪 |
+| --- | --- | --- |
+| 网格/标注线 | 0.75px（`stroke-width:.75`） | 坐标网格、尺寸线、引线 |
+| 结构线 | 1px | 分区、卡片边、表头 |
+| 轮廓线 | 1.5px | 角色外轮廓、图标主形 |
+| 重点线 | 2.5px | 标题下划线、当前页签、CTA 边框 |
+
+### 2.3 工程图元素（把"可审计/有证据链"的产品性格画出来）
+
+- **尺寸标注**：`|←—— 128k ——→|` 形式的 token 配额标注；
+- **剖面线**：45° 细排线（`repeating-linear-gradient`）用于"归档/压缩"这类被压缩过的区域；
+- **编号圆点**：`①②③` 与模块编号（M1–M7 已有叙事基础）；
+- **CAUTION 条**：黄底黑字的横条，用于"已知限制""默认关闭"；
+- **图注**：等宽小字 `FIG.03 — 三层记忆的数据流`。
+
+### 2.4 禁止项（与现有 landing 自述一致，写成硬约束）
+渐变、投影、玻璃（`backdrop-filter`）、圆角卡片、装饰性光效、emoji 堆砌、"营销腔"形容词。
+
+---
+
+## 3. 角色规范（水彩 → 线稿）
+
+- **辨识内核不可丢**：蓝发蓝眼。（沿用 `BANNER-SERIES-PROMPTS.md` 已确立的口径）
+- **迁移要点**：①以轮廓线为主，蓝色只保留在**发丝高光与瞳孔**两处（着色面积 ≤ 角色面积 12%）；②服装从厚涂简化为 **3-4 组结构线**（衣领/袖口/裙摆/腰带）；③去掉水彩晕染与星光粒子，改用**工程图排线**做阴影；④手中的书本/记忆卡匣保留——它们是"记忆"的具象道具。
+- **表情/姿态最小集**（每套都要出定妆）：①静立持书（Hero 基准）②呼吸（3 帧循环）③眨眼（3 帧）④侧目看屏幕 ⑤抬手点化（技能固化）⑥翻页（日志/检索）。
+- **定妆图先出**：一张正面全身 + 一张 3/4 侧（线稿，透明底 PNG，2x）。**这是后续所有素材的基准**，也是 Astra 的输入。
+
+---
+
+## 4. 动效规范（24fps）
+
+### 4.1 帧率与时序表
+
+| 场景 | 时长 | 帧数（24fps） | 循环 | 优先级 |
+| --- | --- | --- | --- | --- |
+| Hero 线稿自绘（线条从 0 画出） | 1.5s | 36 | 一次性 | P0 |
+| 角色呼吸 | 3s | 72 | 循环 | P0 |
+| 角色眨眼 | 0.25s | 6 | 每 4-8s 随机触发 | P0 |
+| 数据流动线（观察→检索→注入→证据） | 2s | 48 | 循环 | P1 |
+| 章节转场（出现/擦除） | 0.6s | 14 | 一次性 | P1 |
+| 六幕宣传图轮播 | 每幕 5s | — | 循环 | P2 |
+
+### 4.2 技术形态与分工（关键：可拼装）
+
+| 形态 | 谁做 | 优点 | 代价 |
+| --- | --- | --- | --- |
+| **SVG 路径自绘**（`stroke-dashoffset`） | **我** | 矢量无极缩放、体积小（KB 级）、可随主题变色、可无障碍降级 | 画不了手绘角色细节 |
+| **PNG 序列帧**（24fps，透明底） | **Astra** | 手绘质感最好、逐帧可控 | 体积大（需严格预算）、要用 JS 播放器 |
+| **WebM / MP4**（无音轨，循环点对齐） | Astra（或我压缩） | 体积/质量平衡好 | 兼容与自动播放需处理，不能透明（可用 chroma/遮罩近似） |
+| **CSS `steps()` 逐帧** | 我 | 实现简单、无 JS | 只适合短循环 |
+
+**推荐组合（分工清晰、可并行）**：角色表演 = **Astra 出 PNG 序列（透明底）**；线条/网格/数据流/版式动效 = **我出 SVG + CSS**；最后由我在 `index.html` 里合成并做性能与无障碍降级。
+
+### 4.3 性能与无障碍预算（硬指标）
+
+- 首屏动效总体积：**≤400 KB 原始 / ≤250 KB gzip**；移动端首屏只允许 **2 个动效同屏**。
+- **LCP 不退化**：动效资源在 `load` 之后启动（`requestIdleCallback`），首帧静态图先行（`<img>` 占位，尺寸写死避免 CLS）。
+- **`prefers-reduced-motion: reduce` 必须降级为静态首帧**（现有 landing 已有该分支，扩展即可）。
+- 24fps 序列帧播放器：预解码前 N 帧后立即播放，其余流式解码；切到后台标签页暂停。
+
+---
+
+## 5. 交给 Astra 的交付契约（可直接转发）
+
+**任务**：为 `dsh-auto-memory` 官网首页制作 **24fps 角色动画**（线框稿 + EVA 式克制线描风）。
+
+**风格约束**
+1. 线描为主，纸白底（`#F4F1EB`）+ 墨线（`#17171A`）；允许的彩色只有两处：发丝与瞳孔的蓝（`#2B4A8B`–`#6E8FD8` / `#2B6FD8`），以及**面积 ≤5%** 的信号橙（`#E9470C`）点缀。
+2. 禁止：渐变、投影、玻璃质感、圆角卡片、水彩晕染、星光粒子。阴影用 45° 工程排线表达。
+3. 角色辨识内核：**蓝发蓝眼的动漫少女**（参考 `docs/banner.jpg`），服装简化为 3-4 组结构线。
+
+**交付物清单**
+1. **定妆图 2 张**：正面全身 + 3/4 侧；线稿；透明底 PNG；2x（角色高 ≥1600px）。
+2. **动画序列帧**（三段，各自独立目录）：
+   - `hero/` Hero 线稿自绘：36 帧，一次性，末帧=完整静帧；
+   - `idle/` 呼吸+眨眼：呼吸 72 帧循环（首尾帧必须一致）+ 眨眼 6 帧（独立段，随机触发）；
+   - `gaze/` 侧目/抬手点化：可选，24-48 帧。
+3. **格式**：PNG-24 + alpha，sRGB，**不烘焙背景**；命名 `hero_0000.png … hero_0035.png`（4 位补零，从 0000 起）。
+4. **分层**：角色层与道具层（书/卡匣）分开导出，便于我做视差与合成。
+5. **可选**：整段 WebM（VP9，无音轨，`yuv420p`），循环段首尾帧对齐。
+
+**验收清单**
+- [ ] 循环段首尾帧**逐像素一致**（无跳帧感）
+- [ ] 透明边缘无白边/灰边（导出前做 1px 收缩）
+- [ ] 锚点固定：角色脚底中线在每帧同一像素坐标（我会给画布与锚点坐标）
+- [ ] 单帧 ≤150 KB（2x、透明）；单段总 ≤8 MB
+- [ ] 线条粗细与 §2.2 的线宽层级一致（轮廓 1.5px / 结构 1px @1x）
+- [ ] 无渐变、无投影、无玻璃（对照 §5 风格约束逐条）
+- [ ] 提供一张"动效节拍表"：每段的关键帧号与其含义（便于我对齐 SVG 图层）
+
+**画布与锚点（我这边定的）**
+- 画布：`1200×1200` @1x（导出 2x = 2400×2400），透明底；
+- 角色锚点：脚底中线位于 `(600, 1080)` @1x；角色高约 900px；
+- 头顶安全区：上留 120px（给标注线与编号圆点）。
+
+**我这边的集成点**
+- 挂载位：`docs/landing/index.html` 的 `<section id="hero">` → `<div data-dam-anim="hero">`（占位与回退首帧 `<img>` 已预留）；
+- 播放策略：IntersectionObserver 进入视口才启动；`prefers-reduced-motion` 直接显示静态首帧；
+- 体积超预算时我会先做 WebP/AVIF 转码或降帧（24→12fps）处理，并同步告知。
+
+---
+
+## 6. 分工与我的能力边界（诚实评估）
+
+| 工作 | 谁 | 说明 |
+| --- | --- | --- |
+| 版式、网格、线稿风格的系统化（SVG/CSS） | **我** | 这是我的强项：矢量线条、自绘动画、响应式与双语、性能预算 |
+| 数据流/标注/网格/转场等**非角色**动效 | **我** | SVG `stroke-dashoffset` + CSS `steps()`，体积 KB 级 |
+| 角色**手绘逐帧表演**（呼吸/眨眼/发丝/翻页） | **Astra** | 逐帧手绘的质感与"高级感"目前更靠得住；我给规格、给画布、给锚点、负责合成 |
+| 角色**线稿化再设计**（水彩→线稿） | Astra（或你指定的画师/模型） | 若你另有角色设定图，以你的为准 |
+| 页面工程、集成、性能与无障碍降级 | **我** | 与 §4.3 预算绑定 |
+
+一句话：**"24 帧动效"里，线条与版式部分我现在就能做；角色的逐帧表演交给 Astra 更稳——我把交接契约写好了，两边可以并行。**
+
+---
+
+## 7. 时间线重估（AI 协作节奏）
+
+| 阶段 | 内容 | AI 协作下的现实耗时 | 卡点 |
+| --- | --- | --- | --- |
+| D0 | 设计令牌冻结（色板/线宽/间距/字号）+ 定妆图线稿化 | 0.5 天 | 需要你 1 次评审 |
+| D1-D2 | 界面一期：令牌落地 + 7 个组件原语 + 设置台分组 + 幽灵键/焦点态修复 | **2 天**（可发版） | 我能连续产出；你目视签收 |
+| D3 | 面板 IA 重排（插槽 spike → 侧栏面板/右侧文档页/对话内状态条） | 1 天 | spike 结果未知（有回退） |
+| D4 | 首页线稿版**静态稿**（版式 + 线稿插画位 + 工程图元素） | 1 天 | 需要角色线稿就位（可先用占位） |
+| D5 | 动效叠加：SVG 自绘 + 数据流 + 转场（我做） ⊕ Astra 序列帧（到货即插） | 1 天 + 等 Astra | **美术排期是外部依赖** |
+| D6 | 22 张界面图重拍 + 六幕宣传图更新 | 0.5 天 | 需 UI 冻结 + 重启 dsh web（你操作） |
+| D7 | 文档终校（此刻才对功能说明逐条核对）+ 发版 | 1 天 | 你说的"最后再核对功能说明"就在这一步 |
+
+**结论**：**「两三天」对界面一期（D1-D3）成立**；整套（含首页美术、动效、重拍、文档终校）串行约 **7 天**，其中真正的外部依赖是 **Astra 的动画排期** 与 **你的评审轮次**，不是我写代码的速度。
+
+---
+
+## 8. 现在需要你给的 3 件东西
+
+1. **官方 DSH 网页的确切 URL 或截图**（我全网搜到的都是第三方介绍文，没有官方落地页；拿到后我把它的版式/色彩并入 §1）。
+2. **角色基准**：用 `docs/banner.jpg` 这张水彩版去线稿化，还是你另有角色设定图/三视图？（有的话给我文件路径）
+3. **是否现在就出风格探针**：我可以立刻生成 2-3 张探针图（线稿 + EVA 色板 + 工程图元素，含"角色站在线框稿舞台上"的 Hero 构图），先定调再进入 D1——需要你在「Ark9 生图」面板点一次批准。