MetaSkill/skills/le-app-design/reports/e2e-habit/design-plan.md

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 手感），可以进入构建。