不会写代码的我，用 Claude Code 和 Cursor 做了个时区工具。花了3天时间，从想法到上线，记录整个过程和踩坑经验。

为什么要做这个工具

因为工作性质，需要经常要跨国沟通和一些合作伙伴，自己都是在一个比较老的产品上换算时差。那个老的产品我感觉功能还可以，但是 UX 和 UI 不是我喜欢的。

我最近听到朋友一直在研究 Claude Code 写东西做东西，我也看到了一些教程，就想既然 AI 编程工具已经很稳定了，不如自己试试做一个简洁好用的时区工具。

核心需求：

  • 同时显示多个城市时间，像 Notion 一样支持 List & Grid 的视图。（其实还想加地图的模式，目前 AI 实现的效果很差，目前的版本计划还没放上去）
  • 界面简洁，操作便捷（整个 UX 的部分在用 RayCast 的快捷键和搜索框的逻辑）
  • 支持移动端（目前还没很好的适配，等待后续慢慢来调整，的确没想象中好处理）
  • 无需注册，数据本地存储

开发工具选择

在做项目前，目前用了 V0、Cursor、Claude Code，最终选择先用 Claude Code 来做 Demo，然后导入 Cursor 更精细化的进行调整和开发。

3 天开发时间线

Day 1：MVP版本（4小时）

需求梳理

第一版只用了几个小时，功能超级简单：

  • 固定显示北京、纽约、伦敦时间
  • 基础的HTML+CSS+JavaScript
  • 能正常显示，但界面确实简陋
  • 添加了更多城市选项
  • 改进了界面布局
  • 添加了基本的响应式设计
MVP 的 DEMO 版本

Day 2：解决核心问题

主要踩坑：

1. 时区计算问题

Bug
症状：纽约时间显示错误，特别是AM/PM转换

原因：没考虑夏令时和UTC偏移的复杂性

解决：使用 Intl.DateTimeFormat API 替代手动计算

2. 页面空白bug

症状：部分用户反馈页面打开空白

调试：本地正常，生产环境异常

原因：TypeScript编译问题，某些浏览器下会崩溃

解决：调整TypeScript配置，添加兼容性polyfill

 

Day 3：功能完善

  • 添加深色主题
  • 实现中英文切换
  • 优化搜索功能
  • 完善错误处理

 

一些功能想法

增加一些时间段标签

针对不同地区的时间段进行有标记常规情况下，这个时间段大家在做什么，例如是睡觉还是工作。

时间段标签

⌘+K 快速搜索

作为键盘重度用户，我很喜欢 RayCast 的 UX。所以用它作为搜索城市入口的一个快捷键。

搜索框

常用城市推荐

按照商业城市、首都等逻辑，补充了一些城市数据库，同时首页直接显示热门城市，减少搜索步骤。

热门城市推荐

拖拽 Primary 主时区

主时区时间差：

  1. 在 Gird 的模式下，左上角 Primary 时区标签为基准。
  2. 在 List 的模式下，第一个 Primary 时区标签为基准。

设置主时区

  1. Grid 的模式，拖拽其它的时区到左上角位置，它自动换成你拖的这个时区。
  2. List 的模式，拖拽其它的时区到顶部，它会自动换成你拖的这个时区。

AI Vibe Coding 真实体验

能做什么 ✅

快速原型开发：从想法到可用版本，真的只需要几轮对话。

代码调试：描述症状后，AI 能快速定位问题 UI 组件生成：基础的按钮、卡片、弹窗等，生成质量很高

不能做什么 ❌

产品"品味"：按钮间距、颜色搭配、交互流程，AI 给出的是"能用"而不是"好用" 复杂业务逻辑：涉及多个系统交互时，AI容易出错 性能优化：需要人工审查和调整

最大的挑战

学会提问：如何用AI能理解的方式描述问题

错误示例：「时间显示有问题」 正确示例：「纽约时间在下午 2 点时显示为 AM 而不是 PM」

开发流程建议

  1. 从自己的真实需求开始 - 这样你最了解要解决什么问题
  2. 快速上线收集反馈 - 完美主义会阻碍进步
  3. 学会清晰表达问题 - 花时间学习如何与 AI 有效沟通
  4. 重视用户体验细节 - AI 生成的代码能用，但好用需要人工调优

避免的坑

  • 不要一开始就想做复杂功能：MVP 原则很重要，AI 无法承载很复杂的功能一口气完成，需要你自己根据大的 Demo，一个组件模块一个一个的来调整。
  • 不要完全依赖AI：关键逻辑要自己理解，因为 AI 它也会偷懒，你自己可以多交叉几个 AI 互相 battle 一下。
  • 一定要及时备份：比较满意的项目版本的时候，一定要记得备份一下，部分你后面写错了内容，你都不知道回滚到哪个版本，我当时没意识到版本备份重要性，导致我有一天都在回滚和修复问题。像管理研发团队一样，让它在满意的版本的时候，即使做版本日志和版本号备份管理。

关于"创作"的思考

看到网上讨论 AI 编程是"码农"还是"创作者"，我觉得挺有意思。

从技术角度，我确实只是在组装 AI 生成的代码。但从用户角度，工具解决了实际问题就有价值。

也许在 AI 时代，"创作"的定义本身就在变化。重要的不是你是否亲手写了每一行代码，而是你是否真正理解和解决了用户的问题。

AI 降低了技术门槛，但没有降低产品门槛。会用 AI 写代码的人会越来越多，但能发现真实需求、设计合理流程的人不会因此变多。

后续计划

我在考虑这些：

  • Chrome 插件版本：增加可以多入口被看到的可能性。
  • 增加全球地图：可以很直观的在地图看到一些城市情况。
  • SEO 尝试：尝试做 SEO 和 Adsense 的部分。
  • 打赏功能：用 Stripe 做一个类似 Buy Me a Coffee 的入口。

项目信息：

 

1
0