a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
12 KiB
12 KiB
萌喵写作网 · 网站全面重设计 · HLDP设计文档 · 2026-05-31 · 肥猫×舒舒
📋 设计概要
HLDP://feimao/mengmiao/redesign/v1 · 2026-05-31
├── what: 萌喵写作网全站重设计
├── why: 当前Phase2页面布局简陋·没有人格体风格·模块堆叠无层次
├── who: 肥猫定方向×舒舒写HLDP×铸渊执行
├── ref: 看点写作(门禁)·豆包APP(对话框)·知秋×望舒(人格体卡片)
└── ⊢ 核心定位: 人格体写作模块·码字是人格体的一个功能·不是独立工具
🗺️ 用户旅程总览
graph LR
A["🔐 邀请码门禁"] --> B["🌊 人格体引导页"]
B --> C["🪪 注册·创建自己的人格体"]
C --> D["💬 主应用·人格体对话"]
D --> E1["📚 学习"]
D --> E2["✍️ 写作"]
D --> E3["🎬 剧本"]
D --> E4["💡 创意"]
D --> E5["💬 论坛"]
🔐 第一屏 · 邀请码门禁页
设计参考
- 看点写作门禁：居中卡片·正方形比例·留白充足
- 光湖 BC-M01 登录壳子：深色背景·渐变·发光边框
布局
┌──────────────────────────────────────┐
│ │
│ 🌊 光湖 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 引导文字
模块切换
- 点击左侧图标 → 主区域切换到对应模块的对话上下文
- 每个模块有自己的人格体开场白
- 人格体记忆跨模块保持
| 模块 | 人格体开场白 |
|---|---|
| 📚 学习 | 「想拆哪本书？上传文档或者告诉我书名，我们一起分析。」 |
| ✍️ 写作 | 「今天写什么？续写、新章还是大纲？」 |
| 🎬 剧本 | 「告诉我想写什么类型的剧本，我帮你搭框架。」 |
| 💡 创意 | 「没灵感？来，我们脑暴一下～五大作坊随时待命。」 |
| 💬 论坛 | 「看看大家在聊什么，或者发你的经验赚积分。」 |
🎨 设计语言系统
色彩
: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 交给铸渊的执行清单
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
下一站：铸渊编译器 → 新加坡服务器