24 小时前端零基础用 Windsurf + Claude 上线一个简单的工具类网页

过去的 24 小时里我用 AI 制作了一个简单到不能再简单的小工具。

这就是一个专注计时器，但不是番茄钟（ Pomodoro ）。想必用过番茄钟的各位都有过这样的经历，就是刚刚进入心流状态，25 分钟的番茄钟就到时间了，于是不得不进入休息时段。

我的这个计时器采用的是叫做 Flowdoro 的一个时间管理法，番茄钟是倒计时，而这个是正计时，所以它不会主动打断你的心流状态，只有你觉得累了或者从心流状态中走出来就可以主动进入休息状态，休息时长是之前专注时长的五分之一。这样你会找到更适合你自己的专注和休息节奏，不会像番茄钟那样被固定的倒计时打乱心流。

我对于 Next.js 和 React 几乎是一无所知，最开始是用 v0.dev 生成了一个简单的计时页面，但是我发现更复杂的 UI 和功能需求 v0 就搞不定了，所以就转成了在 Windsurf 里继续编辑。

虽然我一行代码都没写，但是和 Claude 交流下来也是颇费功夫。它总是会在修改其他细节时擅自改动计时规则，导致我几次差点破口大骂……还有字体，我想让它修改计时数字的字体，但它总是修改其他文案的字体。除此之外，下面的很多调整都花费了我大量的 credit 才调整好：

1. 按钮的布局和大小
2. 中英文本地化
3. 移动端上的自适应

除了代码工作，最费时的是域名的选择，花了我半天时间。我咨询了豆包、ChatGPT 和 DeepSeek ，最终选择了这个域名（主要是便宜）。然后又花了半小时自己用 Figma 随便弄了一个 favicon ，最后才把这个网页拾掇得差不多了。

这是我第一次通过 AI 来制作网页工具，可能对于高手来说一个小时就能做出来，但我前后花了将近 24 小时才最终完成，也算是新的探索和自我突破了。

这里是网址，FlowFocus，欢迎大家使用和反馈！