Hello大家好，我是May～

现在是一枚在AI世界畅游的自由设计师🧑‍🎨

之前写过一篇关于AI辅助学习的文章👉 【干货】如何让AI成为你的全能私教

自那之后AI又双叒叕进化地飞快，这篇文章是想以一个交互设计的角度去尝试在AI的帮助下，如何在一周之内快速地做一款Chrome插件（插件链接🔗）。

(OS：说实话，当我最开始给自己定7天这个deadline的时候只是为了激励自己，没有想到真的能够完成23333

Done is better than perfect. （ADHDer们来跟我一起把这句话刻在脑门上）

一、创意诞生与验证

1.1 灵感来源

日常的灵感记录很重要，我喜欢用Obsidian的个人知识库记录日常的想法💡

当我决定开始尝试一周的极限开发+文字记录之旅之后，我翻出了前一周用Obsidian记录的五个感兴趣的方向。

结合自身需求，我意识到自己需要各种各样的提醒和总结工具（拖延症、健忘症必备）。 我一直相信，只有自己觉得有用的东西别人才会觉得有用，AI辅助的工具开发与传统开发类似，只是可以在不同阶段引入AI辅助来提升效率。

由于只有一周的时间，于是让ChatGPT帮忙分析每个方向的难度和可行性。经过AI分析后（主要是根据开发和逻辑的难度），最终选择开发一款喝水提醒工具。

除了根据个人需求以外，从小红书等平台搜集/跟周围朋友聊天调研/或者是跟AI一起brainstorming也是不错的方式～

1.2 需求分析与验证

方向有了，接下来就是确认呈现的方式和总结需求分析。

搜索调研现有喝水提醒工具，发现大多为APP，对于我来说感觉功能冗杂，很多都不太需要。Chrome插件提醒喝水的较少，而我个人用插件的频率还蛮高的。通过“water”和“reminder”相关的搜索，我在插件发现一款下载量蛮高的Chrome插件，界面异常“简单”，一眼望去可以做很多美观和逻辑上的优化，一看评价

——好家伙！评价还挺高？

就这样报着“You can you up”的懵懂想法，我就这样决定就做一款提醒（自己）喝水的Chrome插件作为第一个尝试的练手作。

二、技术实现

2.1 开发流程

时间挑战 由于计划参加破局的“赏金猎人”活动，需在短时间内完成从头脑风暴、开发、记录到文章整理的全过程压缩至一周内完成。

时间紧俏，我准备采用Trae进行开发，相比Cursor这是一个免费的AI编程APP，他们的界面非常相似，操作逻辑也是一通百通。Trae的中文版和英文版所调用的模型有所不同，据说英文版的Claude系列模型用于编程会有更好的效果。

（左：Trae界面，右图：Cursor界面）

而对比ChatGPT和deepseek等AI工具，整合IDE和AI功能上下文打通的方式具有天然的优势，无需像ChatGPT那样反复复制每一步指令，同时可结合项目背景和文件结构综合判断，这在我前文所提及的去年的文章的编程章节有详细过程记录。

（PS. 在开发过程中Manus横空出世，可与Cursor一战，但个人使用之后感觉Manus和Trae/Cursor/windsorf共同开发将会是一个不错的选择。）

2.2 模型版本差异

尝试使用了Claude 3.5和Claude 3.7，发现3.7的输出更复杂且更完善，它不仅实现了我最初设想的功能，还提出了额外的优化方案。 但Claude 3.7经常会需要排队！所以可以整理大框架的时候用Claude 3.7，一些小问题就用3.5方便提速。

当然，在得不到想要的结果的时候，切换其他模型有时也能得到意想不到的惊喜效果（黑箱的快乐）。最终，我主要是使用Claude 3.7的所生成的页面框架，在这上面做优化。

2.3 开发和调试

根据Claude 3.5出的基础视觉效果重开了一个窗口使用Claude 3.7来对话开发。在Trae上向AI提出以下需求，让AI根据描述生成了基础框架并列出了所需文件。

代码块 帮我设计一个提醒每天8杯水的chrome插件 最开始启动是“开始今天的喝水日程” 整个界面里面包括今日饮水进度，有一个粗一点的进度条，包括八格 整个进度条是蓝色渐变的，这个大的进度条下面有一个小的进度条，很细 旁边有下次提醒喝水的倒计时（60min） 下面有“打卡”和左边“撤销”的选项

开发初期进展迅速，但调试阶段耗时较长。 需要注意的是，Trae不支持版本回溯，为避免AI“魔改”导致的混乱，需要使用GitHub的Git功能记录关键版本，或者用本地储存的方法，储存不同阶段的压缩文件。

建议得到一个70-80%成熟的版本就保存，不然可能会丢失掉重要进度，甚至需要完全重新开始（不要问我为什么知道😢）

2.4 功能与交互优化

2.4.1 插件主要流程

用户交互流程（之一）

打开插件 → 确认时长 → 开始记录 → 接收通知 → 记录饮水 → 观察植物生长/查看杯数

提醒系统流程

为了更好的阅读体验，来飞书看吧：

https://lxau0csevxi.feishu.cn/wiki/IxIqwJnZOiWj3hk11GjcJ0U2nah