有没有过这种经历？

下午喝了杯咖啡，结果凌晨三点还瞪着天花板，完全没有睡意？

或者是有时一天喝了两杯咖啡，导致有点心跳过速。

"我到底几点喝咖啡才不会失眠？"这个问题，其实藏着一个关于咖啡因代谢的问题。

咖啡因在体内的代谢遵循"半衰期"规律——大约每3-4小时，体内咖啡因含量就会减半，而当咖啡因含量下降到某个值时，基本对睡眠就不会产生影响。

正好最近Trae solo模式能力非常强，我设计了一个咖啡因计算工具，用于帮大家计算咖啡因摄入是否会影响睡眠。

一、产品定义

产品的核心逻辑在于对咖啡因含量的计算，因此一开始我就把计算方式写进提示词里。

我想做一个咖啡因代谢计算的网站，用户输入摄入的咖啡类型（品牌、咖啡名称、杯型）和时间，自动根据咖啡因半衰期3小时（默认），计算该天哪个时刻，咖啡因含量低于影响睡眠的含量值（默认100mg）。

时间选择器采用上下滑动的选择数字的方式，具有较好的交互体验。

不同咖啡类型对应的咖啡因含量，使用后端数据库存储，设计一个简易的后端操作界面，便于更新。

网页采用渐变色一体化背景，整体简洁，操作逻辑简单。

二、PRO文档

solo模式默认会输出一份质量非常高的产品需求文档，包含每个界面的功能定义。

以及用户的使用流程等内容。作为非专业的产品经理，一般直接确定点击确定，开始开发就行。

三、UI界面

根据我的提示词要求：一体化背景，整体简洁，操作逻辑简单，SOLO很快交付了一版。

整个页面分为几个主要部分：

1. 选择咖啡类型: 在这个区域，从左至右依次从下拉菜单中选择所喝咖啡的品牌、名称和杯型。

2. 摄入时间: 在这里选择喝下咖啡的具体时间。

3. 计算结果界面: 在选择了咖啡类型和摄入时间之后，右侧就会出现计算结果。

四、测试优化

第一个版本里，代谢进度的数值没有正确显示，当体内还有咖啡因存在时，代谢进度不应该是0。

其次，计算结果界面有两个代谢进度的显示框，同样的内容在同个界面不需要重复显示。

Trae2.0版本正好增加了"元素选择"的功能，可以在预览界面直接选中对应的组件元素，并添加到对话中，直接指定删除这个组件。

相比之前的版本，现在想调整界面的元素变得方面很多，再也不用费劲心思用文字描述了。

四、咖啡因数据管理

在做这个应用的时候，Trae还没有直接集成后端数据库（最近版本支持supabase了）

考虑到咖啡因数据也不会经常更新，索性直接让trae设计一个简易的后端操作界面，便于输入咖啡数据，避免需要复杂后后端数据库连接工作。

五、成品效果

输入喝的咖啡类型和时间后，右侧自动计算多久之后咖啡因会低于不影响睡眠的水平。以后傍晚想和咖啡的时候，再也不用纠结啦。

整个开发过程就和玩养成游戏一样，把一个想法作为输入，根据雏形(PRD产品需求文档)、初期版本，不断体验、测试、调整，和AI协作，最后变成为满足最开始预期的产品的时候，成就感爆满！对于非产品经理、非程序员的人，真实地体验到做产品的快乐，越玩越上瘾！

 #TRAE2.0SOLO出道