从想法创意到原型落地，我用TRAE做了一个"小时光"App
先看成果：
[小时光App]
故事的开始
有时候，灵光乍现就突然冒出一个念头——能不能做一个小工具，帮我每天坚持喝够八杯水、按时运动、早点睡觉？
习惯打卡的App我手机没少装。先不说核心功能，大多数App做的都很臃肿；打开App注册登录先来一套，上来就是手机验证码登录，这谁受的了；还有的用着用着冷不丁的就开始收费。
更烦的是，打卡用一个App，番茄钟用另一个，笔记又得打开备忘录。 也试过别的招。纸质打卡表贴墙上，前两天新鲜，只要不在家两天（作为打工人谁没有三天两头出个差啥的），觉得"完了全断了"，干脆撕了。 手机日历提醒倒是设过，但只能响一声，打完卡还得自己记，跟没记一样。
我就想要一个简单、快速、打开就能用的小工具。打卡、专注、笔记、待办都在一个页面，数据本地存着不用注册，断了一天也不会有红色感叹号提醒你"失败了"。
于是我用TRAE的SOLO模式，花了40分钟，自己做了"小时光"App。
一行代码都没写。
我想做的东西很简单
在用TRAE开发原型前，先对AI说了我的大概需求：
- 每天打卡好习惯（比如喝水、运动、早起）
- 用番茄钟专心学习
- 写点小笔记
- 列个待办清单
- 能看到自己坚持了多久
来回讨论了几个轮次，我让他对我要的功能进行了简单总结，就得到了精炼版的提示词。这样做的好处是，AI总结的结构化信息，AI更能理解——这大概就是AI更懂AI吧。
整理好提示词后，切到TRAE的SOLO模式，直接丢进去开始干活。
下面是我让AI帮忙提炼后的提示词——说实话，AI总结出来的版本比我最初想的清晰多了，连"iCloud同步"这种我自己都没想到的点都补上了。Apple的影响力确实大，AI写提示词都会不自觉带上。
不过先不管这些，做出来看看再说：
「小时光」App是一款为追求自律者打造的极简习惯养成系统。
为你构建从宏大梦想到每日微光的完整闭环。在这里，每一个遥远的目标都被拆解为触手可及的日常仪式，每一次点击翻牌的清脆声响都是对自己的即时嘉奖，让自律不再是咬牙坚持的负担，而变成自然而然的正向循环。
你可以：
• 用极速翻牌完成每日打卡，自动汇总待办项目，在一屏之内收束所有习惯，Click 一声即获即时满足
• 运行番茄钟沉浸工作法，专注计时营造心流体验，让学习与生活回归高效节奏
• 记录碎念笔记，随时捕捉灵感火花与情绪流动，让习惯追踪器同时成为个人专属日志本
• 管理一日待办清单，将琐事安排与习惯养成一站式整合，清晰掌控全天行动脉络
• 解锁成就卡片，当日全部完成后在背面写下心得，让坚持留下可触摸的实体印记
• 查看统计与趋势，在连续打卡天数、完成率与日历热力图中，亲眼见证自己的蜕变轨迹
• 通过桌面与锁屏小组件，抬手即见今日进度，让保持动力变得毫不费力
• 享受零社交零广告的纯净空间，离线可用 iCloud 同步，让成长回归专注本身
「小时光」希望成为你成长旅途中的安静陪伴者，陪你把遥不可及的大梦想，走成每天进步一点点的小时光。
[图1：SOLO Coder - TRAE SOLO模式介绍]
意外的是，SOLO模式识别到了我的核心诉求和场景，直接进入灵魂拷，这简直太懂我了吧：
[图2：AI询问页面数量]
[图3：AI询问设计风格]
[图4：AI询问用途]
经过仔细斟酌，我选了7个页面，风格要温暖一点，像午后阳光那种感觉。主要给想养成好习惯但总是坚持不下来的人用——说白了，就是我自己。
AI先画了一张"蓝图"
问完需求，AI没有急着写代码，而是先整理了一份开发计划。
7个页面：
- 首页——记打卡
- 番茄钟——练专注
- 笔记——随手记
- 待办——列清单
- 成就——徽章墙
- 统计——看数据
- 设置——切主题
[图5：开发蓝图 - 产品概况和页面规划]
[图6：开发蓝图 - 设计规范和开发计划]
[图7：蓝图确认对话框]
颜色选了温暖的橙色做主色，米白色做背景。蓝图出来后，AI让我确认一下，没问题就开始干活了。
开始"施工"
AI先建好了文件夹，然后一口气生成了三份文档：产品需求文档、用户故事文档、UI设计规范。
[图8：开始开发 - 任务清单]
[图9：生成产品需求文档]
[图10：生成用户故事文档]
[图11：生成UI/UX规范文档]
文档搞定后，开始做页面，3下5除2就搞定了，好家伙资深码农都不带这么6的好吗，不得感概，时代变了。
[图12：项目完成 - 产物汇总]
修复了几个BUG
页面生成完后，我仔细看了看，发现几个需要调整的地方：
卡片没对齐。 首页的卡片往右偏了，右边还溢出了。AI重新调了一下布局，两列卡片整整齐齐排好了。
图标太小。 卡片上的图标原来只有36像素，放大到44像素后清楚多了。
按钮换了样子。 番茄钟的开始/暂停按钮原来是文字，换成了播放和暂停图标，放在圆形按钮里，好看也好认。
颜色调了一下。 卡片翻转后，橙色背景上的白字看不太清。AI把浅橙色换成了深一点的橙色，字就清楚了。
[图13：修改BUG - UI错位]
改了几轮，原型就做好了。
最后做出来的东西
"小时光"是个网页App原型，HTML5 + Tailwind CSS + JavaScript，数据存在浏览器本地。17个文件，4000多行代码，无报错（UI错位但没报错哈）一次成功。
挑几个页面说说：
首页的翻牌打卡是我最喜欢的功能。没打卡的时候卡片是白色的，点一下，卡片翻过来变成橙色，上面出现一个勾。就这么一个小动作，打卡变得有仪式感了。
番茄钟有个圆形计时器，可以选25分钟专注或者5分钟休息。开始和暂停用图标按钮控制，简洁明了。
成就页面像游戏里的徽章墙，完成特定条件就能解锁。人嘛，总得有点成就感才能坚持下去。
笔记、待办、统计、设置这几个页面相对简单，就不一一展开了。
在浏览器里打开 prototype/preview.html 就能看到完整的App，所有功能都能用——打卡翻转、番茄钟计时、深色模式切换，都没问题。
[图14：原型展示 - 浅色模式效果]
[图15：原型展示 - 浅色模式效果]
[图16：原型展示 - 深色模式效果]
[图17：原型展示 - 深色模式效果]
一点感受
整个过程大概是这样的：我说需求，AI整理成蓝图，确认后生成文档和页面，我提修改意见，AI调整。
不用写代码就能做出一个看起来像样的App原型，大大缩短了从想法到能看见的鸿沟，传统模式下一个团队不来回折腾个几天也未必能有这个效果。
话说回来，当前这还只是个原型。要变成真正能下载的App，还有很多路要走。
接下来做什么？
"小时光"的原型已经做好了，但离一个真正的App还差不少东西。
下一步，我打算把这个原型变成真正能装在手机上的App。这会是个不小的挑战——不过我还是想用TRAE SOLO模式来加速落地，看看能走多远。
如果你也对"用AI做App"这件事感兴趣，点个关注，我们接着聊。
你觉得"小时光"还缺什么功能？评论区告诉我，说不定下一篇就加上了。
