Cursor是一个基于 AI 的代码编辑器，只要能向它清晰传达你所需要做的，它就能自动生成代码并且实现你想要的需求。对于不懂开发的产品和设计师来说，是一个非常不错的辅助实现梦想的工具。
接下来，我就用一个实战案例来分享一下如何使用Cursor来制作一个浏览器插件的！
解决问题主要是为了这个工具是有用的，希望被更多人使用。功能是为了让Cursor知道需要做什么功能来为你解决问题。
以我做的这个名为“叶牵”的浏览器插件为例，这个插件最主要为我解决的问题如下：
1、平时我浏览器打开的网页会非常多，因为有一些学习资料网站、办公网站和常用网站不愿意关闭，又不想收藏，所以导致我的浏览器上堆积了网页。网页越多，占用电脑内存越多，会导致电脑很卡。因此，想要做一个功能是点一下按钮，就可以帮我收纳所有的网页；
2、收纳的网页因为需要重新打开，所以还要有一个列表来显示被收纳的网页；
3、新建标签页时，也需要看到被收纳的网页，方便重新打开；
其实市面上也有一个类似可以解决上面3点问题的工具叫“one tab”，但是它不能让我自定义的去新增一些功能，还要翻墙下载，对我来说非常不方便，所以就使用Cursor为我自己制作了这个工具，最主要是希望能为我办公提效。
第一步：让Cursor大概了解你需要做什么，并且帮你列出制作这个项目的文件结构。查看给出的解释是否符合，不符合可以重新修改，再按给出的文件结构创建文件。
第二步：这个插件需要制作logo，按给出的提示设计3个不同尺寸的logo，并放到icons这个文件夹中，对于设计师没难度。
第三步：这一步比较重要，就是需要描述插件的页面元素和功能逻辑。描述写清楚了，Cursor一步到位可以实现你想要的功能逻辑，这时就要考验你能否把需求讲明白。查看解释，没有问题就点击“apply”应用代码并ctrl+s保存代码。
第四步：在浏览器中安装并查看实现效果是否符合你的需求。如下图，插件弹窗有“一键收纳”按钮和收纳列表，点击“一键收纳”按钮后，会关闭所有网页，同时会在收纳列表中显示，点击列表可以重新打开网页，这里已实现我想要的功能。
第五步：主要功能实现后，证明Cursor可能帮我实现我想要的，同时因为这个插件看着有点简陋，所以需要设计一下。这时，可以边设计边思考，这个插件需要什么辅助功能来提升插件的使用体验，这里我增加了复制链接（用于分享网页）、排序（把常用的网页移动到最前面）和删除功能（将网页移除）。
第六步：按UI设计调整插件功能和排版布局。这一步需要调整的细节会比较多，而且有时候Cursor实现出来的与预期的不一样，而且有时候会把已实现的功能改没了（这里可能是因为我没有使用“Add Files to Composer”，导致改错了页面），所以这一步会比较耗时间。
第七步：为了方便快速打开收纳的网页，在浏览器打开新的标签页中也增加显示已收纳的网页。因为有可能收纳的网页会很多，所以在头部增加了常用板块来显示一些比较常用的网页。
第八步：插件所有想要的已实现，这里我就发散了一下思维，增加了一个“阅后即焚”的功能。即一键删除收纳列表的某个网页，并且清除这个网页的浏览历史记录，防止其他人知道我曾经浏览过，所以在打开某个收纳的网页右上角增加了一个“小火把”图标，点击图标后即可清除网页的浏览历史记录。
第九步：反复测试插件，看是否有bug或者需要优化的地方，没有问题就大功告成啦！
1、对于没有开发基础的人来说，如果要做有点难度开发，Cursor并不是传说中的那么简单，还是需要一点学习成本的。我刚开始想搞一个需要接接口的工具，折腾了不少时间还是没搞成功，因为有时候不知道怎么向Cursor描述需求。
2、对于产品和设计师而言，如果想做一个工具，先在Cursor里动动嘴皮子，看能否帮你实现主要的功能，可以实现再开始细化地做设计，如果实现不出来就不用浪费设计时间。
4、要常用“Add Files to New Composer”，可以在传达需求时，让Cursor更精准的修改某个文件，也可以防止把其他文件也修改了，导致把已实现的功能给改没了。
5、达到某个里程碑时，要备份整个项目文件，防止之后出现屎山堆屎时，找回原来的版本。
与我有同样问题的酷友们，可以下载这个插件体验一下【重点：免费使用，无关注加群套路】。此外，你也可以基于这个插件的基础上，使用Cursor来拓展更多功能来解决你的个人需求哦~
百度网盘：https://pan.baidu.com/s/103gqGCQDYXCnFnmUm_L6DQ?pwd=n48w
