1
用户丢进碎片
2
  → 胶囊按钮边缘亮起一道微光（状态色，初始为中性白）
3
  → 微光沿胶囊边缘缓慢流动（3 秒内，cubic-bezier(0.4, 0, 0.2, 1)）
4
  → 流动过程中，微光颜色逐渐变化，暗示正在判断
5
  → 判断完成：微光聚拢为一道状态色闪光（绿=已接住/蓝=已归并/橙=重要/灰=冷冻）
6
  → 闪光扩散为波纹，2 秒后淡出

1
用户触发纠偏（如点击"拆小"）
2
  → 纠偏按钮果冻回弹（0.92 → 1.0，cubic-bezier(0.34, 1.56, 0.64, 1)）
3
  → 按钮位置绽放一道波纹（状态色，向外扩散 80px，800ms）
4
  → 波纹中心浮现"记下了"文案（16px Medium，状态色）
5
  → 文案下方副文案："下次先拆小"（14px Regular，次要文字色）
6
  → 文案 + 波纹 1.5 秒后淡出
7
  → 同时轻触觉反馈（短震动 20ms）

1
[微光呼吸点] · · ·
2
   ○    ○    ○       ← 三个小圆点依次亮起又暗下，循环

1
+--------------------------+
2
|  [状态条] 今日已接住 12 件   |  ← 顶部轻状态条，不抢占注意力
3
|                          |
4
|    [智能体状态层]          |  ← 微光流动 + 实时文案（判断中显示）
5
|                          |
6
|         [大留白]          |  ← 中央大留白，暗示"这里很空，随时可丢"
7
|                          |
8
|                          |
9
|    [浮动提示: 随时丢]      |  ← 首次使用时显示，3秒后淡出
10
|                          |
11
+--------------------------+
12
|  [🎤] [输入框........] [📷] [接住] |  ← 常驻捕获条：语音 / 文字 / 图片 全部显式可点
13
|  [捕获]    [聚焦]    [复盘]          |  ← 底部导航栏：可见切换三页
14
+--------------------------+

1
+--------------------------+
2
|  [< 返回]    现在只做      |  ← 顶部导航，不显眼
3
|                          |
4
|    [智能体状态层]          |  ← 递回时微光流动 + "蕉不焦递回一步..."
5
|                          |
6
|    +----------------+    |
7
|    |                |    |
8
|    |   [动作卡片]    |    |  ← 中央大卡片，唯一焦点
9
|    |                |    |
10
|    | 打开客户方案文档  |    |
11
|    | 写三个小标题      |    |
12
|    |                |    |
13
|    +----------------+    |
14
|                          |
15
|  [完成✓] [拆小] [稍后] [🔥] |  ← 四个按钮，滑动操作
16
+--------------------------+

1
+--------------------------+
2
|        [时间] 21:00      |  ← 时间显示，暗示"该复盘了"
3
|                          |
4
|    🌙  今天已经很好了    |  ← 温暖问候，无负面词汇
5
|                          |
6
|  [智能体状态层]           |  ← "今天记下了 3 条偏好..."
7
|                          |
8
|  +--------------------+  |
9
|  |  接住  归并  冷冻  等 |  |
10
|  |   12     5     3    2 |  ← 状态流转数字，非"未完成"
11
|  +--------------------+  |
12
|                          |
13
|  "明天只看这一步："      |  |
14
|  +--------------------+  |
15
|  | 打开客户方案，        |  |
16
|  | 写第一段标题         |  |
17
|  +--------------------+  |
18
|                          |
19
|  [明天上午别推了] [收到]  |  ← 快捷反馈按钮
20
|                          |
21
+--------------------------+

1
状态1：默认
2
  ├─ scale: 1.0
3
  ├─ 阴影: 0 8px 24px rgba(0,0,0,0.12)（重浮）
4
  └─ 无波纹
5

6
状态2：按下（touchstart）
7
  ├─ scale: 0.92（100ms, ease-out）
8
  ├─ 阴影: 0 4px 12px rgba(0,0,0,0.16)（收缩）
9
  ├─ 触觉: 单次轻震 10ms
10
  └─ 波纹起点确定（触摸点坐标）
11

12
状态3：释放（touchend）
13
  ├─ scale: 0.92 → 1.0（400ms, cubic-bezier(0.34, 1.56, 0.64, 1)）
14
  ├─ 阴影: 恢复重浮
15
  ├─ 波纹: 从触摸点向外扩散，半径 0→80px（800ms, ease-out）
16
  │         透明度 0.4→0（800ms, ease-out）
17
  │         颜色: 状态色
18
  └─ 触觉: 释放震动 10ms（延迟 100ms 触发，与回弹同步）

1
┌─────────────────────────────────────────┐
2
│           安全区底部 34px                 │
3
│  ┌───────────────────────────────────┐  │
4
│  │  [🎤]  [输入框占位: 随时丢]  [📷]  │  │  ← 胶囊按钮主体
5
│  │         高度: 56px                 │  │
6
│  │         圆角: 999px                │  │
7
│  │         左右边距: 20px             │  │
8
│  └───────────────────────────────────┘  │
9
│           底部安全区 34px                 │
10
└─────────────────────────────────────────┘

1
        ← 左右边距 20px →
2
┌──────────────────────────────────┐
3
│                                  │
4
│    ┌──────────────────────────┐  │
5
│    │                          │  │  ← 动作卡片
6
│    │   现在只做：              │  │     宽度: 屏宽 - 40px
7
│    │                          │  │     内边距: 24px
8
│    │   打开客户方案文档        │  │     圆角: 12px
9
│    │   写三个小标题            │  │     背景: #FFFFFF
10
│    │                          │  │     阴影: 中浮
11
│    │                          │  │
12
│    └──────────────────────────┘  │
13
│                                  │
14
└──────────────────────────────────┘

1
┌──────────────────────────────────┐
2
│ [状态条] 今日已接住 12 件           │  ← 高度 44px，毛玻璃背景
3
│         5 件归档，2 件稍后          │
4
└──────────────────────────────────┘
5
        ← 高度 44px，全宽 →

1
              ┌─────────────────────┐
2
              │  ✓ 已接住            │  ← Toast
3
              │    已放进产品线程     │     高度: 48-64px（自适应）
4
              └─────────────────────┘     宽度: 自适应（最大屏宽-80px）
5
                                           圆角: 12px

1
┌──────────────────────────────────┐
2
│                                  │  ← 背景遮罩（半透明黑 0.4）
3
│    ┌────────────────────────┐    │
4
│    │  [把手]                 │    │  ← 纠偏面板
5
│    │                        │    │     圆角: 顶部 16px
6
│    │  这件事你要怎么处理？    │    │     背景: 毛玻璃
7
│    │                        │    │
8
│    │  [完成✓]  [拆小]         │    │
9
│    │  [稍后]   [这很重要]     │    │
10
│    │  [今天别推] [这不是任务]  │    │
11
│    │                        │    │
12
│    │  ┌─────────────────┐   │    │  ← 一句话输入框
13
│    │  │ 或输入一句话...    │   │    │     高度 40px
14
│    │  └─────────────────┘   │    │     圆角 8px
15
│    └────────────────────────┘    │
16
└──────────────────────────────────┘

1
1. 长按背景缩略图 > 500ms
2
   → 缩略图放大 scale(1.05) + 阴影增强 + 触觉中震
3
   → 其他缩略图轻微下沉（透明度 0.6）
4

5
2. 手指拖动
6
   → 被拖拽缩略图跟随手指
7
   → 其他缩略图自动腾位（Y 轴位移 200ms 缓动）
8

9
3. 松开手指
10
   → 缩略图吸附到最近空位（200ms 缓动）
11
   → 触觉轻震 + 排序写入
12
   → 其他缩略图恢复透明度

1
1. 长按动作卡片 > 500ms
2
   → 卡片放大 scale(1.05) + 触觉中震
3
   → 底部浮现 4 个状态区域：
4

5
   ┌──────┬──────┬──────┬──────┐
6
   │ 完成✓│ 拆小 │ 稍后 │ 重要 │
7
   │ 绿   │ 蓝   │ 灰   │ 橙   │
8
   └──────┴──────┴──────┴──────┘
9

10
2. 拖拽卡片到某状态区域上方
11
   → 该区域高亮（背景色加深 + scale(1.1)）
12
   → 其他区域变暗（透明度 0.5）
13
   → 触觉轻震提示进入有效区域
14

15
3. 松开手指
16
   → 若在有效区域内：触发该状态变更 + "记下了"波纹
17
   → 若不在有效区域内：卡片弹性回弹到原位

1
1. 从屏幕边缘 20px 内开始拖拽
2
   → 当前页面跟随手指位移
3
   → 下一页从边缘滑入（半透明预览）
4

5
2. 拖拽超过 60px
6
   → 下一页逐渐清晰（透明度 0.3→0.8）
7
   → 触觉轻震提示达到切换阈值
8

9
3. 松开手指
10
   → 若超过阈值：页面切换完成（300ms 缓动到位）
11
   → 若未超过阈值：当前页面弹性回弹（400ms 弹性曲线）

1
@keyframes breathe {
2
  0%, 100% { transform: scale(0.96); box-shadow: 0 8px 24px rgba(76,175,80,0.3); }
3
  50%      { transform: scale(1.02); box-shadow: 0 6px 18px rgba(76,175,80,0.25); }
4
}
5
.capsule { animation: breathe 3s ease-in-out infinite; }

1
@keyframes jelly-bounce {
2
  0%   { transform: scale(0.92); }
3
  60%  { transform: scale(1.04); }
4
  100% { transform: scale(1.0); }
5
}
6
.button.released { animation: jelly-bounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }

1
:root {
2
  /* 主色 */
3
  --color-primary: #4CAF50;
4
  --color-primary-light: #66BB6A;
5
  --color-primary-dark: #43A047;
6

7
  /* 辅色 */
8
  --color-secondary: #2196F3;
9
  --color-secondary-light: #42A5F5;
10

11
  /* 强调 */
12
  --color-accent: #FF9800;
13
  --color-accent-light: #FFA726;
14

15
  /* 中性 */
16
  --color-neutral: #9E9E9E;
17
  --color-error: #F44336;
18

19
  /* 背景 */
20
  --bg-page: #FAFAFA;
21
  --bg-card: #FFFFFF;
22

23
  /* 文字 */
24
  --text-primary: #212121;
25
  --text-secondary: #616161;
26

27
  /* 阴影 */
28
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
29
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
30
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
31

32
  /* 圆角 */
33
  --radius-sm: 8px;
34
  --radius-md: 12px;
35
  --radius-lg: 16px;
36
  --radius-pill: 999px;
37

38
  /* 间距 */
39
  --space-xs: 4px;
40
  --space-sm: 8px;
41
  --space-md: 12px;
42
  --space-lg: 16px;
43
  --space-xl: 20px;
44
  --space-2xl: 24px;
45
  --space-3xl: 34px;
46
}
47

48
@media (prefers-color-scheme: dark) {
49
  :root {
50
    --color-primary: #66BB6A;
51
    --color-secondary: #42A5F5;
52
    --color-accent: #FFA726;
53
    --bg-page: #121212;
54
    --bg-card: #1E1E1E;
55
    --text-primary: #E0E0E0;
56
    --text-secondary: #9E9E9E;
57
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
58
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
59
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
60
  }
61
}

1
步骤1: 用户轻触胶囊按钮
2
  → 胶囊果冻回弹 + 波纹 + 触觉轻震
3
  → 输入框展开 + 键盘弹出（200ms 缓出）
4
  → 输入框占位文案："随时丢"
5

6
步骤2: 用户输入文字，按发送
7
  → 胶囊果冻回弹 + 触觉轻震
8
  → 输入框收起 + 键盘收起（200ms 缓入）
9
  → 微光流动层显示："接住了，正在帮你放好..."（0-300ms）
10

11
步骤3: AI 判断中（300ms-2.5s）
12
  → 微光流动动画：边缘光带缓慢流动
13
  → 实时文案更新："蕉不焦在帮你看看这件..."
14
  → 思考心跳触觉（10ms/1.2s 极轻）
15

16
步骤4: 判断完成（2.5s-3s）
17
  → 微光聚拢为状态色闪光
18
  → 状态光扩散（2s）
19
  → Toast 显示状态文案 + 触觉双击确认
20
  → 例："已放进客户方案线程，不新增 Todo"（归并）
21
  → 例："现在只做：打开文档写三个小标题"（下一步）
22
  → 例："我不太确定是不是硬截止，你扫一眼"（待定）
23

24
步骤5: 反馈结束（3s-5s）
25
  → 状态光淡出
26
  → Toast 2s 后自动消失
27
  → 微光流动层淡出
28
  → 胶囊恢复呼吸动画

1
步骤1: 用户长按胶囊 > 1s
2
  → 触觉中震 + 胶囊状态变色
3
  → 左侧图标变为停止图标
4
  → 录音波形动画显示 + 时长计数
5

6
步骤2: 用户说话（最长 60s）
7
  → 实时波形动画
8
  → 时长计数递增
9

10
步骤3: 用户松开手指
11
  → 触觉中震 + 录音停止
12
  → 语音转写中：思考动画显示"蕉不焦在听..."
13
  → 转写完成 → 进入文字捕获流程的步骤3（AI 判断）

1
步骤1: 用户上滑胶囊 > 50px
2
  → 胶囊上滑遮罩显示"截图"文案
3
  → 松开后唤起截图/相册选择
4

5
步骤2: 用户选择截图
6
  → 截图预览 + 思考动画"蕉不焦在看看这张图..."
7
  → OCR 识别中
8

9
步骤3: 识别完成 → 进入文字捕获流程的步骤3（AI 判断）
10
  → 若识别到截止信息（如"明天中午前"）：
11
    → 触发高代价轻确认（见 9.5）
12
  → 若为普通资料：
13
    → 归并到线程或冷冻

1
步骤1: 系统判断时机合适（如下午专注时段）
2
  → 发送微信模板消息通知
3
  → 通知格式："蕉不焦 | 打开客户方案文档，写三个小标题"
4
  → 通知按钮：[完成✓] [拆小] [稍后] [🔥]
5

6
步骤2: 用户点击通知 → 进入聚焦页
7
  → 动作卡片滑入（200ms 缓出）
8
  → 智能体状态层："蕉不焦递回一步..."（1s 后淡出）
9
  → 卡片悬浮微浮动启动

1
步骤1: 用户右滑卡片 > 30% 屏宽
2
  → 卡片跟随位移 + 绿色遮罩 + "完成✓"文案
3
  → 触觉轻震提示达到阈值
4

5
步骤2: 用户松开手指
6
  → 卡片向右飞出 + 淡出（300ms）
7
  → 触觉双击确认 + 完成"叮"音效
8
  → 状态变更：下一步 → 已完成
9
  → 偏好写回：同类任务完成时间记录
10

11
步骤3: 下一个任务滑入（300ms 缓出）
12
  → 若有下一个下一步：新卡片滑入
13
  → 若无下一个：显示"暂时没有任务，去捕获一些吧~"

1
步骤1: 用户上滑卡片 > 30% 屏高
2
  → 卡片跟随位移 + 蓝色遮罩 + "拆小"文案
3

4
步骤2: 用户松开手指
5
  → 卡片 Y 轴翻转 180°（400ms）
6
  → 触觉确认 + 拆小"流水"音效
7
  → 翻转后显示更小任务
8
  → "记下了"波纹 + 副文案"下次先拆小"
9
  → 偏好写回：同类任务动作粒度更小

1
步骤1: 用户点击纠偏入口（卡片上的"···"按钮）
2
  → 遮罩淡入（200ms）
3
  → 纠偏面板从底部滑入（300ms 缓出）
4
  → 面板显示标题："这件事你要怎么处理？"
5
  → 6 个纠偏按钮 + 一句话输入框
6

7
步骤2: 用户选择纠偏方式
8
  方式A: 点击按钮（如"拆小"）
9
    → 按钮果冻回弹 + 波纹
10
    → 触觉轻震
11
    → 面板退出（300ms 缓入）
12
    → "记下了"波纹在卡片位置绽放
13
    → 副文案浮现："下次先拆小"
14

15
  方式B: 输入一句话（如"语气保守一点"）
16
    → 输入框聚焦 + 键盘弹出
17
    → 用户输入 + 点击发送
18
    → 思考动画"蕉不焦在改..."（2-5s）
19
    → 改写完成 → "记下了"波纹 + 副文案
20

21
步骤3: 偏好写回
22
  → 偏好写入对应层级（全局/用户/线程）
23
  → 下次同类任务生效
24
  → 复盘页展示学习成果

1
步骤1: AI 识别为高代价事项
2
  → 微光流动颜色偏向橙色（注意色）
3
  → Toast："这像对外承诺，我先给保守回复草案"
4
  → 不直接入状态，等待用户确认
5

6
步骤2: 显示轻确认
7
  方式A: 简单问题
8
    → "这是今天必须回复的承诺吗？"
9
    → [是] [不是，先记为等待]
10

11
  方式B: 草案确认
12
    → 显示回复草案
13
    → [发送] [改一下] [不发了]
14

15
  方式C: 状态选择
16
    → "归档还是稍后再出现？"
17
    → [归档] [稍后再出现]
18

19
步骤3: 用户确认
20
  → 果冻回弹 + "记下了"波纹
21
  → 状态入库
22
  → 偏好写回（如适用）

1
步骤1: 用户长按胶囊录音
2
  → "我有点乱，报告没做，宿舍费好像要交，还有英语也没背。"
3

4
步骤2: 语音转写 + AI 拆分
5
  → 思考动画"蕉不焦在帮你分开，不会全变成今日 Todo..."（2-5s）
6
  → 后台拆分为多个碎片：
7
    - 报告下一步
8
    - 宿舍费待确认
9
    - 英语冷冻到本周计划
10
    - 情绪释放（不进 Todo）
11

12
步骤3: 多状态反馈
13
  → 多个状态光依次闪烁（绿/橙/灰蓝/灰）
14
  → Toast 汇总："接住 4 件，1 件下一步，1 件待定，1 件冷冻，1 件已释放"
15

16
步骤4: 前台只回来一步
17
  → 动作卡片显示："现在只做：打开群文件，确认你负责哪一页"
18
  → 其余事项在后台等待/冷冻/待定
19

20
步骤5: 用户可即时纠偏
21
  → 用户说："宿舍费今晚截止"
22
  → 触觉确认 + "记下了"波纹
23
  → 宿舍费改为高优先级 + 今晚提醒
24
  → 报告第一步仍保留

1
步骤1: 晚间 21:00 用户打开 App（或点击推送）
2
  → 复盘页淡入
3
  → 温暖问候："🌙 今天已经很好了"
4
  → 数字滚动动画：接住 12 / 归并 5 / 冷冻 3 / 等待 2
5

6
步骤2: 状态交还
7
  → "今天接住 12 件，3 件变下一步，5 件归并线程，2 件等待，2 件冷冻。"
8
  → 不出现"未完成"负面词汇
9
  → 状态流转图示动画
10

11
步骤3: 学习成果展示
12
  → 智能体状态层："今天记下了 3 条偏好"
13
  → "写作类上午不推、客户回复更保守、截图优先当资料"
14

15
步骤4: 明天第一步确认
16
  → "明天只看这一步：打开客户方案，写第一段标题"
17
  → 按钮：[明天上午别推了] [收到]
18

19
步骤5: 用户反馈
20
  → 点击"明天上午别推了"
21
    → "记下了"波纹 + "明天上午不推"
22
    → 偏好写回：写作类任务上午不推
23
  → 点击"收到"
24
    → 复盘结束 + 返回首页
25
    → 触觉双击确认