最近Cursor这个AI编程工具刷屏了。说实话,AI编程工具近年层出不穷,我也见怪不怪了,主要是没有遇到一个能让我眼前一亮的产品,但是这一次的AI工具真的是惊艳到我了,几乎是没有任何编程基础的小白都能够制作一个小插件或者网站,Cloudflare副总裁的8岁女儿用Cursor在 45 分钟内搭起来一个聊天机器人,那这我得看看到底是什么神奇的AI工具。

来到官网,点击Download for Free,会下载一个安装包,按照步骤进行安装就可以了

image-20241019000952854

新用户有两周的免费的Pro体验时间的,到期后如果还想使用,需要按照每月20$进行续费

不过我从网上看到可以白嫖的方法:到期后注销你的账号,直接再用原账号注册一个又会重新又有两周的体验时间(白嫖党的福音)。

image-20241019210314060

下载好后进入,咦?这Cursor的IDE怎么和VS Code一个样?

image-20241019221927069

然后去官方文档看了一下:“Cursor 是 VS Code 的一个分支。”原来如此,你当然也可以将VS Code 配置和扩展导入 Cursor。

image-20241019222735945

现在我有这么一个需求,每当我查看一个网站,想要某张图片,总是需要F12打开开发者工具,在一堆东西里翻来翻去才能找到我想要的图片链接然后复制,能不能有一个浏览器插件能够自动爬取所有图片呢?那就别废话了,直接上手吧,ctrl+i弹出对话框,输入提示语:

帮我制作一个Edge浏览器的插件,用于爬取这个网站的图片,并弹出侧边栏,侧边栏可以显示爬取的图片,点击图片可以显示按钮用于复制

image-20241020001119067

神奇的一幕发生了,这就是我感觉Cursor和其他AI编程工具不一样的地方,它提供了一个Cursor Composer工具,我们使用其他工具时,需要通过聊天得到一段一段的新功能代码,然后分别创建文件,粘贴代码。而Composer 它可以帮助我们快速地、有序地创建多个文件

好了,代码都写好了,我们来到Edge浏览器来测试一下吧

image-20241020001525857

随便打开某个网页,点击咱上传的插件,会发现弹出一个弹窗,成功了?点击一下爬取图片按钮

image-20241020002013289

真的成功了!这个网页图片都显示在弹窗上了,再来测试一下 复制功能是否正常

image-20241020002120466

ok,也是成功的,一次就成功,这的确让我没想到,我还以为需要各种调整呢

![image-20241020002159521](image-20241020002159521.png

image-20241020002319823

当然这个插件样式仅仅是能看,我们来让Cursor添加一些样式:

这是一个Edge浏览器插件,可以在当前网页爬取图片并复制,但是我觉得这个样式不好看,请修改一下

image-20241020115758059

来到浏览器的扩展管理让其重新加载一下

image-20241020115849588

这次调整好看一些了,不过为什么点击按钮后没反应?

image-20241020120051374

来吧,再来调整一下

点击爬取按钮后没有反应,请修改代码

image-20241020120428019

大功告成!!!不用一会一个小插件一会就做出来了,相信你们也可以做出一个小工具或者小游戏的

20241020_121246

这就是Cursor的强大之处,我们只需要充当一个产品经理的作用,所有代码实现只需要交给Cursor就可以了,就我个人而言Cursor的精髓就在于内置的Composer工具,其实这只是Cursor的冰山一角,还有很多值得探索的地方。

Cursor Composer 是集成在 Cursor 编辑器中的 AI 驱动工具。它突破了单行和单文件编辑的局限,让你能够:

  • 同时编辑多个文件
  • 根据高级指令生成整个应用程序
  • 利用对项目结构的上下文理解
  • 交互式地优化生成的代码

插件代码已上传至github:songguo1/Image_Downloader: Edge浏览器爬取图片插件