AI编程：让时间可视化！| 甲维斯

几个月前写的问题文章，忘记发了！最近Gemini3来了，刚好做一个对比。

---

源起

我一直热衷于研究新技术，研究哪些牛逼的东西。

但是这几年总感觉有点力不从心了，毕竟年龄已经到了一定程度，时间无形中改变了很多。

一晃眼，今年已经过去一大半了，文章都没写几篇。

时间总是悄咪咪就溜走了！

一晃眼，天黑了，一天过去了。

一晃眼，周五了，一周过去了。

一晃眼，月底了，一月过去了。

一晃眼，年底了，一年过去了。

一晃眼，人老了，一辈子过去了。

时间无形，岁月不语，一切都在不知不觉中流逝了。

我意识到留给我（们）的时间已经不多了。

所以，我希望，把时间量化。

可以让自己时刻意识到时机流逝，要充分把握好时间，珍惜当下。

所以我就有了开发一个网页和应用的想法。

我一直在研究AI编程，刚好可以试试AI的身手，今天的活，就全部承包给AI了。

AI负责完善创意，AI负责取名字，AI负责写语录，AI负责写代码，AI负责翻译。

我么，主要负责下命令！

本文主要讲写代码部分，从零开始，到满意为止。

我先贴一下最终的效果，然后就开始还原我的制作过程。

最终效果是，做了三种主题，两种显示模式；

视频：

下面开始实操！

实现

我使用的AI编程工具是Trae国际版，选择的模型是为Claude 4.0 sunnet。

为了让AI，能Get的我的想法，我大概概括了一下我的核心需求：

我需要开发一个APP，可以直观的表达时光的流逝。 具体的展现形式为五个圆环，分别代表一日，一周，一季，一年，一生。⭕️采用倒计时的方式，显示剩余的时间和比例。

第一轮提示词

根据这个思路，编写提示词：

直观的表达时间流逝，核心目的是珍惜时光！

一日，一周，一季，一年，一生！

五个圆环倒计时！ 以这个为核心理念，开发一个多终端APP。包括安卓端，ISO，macos，windows ,web

输入提示词之后，一个回车下去，Trae就开始工作了。

首先，Claude-4先奉承了一下我，说这是一个很有意义的项目理念！

然后，它就开始自我洗脑：

“我需要创建一个多终端时间倒计时应用，以五个圆环分别表示一日、一周、一季、一年、一生的时间流逝，提醒用户珍惜时光。首先我需要创建项目结构和规划整体架构，然后开始开发核心功能。”

接下来，它给自己规划了9个任务：

• 创建项目基础结构和配置文件
• 设计和实现核心时间计算逻辑
• 开发Web端界面-五个圆环倒计时显示
• 实现数据持久化存储（SQLite）
• 创建Windows桌面应用
• 开发Android应用
• 开发iOS应用
• 开发macOS应用
• 创建启动脚本和文档

自己规划任务之后，就开始依次执行任务。

自动创建文件，自动编写js，sql，html,css,bat等文件。很快就把web版本整好了。

写完代码之后，它还会清晰的列出它干了什么，我节选一部分贴出来。

✅ 已完成的功能

核心功能

• 🕐 一日倒计时 ：精确显示到明天0点的剩余时间（时:分:秒）
• 📅 一周倒计时 ：显示到下周一的剩余时间（天+小时）
• 🌸 一季倒计时 ：显示到下个季度的剩余天数
• 🎊 一年倒计时 ：显示到明年的剩余天数
• 💫 一生倒计时 ：基于用户生日和预期寿命的剩余时间（年+天） Web端应用
• 🎨 现代化响应式界面设计，支持桌面端和移动端
• ⭕ 五个精美的圆环进度条，实时显示时间流逝百分比
• ⚙️ 完整的用户设置面板（生日、预期寿命、主题选择）
• 🌈 三种主题模式：默认渐变、深色、浅色
• 💬 励志语录系统，随机显示时间相关的名言警句
• 🔄 实时更新机制，每秒刷新倒计时显示

📁 创建的文件

项目结构

• README.md – 项目说明文档
• UPDATE.md – 更新日志
• Start.bat – 一键启动脚本 核心逻辑
• timeCalculator.js – 时间计算核心类
• dbManager.js – 数据库管理器
• init.sql – 数据库初始化脚本 Web端应用
• index.html – 主页面
• styles.css – 样式文件
• app.js – 应用逻辑

🚀 如何使用

1. 启动应用 ：双击运行 Start.bat 文件
2. 设置个人信息 ：点击右上角设置按钮，输入生日和预期寿命
3. 选择主题 ：在设置中选择喜欢的主题风格
4. 观察时间流逝 ：五个圆环会实时显示不同时间维度的倒计时
5. 获得启发 ：底部会随机显示励志语录，提醒珍惜时光

📋 后续扩展计划

项目已为多终端开发做好准备，后续可以继续开发：

• Windows桌面应用（Electron）
• Android移动应用
• iOS移动应用
• macOS桌面应用 现在您可以通过浏览器访问 http://localhost:8000 来体验这个时光珍惜应用！

打开浏览器后，就可以看到如下的效果了：

这是我一次抽卡的效果。

它用原生的html,css,js实现了这个布局和效果，没有使用任何第三方框架。

除了按要求设计了五个圆环之外，还加了标题副，标题，语录，页脚，设置等功能。这些内容都是它自动填充的，我并未指定。

圆环使用了svg实现，设计和动效，还不错。时间和百分比计算全部自动完成了。

设置部分包含了生日，寿命，主题。

这是我没有提到的，但是它想到了。因为我们有一生的概念，而人的一生是由开始和结束觉得的，它无法预测你的一生，所以给了你设置选项。

而且设置之后的数据是会自动保存的，刷新之后可以读取本地配置。

虽然我提出了要多终端实现，它选择了先实现web短。但是，我自己也清楚，它不可能一下子实现多终端代码开发。

第二轮提示词

我对它web的实现基本是满意的，我的核心需求它实实在在的做出来了。

只是，展现方面，我倾向于同心圆。就是五个环套在一起，类似iPhone健身应用的展现形式。

为此我开始了第二轮沟通：

“创建一个新的页面，尝试把五个圆环套在一起，时间最短的套在最里面；五环只显示比例，不写任何文字内容。就在最中间心处写一个“时光” 。 当鼠标移动到某个圆环的时候，显示百分比和对应剩余时间。”

很快它就创建了一个concentric.html页面，已经配套的concentric.css和concentric.js。直接打开html就可以进行查看了。

效果如下：

这个效果，也没大毛病。挺好啊！

我最佩服Claude的一点事，它自己的总结文档，写的是清晰又漂亮。

两轮对话，核心内容已经实现了。

第三轮提示词

这个时候，我就需要开始创建版本管理，添加git忽略文件了，并Commit当前的内容了。这样代码就不会丢了，也能时刻还原到某个版本

当然，这个事情，也完全可以让AI来完成。

第三轮对话：

在当前目录的最外层添加github忽略文件，根据不同平台的特点，编写忽略的文件；然后commit初始化版本。

不停修改完善

接下来就可以放心的在这个基础上修修补补了。

• 添加一个选项，可以选择同心圆版本，或者网格版本。
• 比如把副标题改成文字改成2025年09月17日 星期三 22:06:19
• 网格板添加一个“当下”的圆环，变6环，不同屏幕尺寸下可以整齐排列。
• 调整首页，把同心圆版设置为默认，同步修改配套js,css。
• 修改默认主题，把当前主题命名为紫色，把浅色主题作为默认主题。

除了这些比较清晰的需求之外，又有不少修复页面效果的对话。

总共大概commit了十几次。总得开发时间大概在几个小时。

其中有一个切换主题的问题Claude改完之后，一直有问题，修改不全面，导致某些样式没有 修改成功。试了很多次都失败了。

刚好最近提说GPT5在代码方面表现不错，就尝试用GPT5来解决这个问题了。没想到真的一次完成了。

我之前是一直坚信Claude在编程方面吊打同行，但是在这个问题让，也让我认识到了GPT5的一些优势。

GPT5干活比较慢，但是可以分析的比较透彻，在上下文不是庞大的项目下，往往能很好的进行全局把控，属于慢工出细活。

Claude就是给了命令，不多想，直接干活，主打一个高效，大部分情况干得也不错。

编程部分大概就这样了。

内容填充

然后就是名字和语录部分。

名字，我一直想不好，直男思维就叫“时间”，英文就叫time。但是这个太理性，不够感性。我就想着把时间改为时光。但是这个名字体现不出倒计时的这种特色，最后和GPT讨论了一阵子，决定改为“余生”吧。

然后，又让GPT5帮忙翻译成英文。

它给了好几中方案。

1. 直译感（强调字面“余生”）：
   • Remaining Life
   • Rest of Life
   • Life Remaining
   👉 直白，但略显生硬，少了点艺术气息。
2. 诗意感（更符合项目氛围的名字）：
   • The Remainder （余数、余下的部分，简洁有力）
   • Aftertime （在“时光”之后的时间，呼应你之前的名字）
   • The Time Left （直白又带点哲学意味）
   • Lifecount / Countdown Life （强调倒计时感）
3. 哲思感（偏艺术、深邃的语感）：
   • Restlife（自造词，简洁有冲击力）
   • Remaining Days（余下的日子）
   • All That Remains（唯余之物，带有感伤感）
   • The Last Span（最后的区间）

结合你提到的 倒计时五环，我会推荐：

• 如果想走简洁直接路线：Time Left
• 如果想有哲思艺术感：The Remainder
• 如果想呼应倒计时概念：Countdown Life

大家觉得哪一种比较好？

GPT在给方案这种场景下，活干的还是不错滴。很全面！

因为涉及到时间生活这种场景，我还是倾向于从诗意感中选一个。

考虑到倒计时这种设计，好像Lifecount比较匹配一点。

名称确定之后，就优化一下语录。

最早的语录是Claude编程的时候自动完成的。作为简单的填充内容，也没啥问题。但是要真的拿来用 ，就有点太生硬了。

比如什么：

“一寸光阴一寸金，寸金难买寸光阴。”

“时间就像海绵里的水，只要愿挤，总还是有的。”

“合理安排时间，就等于节约时间。”

都挺对，但是说教味有点很浓！

我就直接对Chatgpt提需求，来点感性的：

{ quote_text: '岁月极美，在于它必然的流逝。春花、秋月、夏日、冬雪。', author: '三毛' },{ quote_text: '时间会告诉我们，简单的喜欢最长远，平凡的陪伴最心安。', author: '佚名' },{ quote_text: '我们走得太快，灵魂都跟不上了。', author: '村上春树' },{ quote_text: '人们总说时间会改变一切，但其实是你自己要去改变一切。', author: '安迪·沃霍尔' },{ quote_text: '抓不住的叫时光，留不住的叫遗憾。', author: '佚名' },{ quote_text: '世间所有的相遇，都是久别重逢。', author: '白落梅' },{ quote_text: '你来人间一趟，要看看太阳，要和喜欢的人一起走在路上。', author: '海子' },{ quote_text: '时间从来不语，却回答了所有问题。', author: '佚名' }

GPT对于这种偏文学写作类的问题，基本都是信手拈来。

当然，还可以更进一步，让语录更加个性化。

比如让GPT生成适合不同时间段的语录：

[  // 🌅 早晨  { "quote_text": "晨兴理荒秽，带月荷锄归。", "author": "陶渊明" },  { "quote_text": "三更灯火五更鸡，正是男儿读书时。", "author": "颜真卿" },  { "quote_text": "早上我起来的时候，小屋里射进两三方斜斜的太阳。", "author": "朱自清" },  // ☀️ 中午 / 当下提醒  { "quote_text": "逝者如斯夫！不舍昼夜。", "author": "孔子" },  { "quote_text": "你热爱生命吗？那么别浪费时间，因为生命是由时间组成的。", "author": "本杰明·富兰克林" },  { "quote_text": "你随时都可能离开这个世界。让这念头决定你所做、所言与所思。", "author": "马可·奥勒留" },  // 🌙 晚上 / 收束与自省  { "quote_text": "夕阳无限好，只是近黄昏。", "author": "李商隐" },  { "quote_text": "回首向来萧瑟处，归去，也无风雨也无晴。", "author": "苏轼" },  { "quote_text": "我荒废了时间，时间便把我荒废了。", "author": "威廉·莎士比亚" },  // 📅 工作日 / 奋斗与精进  { "quote_text": "业精于勤，荒于嬉；行成于思，毁于随。", "author": "韩愈" },  { "quote_text": "莫等闲，白了少年头，空悲切。", "author": "岳飞" },  { "quote_text": "时间就是金钱。", "author": "本杰明·富兰克林" },  // 🌳 周末 / 松弛与闲适  { "quote_text": "行到水穷处，坐看云起时。", "author": "王维" },  { "quote_text": "采菊东篱下，悠然见南山。", "author": "陶渊明" },  { "quote_text": "纵浪大化中，不喜亦不惧。", "author": "陶渊明" },  // 🌙 月初 / 月末  { "quote_text": "明月几时有？把酒问青天。", "author": "苏轼" },  { "quote_text": "今人不见古时月，今月曾经照古人。", "author": "李白" },  // 👦 少年时期  { "quote_text": "黑发不知勤学早，白首方悔读书迟。", "author": "颜真卿" },  { "quote_text": "盛年不重来，一日难再晨。及时当勉励，岁月不待人。", "author": "陶渊明" },  { "quote_text": "燕子去了，有再来的时候……我们的日子为什么一去不复返呢？", "author": "朱自清" },  // 🧑 中年时期  { "quote_text": "年年岁岁花相似，岁岁年年人不同。", "author": "刘希夷" },  { "quote_text": "中岁颇好道，晚家南山陲。", "author": "王维" },  { "quote_text": "回首向来萧瑟处，归去，也无风雨也无晴。", "author": "苏轼" },  // 👴 晚年时期  { "quote_text": "老骥伏枥，志在千里；烈士暮年，壮心不已。", "author": "曹操" },  { "quote_text": "莫道桑榆晚，为霞尚满天。", "author": "刘禹锡" },  { "quote_text": "夕阳无限好，只是近黄昏。", "author": "李商隐" }]

这样就可以更加个性化了。不同的时间段，会有不同的语录。

GPT5特别喜欢编佚名的语录 ，所以第一版全是杜撰的。

后来严厉批评了它，不要自己瞎编，要找些有名有姓的语录。批评完之后，它就会乖乖的去查找和验证每一条语录了。

到这里，我的想法 基本就实现了。虽然GPT5给了很多改进建议。但是我希望保持简单。

我就是想直观的感受时间流逝，让我知道，今天还剩几个小时，这个星期还有多少天，这个季度还有多少天，这一年还有多少天，我的余生还有多少天！

从这个开发过程来看，我提供的初始建议大概就几十个字。然后再AI的辅助下完成了代码开发和内容填充。对于这种简单的需求，AI 处理起来并没有太大难度。

AI现在其实有所降温，没有刚开始那么火爆，很多技术都陷入了瓶颈期。但是这个时候其实才是最可怕了。因为AI逐步落地了，变得越来越实用了。某一天AI什么都干的很好的时候，我们生而为人，到底还有哪些优势呢？

疯狂的卷知识还有意义么？ 每天研究底层技术还有意义么？

专业，还是有意义的。但是，我们需要摆脱工具人思维了，自己去统筹这些工具，学会感性的认知这个世界，创造一些有意义的东西。

所以结尾就不用技术总结了，就感慨一下吧！

我每天都学习新知识，新技术，本身就是一件快乐的事情，也是在充分利用时间。但是如果过分追逐新的东西，接收大量的噪音，接收太多情绪价值，无法专注，那么时间就会被无情吞噬。当到了脑力，体力，心力都下降的年纪，合理分配时间变得尤为重要。所以保持好奇心，保持热情，并有所取舍，专注于那些对我真正重要的事情。

跑累了，就休息会儿！

---

Gemini3的效果在下一篇！