1小时,用Windsurf,0代码基础完成flomo插件开发!全公开

炸裂了,总共用了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,还是媒体红利,欢迎进群,后面多多交流哈:

 

 

参考