炸裂了，总共用了1小时，在Chrome应用商店提交了我的flomo同步的浏览器插件~并且这个过程，我还用文字做了直播：
9:55开始临时起意，到11:08完成开发，一个产品就这么诞生了。0代码基础！还用Windsurf帮忙完成了Chrome应用商店的提交！
那这篇文章，我来给大家全面的过一下，如何在1小时内完成这些工作，同时，后面我还会持续去讲用AI编程，开发微信小程序、带推送的服务号接入等开发，欢迎关注：
01 先说产品需求，这是原点
首先我是一个非常喜欢记录的人，然后最近一年兜兜转转用了各种的AI记录工具，最后还是发现flomo是最适合我的笔记软件。
在记录的过程中，有一类笔记结构是我最喜欢的：
笔记太长我做了一个截取。那你会发现它分为三大段：
第一段开头是标题和原链接，这是为了方便我们能够找到信息的源头。
第二段是精华摘要，就是你觉得非常高质量的信息，把它记录下来。
第三段是我自己的思考，想要理解信息，必须要用自己的话说出来。
越是AI时代，你的第一大脑越重要。在之前的一篇笔记软件的分析里，我也非常认同flomo团队的思考。
但是这种卡片的记录是有点繁琐的，它需要我在两个窗口之间不停的反复操作。那有没有可能在同一个浏览器界面里，把这些事情都完成了，并且可以有效处理掉一些需要重复的工作（比如标题和链接的Copy）？
这就是我最终的成品：
在浏览器右侧，我可以点击工具栏的插件，或者按快捷键ALT+F，就会很丝滑的打开右侧插件栏。
插件栏自动把网页内容的标题和链接给抓取下来了
然后原文摘要可以快速的完成复制
再填写一下个人感想
点击一下提交，flomo里就会出现了这么一条笔记：
可以看到它包含了我们刚才说的三段元素：标题和链接、原文摘要、个人感想，并且很方便！
是的，这就是我的一个需求：如何更高效便捷的把文章的内容和自己的思考给保存到flomo笔记里。
02 1小时极速开发
下面来给大家说说，如何用Windsurf 1小时完成这个工作：
第一步，下载Windsurf，并获得一个会员。
或许大家都听过Cursor，但从昨晚因为Cursor经常卡住，转到Windsurf之后，就再也回不去了。它和Cursor的区别，我们看海外独角兽一篇文章里写的就知道了：
Cursor 更强调编程体验和对用户下一步意图的识别，Codeium 的新产品 Windsurf 更强调高自动化。他们的 Chat 功能比 Cursor 做得更加完善，很多用户不用 hands-on code 也能完成基础的开发。
也就是说，对于不复杂的产品来说，Windsurf更加容易上手一些！因为更自动化，很多事情它就能帮你干了！
那为什么要买会员呢？因为我们需要用到Claude Sonnet，大家自己淘宝找一个就行了。
第二步，创建一个存储代码的文件夹
因为最终的插件其实是部分遵循了经典的SS卡，所以我给文件夹起名ss to flomo：
因为在这里，我们要求读到某个阶段，有所感悟的时候，停下来，写一张善思会写卡（后简称SS卡，「善思卡」的汉语拼音首字母）
一张SS卡包括了4个部分：
o 原文摘录：方便以后写作和讨论引用原文
o 我的转述：确认自己理解了
o 个人体验：关联自己的个人体验。所有你“开脑洞”“有感触”“恍然大悟”的知识，其实都是你过去撞的墙，踩的坑。只有和个人生活经验有链接，知识才不会满天飞不落地。
o 行动指引：写下自己“当……的时候，我要……”的行动提示
From 《【flomo 布道师】古典 - 你不是读书少，是记不住和用不上》
第三步，用Windsurf打开文件夹
打开后稍微等一会儿，它会加载出右侧的Write侧边栏，这里就是和Windsurf交流的主要区域。
第四步，说出你的需求
然后把自己想要实现的需求直接在输入框里面告诉给它，最后加上一句：好了，我是一个不懂代码的产品经理，下面请你先和我讨论清楚产品需求，待我确认后再一步步开始。
对了，这里你还可以去看一下flomo API的页面，特别是最下面“我想自己开发”，这部分的信息可以写在需求里面，让Windsurf可以参考：
第五步，确认需求点
然后Windsurf就会指挥Claude干活，干完后告诉你：
然后你也可以跟他去讨论这些东西是不是你想要的，以及你有什么需要修改的。这一步其实挺重要的，因为需要让“研发”知道你的需求，甚至在讨论需求的过程中，你们还可以就你没想清楚的点做讨论，帮助自己想的更清楚。
在正经的产品开发流程里，这一步叫“反述”，即让研发说出他理解的产品是什么样的，和我们脑海中去对照一下！
再次确认后，开工！
第六步，Windsurf开始干活
浏览器插件比较简单，就几个文件，所以很快就生成好了。那这里它提示我需要制作一些LOGO。
你以为这样就能让我干活吗？没那么简单，我转头就让Claude继续给我干活：
很快，我的图标就出来了：
第六步，开始调试
完成之后就要开始到Chrome浏览器的扩展程序里去调试。
首先要打开右上角的开发者模式。然后点击左上角的“加载已解压的扩展程序”，哦豁，不出意料的，出了意料：
报错了！
没关系呀，我们把错误信息复制粘贴给Windsurf，呵斥它怎么回事儿了？
然后插件的设置里也有问题：
中文乱码了！一样的，我们把这个问题截图发给Windsurf。
这些都搞定后，主要去看一看这个插件能否唤起，输入完之后提交能否同步给flomo，果然也有问题：
没关系，继续让windsurf调试：
期间我也训斥了胡说八道的它。
第七步，写readme
调试几轮后，插件能达到预期，说明整体差不多了，还有一些工作可以拿来收尾
第一个就是让AI写一个readme
这一步相当于版本记录，写出来是这样的：
readme在GitHub里也可以用来给别人看懂你的代码是有什么用的。
第八步，提交Chrome应用商店
刚才我们开发的插件，只能自己用，如果想让别人也可以方便的搜索下载使用，上架到Chrome应用商店是个不错的选择。
这里会有不少需要填写的地方，以及我也不知道该如何写，没关系，截图下来让windsurf给我们写：
最后有一步稍微有点难，需要提交一个隐私声明的链接，一样，继续让windsurf处理：
windsurf给的解决方案是需要到GitHub里托管，创建仓库后启用pages，大家可以自行注册，这里不说那么细致了，完成后获得一个page：
接着把这个链接copy到申请表单里，提交即可：
总结
以上就是基于AI编程软件windsurf，全流程完成一款浏览器插件，1小时从启动到开发完完成，再到提交Chrome应用商店审核的全过程。
2025年是个人开发者的红利，由于AI coding的增强，勇于创造的朋友将会吃到一波机会，这里黄叔说的不光是代码杠杠，还包括了媒体杠杠，比如，我这篇文章就是两者的混合。
好了，对新时代红利感兴趣的朋友，不管是交流AI coding，还是媒体红利，欢迎进群，后面多多交流哈：
