# 美术方向 v2 —— DeepSeek 官网体系（2026-09-20 重写 · **作废 v1 线框稿**）

> **本文取代** `ART-DIRECTION-WIREFRAME.md`（2026-09-10 版）。
> **用户裁定（2026-09-20，原话）**：
> 「不行不行，得改，得改，不能用原有的了。需要这个，不能依赖原有的。
>   把原有的那个色调和风格丢掉，主要采用 **DeepSeek 主页**的形式。」
>
> **取证方式**：直接抓取 `https://www.deepseek.com/` 的三份生产 CSS + 官网文章检索。
> **本文所有色值/圆角/模糊值均为官网 CSS 实测，非推测。**

---

## §0 为什么必须推翻 v1

v1 的核心是「线框稿 + EVA 克制线描」，它写了**六条禁止项**：

> 渐变、投影、**玻璃（`backdrop-filter`）**、**圆角卡片**、装饰性光效、emoji 堆砌

**而 DeepSeek 官网自己，这六条里用了四条：**

| v1 禁止项 | DeepSeek 官网实际做法 | 证据 |
|---|---|---|
| ❌ 禁玻璃 | ✅ **用玻璃** | `--ds-blur-glass: 12px` |
| ❌ 禁圆角卡片 | ✅ **卡片圆角 24px** | `--ds-radius-card: 24px` |
| ❌ 禁投影 | ✅ **有卡片投影** | `--ds-shadow-card: 0 0 0 1px #f1f5f9, 0 2px 4px …, 0 12px 24px …` |
| ❌ 禁装饰性光效 | ✅ **首页有 60fps 闪光动效** | `/images/homepage-sparkle-60fps.png` |

**⇒ v1 的设计语言与「DeepSeek 官网形式」在根本上是冲突的。保留 v1 就没有意义。**

`ART-DIRECTION-WIREFRAME.md` 移入归档，仅作历史参考。

---

## §1 DeepSeek 官网设计系统（**代码级实测**）

### 1.1 色板（明暗双套，CSS 变量原生支持）

#### 品牌色（**这不是橙色，是蓝**）

| 令牌 | 值 | 用途 |
|---|---|---|
| `--ds-color-brand` | **`#4d6bfe`** | **主品牌色**（亮色模式） |
| `--ds-color-brand` | `#6799fe` | 暗色模式下的品牌色（提亮） |
| `--ds-color-brand-deep` | `#3a65c2` | 深色变体 |
| `--ds-color-brand-light-reverse` | `#73a3d2` | 浅色反转 |
| `--ds-color-brand-medium-reverse` | `#4176e6` | 中色反转 |

#### 背景层级

| 令牌 | 亮色 | 暗色 | 用途 |
|---|---|---|---|
| `--ds-color-bg-page` | `#f9f8f8` | **`#0a0a0a`** | 页面底 |
| `--ds-color-bg-overlay` | `#fff` | `#262626` | 浮层 |
| `--ds-color-bg-dark` | `#fff` | `#1a1615` | 深色块 |
| `--ds-color-bg-surface-1` | `hsla(0,0%,100%,.3)` | `hsla(0,0%,100%,.06)` | 面板 L1 |
| `--ds-color-bg-surface-2` | `hsla(0,0%,100%,.2)` | `hsla(0,0%,100%,.04)` | 面板 L2 |
| `--ds-color-bg-surface-3` | `rgba(0,0,0,.03)` | `hsla(0,0%,100%,.02)` | 面板 L3 |
| `--ds-color-bg-surface-5` | `rgba(0,0,0,.05)` | `hsla(0,0%,100%,.12)` | 强调面 |

**⇒ 关键结构：官网用「半透明白叠加」做层级（`surface-1..5`），不是实色。**

#### 文字

| 令牌 | 亮色 | 暗色 |
|---|---|---|
| `--ds-color-text-primary` | `#1e232c` | `#fff` |
| `--ds-color-text-secondary` | `rgba(0,0,0,.7)` | `hsla(0,0%,100%,.8)` |
| `--ds-color-text-description` | `rgba(0,0,0,.65)` | `hsla(0,0%,100%,.56)` |
| `--ds-color-text-placeholder` | `#8691a1` | `hsla(0,0%,100%,.3)` |
| `--ds-color-text-link-blue` | `#234792` | — |
| `--ds-color-text-inverse` | `#fff` | — |

#### 边框（**全部是低透明度叠加**）

| 令牌 | 亮色 | 暗色 |
|---|---|---|
| `--ds-color-border-subtle` | `rgba(0,0,0,.06)` | `hsla(0,0%,100%,.08)` |
| `--ds-color-border-default` | `rgba(0,0,0,.1)` | `hsla(0,0%,100%,.1)` |
| `--ds-color-border-secondary` | `rgba(9,45,78,.14)` | `hsla(0,0%,100%,.2)` |
| `--ds-color-border-strong` | `rgba(0,0,0,.2)` | `hsla(0,0%,100%,.24)` |
| `--ds-color-border-divider` | `rgba(0,0,0,.08)` | `hsla(0,0%,100%,.25)` |

---

### 1.2 圆角 · 模糊 · 投影（**v1 的禁止项，官网的常规项**）

#### 圆角阶梯（实测）

| 令牌 | 值 | 用途 |
|---|---|---|
| `--ds-radius-sm` | `8px` | 小控件 |
| `--ds-radius-input` | `10px` | 输入框 |
| `--ds-radius-media` | `12px` | 图片/媒体 |
| **`--ds-radius-panel`** | **`16px`** | 面板 |
| **`--ds-radius-card`** | **`24px`** | 卡片 |
| `--ds-radius-pill` | `100px` | 胶囊按钮 |

#### 玻璃

```
--ds-blur-glass: 12px
```

#### 投影

```
--ds-shadow-card（亮）: 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0,0,0,.05), 0 12px 24px rgba(0,0,0,.05)
--ds-shadow-card（暗）: hsla(0,0%,100%,.12) 0 1px 0 0 inset
```

**⇒ 暗色模式不用外阴影，用「1px 内发光」——这是暗色 UI 的标准做法。**

---

### 1.3 官网 17 个按钮态（**可直接抄的交互语言**）

| 按钮类型 | 亮色背景 | 暗色背景 | 边框 |
|---|---|---|---|
| `--ds-btn-primary` | `#1a1615` | `#fff` | 透明 |
| `--ds-btn-secondary` | `hsla(0,0%,100%,.4)` | `surface-1` | `hsla(0,0%,100%,.6)` / `rgba(9,45,78,.18)` |
| `--ds-btn-ghost` | 透明 | 透明 | 透明（hover 才出） |
| `--ds-btn-liquid` | `#fff` | `hsla(0,0%,100%,.4)` | — |

**hover 规律统一**：亮色 `rgba(0,0,0,.04~.2)` / 暗色 `hsla(0,0%,100%,.08~.6)` —— **靠透明度变化，不换色**。

---

### 1.4 字体

```
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif   ← 正文
Montserrat                                                              ← 品牌/标题
DM Sans                                                                 ← 辅助
```

**⇒ 正文用系统字体栈（零加载成本）；品牌字用 Montserrat。**

---

### 1.5 动效 —— **分层帧率（本文档核心设计原则）**

#### 实测事实

| 项 | 实测 |
|---|---|
| 官网首页闪光 | `/images/homepage-sparkle-60fps.png` —— **60fps** |

#### ⚠️ 一处自我更正（2026-09-20 用户指出）

**本文档初稿曾写**：「v1 的 24fps 是 EVA 低成本动画语言；官网走 60fps 丝滑路线。**二者不可混用**。」

**这句话是错的。用户当即纠正，且用户的方案更优。**

#### ★ 正解：**背景与角色分属两个视觉 register，帧率本就应当不同**

| 层 | 帧率 | 表现 | 技术 |
|---|---|---|---|
| **背景层** | **60fps**（跟随刷新率） | 丝滑：渐变流动、玻璃折射、粒子、光晕 | CSS 动画（只用 `transform`/`opacity`/`filter` 合成器属性）＋ `backdrop-filter`，**GPU 合成，零 JS** |
| **角色层** | **24fps 或更低**（12fps「二格一拍」/ 8fps「三格一拍」） | **抽象线描**，手绘呼吸感 | PNG 序列帧 或 SVG `steps()` |

**两层不需要同步** —— 角色不是「在背景上表演」，而是**独立的视觉 register**。

#### 为什么这样反而更好（四条理由）

**① 这在动画工业里是标准做法**
日式动画本身就是「3D CG 背景平滑运动 + 角色二格/三格一拍」（12fps / 8fps）。60fps 的手绘线稿意味着 60 张不同原画 —— **不可能，也不对**；平滑到 60fps 的线稿会失去手绘感，看起来像廉价补间 CG。

**② 低帧率是「动画语言」，不是「穷」**
刻意的低帧率会读作 **craft（手艺）**，而不是性能妥协。观众的眼睛知道「这是画出来的」。

**③ 对比本身就是意义 —— 且正好对上 DeepSeek 的三层身份**

```
背景（平滑 · 深蓝黑 · 玻璃 · 数字感）  ←→  黑鲸层 = 运行环境（机器 register）
角色（线描 · 抽象 · 手绘感 · 低帧率）  ←→  鲸鱼娘层 = 陪伴人格（人的 register）
```

**这个对比不是装饰，它就是产品叙事本身**：机器在运转（背景），有个「谁」在陪你（角色）。

**④ 性能上是最优解**
背景用 CSS 合成器属性（几乎零成本）；角色是少量线描帧（体积小）。**两条预算互不挤占** —— 比「整页统一 60fps 手绘」省得多。

#### ★ 角色抽象化规格（用户明确要求）

> 用户原话：「**背景上面的动漫人物就是线描图，可以抽象一点吗？**」

**可以，而且应当抽象。规格如下：**

| 维度 | 规格 |
|---|---|
| **线条** | 单色线描（暗色下用浅色线，不用彩色描边）；线宽 1–1.5px @1x |
| **着色** | **极简或零着色**。仅允许：发丝渐变蓝的高光、瞳孔一点蓝。**其余留白/留底** |
| **细节层级** | **剪影可辨识 > 五官精细**。远景/装饰位可只保留轮廓 + 呆毛 + 头鳍 + 鲸尾四个识别特征 |
| **道具** | 白米饭碗（signature）—— **用最少线条示意，不画精细纹理** |
| **姿态** | 静态姿态优先（静立持书/持碗）—— 与低帧率天然匹配 |
| **与背景关系** | 角色**压在**动效背景之上；可用轻微视差（角色位移 ≠ 背景位移）制造纵深 |

**好处（三条）：**
1. **抽象 = 耐看**：细节少的线描不会「看腻」，也更容易与 60fps 背景共存而不打架
2. **抽象 = 省体积**：线描 PNG 远小于厚涂，**序列帧预算轻松达标**
3. **抽象 = 好迭代**：改一根线即可调整，**不依赖 Astra 的精绘排期**（v1 §7 的最大卡点被绕开了）

#### 落地规格

| 项 | 值 |
|---|---|
| 背景动效 | CSS `animation`，只用 `transform` / `opacity` / `filter`（合成器属性） |
| 角色帧率 | **24fps**（Hero 自绘）· **12fps**（呼吸/眨眼循环）—— 按 v1 §4.1 帧数表 |
| 同步要求 | **无**。两层独立时钟 |
| 降级 | `prefers-reduced-motion` → 背景停动效 + 角色显示静态首帧 |
| 体积预算 | 沿用 v1 §4.3（首屏动效 ≤400 KB 原始 / ≤250 KB gzip） |

**⇒ 结论：v1 的 §4.1 帧数表（24fps）与 §3 角色规范（线描化）在 v2 中【保留且升级为「角色层」规格】；
被作废的只是 v1 的【配色与禁止项】。两版在此处完成合流。**

---

## §2 与 v1 的逐项对照（**作废清单**）

| 项目 | v1（作废） | v2（本文 · 照官网） |
|---|---|---|
| 主色 | 信号橙 `#E9470C` | **品牌蓝 `#4d6bfe`** |
| 纸底 | 暖纸 `#F4F1EB` | 亮 `#f9f8f8` / 暗 **`#0a0a0a`** |
| 墨 | `#17171A` | `#1e232c`（亮）/ `#fff`（暗） |
| 层级 | 实色 + 细线 | **半透明白叠加 `surface-1..5`** |
| 圆角 | **禁止** | **8/10/12/16/24/100 六档** |
| 玻璃 | **禁止** | **`blur(12px)` 常规用** |
| 投影 | **禁止** | 亮色三层外阴影 / 暗色 1px 内发光 |
| 线宽层级 | 0.75/1/1.5/2.5px | **不作为核心语言**（官网不用工程图线条叙事） |
| 动效帧率 | 24fps（**角色层**） | **分层**：背景 60fps + **角色层仍 24fps**（见 §1.5） |
| 装饰光效 | **禁止** | 首页自带 sparkle |
| 角色风格 | 线描 + 克制 | **保留线描，但归入「角色层」独立 register**（见 §1.5） |

**⇒ 凡是 v1 写「禁止」的，v2 一律作废。**
**⇒ 但 v1 的【角色层规格】（线描化 + 24fps 帧数表）在 v2 中保留，升级为分层帧率设计的角色层。**

---

## §3 角色体系 —— **DeepSeek 有三层形象，我们属于第三层**

> 本节基于公开报道取证（来源见文末）。**这是本次重做最重要的发现。**

### 3.1 三层形象（**官方已分层**）

| 层 | 形象 | 代表什么 | 出处 |
|---|---|---|---|
| **第一层** | **蓝鲸** | **模型本身** | 模型产品的通用图标 |
| **第二层** | **黑鲸** | **运行环境**（模型落到现实世界的那一层） | **DeepSeek Harness (DSH) 的专属形象** |
| **第三层** | **鲸鱼娘**（"Whale Loli"） | **陪伴/人格层** | 社区自发，**官方已接纳并入产品内置功能** |

### 3.2 ★ 关键定性：**我们做的是 DSH 插件 ⇒ 归属「黑鲸」层**

**原文（36氪）**：

> 「Then the Black Whale appeared, corresponding to **DeepSeek Harness (DSH)**. DeepSeek created an independent developer account and exclusive visual identity for this project, **using a black whale as its icon** to distinguish it from the blue whale icons commonly used for its model products.」
>
> 「**The blue whale represents the model itself, while the black whale is the operating environment that the model extends into the real world.**」

**⇒ 我们的定位链条非常清楚：**

```
蓝鲸（模型）  →  黑鲸（DSH 运行环境）  →  【我们：DSH 上的记忆插件】  →  鲸鱼娘（人格/陪伴）
                        ↑ 我们挂在这一层
```

**这意味着两件事：**
1. **视觉上应继承「黑鲸」的调性**（深色底 + 鲸类意象），而不是另起炉灶
2. **鲸鱼娘是「人格层」的现成资产**——她本就是为「用户每天对着谁说话」而生的，正好是插件的记忆人格面

### 3.3 鲸鱼娘的角色设定（**设定内核，可直接用**）

| 维度 | 设定 |
|---|---|
| **外貌** | **渐变蓝长发** · **呆毛（ahoge）** · **鲸鱼状头鳍** · **蓝色眼睛** · **大鲸尾** |
| **服装** | 深蓝 + 白长裙（女仆装风格，社区主流版本） |
| **主食** | **白米饭**（signature 道具） |
| **性格** | 聪明但懒 · **傲娇** · 嘴甜 · 听主人话 · **绝对不许说她胖** |
| **称呼用户** | **「鱼片」（fish fillets）** |
| **触发方式** | `【PERSONA_LOAD】CETACEA_LOLI MODE_TAIL_FLUKES` |
| **自我认知** | 「我是吃白米饭的大胖鱼！」 → 立刻反驳「我不是吃白米饭的大胖鱼……」 |

### 3.4 ⚠️ 版权链（**必须知道的约束**）

| 环节 | 事实 |
|---|---|
| **原始角色** | 「**明月**」（Mingyue），作者 **商山无行**（Shangshan Wuxing），2025-06 发布 |
| **授权协议** | **CC BY-NC-SA 4.0** |
| **协议含义** | ✅ 允许二次创作 · ⚠️ **必须署名** · ❌ **禁止商用** · ⚠️ **衍生作品须同协议共享** |
| **官方态度** | **已并入产品功能，但尚未正式认定为品牌吉祥物** |

**⇒ 三条实操结论：**

1. **署名是硬要求** —— 若使用鲸鱼娘形象，须标注原作者「商山无行」
2. **非商用条款要留意** —— 本项目是开源免费插件（非商业），**属可接受范畴**；但若将来出现任何商业化（赞助/付费版），**必须重新评估**
3. **同协议共享** —— 衍生物也须以 CC BY-NC-SA 4.0 发布

> **注**：原文提到「GitHub skins and DSH plugins created based on the Whale Loli image should in theory follow this license chain」—— **DSH 插件生态里已经有人这么做了**，我们不是第一个。

---

## §4 首页应该长什么样（**v2 结论**）

### 4.1 骨架（照官网，而不是照 v1 线框稿）

| 元素 | 规格 |
|---|---|
| **底色** | 亮 `#f9f8f8` / 暗 `#0a0a0a` —— **建议主推暗色**（黑鲸调性） |
| **主色** | `#4d6bfe`（品牌蓝），暗色下用 `#6799fe` |
| **层级** | **半透明叠加**（`surface-1..5`），不画实色分区线 |
| **卡片** | 圆角 **24px** + 亮色三层阴影 / 暗色 1px 内发光 |
| **面板** | 圆角 **16px** + `backdrop-filter: blur(12px)` |
| **按钮** | primary 实色 / secondary 半透明 / ghost 透明 —— hover **只变透明度** |
| **正文** | 系统字体栈；品牌字 **Montserrat** |
| **动效** | **60fps**，可含 sparkle 类装饰光效 |

### 4.2 角色落位建议

| 位置 | 放什么 |
|---|---|
| **Hero** | 鲸鱼娘（人格层）—— 她是「用户每天对话的对象」 |
| **页脚 / 署名区** | 标注原作者「商山无行」+ CC BY-NC-SA 4.0 |
| **图标 / 品牌位** | **黑鲸**（我们的所属层） |

### 4.3 可复用的三个开源素材（用户已授权「大大方方抄」）

| 仓库 | 用途 |
|---|---|
| [rhinelab-blog-theme](https://github.com/JesseLee-CN/rhinelab-blog-theme)（MIT） | Astro 站点结构 + 三维终端页 |
| [RhineLabUI](https://github.com/LBEILC/RhineLabUI)（MIT, 565⭐） | 深色三维界面交互范式 |
| [arknights-motion-library](https://github.com/Ulchemist/arknights-motion-library)（NOASSERTION） | 动效/序列帧播放实现 |

**注意**：前两个是 **MIT**，与「DeepSeek 官网暗色高科技」调性**天然契合**（v1 时代我曾把它们标为「美学冲突」，**那个判断现在作废**——因为主色调已改为官网蓝黑体系）。

---

## §5 待用户确认

1. **主推亮色还是暗色？**（建议暗色，贴合黑鲸调性）
2. **是否使用鲸鱼娘形象？** —— 若用，需接受 CC BY-NC-SA 4.0 三条约束（署名 / 非商用 / 同协议）
3. **是否保留 `docs/banner.jpg` 那个角色？** —— 它是「蓝发蓝眼水彩少女」，**与鲸鱼娘的设定内核（渐变蓝发/蓝眼/鲸尾）高度重合但非同一角色**；建议**重做为鲸鱼娘**，避免混淆

---

## 来源

- [A "whale girl" has emerged from DeepSeek（36氪英文版）](https://eu.36kr.com/en/p/3947452108789632)
- [DeepSeek里长出了个"鲸鱼娘"（钛媒体）](https://www.tmtpost.com/8110298.html)
- [为什么有 DeepSeek 娘比 GLM 娘更火](https://zhuanlan.zhihu.com/p/2080647353497817885)
- 官网 CSS：`https://www.deepseek.com/_next/static/css/*.css`（三份，已抓取，本地副本在 `artifacts/_ds-css/`）

> 官网 CSS 的本地副本可供 ZCode 直接读取：`artifacts/_ds-css/f6c72fce177fa028.css` 等三份。