【学习工作赛道】「小息指南」(即时休息推荐平台)demo

  • 我是谁:互联网大厂女工,一个把需求写进日程、把酸痛写进肩颈的人。
  • 我是怎么用 TRAE 把 Demo 做出来的:
    我完全不是技术背景,但这次体验很像“把脑子里的画面一句句说出来,然后有人帮你把它落成可用的东西”。我一开始只会说“我想要一个能让我上班时腰酸背痛、眼睛发干的时候,马上对症休息几分钟的平台”,TRAE 会追问关键细节(比如场景、时长、动作能不能做、页面要不要像产品),我就继续补充。最让我觉得“原来这么简单”的瞬间,是我发现不用懂代码也能迭代:我只要明确指出“4分钟就必须是4分钟”“不要系统口吻”“示意图要像真人能照做”,它就能一轮轮把 Demo 改到更像我脑子里的那个样子。以前我以为最难的是“做出来”,现在发现真正的坎反而是“把需求说清楚”——而 TRAE 就是帮我跨过这道坎的人。

1. Demo 简介

是什么:一个可直接打开使用的网页 Demo「小息指南」:一句话描述你的不适和可用时间,它会生成一套可执行的微休息步骤(带分步计时和动作示意图)。

面向谁

  • 主要是久坐、长时间看屏幕的上班族、学生党

  • 以及“明明想休息但不知道怎么休”的人

主要功能(核心 4 个)

  1. 一句话输入 → 自动推荐方案:输入“看电脑眼睛好痛,在工位想休息4分钟”,它会识别场景/时长/不适类型,并给出对应步骤。

  2. 分步计时 + 到点提醒:每一步都有明确时长,点开始就能跟着做,不用自己掐表。

  3. 动作示意图:每个动作配统一风格的人体示意图,确保“看得懂、做得对”,而不是一堆抽象名词。

  4. **放松小技巧:**根据当前不适状态,联动推荐可随手切换的身体放松、声音陪伴和轻松读物,帮用户在几分钟内更快进入可恢复的休息状态。


2. Demo 创作思路

灵感来源:上班久了真的会出现一种“身体报警但工作还在跑”的状态。肩颈硬、眼睛干、腰酸,脑子也不清醒,但你又不想刷短视频放空 20 分钟,只需要一个“对症、短、立刻能做”的微休息。

想解决的问题(真实痛点)

  • 我知道该休息,但不知道该做什么:拉伸?闭眼?走走?呼吸?

  • 我能休息,但只有3–7 分钟碎片时间:很多建议太长、太复杂,落不下去。

  • 我想做对,但动作经常“只看文字看不懂”,或者做错了反而更累。

为什么做这个方向(判断与取舍)

  • 我没有做一个“健康百科”,而是做一个更像“即时工具”的东西:少解释,多执行

  • 我没有追求复杂智能,而是优先把体验做实:任意分钟可用、场景可选、动作可照做、界面像产品

  • 我把“最难的部分”交给 TRAE:规则推荐、计时器、交互细节、示意图统一风格这些,如果让我从零学开发,基本会直接放弃;但用 TRAE,我只要把需求讲清楚,就能不断接近我想要的样子。

3. Demo 体验地址

小息指南-体验包.zip (1.3 MB)

4. TRAE 实践过程

  • SessionID1:{“region”:“”,“traceId”:“4819662962f65ae79633cb6fb8df2d86”,“userId”:“liuyixiao.888”,“chatSessionId”:“6a548f63ea3d2242c5008941”,“replyToMessageId”:“6a549e57ea3d2242c5008bcf”,“messageId”:“6a549e57ea3d2242c5008bd1”,“createTime”:“2026/7/13 16:14:15”,“modelName”:“gpt-5.2”,“status”:“completed”,“agentProcessSupport”:“v3”,“appName”:“TRAE Work CN”,“appVersion”:“0.1.34”,“slardarSid”:“no_sid”,“ppe”:“no_ppe”}
  • SessionID2:{“region”:“”,“traceId”:“3960a187f36adfcee58bf261176b58aa”,“userId”:“liuyixiao.888”,“chatSessionId”:“6a548f63ea3d2242c5008941”,“replyToMessageId”:“6a54a081ea3d2242c5008c4d”,“messageId”:“6a54a081ea3d2242c5008c4f”,“createTime”:“2026/7/13 16:23:29”,“modelName”:“gpt-5.2”,“status”:“completed”,“agentProcessSupport”:“v3”,“appName”:“TRAE Work CN”,“appVersion”:“0.1.34”,“slardarSid”:“no_sid”,“ppe”:“no_ppe”}
  • SessionID3:{“region”:“”,“traceId”:“f15104a6ae51528ef2b1051a61cb23d9”,“userId”:“liuyixiao.888”,“chatSessionId”:“6a548f63ea3d2242c5008941”,“replyToMessageId”:“6a54a492ea3d2242c5008d8c”,“messageId”:“6a54a492ea3d2242c5008d8e”,“createTime”:“2026/7/13 16:40:50”,“modelName”:“gpt-5.2”,“status”:“completed”,“agentProcessSupport”:“v3”,“appName”:“TRAE Work CN”,“appVersion”:“0.1.34”,“slardarSid”:“no_sid”,“ppe”:“no_ppe”}

  • **Demo 开发过程心得:**用 TRAE 做 Demo 的过程,像是把“产品经理脑内的模糊想法”变成“能运行的界面”,它帮我跨过了我原本以为自己搞不定的坎:我不用先学会代码,也能通过“提出具体反馈 → 看到结果 → 再迭代”把产品打磨出来;我学到的反而是更产品的东西:怎么定义边界、怎么表达需求、怎么让体验可用。

5. 对应的报名审核通过的帖子链接