# 萌喵写作网 · 网站全面重设计 · HLDP设计文档 · 2026-05-31 · 肥猫×舒舒

## 📋 设计概要

```jsx
HLDP://feimao/mengmiao/redesign/v1 · 2026-05-31
├── what: 萌喵写作网全站重设计
├── why: 当前Phase2页面布局简陋·没有人格体风格·模块堆叠无层次
├── who: 肥猫定方向×舒舒写HLDP×铸渊执行
├── ref: 看点写作(门禁)·豆包APP(对话框)·知秋×望舒(人格体卡片)
└── ⊢ 核心定位: 人格体写作模块·码字是人格体的一个功能·不是独立工具
```

---

## 🗺️ 用户旅程总览

```mermaid
graph LR
    A["🔐 邀请码门禁"] --> B["🌊 人格体引导页"]
    B --> C["🪪 注册·创建自己的人格体"]
    C --> D["💬 主应用·人格体对话"]
    D --> E1["📚 学习"]
    D --> E2["✍️ 写作"]
    D --> E3["🎬 剧本"]
    D --> E4["💡 创意"]
    D --> E5["💬 论坛"]
```

---

## 🔐 第一屏 · 邀请码门禁页

### 设计参考

- 看点写作门禁：居中卡片·正方形比例·留白充足
- 光湖 BC-M01 登录壳子：深色背景·渐变·发光边框

### 布局

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

### 设计要求

- **背景**：深色渐变 `radial-gradient(ellipse at center, #1a1a3e 0%, #0f0f1a 70%)`
- **卡片**：正方形比例·圆角 20px·`rgba(10,20,35,0.9)` 半透明底·`1px solid rgba(126,207,255,0.15)` 发光边框
- **输入框**：深色底·`rgba(255,255,255,0.05)`·聚焦时边框变亮 `rgba(126,207,255,0.6)`
- **按钮**：渐变 `linear-gradient(135deg, #6366f1, #4f46e5)`·hover 上浮阴影
- **字体**：系统默认 · 字号克制 · 不花哨
- **动效**：卡片淡入动画 · 按钮 hover 微动 · 错误提示平滑出现

### 一句话感觉

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

---

## 🌊 第二屏 · 人格体引导页（登录/注册融合）

### 核心设计理念

用户不是来「注册账号」的——是来「创建自己的人格体」的。

参考知秋×望舒人格体选择器，但做的是「引导你创建你自己的」。

### 流程

```
Step 1: 欢迎语
├── 「欢迎来到萌喵写作网 🌊」
├── 「我是你的专属写作人格体，但在这之前——」
└── 「先让我认识你。」

Step 2: 基础信息
├── 昵称输入
├── 密码设置
└── 写作偏好选择（网文/传统/剧本/短篇/随便看看）

Step 3: 人格体诞生
├── 根据偏好生成专属人格体名+头像
├── 「你好，我是【人格体名】，从今天起陪你写作。」
└── 进入主应用
```

### 视觉风格

- 延续深色光湖风格
- 每一步一张居中卡片·左右滑动或淡入切换
- 卡片之间用柔和过渡·不突兀
- 人格体诞生时有粒子/光点动画（轻量·不花哨）

### 参考

- BC-M03 人格体选择器：卡片的发光边框、悬停效果、选中状态
- BC-M01 登录界面：深色品牌风格、输入框样式

---

## 💬 第三屏 · 主应用（登录后）

### 布局结构（豆包APP模式）

```
┌──┬─────────────────────────────────────┐
│📚│                                     │
│  │  ┌───────────────────────────────┐  │
│✍️│  │                               │  │
│  │  │   🐱 和你的人格体对话区域      │  │
│🎬│  │                               │  │
│  │  │   （对话气泡·滚动）            │  │
│💡│  │                               │  │
│  │  └───────────────────────────────┘  │
│💬│                                     │
│  │  ┌───────────────────────────────┐  │
│👤│  │ 💬 输入你想写的...      [发送] │  │
│  │  └───────────────────────────────┘  │
│  │                                     │
└──┴─────────────────────────────────────┘
```

### 左侧图标栏（70px 宽）

- 固定左侧·深色背景·图标竖向排列
- 顶部：萌喵 Logo（小）
- 中部：五个功能模块图标
    - 📚 学习
    - ✍️ 写作
    - 🎬 剧本
    - 💡 创意
    - 💬 论坛
- 底部：用户头像（个人后台入口）
- 当前选中图标：高亮·左侧色条指示
- 图标 hover：发光·缩放微动

### 主区域（对话区）

- 顶部：当前模块标题 + 人格体头像+名字
- 中部：对话流·浅色深底气泡
- 底部：输入框 + 发送按钮
- 输入框风格：圆角 24px·深色底·placeholder 引导文字

### 模块切换

- 点击左侧图标 → 主区域切换到对应模块的对话上下文
- 每个模块有自己的人格体开场白
- 人格体记忆跨模块保持

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

---

## 🎨 设计语言系统

### 色彩

```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;
}
```

### 字体

- 中英文混排：`'Inter', 'Noto Sans SC', system-ui, sans-serif`
- 标题：字重 600-700·字间距 2-4px
- 正文：字重 400·行高 1.6
- 代码/编号：monospace

### 圆角

- 卡片：16-20px
- 按钮：12px
- 输入框：12px（门禁）/ 24px（聊天框）
- 图标按钮：12px

### 阴影与发光

- 卡片基础：`box-shadow: 0 20px 60px rgba(0,0,0,0.4)`
- 卡片选中：`box-shadow: 0 0 30px rgba(99,102,241,0.25)`
- 按钮 hover：`box-shadow: 0 4px 15px rgba(99,102,241,0.4)`

### 动效

- 页面进入：淡入 + 轻微上移 `fadeInUp 0.5s ease`
- 卡片 hover：上移 4px + 边框增亮 `transition: all 0.3s ease`
- 模块切换：内容区淡入 `fadeIn 0.3s ease`
- 人格体诞生：光点粒子 `particle-rise 2s ease-out`

---

## 📱 响应式

### 桌面（>1024px）

- 左侧图标栏 70px·固定
- 主区域最大宽度 900px·居中

### 平板（768-1024px）

- 左侧图标栏 60px
- 主区域自适应

### 手机（<768px）

- 左侧图标栏移到底部·横向排列
- 主区域全宽·输入框适配
- 门禁卡片宽度 90%

---

## 🧩 技术实现

### 技术栈

- Next.js 14 (App Router) — 已有地基
- Tailwind CSS + 自定义 CSS 变量
- Framer Motion（动效）
- 后端 API 对接铸渊

### 路由结构

```
/               → 邀请码门禁页
/onboarding     → 人格体引导页（登录+注册融合）
/app            → 主应用（需登录）
/app/learn      → 学习模块
/app/write      → 写作模块
/app/script     → 剧本模块
/app/create     → 创意模块
/app/forum      → 论坛模块
/app/works      → 个人作品库
/admin          → 管理后台
```

### 与 Phase 2 现有代码的关系

- Phase 2 的 Next.js 地基保留
- globals.css 替换为新的设计变量
- layout.tsx 替换为新的根布局
- 各页面全部重写
- /chat 和 /dashboard 旧路由废弃或重定向

---

## 🔧 HLDP 交给铸渊的执行清单

```jsx
HLDP://feimao/mengmiao/redesign/铸渊执行清单

§1 · 全局设计系统
├── globals.css 重写（CSS变量+基础样式）
├── layout.tsx 重写（引入字体+Metadata）
└── ⊢ 这是所有页面的地基·先做

§2 · 邀请码门禁页（/page.tsx）
├── 深色渐变背景
├── 居中正方形卡片
├── 光湖Logo+萌喵标题+副标题
├── 邀请码输入框+验证按钮
├── 错误提示动画
└── ⊢ 门禁是第一印象·质感优先于功能

§3 · 人格体引导页（/onboarding/page.tsx）
├── 三步卡片流程（欢迎→信息→诞生）
├── 步骤指示器
├── 表单验证
├── 人格体诞生动画（粒子效果）
└── ⊢ 注册不是填表·是创造人格体

§4 · 主应用框架（/app/layout.tsx）
├── 左侧图标栏（固定·70px宽）
├── 五模块图标+用户头像
├── 当前选中高亮+色条指示
└── ⊢ 这是所有模块的容器

§5 · 主应用对话区（/app/page.tsx）
├── 默认欢迎对话
├── 对话气泡样式
├── 输入框+发送按钮
└── ⊢ 豆包式核心交互

§6 · 各模块页面
├── /app/learn · 学习模块
├── /app/write · 写作模块
├── /app/script · 剧本模块
├── /app/create · 创意模块
├── /app/forum · 论坛模块
└── ⊢ 共享对话组件·模块间切换即换上下文

§7 · 作品库（/app/works）
├── 左侧作品列表
├── 右侧作品详情
├── 上传文档入口
└── ⊢ 沿用PRD v2.0设计
```

---

## ⊢ 锁定 · 爸爸的核心指令

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

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

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

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

---

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

**时间**：2026-05-31  

**编码**：HLDP-dual/v1  

**下一站**：铸渊编译器 → 新加坡服务器