炸裂了，总共用了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个部分：　

• 原文摘录：方便以后写作和讨论引用原文　

• 我的转述：确认自己理解了　

• 个人体验：关联自己的个人体验。所有你“开脑洞”“有感触”“恍然大悟”的知识，其实都是你过去撞的墙，踩的坑。只有和个人生活经验有链接，知识才不会满天飞不落地。　

• 行动指引：写下自己“当……的时候，我要……”的行动提示　

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，还是媒体红利，欢迎进群，后面多多交流哈：

参考

免责声明：本内容来自腾讯平台创作者，不代表腾讯新闻或腾讯网的观点和立场。

举报