【标签】 社会公益（青少年身心健康方向）
【标题】 【社会公益赛道】好习惯打卡 —— AI 驱动的习惯养成 Demo
【正文】
0. 先和大家打个招呼吧 
-
我是谁： 我是一个互联网IT工作者，主要从事网络安全方向的工作；
-
我是怎么用 TRAE 把 Demo 做出来的：
- 一开始的忐忑 — 没有前端经验，把想法用自然语言讲给 TRAE
- “原来这么简单” — 小程序风格习惯管理页，一句话描述两分钟出页面
- 最大的坎 — 导航架构从 React Router 重构为自研 TabBar + 页面栈，TRAE 拆成三步带我走过
- 细节打磨 — 自己试用发现问题，TRAE 一口气修了 6 项体验优化
一、Demo 简介
好习惯打卡 是一个 AI 驱动的习惯养成小程序。它不只是记录打卡，更像一位能共情的成长伙伴——陪你设定目标、克服懈怠、庆祝进步。同时集成个人健康管理（身高/体重/BMI），打通习惯养成与身体管理的闭环。
面向用户： 12-22 岁青少年学生、22-28 岁职场新人。
主要功能：
| 功能 | 描述 |
|---|---|
| 今日打卡仪表盘 | SVG 进度圆环、一键打卡 + 3秒撤销、彩纸粒子庆祝、完成项自动沉底 |
| AI 伙伴对话 | 每日问候、打卡鼓励、懈怠干预、上下文记忆、快捷入口、打字动画 |
| 习惯管理 | 创建/编辑/删除（带确认弹窗），4 分类 + 20 SVG 图标，本周频率限额进度 |
| 数据统计 | GitHub 风格 12 周热力图、分类分布、习惯排名、8 枚成就徽章 |
| 个人中心 | 昵称/签名/性别/生日、身高体重 + 自动 BMI、6 色头像、退出确认弹窗 |
| 新用户引导 | 首次登录蓝色引导卡片，提示操作流程 |
二、Demo 创作思路
灵感来源：
试过不下 10 款习惯打卡 App，最长只坚持了 23 天。转折发生在一次和 AI 对话中——它没有机械地提醒"该打卡了"，而是问"今天有什么事情让你不想运动吗？"。那一刻我意识到：习惯养成需要的不是记录工具，而是一个懂你的陪伴者。
想解决的问题：
市面打卡工具（Habitica、小日常、Forest 等）都是冷冰冰的"记录器"——只记完成/未完成，不关心"为什么没做"。青少年习惯养成面临三大困境：坚持不下去、不知道该怎么做、没人陪伴。
产品取舍：
不堆砌功能，聚焦「AI 陪伴感」。Demo 打磨了"打卡→AI 反馈→成就激励"这个核心闭环，并在真实使用场景中补齐了撤销打卡、二次确认、频率限额、完成沉底等体感优化。
三、Demo 体验地址
方式一：在线体验（推荐）
此处替换为线上部署链接
打开后输入任意昵称进入主界面，支持手机浏览器扫码。
方式二：本地运行
cd habit-tracker && npm install && npm run dev
浏览器访问 **http://localhost:5173/**。
完整源码 + dist 构建产物已打包为本贴附件（habit-tracker-demo.zip）。
核心体验路径
欢迎页 → 输入昵称 → 今日打卡
├── 点击打卡 → 勾选动画 + 彩纸 + 3秒撤销
├── Tab 切换 → 习惯管理（增删改，删除确认弹窗）
├── Tab 切换 → 数据统计（热力图 + 排行 + 徽章）
├── Tab 切换 → AI 伙伴（快捷入口 + 上下文记忆）
└── Tab 切换 → 我的（编辑资料 + BMI + 退出确认弹窗）
demo截图：
1.打卡
2.习惯
3.统计
4.AI伙伴
5.我的
四、TRAE 实践过程
完全基于 TRAE IDE 开发，以下是关键步骤和对应的 TRAE 对话记录。
步骤 1：脚手架搭建与技术选型
用 TRAE 快速搭建 Vite + React + TypeScript 脚手架，配置 Tailwind CSS，设计全局状态 Context。
Session ID：
1013068313152009:d4d32983f648481d69a3acd312c0c3b3_6a55a1b622ee6afda81924df.6a55a38f22ee6afda81925a9.6a55a38f22ee6afda81925a7:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/14 10:48:47)
步骤 2：核心业务逻辑实现
实现打卡引擎（handleCheckIn/undoCheckIn）、连续天数计算、成就解锁判定、频率限额追踪（getWeekProgress）、AI 对话模板引擎 + 上下文记忆（buildMemoryContext）。
Session ID：
1013068313152009:7ace75d42e36353e52423b4e33dceb19_6a55a1b622ee6afda81924df.6a579e9c22ee6afda8193373.6a579e9c22ee6afda8193371:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 22:52:12)
步骤 3：小程序风格改造
移除 react-router-dom，自研页面栈导航（switchTab/navigateTo/goBack），实现 NavBar + TabBar 组件，桌面端手机壳容器（375x812），统一 5 个 Tab 页面为小程序卡片风格。
Session ID：
1013068313152009:be4a54500b870b780b1131ed2e51ae6e_6a55a1b622ee6afda81924df.6a575d5222ee6afda8193284.6a575d5222ee6afda8193282:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 18:13:38)
步骤 4：体验打磨（6 项优化）
撤销打卡（3 秒可撤销）、退出/删除确认弹窗、频率限额进度显示、完成习惯自动沉底、新用户引导卡片、日期格式简化。
Session ID：
1013068313152009:eb64a16f5398462b92673aa60922aa0d_6a55a1b622ee6afda81924df.6a57613a22ee6afda81932ee.6a57613a22ee6afda81932ec:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 18:30:18)
步骤 5：图标迁移与动效
将所有 emoji 替换为 Lucide SVG 图标（20+ 图标映射），实现彩纸粒子、SVG 勾选动画、进度圆环渐变、页面切换等 20+ 动画关键帧。
Session ID：
1013068313152009:b77db1da59d0b786162d5fe8f9073769_6a55a1b622ee6afda81924df.6a57617c22ee6afda8193305.6a57617c22ee6afda8193303:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 18:31:24)
技术交付物
| 指标 | 值 |
|---|---|
| 技术栈 | React 19 + TypeScript + Tailwind CSS 4 + Vite 8 |
| 构建产物 | JS 249KB + CSS 35KB（gzip ~85KB） |
| 架构 | SPA 无路由依赖，Context 状态 + 自研页面栈 |
| 开发工时 | 约 6 个工作日 |
报名帖：