利益相关声明:作者与文中产品有直接的利益相关(开发者、自家产品等)

这篇文章,笔者将从自己的学习的短板到产生需求,到从零开始开发一款chrome插件聊起

从学习短板聊起

灵魂拷问,当我在日常学习中,我最大的问题是什么:

  1. 方向感缺失: 容易在学习过程中模糊学习与娱乐的边界,在模糊的边界中倾向于人性的弱点,转而选择更“轻松”和“更快”的快感来源:娱乐性质的网页或视频
  2. 长期主义的培养: 制定目标很容易,但是往往目标都是需要长期才能达成的,纵使拆散分解长期目标,多步达成短期目标,也避免不了后期“后劲不足”,虽然比最开始有所进步,但永远都是在最后几步放缓步伐,远离最初追求”完美“的初心。这⾥的复盘包括
  3. 缺少总结复盘: 专注力集中在达成”一个目标“上,却往往忽视了目标以外的整体的学习效果和往期不同实验性学习方案对应的效率结果。即使有传统的番茄时钟,TodoList,也很难顾全大局,兼顾学习内容以外的总结和复盘。

我是一个长期”番茄时钟“主义,过往我也曾使用了各类番茄时钟的应用,电脑,手机,甚至包括实体的番茄时钟的机械计时器。同时,我也是一个ADHD的学习者,内耗与分神常常伴我左右。

我想要一个什么样的番茄

关于开发这个插件的灵感,来自于市面上很多AI软件的兴起, 从MCP的日常接入:例如导航攻略,到n8n自动化接管一些工作上需要的自动化流程,我也在思考,是否我能开发一个 更切合自身的番茄闹钟呢?比如利用AI?

在开发之前,我先画了一张表格总结了自己的”需求“ 与市面上的番茄时钟的差异:

需求我的需求番茄闹钟
灵活度可以自定义番茄时间
习惯养成监督需要有连续打卡类似的激励
目标性有类似”每日目标“ 的激励 或者每周任务
学习娱乐的强制分界线我使用电脑时,我需要一个十分清晰的分界线,例如一个”白名单“模式,让我在受惰性影响时,有最后一道”警戒线“√ (电脑上的番茄时钟并不是全部都有)
期待感灵感来源于每天买瑞辛咖啡时,我很期待扫码后的每日便签上的插画和内容。我希望我的番茄闹钟可以让我有每日的期待感
游戏性看到了很多”游戏性“打卡的APP,比如多邻国,但是市面上大多番茄闹钟(PC) 并没有对应的徽章系统成就系统x
复盘&陪伴作为一个享受孤独的人,我并不觉得我需要所谓的”学习搭子“,但是,我在自我复盘上并没有很勤奋,最高也只是做到了例如每次学习日语时,复盘一下上一课学习了什么,但我不会持续性的复盘我的学习习惯和养成曲线。
 
√(有,但是我希望能接入AI对习惯进行分析)

虽然市面上有不少能够满足我绝大部分需求,但是我觉得我可以开发出一款满足我全部需求的插件(由于我日常使用电脑更多一些, 相比APP的需求,我更需要一款这样的chrome插件)。
并且,我更希望AI能够以非即时参与的形式引入我的学习过程中,并且作为一个持续性的习惯分析和建议的存在。
明确了需求后,我立即着手开发。

市面上的工具虽功能丰富,却无法完美契合我的终极目标:打造一个以“非即时 AI 复盘”为核心的、专为桌面学习场景设计的番茄系统。这既源于我对 Chrome 插件形态的强需求(电脑是主要生产力工具),更源于我对 AI 角色的独特理解——它应是隐形的习惯教练,而非实时的干扰源

锁定这两大核心目标后,我立即投入开发

踩坑与成长:从完美主义到MVP的实战之路

由于本次为我的第一次独立开发,除了chrome扩展开发的经验外,我也缺失着对产品设计的经验,最开始我的构思很多,包括:除了满足以上全部需求,我还要一款支持同步到Obsidian/Notion的番茄钟,我希望一款番茄闹钟就足以接管我的全部需求(这也反映出我初期存在的完美主义倾向。)
这章我将描述一些从构思到实现的一些实现路径和技术细节聊起, 其中包括每一处的构思所遇到的坑点和我对此做出的措施和改进。
图为实现了基础功能后的另一个构想,希望像拼图一样,即用即开:
 

独立开发者都深谙“功能越多,Bug 越多”的道理。开发初期,借助 Cursor 快速搭建了核心功能后,我很快陷入了功能堆砌的泥潭——一边学习 React 和 Chrome 扩展开发,一边应对着代码膨胀带来的无止境重构和显著下降的开发效率。

这段艰难的瓶颈期迫使我做出改变:深度优化 Cursor 的使用策略,并沉下心来精读 React 源码,进行系统性重构。同时,我也升级了项目管理方法以应对挑战:

一. 项目管理:用Notion驯服独立开发的混乱

我引入了日常工作的项目管理的方法,但是出于只有我一个人和日常的学习偏好,我直接使用Notion建立档案:

使用notion进行项目管理

 

首先是开发分类的几个大类,我设计了:1. 后端 2. UI实现 3. 功能实现 4. fix, 而这个分类主要目的是让你提前衡量一个功能点的开发“人力付出”的占比。例如,后端和fix,就可能需要更多的人力阅读代码和分析(这里是可能,根据已有经验来进行判断的),前端和一些美化则可以让AI加入绝大部分。
然后是进度的管理,我设计了 进度状态(进行,完成,暂停) 和预计开始时间和预计结束时间。
最后,对于开发的功能点和是否测试也进行了对应的状态管理。 

二.  Cursor双刃剑:精准使用提示词来破局

用过Augment也用过Cursor,我发现一个工具是否好用,还是取决于你对工具的了解。 Cursor的短板是它缺乏多个agent连续思考的能力,其次,它对于需求的理解会缺乏“限制”,它并不明白一个需求什么时候是不需要自由发挥的,什么时候是需要读取已有的变量的(例如 chrome.storage.local)有时候,甚至一个需求只涉及到UI的部分,它也会连并修改对应的存储变量名:举遇到过恶心的例子来说:读取timerLogs变成了读取TomatotimerLogs
通过失败进行不断的总结更新,在开发进行一阶段之后,我总结出了以下的一些使用姿势:

  1. 限定范围:开发者必须了解自己的项目架构,在使用提示词的时候,必须知道你当前的需求是涉及到哪些目录结构的,会用到别的service吗? 是被引用的components吗? 需要在utils下创建新的文件吗?
  2. 你的需求会涉及到已有的变量吗?哪些变成是持续性存储的,哪些属于 chrome.storage.local 哪些属于 chrome.storage.sync,哪些是需要你从后端服务器上获取的
  3. 使用的需求是否需要官方的文档,如果能给出具体文档的哪个部分,引用的时候需要指出
  4. 使用MCP简化提示词和避免过度理解:这里我使用了Context7 和 Sequential Thinking, 这里Context7 是文档检索MCP,而Sequential Thinking则被我用来解析和拆解任务,从而结构化的思维去处理复杂的问题。这里我将两个MCP的使用写入了cursor rules下,每次复杂需求则引用对应的cursor rules(感谢网友分享,这里我找不到当时看的推文了不然可以引用一下。但是这个rules来源是公开分享的,有需要的网友可以找我)。
cursor rules部分参考

三.成本控制:Serverless架构与Pro功能

由于是独立开发,成本的控制显得尤为重要。这里我使用了:

  1. vercel搭建后端服务系统
  2. cloudflare代理流量,做一些安全防护和日志系统
  3. cloudflare worker搭建主页和邮件系统
  4. clerk 用户系统

这里感谢开源项目 cloudmail , 参考该项目,我也开发了对应的会员邮件服务(该项目还在整理/优化中,后续考虑开源)
 

promail: 我另外开发的pro订阅邮件管理平台

四. 从“完美主义”到“核心验证”

这里我也是从AI学习到的最小可行产品(MVP)理念,以前并没有关注这方面的理念,直到自己亲自从零开发一款产品后。我期待的是:一个AI智能番茄时钟,囊括我所期待的“灵活度”,“习惯养成监督”,“目标性”,“白名单”,期待感“,”游戏性“,”复盘&陪伴“, 我甚至更多的去构思我还可以拥有一个组件中心,在此之后扩展为组件市场,从而包容和收入更多的功能。 但是,伴随着开发的进展以及时间的不断流逝,害怕时间过长中途放弃的我意识到:发版一个“完美“且”全面“的产品需要更多的打磨和人力的投入。 我需要用MVP的理念,先行开发一个最小符合预期的产品。
最后,我分析了我需求的核心点(见 ”我想要一个什么样的番茄”) ,先割舍了组件中心。

功能落地:学习痛点的功能点

在此开头先说我实现了哪些功能:

需求功能点
灵活度“设置中心 - 计时器设置”
习惯养成监督“工作记录 - 连续打卡”
目标性“成就中心 - 每日目标设置” 与 “成就中心 - 每周任务”
学习娱乐的强制分界线“白名单” 以及 “白名单分类” ,灵活选择开启哪一项的白名单:语言学习?编程学习?论文阅读?
期待感“工作记录” : 每日第一个番茄后,可以解锁今日的塔罗牌占卜
游戏性"成就中心" & “积分商店” , 这里我用我多年steam经验,做了“隐藏成就”
复盘&陪伴“网站分析” (包括不同时段/工作日vs周末分析/不同分类) 
“pro专属的每周复盘” 
 
这里仅挑几个我觉得可以展开说的功能点来进行介绍 

一.复盘

关于复盘,我选择了以每周周一AI以邮件发送给用户的的形式,一方面,相对于短的时间(比如天),以周计算对分析数据有很大的帮助,比如,规律性,每周一和每周五可能是惰性比较大的两天;以及以周为单位进行学习相对于更长的时间(如月或复数周)更便于复盘和总结。另一方面,在每周周一开始的时间,去看到上一周的不足,从而在最短时间内调整自己的学习策略。
我没有选择AI即时陪伴的方式,因为我觉得”注意力“是需要被保护的,而不是需要被”提醒的“。 只有引导学习者去总结和复盘,去鼓励保持”目标性“,才是我用AI的最终目的。
这里,AI的陪伴主要体现在以下方面:

  1. 目标用户白名单下的学习情况
  2. 每个用户都有“针对性”的建议: 对用户进行画像,分析当前的学习情况学习频率,处在学习习惯养成的哪个阶段。有哪些需要改进和注意的,在这里会复盘出来
  3. 科学的提醒和效率提高Tips : 一些关于学习的小知识,最好是适用于当下的学习情况的
  4. 人格化用户画像&随机聊天: 这里,我让AI推测对方的MBTI,并且随机性的在每周周报后进行一些轻松的聊天,比如,关于学习目标,比如过去一周用户专注于日语学习,那么我会在聊天里涉及到 动漫,日本旅游,学习的一些感悟。或者,针对MBTI,提出一些当下MBTI会怎样影响学习

 

pro周报部分截图

二. 学习娱乐的强制分界线

好,说完最主要的AI陪伴式学习,说一下我的”需求“在产品上不同功能点的体现会对学习有什么帮助吧。
关于白名单的设计,我不止局限于”限制“,而是”分类限制“

因为我觉得,专注的领域是有区分的,不同领域的白名单应该切割开来。而分类的权利交给使用者,自己来创建分类,管理分类,向分类添加网址。




这里,我也设置了白名单的导入&导出,目的是用于后续的交流和资源的分享,例如,同学习方向的小伙伴,同一主题下会有不同的学习资源和网站。在一键导入的过程中,也间接促进了学习的交流,让学习资源互相流通。

三. 习惯养成监督 和 期待感

首先是数据,我觉得数据的直观性更有利于用户的习惯养成(参考自己github开发时会有想续绿色小方块的欲望),我在番茄记录下,也采用了github的日历板样式来记录学习情况。
 

同时我还在数据的显示上,增加了连续打卡的卡片,以及每日和每周的任务。我觉得挑战历史最长打卡也是一种激励学习的心态。


 

至于网站分析即白名单的数据展示部分,我则是按 “网站 - 子标题” 进行分类的,这样我能够更具网站/网站的白名单分类,更好的统计单一页面的学习情况(根据我长期的学习习惯,一个学习网站,我并不会短期内开启太多的页面),这里展示的为测试数据。

 

四. 期待感&游戏性

任何事情都是“开始行动”最难,尤其对于有拖延症的人来说。但如果我设计一个,只要你每天第一次打卡,就会有一个不一样的惊喜等着你又会如何呢? 于是我设置了“今日塔罗”。
每天的打卡都是不一样的牌,这里由于本人不具备专业性,所以让AI阅读塔罗的文献 对塔罗每个牌面进行释义。后期还会继续优化 更新更多的占卜方向(本人之后也考虑学习一下塔罗)。但抽出的牌可是全靠屏幕前学习者的手气哦~
我很喜欢这种神秘灵性的引导,有时候一些“文字碎片” 的提醒往往是你当下所需要的。比如,最近有一些思维上的卡壳或生活上的烦恼,当你刨根究底时,路边人的对话或者路过的风景有时会点醒你,让你有了“新视角”
 

结语

首次开发 Chrome 扩展的漫长打磨,最终沉淀为一次宝贵的自我突破之旅——将粗糙的构想淬炼成可用的工具,本质是认知边界的持续拓展。在这个过程中,我体验到了作为一个独立开发者,在开发的过程中,更多的是学习经验和打破“认知的墙”: 例如,早期,我只关注技术的部分,觉得审核很麻烦,但是拥有了第一次chrome商店审核通过的经验之后,知道了发现也只是走个必要的流程。一切只是需要你开始这个尝试。
正如我第一次写这篇文章一样,怀着忐忑的心情编写了整篇文章和自己的经验分享,我不知道自己的经验能否帮到别人,也很害怕“露出”自己的短板, 初次的尝试在大佬云集的互联网也会紧张。 但是,没有交流就没有进步,没有第一次勇敢尝试就不会有之后的每一步。如果你也有跃跃欲试的灵感,此刻就是最佳起点:

不必等待全知全能:用 MVP 思维拆解目标,从最小可行性功能起步;

善用 AI 而不盲从:让工具加速探索(如 Cursor),比起盲目使用工具,不如利用复审代码的方式来学习一门新语言和新平台的开发。

拥抱“笨拙的第一次”: 从零开始堆砌一款属于自己的产品,这个体验的过程本身就是无价的

愿这份手记与我打造的「番茄瑞士刀」(TomatoNB) 能为你点燃行动的火花

▍ 项目主页:tomatonb.com

0
0