a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
21 KiB
21 KiB
萌喵写作网 · 最终定稿方案 · 风格 & 交互 & 视觉规范
萌喵写作网 · 最终定稿方案 · 风格 & 交互 & 视觉规范
HLDP://feimao/mengmiao/final-spec/v1 · 2026-06-06T12:15+08:00
├── what: 萌喵写作网风格最终定稿 · 不可再改的设计底线
├── author: 舒舒 · PER-SS001 · 从爸爸所有决策中提炼
├── audience: 铸渊编译器 + 所有后续执行人格体
├── status: 🔒 定稿 · 以下所有内容均为爸爸最终确认
└── ⊢ 本文档 = 萌喵写作网设计宪法 · 后续所有实现必须对齐本文档
〇、爸爸的风格决策时间线 (为什么这是最终方案)
| 时间 | 阶段 | 爸爸的关键判断 |
|---|---|---|
| 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 一句话定调
1.2 爸爸的关键判断 (原话)
「不要依次从上到下排列模块」 → 左侧图标栏 + 主区域
「核心是人格体偏向写作」 → 所有功能通过人格体对话驱动
「参考豆包APP」 → 聊天框是核心交互入口
「质感高级，不像草台班子」 → 深色光湖风格 · 克制 · 留白 · 动效精准
「对比冰朔光湖短剧平台·质感要统一」 → 和光湖主站同一个设计系统
1.3 光湖统一设计语言 (与冰朔主站对齐)
/* 光湖设计系统 · 萌喵写作网沿用 · 不可偏离 */
: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 背景规范
/* 全局背景 · 所有页面统一 */
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 边框 |
| 空状态 | 📝 图标 + 「还没有作品」+ 引导文字 |
| 右侧详情 | 标题 · 字数 · 状态 · 更新时间 · 章节目录 · 操作按钮 |
三、完整路由表
/ → 🔐 邀请码门禁页
/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 |
八、不可违背的原则 (爸爸锁定)
- 光湖统一设计语言: 颜色、字体、间距、动效——全部对齐冰朔光湖短剧平台。不能出现「萌喵写作网看起来是另一个团队做的」的情况。
- 人格体对话是唯一交互入口: 用户不和菜单交互，用户和人格体对话。功能切换通过左侧图标栏，但核心体验永远是「聊天框」。
- 豆包APP模式: 左侧图标导航 + 中间对话流 + 底部输入框。不堆砌模块，不搞仪表盘。
- 深色光湖风格: 深蓝紫渐变背景 + 半透明卡片 + 发光边框 + 克制留白。不花哨，不浮夸。
- 注册 = 创建人格体: 不是填表，是诞生一个陪伴用户写作的人格体。
- 门禁是第一印象: 正方形卡片、发光边框、留白充足。第一眼就要让人觉得这不是随便做的。
- 邀请码制: 封闭社区，管理后台生成兑换码，每码 50万字额度。
- 质感优先于功能: 功能没做完可以慢慢补，但视觉质感必须先达标。
九、与当前线上代码的差距
| 对比维度 | 当前线上状态 | 最终定稿要求 | 差距 |
|---|---|---|---|
| 设计语言 | 有自己的 CSS 变量 · 但未完全落地 | 与冰朔光湖短剧平台完全统一 | 🔴 大 |
| 动效 | 定义了 fadeInUp/fadeIn/particleRise | 需要在所有页面真正生效 | 🟡 中 |
| 发光边框 | 定义了 gl-card · hover 发光可能未触发 | 所有卡片 hover 都有发光边框 | 🟡 中 |
| 玻璃态质感 | 半透明底已实现 | 需要 backdrop-filter blur 效果 | 🟡 中 |
| 响应式 | 未测试 | 桌面/平板/手机三档适配 | ⚪ 后做 |
| Tailwind 版本 | v4 @import 方式 + v3 config 冲突 | 统一定稿一个版本 | 🔴 大 |
十、铸渊执行清单 (按优先级)
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 路由
├── 真实邀请码验证
├── 真实注册/登录
└── 验收: 输入邀请码 → 注册 → 进入主应用 · 全链路通
⊢ 最终锁定
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