夜雨聆风忽然想构建一个中式锻炼的番茄钟APP
25分钟专注，5分钟八段锦
写代码写一天，肩颈僵硬是常态。番茄钟用了好几年，25分钟工作、5分钟休息，但那个5分钟我通常干嘛？
刷手机。
刷完接着写，该僵还是僵。
某天我寻思，如果这5分钟不是让我刷手机，而是让我练八段锦呢？
于是我就开了个Claude Code会话，跟它说：帮我做个APP。
断断续续搞了一阵，弄出来一个东西，叫「炼时」——番茄钟+中式健身，25分钟专注，5分钟休息做八段锦或者肩颈拉伸。
记录一下这个过程，算是给想做类似东西的人一个参考。
01
先说技术选型
React 19 + TypeScript + Vite + TailwindCSS v4，状态管理用Zustand，数据存localStorage。
这套组合没什么好说的，就是快。Vite热更新秒开，Tailwind的CSS-first配置写起来顺手。
前端框架 React 19 | 语言 TypeScript |
构建工具 Vite | 样式 TailwindCSS v4 |
状态管理 Zustand | 数据存储 localStorage |
设计风格：中式极简
禅意+现代科技感。配色：深棕做主色，米白打底，墨绿点缀，朱砂红做紧急提醒。字体用思源宋体。
02
让Claude Code懂什么是"中式健身"
Claude Code本身是个通用型选手，你直接让它做"中式养生健身APP"，它大概会给你一套标准的React脚手架加上一些Lorem Ipsum。
所以得给它装技能包。
我装了10个技能，都是社区开源的东西。说人话就是：Claude Code相当于一个新来的程序员，这些技能就是它的业务培训资料。装完之后它就能听懂什么是中医九种体质、什么是久坐风险评估、什么是节气养生。
比较有用的几个：
中医体质
tcm-constitution-analyzer-v2
中医体质辨识，能分阳虚阴虚痰湿湿热那些，然后根据体质推荐功法
办公室病
occupational-health-analyzer
专门管久坐、肩颈、腰椎这些办公室病
运动记录
fitness-analyzer
记录你今天哪个部位练得少，下次就优先推哪个
03
动作指导这块折腾最久
这事儿分两趴：八段锦和肩颈放松。
八段锦
好办，我手头有一份完整的演示视频，12分钟，250MB。直接ffmpeg切成8段，跳过片头片尾，每段87秒，压到2MB左右。
肩颈放松
只有6个动作，没视频。试了几条路：
| ✕ | Agnes Image 2.1 Flash API在美国，国内直连被墙，放弃 |
| ✕ | 自己画SVG线条小人 出来像幼儿园小朋友画的火柴人，放弃 |
| ✕ | 即梦Seedream 4.0水墨风 姿势不太准，尤其"靠墙天使"那个动作人体结构是歪的 |
| ✓ | 即梦写实风 这回对了，35岁中国男性健身教练，深棕运动T恤米白长裤，姿势准确质感也好 |
最后六张写实图配六个肩颈动作，凑合能用。
04
推荐引擎是核心逻辑
这个地方我花的时间最多，不是代码难写，是想清楚"怎么推"比较费脑子。
我的需求很简单：每次休息时推荐的动作得有道理，不能随机糊弄。
最终的逻辑是这样：
1 | 先判断休息类型 第4、8、12个番茄是"长休息"，15分钟，推八段锦完整招式。其余是"短休息"，5分钟，推肩颈放松动作。 |
2 | 再看身体状态 系统追踪颈部、肩部、脊柱、手腕四个部位今天的活动次数。哪个部位练得最少，就优先推哪个部位的动作。 |
3 | 最后去重 不会连续推同一个动作。 |
举个例子
今天是第3个番茄，短休息。系统查出你今天颈部0次、肩部2次、脊柱1次、手腕0次。那就推颈部侧屈拉伸，理由是"今天颈部还没活动过，40秒快速放松"，卡片边框标红表示紧急。
这个逻辑跑通了之后，番茄钟和健身才真正捏到一起了——你点"开始"的时候，系统已经算好了25分钟后要推什么动作，倒计时页面上会提前预告。
05
几个小细节
五声音阶提示铃
用Web Audio API做的，G4、A4、C5三个音。听起来不像电子设备滴滴响，有点仪式感。
呼吸过渡
点击开始后有个3秒呼吸动画，一个圆放大缩小，让你做三次深呼吸再进入倒计时。没啥实际功能，但能把你从"工作状态"拽出来。
数据追踪
每天练了什么部位、做了几次，存localStorage。统计页有个7天柱状图，能看见自己这周是不是又摸鱼了。
06
花销
| 10个技能包 | 免费 |
| AI生图：即梦免费试用额度 | 免费 |
| ffmpeg | 免费 |
| 思源宋体 | 免费 |
| Claude Code：我自己的订阅费 | 个人订阅 |
除了最后一个，项目本身零成本。
07
这东西适合谁
| ✓ | 每天坐8小时以上，肩颈不舒服 |
| ✓ | 用过番茄钟但休息时间基本在刷手机 |
| ✓ | 对八段锦这类东西有兴趣但一直没坚持 |
| ✓ | 想做个效率工具，能自己改代码 |
08
最后
这个APP解决的事其实挺小的：让你那5分钟休息别刷手机，动一动。
代码我整理一下开源，感兴趣可以自己改。能跑就行，不追求完美。
"炼时"——
修炼的不只是代码，还有身体。
◆ ◆ ◆