【生活娱乐赛道】+时光粒子

TRAE AI 创造力大赛 【大赛初赛专区】
1

0. 先和大家打个招呼吧 :waving_hand:

  • 大家好，我是一名热爱探索新工具的独立开发者。这次的 Demo「时光粒子」几乎全部借助 TRAE Work 完成，从最初模糊的"想做一个记录人生时间的 App"想法，到最终实现出一个具备实时计时、语音控制、摄像头手势识别、粒子动画的完整 iOS 风格时间统计应用，整个过程让我深刻感受到 AI 辅助开发的强大。

    过去要一个人搞定前后端、UI设计、交互动效、AI模型集成几乎是不可能的，但通过和 TRAE 的持续对话——描述想法、调整细节、解决报错、优化体验——我像是有了一个随叫随到的全栈伙伴，把一个创意从念头变成了可运行的产品。

1. Demo 简介

  • :pushpin: 产品简介 时光粒子（Time Particles）是一个 iOS 风格的人生时间统计应用，以"时间分类"为核心概念（睡觉、吃饭、走路、工作、学习、运动等），通过精美的粒子波动动效实时可视化时间的流逝。它不仅是一个计时器，更是你人生时间的账本——记录你把时间花在了哪里，用数据呈现你的生活轨迹。

    :busts_in_silhouette: 面向用户

    • 想要量化自己时间分配、提升时间感知的人

    • 学生、自由职业者、远程工作者等需要自我管理的群体

    • 喜欢量化自我（Quantified Self）、对生命时长有意识的记录者

    • 追求精致 UI 和新颖交互体验的产品爱好者

    :star: 核心功能

    ① 多分类并行计时 + 粒子波动动效 每个时间分类配有药丸型开关，开启后分类卡片亮起、圆环变绿，同时背景浮现对应颜色的粒子在屏幕上优雅波动。多个分类同时计时时，不同颜色的粒子分区共存、互不干扰，直观呈现"你的时间同时花在了哪里"。时间统计精确到秒，并自动换算为分/时/天/年。

    ② 模糊语音控制 底部麦克风按钮长按即可语音输入。不需要精确指令，说"开始睡觉啦"“我要吃饭了”"走路停一下吧"这类自然语言，系统通过模糊语义匹配自动识别意图并控制对应分类的开关。

    ③ 摄像头手势识别 :sparkles: 左下角手势按钮开启后调用设备摄像头，通过 MediaPipe 实时检测手部 21 个关键点。不需要触屏，对着镜头做手势就能操控：

    • :backhand_index_pointing_left::backhand_index_pointing_right: 左/右指：选择时间分类

    • :index_pointing_up::+1: 上指/点赞：开始选中分类计时

    • :backhand_index_pointing_down::-1: 下指/倒赞：停止选中分类计时

    • :raised_hand: 张开手掌：停止所有计时

    • :raised_fist: 握拳：切换当前分类状态 右上角悬浮窗实时显示摄像头画面和手部骨骼连线，识别到手势时有绿色反馈气泡。

    ④ 分类管理与分段记录 分类页展示所有时间分类的总时长排名，点击进入可查看每一次计时的分段明细（开始时间、结束时间、持续时长）。支持新增自定义分类，选择图标和粒子颜色。

    ⑤ 我的页面与时间补充 "我的"页面展示今日统计、总览数据，并支持手动补充一天中遗漏记录的时间段，让时间账本完整无缺。

    ⑥ 用户系统与数据持久化 支持注册登录，所有计时记录、分类数据、分段记录通过 Express.js + SQLite 后端持久化存储，刷新不丢失。

2. Demo 创作思路

  • :light_bulb: 灵感来源 我们每天都在"花时间"，但很少真正"看见"时间。手机上的计时器只是冰冷的数字，我想要一种更有质感、更有生命感的方式来感知时间的流逝——当你开始一项活动，屏幕上就有一群属于这个活动的"粒子"开始呼吸波动，像是时间本身有了形体。同时，语音和手势这种"无接触"的交互方式，让计时变得像和 AI 助手说话、打手势一样自然。

    :bullseye: 想解决的问题

    • 传统计时 App 界面单调，缺乏情感化反馈

    • 手动点击开关繁琐，做饭/运动/睡觉腾不出手时操作不便

    • 大多数时间追踪工具只记录"工作"，忽略了睡觉、吃饭、走路这些组成人生的重要部分

    • 时间数据孤立存在，缺少分段记录和长期统计视角

    :thinking: 为什么选择这个方向 我想做的不只是一个"计时器"，而是一个"人生时间可视化工具"。粒子动效让时间变得可感知，语音和手势让记录变得无负担，多分类并行让你看见时间的"并行性"——你在吃饭的同时也在陪伴家人，你在坐车的同时也在听书。时间不是线性的单一任务，而是多维度叠加的生命体验。

3. Demo 体验地址（三选一）

https://run-agent-6a53348bec9e9eb6fd62bef4-mrhezmy9-preview.agent-sandbox-bj-c1-gw.trae.cn/timer

4. TRAE 实践过程

4396321931004052:0cbeb51b980811266082dc9b7026a692_6a53348bec9e9eb6fd62bef4.6a534663ab45cefa34708b60.6a5346635c33f3f2ad76c286:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 15:46:43)

4396321931004052:9323071d2e39686db8d8dbd0146f0f89_6a53348bec9e9eb6fd62bef4.6a534373ab45cefa34708b12.6a534373ec3349fc45aeaca3:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 15:41:03)