【标签】 生活娱乐/社会公益
【标题】 社会服务赛道 + 社会公益 | 净烟 — AI戒烟伴侣
0. 先和大家打个招呼吧 
本人是一个30多烟龄的老程序员，每日烟量超40支。虽然是老程序员，但已经不写代码很多年，近期禁烟，萌发写一个禁烟小程序，辅助戒烟。目前我自己体验效果还不错，日烟量降低了很多。
1. Demo 简介
净烟 是一款基于认知行为疗法（CBT）的 AI 戒烟伴侣应用。它以单次 HTML 文件为载体，零后端、零部署成本，用户打开即可使用，所有数据保存在本地，兼顾隐私与便捷。
产品形态： 移动端 Web App（单文件 HTML + PWA）
核心用户： 有戒烟意愿但缺乏系统支持和行为追踪工具的吸烟者，尤其是习惯用手机管理日常生活的年轻群体。
主要功能
1、CBT 冲动管理 + 触发场景识别 每次想吸烟时点击"点烟"，系统先引导用户标记触发场景（压力、社交、饭后、无聊、饮酒、情绪低落）。若距离设定间隔时间不足，则启动"冲动冲浪"呼吸练习，用 4-7-8 呼吸法帮助用户度过 3 分钟冲动高峰期。
2、AI 戒烟助手（规则驱动，前端原生） 内置基于 CBT 框架的 AI 对话系统，无需调用外部 API。用户可以输入"我想抽烟""压力很大"等自然语言，系统根据关键词和当前状态给出针对性的认知重构建议、分散注意力策略和正向强化反馈。
2、数据洞察 + 健康恢复时间轴 用 Chart.js 实现四维数据可视化：吸烟趋势曲线、触发场景分布、本周对比、抗拒成功率。同时提供基于医学研究的健康恢复里程碑（20 分钟心率下降、2 周循环改善、1 年冠心病风险减半等），让用户看到戒烟带来的真实身体收益。
4、公益捐赠联动 + 徽章激励 将"节省的香烟金额"换算为虚拟公益金，关联真实的戒烟公益项目，增强社会价值感。15 枚里程碑徽章（首日胜利、7 天抵抗、30 天清醒等）配合 SVG 环形进度动画，把枯燥的戒烟过程转化为可视化的成就积累。
2. Demo 创作思路
灵感来源
中国吸烟者超过 3 亿，每年因烟草相关疾病死亡人数超过 100 万。市面上的戒烟 App 往往要么功能臃肿、需要注册登录，要么只是简单的计数器，缺乏行为干预和心理支持。我想做一个打开就能用、用完即走、但背后有完整行为科学支撑的工具。
想解决的问题
吸烟者最常见的困境不是"不想戒"，而是：
- 冲动来临时没有即时干预工具，只能靠意志力硬扛；
不知道自己为什么想抽（触发因素模糊）；
看不到短期进展，容易在 3-7 天内放弃；
孤独感强，缺少陪伴和正向反馈。
净烟针对这四个痛点，用 CBT 的"识别-延迟-替代-强化"四步法做了产品化封装。
为什么选这个方向
戒烟是典型的"高意愿、低坚持"行为。行为科学研究表明，结合实时自我监控、延迟满足训练和社交承诺的干预方案，成功率比单纯依靠意志力的"干戒"高出 2-3 倍。同时，戒烟本身具有极强的社会公益属性——每帮助一个人成功戒烟，就等于减少了一个家庭的二手烟暴露风险和长期的医疗负担。这正是社会服务赛道与社会公益附加赛题的交集所在。
3. Demo 体验地址（三选一）
净烟.zip (19.9 KB)
4. TRAE 实践过程
整个 Demo 从第一个 Prompt 到最终可运行版本，全部在 TRAE 中完成。以下是关键开发阶段和对应的 Session ID。
阶段一：MVP 原型搭建
目标： 用单文件 HTML 实现核心戒烟流程——点烟记录、间隔提醒、数据计数。
关键 Prompt：
“帮忙做一个戒烟辅助的 APP，用 HTML 输出，界面要求很简单，每次抽烟的时候，点一下’点烟’图标，如时间间隔没到（半小时或一小时，用户可自定义），则提醒用户是否憋一下，如果实在憋不住，则记录吸烟行为。然后通过一系列数据分析，帮忙用户提高戒烟成功率”
TRAE 在单次对话中生成了包含 LocalStorage 持久化、倒计时环、基础统计的完整单页应用。我在此基础上验证了核心交互流程的可行性。
Session ID： 2513949523977034:150781872b21791ffc6e4129540300ad_6a3339be46135da4749f3d2c.6a3339bf9d0c456292759daa.6a3339be46135da4749f3d2d:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/18 08:26:12)
关键截图：
阶段二：移动端重构 + 视觉体系升级
目标： 将桌面端布局重构为移动优先的底部 Tab 导航，适配安全区、增加转场动画。
关键 Prompt：
“用户界面请修改成更加适合手机环境使用”
TRAE 将原有单页布局重构为 4 个 Tab（点烟/数据/AI助手/设置），引入了底部导航栏、底部 Sheet 弹窗、安全区适配，并统一了 Dark Linear 风格的视觉语言。这一阶段让我意识到，戒烟场景下用户几乎 100% 在手机上使用，移动适配不是"优化项"而是"必选项"。
Session ID： 2513949523977034:d7816a20fdf9fc298b18ac0e8e4a1b2b_6a3339be46135da4749f3d2c.6a3c76755683be1bc6361711.6a3c7675be1d6cf45a32c506:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 08:33:54)
关键截图：
阶段三：冲击复赛的功能增强
目标： 对照评审四维度（创意洞察、产品体验、TRAE 能力、社会价值）进行系统性增强。
关键 Prompt：
“我的这个HTML要去参加比赛，请对照标准，充分想象，将应用修改成能冲击350个复赛名额的作品”
TRAE 在这个阶段的输出量最大，也是我使用 AI 能力最深的一次。主要增强包括：
CBT 冲动冲浪呼吸引导：在间隔不足时弹出自适应呼吸动画，用视觉节奏引导 4-7-8 呼吸法；
触发场景标签系统：6 种常见触发场景的数据归因，为后续的 Polar 分布图提供数据源；
AI 戒烟助手 Tab：完全规则驱动的前端对话系统，无需后端 API，根据用户输入的关键词和当前戒烟状态返回 CBT 风格的回应；
15 徽章 + 健康时间轴：游戏化里程碑与医学数据结合，把抽象的健康收益转化为具体的时间节点；
公益捐赠卡片：将节省金额与公益项目关联，强化社会价值叙事；
PWA 支持：添加 manifest.json 和 Service Worker，让 Web App 可以"安装"到手机桌面，接近原生体验。
Session ID： 2513949523977034:00e8b24c78f04f7a62fc24cb01e9c597_6a3339be46135da4749f3d2c.6a3c78435683be1bc6361752.6a3c7843effd41f7d772778a:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 08:49:18)
关键截图：
阶段四：调试与打磨
目标： 修复 JS 语法错误和 CSS 显示异常，确保所有 Tab 切换和数据图表正常。
在自测过程中发现了两个关键 Bug：
Chart.js 初始化代码中 scales 属性位置错误导致整个脚本崩溃，"点烟"按钮完全无响应；
#pageAI 的 CSS 选择器优先级过高，导致 AI 助手页面始终显示，与其他 Tab 内容重叠。
通过逐行提取 JS 进行 Node 语法检查、用浏览器 DevTools 定位 DOM 层级，最终修复。这个过程让我对"AI 生成代码的边界"有了更清醒的认识：TRAE 可以快速生成 90% 的可用代码，但最后 10% 的边界情况仍需开发者具备调试能力。
Session ID： 2513949523977034:b73fb062b441b3080f637736e8071f95_6a3339be46135da4749f3d2c.6a3c7dfa5683be1bc6361799.6a3c7dfaeffd41f7d7727865:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 09:49:22)
关键截图：
5. 对应的报名审核通过的帖子链接