# 萌喵写作网 · 网站全面重设计 · 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 **下一站**：铸渊编译器 → 新加坡服务器