kangwan/meetnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0b966c63ef852b0c59991629b09941c8a20487a6
meetnote/.memory/design-system.md
kang 0b966c63ef design: lock visual system based on style lib 11 Dark Dev SaaS 
- Desaturate primary from 96% to 65% (cyberpunk → Linear calm)
- Use DM Sans + Noto Sans SC for mixed zh-en reading
- App shell layout (sidebar + main), not landing page
- Discard hero/pricing/testimonial sections, keep bento card style for 4-card summary
- Include wireframes for upload / list / detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 18:33:30 +08:00

14 KiB
Raw Blame History

MeetNote Design System

基于风格库 11 Dark Dev SaaS 改造 + Linear 应用骨架 关键差异：原风格是落地页导向，本项目是工具应用，布局和密度都要改

设计哲学

冷静、克制、长时间看不累。 会议复盘是 1-2 小时注视的场景，必须避免炫技。

  • ❌ 不做：炫酷 hero 网格、pricing、testimonial、Framer Motion 大动效
  • ✅ 保留：暗色基调、毛玻璃 Bento 卡、荧光青绿 accent、shadcn/ui 组件库
  • ✅ 微调：主色降饱和（避免过度赛博感），字体换 DM Sans + Noto Sans SC（中英混排更稳）

Tokens（MeetNote 版）

:root {
  /* 背景 - 沿用风格 11 */
  --background:          210 11% 7%;    /* #0f1211 深灰绿黑 */
  --foreground:          160 14% 93%;   /* #e7eceb 浅灰绿白 */

  /* 主色 - 降饱和（从 96% → 65%），冷静绿取代荧光青 */
  --primary:             165 65% 65%;   /* 冷静绿 */
  --primary-foreground:  160 8% 6%;
  --primary-dark:        165 70% 45%;
  --primary-light:       165 40% 80%;

  /* 状态色 - 新增（应用必需） */
  --success:             150 60% 55%;   /* 已完成 */
  --warning:             38 90% 60%;    /* 转写中 */
  --danger:              0 72% 60%;     /* 失败 */
  --info:                210 80% 65%;   /* 信息 */

  /* 层级 - 沿用 */
  --muted:               240 2% 16%;
  --muted-foreground:    160 14% 93% / 0.7;
  --muted-foreground-light: 160 14% 93% / 0.5;

  /* 卡片 - 毛玻璃（沿用） */
  --card:                220 17% 98% / 0.01;
  --card-foreground:     160 14% 93%;
  --card-blur:           blur(8px);

  /* 边框 - 白色 8% 透明 */
  --border:              240 100% 100% / 0.08;

  /* 语义 */
  --ring:                165 65% 65%;
  --radius:              0.5rem;
}

字体

--font-sans: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace;
用途 大小 字重
页面标题 24px 600
会议标题 18px 500
正文/转写 15px 400 (行高 1.75)
时间戳/标签 13px 500
角标 11px 500

转写全文用 1.75 行高，长时间阅读最舒服。

布局骨架

Linear 式应用 shell，不是落地页：

┌─────────────────────────────────────────────┐
│ [侧栏 240px]    [主内容区 flex-1]            │
│                                              │
│  logo           ┌──── page content ────┐   │
│                 │                       │   │
│  📤 上传         │                       │   │
│  📋 会议列表     │                       │   │
│  🔍 搜索(v2)     │                       │   │
│                 │                       │   │
│  ─────          │                       │   │
│  ⚙ 设置         │                       │   │
│                 └───────────────────────┘   │
└─────────────────────────────────────────────┘

响应式：
  < 768px → 侧栏变底部 tab bar
  ≥ 768px → 侧栏固定左侧

三个核心页面线框

Page 1: 上传页 /upload

┌─────────────────────────────────────────────────┐
│                                                  │
│   新建会议                                       │
│   手机录好后直接拖进来                           │
│                                                  │
│   ╭───────────────────────────────────────╮     │
│   │                                        │     │
│   │              ⬆                         │     │
│   │                                        │     │
│   │        拖拽音频文件到这里              │     │
│   │        或 点击选择文件                 │     │
│   │                                        │     │
│   │  支持 m4a · mp3 · wav · mp4 · opus    │     │
│   │  单文件最大 500 MB                    │     │
│   │                                        │     │
│   ╰───────────────────────────────────────╯     │
│                                                  │
│   会议标题（可选，不填用文件名）                  │
│   ┌─────────────────────────────────────┐       │
│   │ 例：与客户对齐定价                    │       │
│   └─────────────────────────────────────┘       │
│                                                  │
│   参与人（可选，帮助总结质量）                    │
│   ┌─────────────────────────────────────┐       │
│   │ 张三, 李四, 客户王总                  │       │
│   └─────────────────────────────────────┘       │
│                                                  │
│                        [取消]  [开始上传 →]     │
│                                                  │
└─────────────────────────────────────────────────┘

上传中状态：
   ╭───────────────────────────────────────╮
   │ 📄 meeting-2026-04-13.m4a (87 MB)    │
   │ ████████████░░░░░░░░ 62%  15MB/s     │
   │ 还需 3 秒                             │
   ╰───────────────────────────────────────╯

关键细节：

  • 拖拽区用虚线边框 border-foreground/15，hover 变 primary
  • 文件列队可多选，一次传多个（排队处理）
  • 分片进度用 shadcn Progress，底色 muted，填充 primary

Page 2: 会议列表 / （首页）

┌─────────────────────────────────────────────────┐
│  会议记录                     + 新建            │
│                                                  │
│  ━━━ 今天 · 2026-04-13 ━━━                      │
│                                                  │
│  ╭─────────────────────────────────────╮        │
│  │ 🎙  与客户对齐定价                   │        │
│  │ 14:30  1h 23min                      │        │
│  │ ● 转写中 3/5 片                      │        │
│  │ ▓▓▓▓▓▓░░░░ 60%                       │        │
│  ╰─────────────────────────────────────╯        │
│                                                  │
│  ╭─────────────────────────────────────╮        │
│  │ 🎙  团队周会                         │        │
│  │ 10:00  45min  · 张三 李四 王五       │        │
│  │ ✓ 已完成                             │        │
│  │                                       │        │
│  │ "本周关键进展：A 项目完成 80%..."    │        │
│  │  #周会 #进度 #排期                   │        │
│  ╰─────────────────────────────────────╯        │
│                                                  │
│  ━━━ 昨天 · 2026-04-12 ━━━                      │
│                                                  │
│  ╭─────────────────────────────────────╮        │
│  │ 🎙  产品 Review                      │        │
│  │ 16:00  52min                         │        │
│  │ ✓ 已完成                             │        │
│  │ "讨论 Q2 产品路线图，确定三个重点..." │        │
│  ╰─────────────────────────────────────╯        │
│                                                  │
└─────────────────────────────────────────────────┘

卡片状态：

状态 徽章 颜色
pending ⏳ 排队中 muted-foreground
uploading ⬆ 上传中 X% info
transcribing ● 转写中 X/Y 片 warning
summarizing ● 总结中 warning
done ✓ 已完成 success
failed ✗ 失败（重试） danger

完成状态的卡片自动展示总结前 2 行 + 关键词标签，无需点进去也能快速定位。

Page 3: 会议详情 /meetings/[id]

┌────────────────────────────────────────────────────┐
│  ←  与客户对齐定价                      ⋯         │
│     2026-04-13 14:30 · 1h 23min · 张三 李四 王总  │
├────────────────────────────────────────────────────┤
│  ▶  ━━━━━━●━━━━━━━━━━━━━━━━  00:21 / 1:23:44   │
│                                           1x 2x   │
├─────────────────────────┬──────────────────────────┤
│                         │                          │
│  [转写]  [总结]  [下载] │  ╭── ⭐ 要点 ──────╮    │
│                         │  │ • 三档定价方案   │    │
│  [00:00] 张三 ▸         │  │   已确定         │    │
│  大家好，今天主要是     │  │ • 客户接受 Pro   │    │
│  对齐一下 Q2 的定价     │  │   档位 $29/mo    │    │
│  方案，pipeline 基本    │  │ • ...            │    │
│  已经 ready 了          │  ╰──────────────────╯    │
│                         │                          │
│  [00:15] 李四 ▸         │  ╭── ✅ 待办 ──────╮    │
│  OK, 我这边准备了三个   │  │ ☐ 张三：周五前   │    │
│  档位的方案，分别是...  │  │   出合同草稿     │    │
│                         │  │ ☐ 李四：下周一   │    │
│  [01:30] 王总 ▸         │  │   发送定价 deck  │    │
│  我觉得 Pro 档的 SLA    │  │ ☐ ...            │    │
│  需要再明确一下...      │  ╰──────────────────╯    │
│                         │                          │
│  ...                    │  ╭── 🎯 决议 ──────╮    │
│                         │  │ ✓ 采用三档定价   │    │
│                         │  │ ✓ Pro 档给客户   │    │
│                         │  │   10% 折扣       │    │
│                         │  ╰──────────────────╯    │
│                         │                          │
│                         │  ╭── # 关键词 ────╮     │
│                         │  │ #定价 #Q2       │     │
│                         │  │ #客户 #合同     │     │
│                         │  │ #Pro档位        │     │
│                         │  ╰──────────────────╯    │
└─────────────────────────┴──────────────────────────┘

关键细节：

  • 左右两栏，左 60% 转写，右 40% 总结四卡
  • 手机端：转写/总结 tab 切换，一次一个
  • 转写每段时间戳可点击 → 音频跳转到对应位置
  • 总结四卡用 Bento 毛玻璃样式（从风格 11 继承）
  • 顶部播放器固定 sticky，滚动不消失
  • 右上 ⋯ 菜单：重命名、换引擎重转、删除、导出 MD

组件清单（复用风格 11 源码）

直接抄（无需改）：

  • components/ui/* 全部 56 个 shadcn 组件 → copy-paste
  • components/animated-section.tsx → 页面入场动画包装

改造（参考不抄）：

  • components/bento/* → 看毛玻璃实现，改造成总结四卡
  • components/header.tsx → 改造成应用顶栏（不要 Landing 导航）

丢弃（MVP 不要）：

  • hero-section.tsx pricing-section.tsx testimonial-*.tsx faq-*.tsx cta-section.tsx footer-section.tsx

动效原则

  • 页面切换 fade-in 200ms
  • 卡片入场 stagger 50ms delay
  • 状态变化 200ms ease-out
  • 禁止：3D 翻转、视差滚动、粒子效果（应用不是 Landing）

无障碍 & 长时阅读

  • 对比度 ≥ WCAG AA（暗底白字自然满足）
  • 转写正文最大宽度 max-w-[680px]（≈ 78 字/行，阅读最优）
  • 字体大小可在设置里调（14/15/16/18 四档）
  • 可选切换亮色（v2，MVP 暗色 only）

微调确认清单

项 原风格 11 MeetNote 版 需要你拍板
主色饱和度 96% 荧光青 65% 冷静绿 ⚠️ 决定
字体 system font DM Sans + Noto Sans SC ⚠️ 决定
布局 Landing（全宽 hero） Linear 式（侧栏+主区） ✅ 推荐
总结四卡样式 Bento 毛玻璃 继承 Bento 毛玻璃 ✅ 推荐
亮色模式 无 v2 再加 ✅ 推荐
Reference in New Issue View Git Blame Copy Permalink