# Design Plan —— HabitFlow（S3 产物，按 frontend-design 两遍法）

> 依据：frontend-design 已装载（Skill 工具路径，sha256 d9197063…）；MASTER.md（ui-ux-pro-max 生成：Claymorphism / 琥珀+绿 / Varela Round + Nunito Sans）；BRIEF（Operate 模式，睡前场景）。

## 第一遍：设计计划

**题材世界**：习惯打卡的世界是「纸质习惯手账 + 印章/火漆」——每天往本子上盖一个章。打卡（punch/stamp）这个词本身就是印章隐喻。视觉取材：温纸、墨色、章印、双圈火漆、章按下去的软糯手感（正好接住 MASTER 的 Claymorphism：chunky、厚边、软阴影）。

**色板**（4–6 具名 hex，token 全部挂 MASTER 变量）：
- `--paper 暖纸底` #FFFBEB（MASTER background）
- `--ink 墨夜蓝` #142033（新派生：foreground #0F172A 提蓝一档，用于 hero 面板与正文，暖纸上的「墨水」）
- `--amber 琥珀主色` #D97706（MASTER primary；印章金泥）
- `--amber-deep 熔金` #B45309（primary 的按压/深态派生）
- `--jade 完成玉绿` #059669（MASTER accent；已完成态与统计正值）
- `--clay-border 陶线` #F3E4C8（border #FAEEE1 加深一档做 3px clay 厚边，避免在暖底上隐形）

**字体与角色**：Varela Round = 数字与拉丁（连续天数、百分比、星期字母——圆润 chunky 数字是 Claymorphism 的性格载体）；Nunito Sans = 拉丁正文；中文 PingFang SC（系统栈）= 界面正文。层级靠字重与块面，不靠斜体/单字变色。

**布局概念**：单列、左对齐、16px 页边；「安静的纸面 + 一枚重章」——顶部一枚墨夜蓝「今日印章」面板（唯一的深色块、唯一的圆卡），承载日期环+今日进度；其下是满宽的清单行（非浮动卡片，clay 分隔线分行）；底部双 Tab。统计页：七日章谱（7 列盖章格）+ 每习惯完成率条（墨底琥珀条）+ 总连续天数并入顶面板而非独立卡片。

```
┌────────────────────────────┐  ┌────────────────────────────┐
│ ██ 墨夜蓝今日印章面板 ██████ │  │ ██ 墨夜蓝面板（七日章谱）██ │
│ ██ ◯周三 11.06   3/5 ██    │  │ ██ ▢▢▣▣▣▢▣  本周16章 ██  │
│ ████████████████████████   │  │ ████████████████████████   │
│                            │  │                            │
│ 今晚要盖的章                │  │ 各习惯完成率               │
│ ┌──────────────────────┐   │  │ 读书     ▓▓▓▓▓▓░░ 78%     │
│ │(icon) 读书    12天 [盖]│   │  │ 冥想     ▓▓▓▓▓░░░ 64%     │
│ ├──────────────────────┤   │  │ 跑步     ▓▓▓▓░░░░ 57%     │
│ │(icon) 冥想     5天 [✓]│   │  │ ...                        │
│ └──────────────────────┘   │  │                            │
│                            │  │                            │
│  ────── [今日] [统计] ────  │  │  ────── [今日] [统计] ────  │
└────────────────────────────┘  └────────────────────────────┘
```

**原则**（这个产品独有的）：
1. **盖章是仪式**：完成动作 = 按下一枚实体感印章（200ms 软按压 + 内阴影翻转 + 章印落定），是全页唯一 authored motion moment。
2. **安静的纸面**：除顶部印章面板外不允许第二个深色块/浮动卡；信息靠 clay 分隔线与留白分组。
3. **数字会说话**：连续天数用 Varela 粗圆数字 + 琥珀色，是纸面上唯一的高饱和焦点。
4. **睡前不打扰**：暖色低刺激、无自动播放动效、reduced-motion 时印章动画退为瞬时状态切换。

## 第二遍：AI 味自检与修订

逐条对照 frontend-design 的特征清单：

1. **暖纸底 + 赤陶色**（tell #1）：色板确实落在暖底+琥珀家族——但这是 MASTER 数据支撑的方向（habit/warm/encouraging 类产品的匹配结果），不是自由轴上的偷懒。修订：用墨夜蓝面板 + clay 厚边 + 印章母题把它做成「手账」而不是「米色落地页」；且琥珀 #D97706 ≠ tell 里的 #D97757 赤陶。**保留，附理由。**
2. **暗底单酸绿**（tell #2）：否——我们是亮底暖色系。
3. **报纸 hairline/零圆角**（tell #3）：否——16–24px 圆角 + 3px 厚边是 Claymorphism 要求。
4. **SaaS 卡片套件**（tell #4）：**修订**——初稿统计页各习惯是独立小卡，已改为满宽行 + 分隔线；全页深色圆卡只保留顶部一枚。
5. **模板 chrome**（tell #5）：eyebrow/全大写标签/中点连接串/→后缀——全部不出现；标签用句子大小写中文；数据标签不用等宽字体，用 Varela 数字。
6. **hero = 大数字+小标签+渐变**（默认处理）：**修订**——顶部不是「大数字卡」而是「今日印章」：双圈日戳 + 进度环，数字嵌在章面上；无渐变（craft-floor：渐变文字禁、渐变装饰慎）。

## 决策记录（与 MASTER 的冲突裁决）

| 冲突 | 裁决 | 依据 |
|---|---|---|
| 睡前场景 → 想做全暗色主题 | **不做**，用墨夜蓝面板承载深度 | 裁决表：风格体系是 pro-max 数据轴；暗色 MASTER 标 conditional；「一处重色」也符合 frontend-design 的 boldness 集中原则 |
| #FAEEE1 边框在暖底上太弱 | 加深派生 #F3E4C8 作 clay 边 | 派生量记入 token 表，不越 MASTER 语义 |
| 中文无 Varela 对应字 | 数字/拉丁用 Varela，中文系统栈 | 字体 personality 由数字承载（题材：天数与百分比正是主角） |
| 图标 | 内联 SVG（lucide 线性、圆头、统一 2px 描边） | pro-max：禁 emoji 图标、一套图标一种描边 |

**结论：计划相对独特（手账印章世界 + 单一墨章 + clay 手感），可以进入构建。**