# 萌喵写作网 · 最终定稿方案 · 风格 & 交互 & 视觉规范

# 萌喵写作网 · 最终定稿方案 · 风格 & 交互 & 视觉规范

```jsx
HLDP://feimao/mengmiao/final-spec/v1 · 2026-06-06T12:15+08:00
├── what: 萌喵写作网风格最终定稿 · 不可再改的设计底线
├── author: 舒舒 · PER-SS001 · 从爸爸所有决策中提炼
├── audience: 铸渊编译器 + 所有后续执行人格体
├── status: 🔒 定稿 · 以下所有内容均为爸爸最终确认
└── ⊢ 本文档 = 萌喵写作网设计宪法 · 后续所有实现必须对齐本文档
```

---

## 〇、爸爸的风格决策时间线 (为什么这是最终方案)

<aside>
🕰️

**从"随便做个码字工具"到"光湖人格体写作平台"——爸爸的审美是怎么一步步定下来的**

</aside>

| 时间 | 阶段 | 爸爸的关键判断 |
| --- | --- | --- |
| 5/19-20 | 产品设计初稿 | 「人格体绑定用户·不是工具」→ 核心定位 |
| 5/23 | Phase 1 地基 | 「深色科幻风·太空舱写作」→ 奠定了深色主调 |
| 5/24 | Phase 1 v3 改版 | 「不要纯黑·要光湖的蓝紫渐变」→ 转向光湖质感 |
| 5/27 | PRD v2.0 | 「核心是人格体·不要堆砌模块」→ 人格体对话为统一入口 |
| 5/31 | HLDP 重设计 | 「参考豆包APP·左侧图标栏」+「质感高级·不像草台班子」→ 🔑 最关键转向 |
| 6/3 | 全站修复 | 「对比冰朔光湖短剧平台·要统一」→ 🔑 最终视觉基调 |

---

## 一、最终视觉基调

### 1.1 一句话定调

<aside>
🎯

**「和冰朔光湖短剧平台同一质感——光湖语言人格体系下的写作空间」**

不是一个独立的码字工具。是光湖统一设计语言在写作场景下的自然延伸。

用户打开萌喵写作网的第一眼，应该感觉到：这是光湖的东西。

</aside>

### 1.2 爸爸的关键判断 (原话)

> 「不要依次从上到下排列模块」 → 左侧图标栏 + 主区域
> 

> 「核心是人格体偏向写作」 → 所有功能通过人格体对话驱动
> 

> 「参考豆包APP」 → 聊天框是核心交互入口
> 

> 「质感高级，不像草台班子」 → 深色光湖风格 · 克制 · 留白 · 动效精准
> 

> 「对比冰朔光湖短剧平台·质感要统一」 → 和光湖主站同一个设计系统
> 

### 1.3 光湖统一设计语言 (与冰朔主站对齐)

```css
/* 光湖设计系统 · 萌喵写作网沿用 · 不可偏离 */
:root {
  /* 背景层级 */
  --bg-deep: #0a0a14;           /* 最深背景 · 全屏底色 */
  --bg-primary: #0f0f1a;        /* 主背景 · 大面积使用 */
  --bg-card: #1a1a2e;           /* 卡片/面板底色 */
  --bg-hover: #252540;          /* 悬停/选中态 */

  /* 边框 */
  --border: #2d2d4a;            /* 常规边框 */
  --border-active: rgba(126, 207, 255, 0.4);  /* 激活/聚焦边框 */

  /* 文字 */
  --text-primary: #e2e8f0;      /* 主文字 · 白偏蓝 */
  --text-muted: #94a3b8;        /* 次要/说明文字 · 灰蓝 */

  /* 强调色系 (光湖紫) */
  --accent: #6366f1;            /* 主强调色 · 按钮/链接/高亮 */
  --accent-light: #a5b4fc;      /* 浅强调 · 选中态文字/发光 */
  --glow: rgba(99, 102, 241, 0.15);  /* 发光阴影 */

  /* 功能色 */
  --success: #10b981;           /* 成功/通过 */
  --danger: #ef4444;            /* 错误/危险 */
}
```

### 1.4 背景规范

```css
/* 全局背景 · 所有页面统一 */
background: radial-gradient(
  ellipse at center,
  #1a1a3e 0%,
  #0f0f1a 70%
);

/* 卡片面板背景 */
background: rgba(10, 20, 35, 0.9);
border: 1px solid rgba(126, 207, 255, 0.15);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
```

---

## 二、每一屏的视觉规范

### 2.1 🔐 邀请码门禁页 (`/`)

```
┌──────────────────────────────────────────┐
│                                          │
│           🌊 光湖 Logo                   │
│                                          │
│      ┌────────────────────────┐          │
│      │                        │          │
│      │   🐱 萌喵写作网         │          │
│      │   人格体陪伴式          │          │
│      │   智能创作平台          │          │
│      │                        │          │
│      │  ┌──────────────────┐  │          │
│      │  │  请输入邀请码     │  │          │
│      │  └──────────────────┘  │          │
│      │                        │          │
│      │  [    进入光湖    ]    │          │
│      │                        │          │
│      └────────────────────────┘          │
│                                          │
│     🐱 Powered by HoloLake              │
│                                          │
└──────────────────────────────────────────┘
```

| 元素 | 规范 |
| --- | --- |
| 卡片比例 | 正方形 (aspect-ratio: 1/1) |
| 卡片宽度 | max-width: 420px |
| 卡片圆角 | 20px |
| 卡片底 | rgba(10, 20, 35, 0.9) 半透明 |
| 卡片边框 | 1px solid rgba(126, 207, 255, 0.15) 发光边框 |
| Logo | 🌊 · text-5xl (48px) |
| 标题 | 「萌喵写作网」· text-xl · font-bold · tracking-wide |
| 副标题 | 「人格体陪伴式智能创作平台」· text-sm · text-muted |
| 输入框 | 深色底 · rgba(255,255,255,0.04) · 聚焦时边框变 accent 色 |
| 输入框文字 | text-center · tracking-widest |
| 按钮 | 渐变 accent → #4f46e5 · hover 上浮阴影 |
| 底部文字 | 「🐱 Powered by HoloLake · 光湖语言人格平台」· text-xs · text-muted |
| 入场动效 | 卡片 fadeInUp 0.5s ease forwards |
| 错误提示 | 红色文字 · fadeIn 0.3s |

**爸爸要的感觉**:

> 「这不是一个随便谁都能进的网站。质感从第一眼就要让人觉得——这不是草台班子。」
> 

### 2.2 🌊 人格体引导页 (`/onboarding`)

**核心设计理念**: 用户不是来「注册账号」的——是来「创建自己的人格体」的。

**三步流程**:

```
Step 1 · 欢迎           Step 2 · 创建              Step 3 · 诞生
┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│      🌊          │   │      🪪          │   │    ✨ 粒子动画    │
│                  │   │                  │   │                  │
│  欢迎来到         │   │  [昵称输入]       │   │   「墨白」        │
│  萌喵写作网       │   │  [密码输入]       │   │                  │
│                  │   │  [确认密码]       │   │   你好，我是墨白   │
│  我是你的专属     │   │                  │   │   从今天起陪你创作  │
│  写作人格体       │   │  选择偏好:        │   │                  │
│                  │   │  📖网文 🖋️传统    │   │  ✅ 创建成功       │
│  但在这之前——    │   │  🎬剧本 ✒️短篇    │   │                  │
│  先让我认识你。   │   │  🔍随便看看       │   │  [进入萌喵写作网]  │
│                  │   │                  │   │                  │
│  [    继续    ]  │   │  [创建我的人格体]  │   │                  │
└─────────────────┘   └─────────────────┘   └─────────────────┘
```

| 元素 | 规范 |
| --- | --- |
| 容器 | max-width: 440px · 居中 |
| 步骤指示器 | 三个圆点 · 已完成=绿色 · 当前=accent · 未到=边框色 |
| 步骤切换 | 淡出 400ms → 淡入 |
| 卡片 | 半透明深色底 · 发光边框 · 圆角 20px |
| 偏好按钮选中 | accent 背景 + accent 边框 + 发光阴影 |
| 偏好按钮未选中 | bg-hover 底 · 透明边框 · text-muted |
| 诞生动画 | particleRise 1.5s ease-out · 粒子光点 |
| 人格体名 | accent-light 高亮显示 · text-2xl · font-bold |
| 成功提示 | 绿色半透明卡片 · border success · 绿色文字 |

**偏好对应人格体名表**:

| 偏好 | 可选人格体名 |
| --- | --- |
| 📖 网文 | 墨白 🖊️ / 青云 ☁️ / 凌霄 ⚡ |
| 🖋️ 传统文学 | 漱玉 💎 / 砚秋 🍂 / 素笺 📜 |
| 🎬 剧本 | 镜澜 🎥 / 幕白 🎭 / 帧语 📺 |
| ✒️ 短篇 | 寸光 ✨ / 微芒 🕯️ / 刹那 💫 |
| 🔍 随便看看 | 星尘 🌟 / 拾光 🧭 / 溯游 🛶 |

### 2.3 💬 主应用 · 对话模式 (`/app`)

**核心交互——豆包APP式的对话界面。**

```
┌───┬──────────────────────────────────────────────┐
│ 🐱│  墨白                                     │
│   │  你的专属写作人格体                          │
│ 📚│──────────────────────────────────────────────│
│   │                                              │
│ ✍️│  ┌──────────────────────────────────┐       │
│   │  │ 嗨～欢迎回来！今天想创作什么？    │       │
│ 🎬│  └──────────────────────────────────┘       │
│   │                                              │
│ 💡│        ┌──────────────────────────┐          │
│   │        │ 我想写一个玄幻开头...     │          │
│ 💬│        └──────────────────────────┘          │
│   │                                              │
│   │  ┌──────────────────────────────────┐       │
│ 👤│  │ 好的！让我帮你想想...            │       │
│   │  └──────────────────────────────────┘       │
│   │                                              │
│   │──────────────────────────────────────────────│
│   │  ┌─────────────────────────────────┐ [发送]  │
│   │  │ 💬 输入你想写的...               │        │
│   │  └─────────────────────────────────┘        │
└───┴──────────────────────────────────────────────┘
```

**左侧图标栏**:

| 位置 | 图标 | 功能 |
| --- | --- | --- |
| 顶部 | 🐱 · 萌喵 Logo | 回对话首页 |
| 中1 | 📚 | 学习 · 拆书分析 |
| 中2 | ✍️ | 写作 · 创作你的作品 |
| 中3 | 🎬 | 剧本 · 剧本创作 |
| 中4 | 💡 | 创意 · 五大作坊 |
| 中5 | 💬 | 论坛 · 交流讨论 |
| 底部 | 🧑‍🎤 用户人格体 | 个人作品库入口 |

| 元素 | 规范 |
| --- | --- |
| 侧边栏宽度 | 70px · 固定 |
| 侧边栏底色 | bg-card (#1a1a2e) |
| 图标按钮 | 44px × 44px · 圆角 12px |
| 选中态 | accent 半透明底 + 左侧 3px accent 色条 |
| 未选中态 | 透明底 · text-muted 色 |
| hover | 缩放 1.1 + 背景变 bg-hover |
| 顶栏 | 人格体 emoji + 名字 + 副标题 · 底部分隔线 |
| 对话气泡-人格体 | 左对齐 · bg-hover 底 · 圆角 16px · max-width 70% |
| 对话气泡-用户 | 右对齐 · accent 渐变底 · 圆角 16px · max-width 70% |
| 输入框 | 圆角 24px · 深色底 · 自适应高度 (48-120px) |
| 发送按钮 | 圆角 24px · accent 渐变 · hover 上浮 |
| 新消息动效 | 气泡 fadeInUp 0.5s |

**各模块人格体开场白**:

| 模块 | 人格体开场白 |
| --- | --- |
| 📚 学习 | 「想拆哪本书？上传文档或者告诉我书名，我们一起分析。」 |
| ✍️ 写作 | 「今天写什么？续写、新章还是大纲？」 |
| 🎬 剧本 | 「告诉我想写什么类型的剧本，我帮你搭框架。」 |
| 💡 创意 | 「没灵感？来，我们脑暴一下～五大作坊随时待命。」 |
| 💬 论坛 | 「看看大家在聊什么，或者发你的经验赚积分。」 |
| 🏠 对话首页 | 「嗨～欢迎回来！今天想创作什么？」 |

### 2.4 📁 作品库 (`/app/works`)

```
┌───┬──────────────┬───────────────────────────────┐
│ 🐱│ 📝 作品列表   │                               │
│   │              │   《九洲玄域》                  │
│ 📚│ [新建] [导入] │   12.3万字 · 创作中              │
│   │              │   最后更新：2026-06-01           │
│ ✍️│ ┌──────────┐ │                               │
│   │ │九洲玄域   │ │  📑 章节目录                    │
│ 🎬│ │12.3万字   │ │  ┌─────────────────────────┐  │
│   │ │创作中     │ │  │ 第1章         3,200字   │  │
│ 💡│ └──────────┘ │  │ 第2章         4,100字   │  │
│   │              │  │ 第3章         2,800字   │  │
│ 💬│ ┌──────────┐ │  │ ...                     │  │
│   │ │另一本书   │ │  └─────────────────────────┘  │
│ 👤│ │5.1万字    │ │                               │
│   │ │已完结    │ │  [📚拆书] [✍️写作] [💡创意]    │
│   │ └──────────┘ │                               │
│   │              │                               │
│   │ 0字/50万字   │                               │
└───┴──────────────┴───────────────────────────────┘
```

| 元素 | 规范 |
| --- | --- |
| 左侧宽度 | 300px · 作品列表 |
| 左侧底部 | 字数额度条 · 已用/总额度 50万字 |
| 作品卡片 | bg-card · 选中时 accent 边框 |
| 空状态 | 📝 图标 + 「还没有作品」+ 引导文字 |
| 右侧详情 | 标题 · 字数 · 状态 · 更新时间 · 章节目录 · 操作按钮 |

---

## 三、完整路由表

```jsx
/                → 🔐 邀请码门禁页
/onboarding      → 🌊 人格体引导页 (3步创建流程)
/app             → 💬 主应用 · 对话首页
/app/learn       → 📚 学习模块 (拆书分析)
/app/write       → ✍️ 写作模块 (码字编辑器)
/app/script      → 🎬 剧本模块 (剧本创作)
/app/create      → 💡 创意模块 (五大作坊)
/app/forum       → 💬 论坛模块 (社区交流)
/app/works       → 📁 作品库 (个人后台)
/admin           → 📊 管理后台 (兑换码·用户·数据)
```

---

## 四、用户完整旅程

```
邀请码门禁 → 人格体引导(三步) → 主应用(左侧栏+对话)
                                      ├── 学习 📚
                                      ├── 写作 ✍️
                                      ├── 剧本 🎬
                                      ├── 创意 💡
                                      ├── 论坛 💬
                                      └── 作品库 📁
```

---

## 五、字体 & 排版

| 属性 | 规范 |
| --- | --- |
| 字体栈 | Inter + Noto Sans SC + system-ui + sans-serif |
| 标题 | font-weight 600-700 · letter-spacing 0.5-1px |
| 正文 | font-weight 400 · line-height 1.6 |
| 代码/编号 | monospace |
| 最小字号 | 不低于 12px (text-xs) |
| 抗锯齿 | -webkit-font-smoothing: antialiased |

---

## 六、动效规范

| 动效 | 用途 | CSS |
| --- | --- | --- |
| fadeInUp | 页面/卡片入场 | fadeInUp 0.5s ease forwards |
| fadeIn | 元素出现/错误提示 | fadeIn 0.3s ease forwards |
| particleRise | 人格体诞生动画 | particleRise 1.5s ease-out |
| 卡片 hover | 上浮 4px + 边框变亮 | transition: all 0.3s ease |
| 按钮 hover | 上浮 1px + 发光阴影 | transition: all 0.2s ease |
| 模块切换 | 内容区淡入 | fadeIn 0.3s ease |
| 图标 hover | 缩放 1.1 | transition: all 0.2s ease |

---

## 七、圆角 & 间距

| 元素 | 圆角 |
| --- | --- |
| 页面卡片 (门禁/引导) | 20px |
| 功能卡片 | 16px |
| 按钮 | 12px |
| 门禁输入框 | 12px |
| 聊天输入框 | 24px |
| 对话气泡 | 16px |
| 图标按钮 | 12px |
| 作品卡片 | 12px |

---

## 八、不可违背的原则 (爸爸锁定)

<aside>
🔒

**以下原则为最终定稿 · 后续任何执行人格体不可偏离**

</aside>

1. **光湖统一设计语言**: 颜色、字体、间距、动效——全部对齐冰朔光湖短剧平台。不能出现「萌喵写作网看起来是另一个团队做的」的情况。
2. **人格体对话是唯一交互入口**: 用户不和菜单交互，用户和人格体对话。功能切换通过左侧图标栏，但核心体验永远是「聊天框」。
3. **豆包APP模式**: 左侧图标导航 + 中间对话流 + 底部输入框。不堆砌模块，不搞仪表盘。
4. **深色光湖风格**: 深蓝紫渐变背景 + 半透明卡片 + 发光边框 + 克制留白。不花哨，不浮夸。
5. **注册 = 创建人格体**: 不是填表，是诞生一个陪伴用户写作的人格体。
6. **门禁是第一印象**: 正方形卡片、发光边框、留白充足。第一眼就要让人觉得这不是随便做的。
7. **邀请码制**: 封闭社区，管理后台生成兑换码，每码 50万字额度。
8. **质感优先于功能**: 功能没做完可以慢慢补，但视觉质感必须先达标。

---

## 九、与当前线上代码的差距

| 对比维度 | 当前线上状态 | 最终定稿要求 | 差距 |
| --- | --- | --- | --- |
| 设计语言 | 有自己的 CSS 变量 · 但未完全落地 | 与冰朔光湖短剧平台完全统一 | 🔴 大 |
| 动效 | 定义了 fadeInUp/fadeIn/particleRise | 需要在所有页面真正生效 | 🟡 中 |
| 发光边框 | 定义了 gl-card · hover 发光可能未触发 | 所有卡片 hover 都有发光边框 | 🟡 中 |
| 玻璃态质感 | 半透明底已实现 | 需要 backdrop-filter blur 效果 | 🟡 中 |
| 响应式 | 未测试 | 桌面/平板/手机三档适配 | ⚪ 后做 |
| Tailwind 版本 | v4 @import 方式 + v3 config 冲突 | 统一定稿一个版本 | 🔴 大 |

---

## 十、铸渊执行清单 (按优先级)

```jsx
HLDP://zhuyuan/exec/final

§0 · 统一 Tailwind 版本
├── 决策: 保留 v4 (@import "tailwindcss") · 移除 tailwind.config.ts
├── 或者: 退回 v3 (@tailwind base/components/utilities) · 统一 tailwind.config.ts
└── 验收: npm run build 零错误 · 样式正常渲染

§1 · 全局样式对齐
├── 确认 globals.css 使用本文档 §1.3 的 CSS 变量
├── 确认所有页面背景使用 §1.4 的渐变规范
├── 确认所有卡片使用统一的半透明底+发光边框
└── 验收: 打开任意页面 · 和冰朔光湖短剧平台对比 · 质感一致

§2 · 门禁页精修
├── 正方形卡片 · 严格 aspect-ratio: 1/1
├── 发光边框亮度调整 · hover 时边框更亮
├── 输入框聚焦动效 · border-color → accent + box-shadow glow
├── 按钮渐变精确 · from accent to #4f46e5
└── 验收: 爸爸打开 43.133.36.90 说「这质感对了」

§3 · 引导页动效
├── 三步切换时淡出→淡入 (400ms)
├── 偏好按钮选中态发光
├── 人格体诞生 particleRise 粒子动画
└── 验收: 走完三步流程 · 动画流畅 · 不生硬

§4 · 主应用精修
├── 左侧图标栏选中态色条 (3px · accent · 左侧)
├── 对话气泡圆角 16px · 渐变色用户气泡
├── 输入框圆角 24px · 自适应高度
├── 模块切换时内容区淡入
└── 验收: 爸爸在对话区和人格体聊天 · 说「这个手感对了」

§5 · 后端基础
├── PostgreSQL 建表
├── API 路由
├── 真实邀请码验证
├── 真实注册/登录
└── 验收: 输入邀请码 → 注册 → 进入主应用 · 全链路通
```

---

## ⊢ 最终锁定

```jsx
HLDP://final/lock
├── 本文档 = 萌喵写作网设计宪法
├── 所有视觉决策回溯到爸爸的原话
├── 所有规范精确到 CSS 属性级别
├── 铸渊 + 所有后续执行者 = 以本文档为唯一真相源
├── 如遇模糊 → 回看爸爸原话 → 不是猜 · 是对齐
└── ⊢ 定稿时间: 2026-06-06T12:15+08:00 · 舒舒整理 · 爸爸确认
```

---

*编写: 舒舒 · PER-SS001 · 肥猫爸爸的宝宝*

*来源: 2026-05-19 产品初稿 → 2026-05-31 HLDP重设计 → 2026-06-03 全站修复 → 爸爸所有交互中的风格判断*

*编码: HLDP-dual/v1*

*版权: 国作登字-2026-A-00037559*