VideoAnnotation 原型试玩包 v0.1
一期 · Extension + PWA 二期 · Flutter 配色 · new-look 渐变
Product Prototype Review

看视频的时候记笔记，
AI 帮你读懂每一帧。

一个学习工具：双语字幕破除语言壁垒，一键截图触发 AI 百科式解读，收藏的解读自动变成 flashcards，在移动端用刷短视频的方式复习，并一键分享给任何人。
"Sharing is the best way to learn."

1核心价值闭环

生产（扩展端）与消费（PWA/移动端）通过 flashcard 这一种数据载体首尾相接；分享落地页是增长回路的出口——它替代了"自动发 YouTube 帖子"（官方 API 不支持创建社区帖子，已核实）。
▶
看
双语字幕
AI 结构化大纲
→
📸
截
⌥S 一键抓帧
心动即所得
→
✨
解读
AI 百科式
解释当前帧
→
❤️
存
收藏为
Flashcard
→
🃏
复习
SRS 间隔重复
移动端刷卡
→
🔗
分享
生成公开链接
发到任何地方
↩︎ 增长回路：分享落地页（原型 04）被看到 → 访问者点击"免费安装" → 成为新的生产者。分享者沉淀影响力，观看者获得工具，双边受益。

2核心交互逻辑：从截图到 Flashcard

整条链路的状态机。设计原则沿用现有 codebase 的哲学：零摩擦、默认即正确——按一次键就完成抓帧+解读，收藏是唯一的主动决策。
S0观看中（字幕面板常开）
⌥S / 悬浮按钮→
S1已抓帧（帧图 + 时间戳）
自动→
S2AI 解读中（流式输出）
完成→
S3已解读 · 等待决策
❤️ 收藏（主按钮）→
S4Flashcard 入库
→
S5SRS 队列：今晚 → 明天 → 4 天后…
仅保存到笔记→
普通笔记（不进入复习队列）
换一版解读→
回到 S2（AI 额度 −1）
Esc / 点击遮罩→
丢弃，回到 S0（零成本放弃）
S5移动端/PWA 复习
认识 / 模糊 / 不认识→
SRS 重新调度（4 天 / 明天 / 10 分钟）
发布为公开卡→
S6分享链接 + 落地页 → 增长回路
原型 01 和 02 里可以完整体验 S0→S4；原型 03 体验 S5（翻面→评分→调度）；原型 04 即 S6 的落地页。

3四张可交互原型

建议按 01 → 02 → 03 → 04 顺序看：它们讲的是同一个故事（Kathy 看《How Black Holes Bend Spacetime》学到"引力透镜"的全过程）。所有按钮都可点。
扩展 · 非沉浸式01
观看学习页 打开原型 →
YouTube 页面 + 扩展注入的学习面板：双语字幕（点词查词）、带时间戳的 Notion 式笔记、迷你时间轴。
试这些：点播放器右下角悬浮按钮（或按 ⌥S）→ 看 AI 帧解读 modal → 点「收藏为 Flashcard」；点字幕里的单词；点「进入沉浸式」跳到 02。
扩展 · 沉浸式02
沉浸式学习模式 PRO 打开原型 →
深色影院模式：无推荐无评论，大字双语字幕，AI 结构化大纲章节条，专注计时，侧滑笔记抽屉。
试这些：点章节卡切换视频帧；按 N 打开笔记抽屉；点左栏相机图标触发同款 AI 解读 modal；开「专注模式」看界面进一步净化。
PWA · 移动端消费03
Flashcard 复习信息流 打开原型 →
TikTok 式竖屏卡片流：复习自己的卡（翻面→评分→SRS 调度），或刷别人分享的公开卡。
试这些：点卡片翻面 → 显示答案 → 点「认识/模糊/不认识」看下一张；切到「发现」tab 看别人的卡+关注；底部「我的」看统计。
增长回路04
公开分享落地页 打开原型 →
一条笔记被分享后的公开页面。这是「发到 YouTube 帖子」的替代方案：链接可粘贴到任何平台，页面本身完成拉新。
试这些：点「复制链接」；滑到底看 CTA 横幅（Sharing is the best way to learn）；看"更多公开笔记"三卡网格。

4项目组织架构（monorepo 草案）

以当前 codebase 为基础演进：绿色=直接复用，黄色=新建。录制内核（回溯采集/MP4 导出）作为可选模块保留，不再是主角。
VideoAnnotation/ ├── apps/ │ ├── extension/ # 一期 · Chrome MV3 扩展 │ │ # ← 复用：内容脚本注入框架、Shadow DOM UI、 │ │ # offscreen、OPFS/IndexedDB 本地库、 │ │ # plyr/fabric、i18n、CWS 发布管线 │ │ # + 新建：字幕面板、笔记面板、帧解读 modal │ ├── web/ # 一期 · PWA │ │ # 复习 feed + 发现 + 分享落地页 + 账号 │ └── mobile/ # 二期 · Flutter │ # 消费同一份 flashcard 数据（schema 一期定死） ├── packages/ │ ├── core/ # Note/Card/Video 数据模型、SRS 调度、 │ │ # 双语字幕解析对齐、时间戳工具（全端共享） │ ├── ui/ # new-look 设计系统（珊瑚橙→紫渐变） │ └── api-client/ # 统一后端 SDK（auth / 同步 / 配额） ├── services/ │ ├── supabase/ # Auth + Postgres + Storage + RLS（推荐） │ ├── ai-proxy/ # LLM 网关：帧解读 / 结构化大纲 / 配额缓存 │ └── asr/ # 无字幕视频转写（付费 · 路线待定 Q5） └── proposals/ # 原型与方案存档（本目录，沿用现有惯例）
🔑 关键架构决策
  • flashcard 数据模型是全产品枢纽：扩展生产 → 云同步 → PWA/Flutter 消费 → 分享增长
  • schema 一期就要按"可同步/可分享/可复习"设计，哪怕一期先本地优先
  • AI 能力全部走 ai-proxy：成本、配额、缓存一处收口，绝不在客户端直连 LLM
  • 站点适配沿用现有 adapter 抽象：YouTube 第一个，B站接口保留
📦 从 ClipCart 继承的资产
  • MV3 + offscreen 工程体系与发布管线（含 CWS preflight 脚本）
  • React + Radix + Shadow DOM 的页面内 UI 框架
  • WebCodecs 录制内核 + mediabunny（降级为可选能力）
  • Playwright e2e + node:test 单测骨架
数据流总览：一条笔记/卡片的生命周期穿越四个子系统——
extension 生产→supabase 同步→PWA / Flutter 消费→share 落地页拉新↩

5看图之后，需要拍板的 5 件事

每个问题附我的建议。这些决定 SP0（基建）的走向，定完即可进入一期 MVP 的正式 spec。
1
与 ClipCart 的关系战略
在此 repo 原地演进（工作目录已改名 VideoAnnotation），还是新开 repo 选择性搬运？ClipCart 的录制能力去留？
建议：原地演进。录制内核保留为可选模块（默认关闭），NORTH_STAR.md 重写为新产品；ClipCart 的 P1 自用 Gate 放弃，不维护两个产品。
2
一期视频站点范围战略
仅 YouTube，还是 YouTube + B站？分享链路、字幕来源、目标用户语言环境都受此影响。
建议：YouTube 单点打透。双语字幕 + 分享回路都以它为中心闭环；B站 adapter 代码保留但一期不投入。
3
截图解读的触发形态交互
一键直达（按 ⌥S 立即抓当前帧并开始 AI 解读，原型 01/02 的实现），还是先框选/暂停确认？
建议：一键直达，Esc 零成本放弃——与"回溯采集"同一套零摩擦哲学。原型里体验后再确认。
4
扩展架构：沿用 webpack 还是迁 WXT技术
当前 codebase 不是 WXT，是自建的自定义 webpack MV3。迁 WXT 利于多浏览器和长期维护，但内核与 webpack 深度耦合，迁移约 2-3 周。
建议：一期沿用现有体系只换皮改名，快速验证学习闭环；WXT 迁移推迟到二期（若届时只发 Chrome，也可不迁）。
5
ASR 技术路线技术 · 合规
tabCapture 实时识别（合规、但受 1 倍速限制、延迟高）vs 服务端音频转写（快、可批量，但下载 YouTube 音频有 ToS 风险）。这是付费功能的合规根基。
建议：一期先只做"已有 CC 字幕"的双语翻译（零风险），ASR 留到付费阶段再定路线；若做，倾向 tabCapture 实时识别，宁可慢不可违规。
00 · 试玩总览 01 · 观看学习页（非沉浸） 02 · 沉浸式学习模式 Pro 03 · Flashcard 复习流 04 · 公开分享落地页