终于有人讲清楚了!Cursor保姆级教程,错过后悔

各位,还记得前段时间我们聊过的那个爆火的编程工具 Cursor 吗?

有没有小伙伴下载完 Cursor 后就陷入了迷茫?

前几天,我分享过 Cursor 的基础教程以及它与其他编程工具的区别。

然而,很多小伙伴对 Cursor 到底如何快速上手,以及能做出什么实用的东西还是保持质疑的。

为了响应一些小伙伴们的需求,我将过去两周关于 Cursor 的所有实践整理成一篇教程,希望能有所帮助。

看完本教程,你将收获:

  1. Cursor 和其他编程工具的区别。
  2. Cursor 入门:安装和使用
  3. Cursor 初阶案例:开发谷歌插件
  4. Cursor 进阶案例:开发卡密系统
  5. 还有很多加餐项….

内容比较干,请自备饮料。话不多说,我们一起来看一下。

一、效果展示

先剧透下 Cursor 生成程序的效果,让大家有动力继续看下去(手动狗头)~

一)谷歌插件

自动分割图片为四等份:

根据域名自动分组浏览器 Tab:

二)卡密系统

功能包含:用户管理、卡密管理、卡密统计

二、Cursor 与其他编程工具的区别

相对于其他工具,Cursor 有这些更好用的功能:

  1. 模型更全面,选择更灵活。
  2. 全局引用,随心所欲。
  3. 一键全局创建代码
  4. 更多好用的功能

当然,我觉得最好用的还是 Composer。

我们使用其他工具时,需要通过聊天得到一段一段的新功能代码,然后分别创建文件,粘贴代码。

虽然一个一个确认让人更放心,但是功能复杂的情况下涉及文件过多,就会耗时耗力。

Composer 它可以帮助我们快速地、有序地创建多个文件,以满足我们的要求,效率将大大提升。

详情请查看:

三、初体验: Cursor 的安装和使用

讲解具体案例之前,我们先了解下工具怎么注册和使用的。

 

安装和使用前,请自备 魔法 !

 

教程包含:

  1. 工具的注册和安装
  2. 全局创建代码结构
  3. 新增、修改代码
  4. 自动补全
  5. 对话窗口、全局搜索等其他功能

详情请查看:有了 Cursor 后,真没理由说不会写代码了

四、初阶案例:谷歌插件

 

适用人群:没有编程基础的小伙伴

备注:案例比较简单,大家仔细阅读 AI 回答的结果即可。

 

去年 9 月,我用 ChatGPT 编写过自己的第一个 Chrome 插件:

我们来将 ChatGPT 和 今天的 Cursor 做个对比。

当时做了两个案例,第一个:分割图片为四等份。 第二个:自动分组浏览器 Tab。

一)案例一:分割图片为四等份

主要为了快速分割 Midjourney 生成的图片四等份。

当时和 ChatGPT 对话,加上创建文件和部署插件,前前后后花了 15 分钟左右吧,我们来看看 Cursor 的能力。

使用 Cursor 编写代码,加上部署和演示,总共也就一分钟多一点,速度非常快。

Cursor 提示词:

请你帮我开发一个谷歌插件,用于将用户上传的图片,平均切分为4张图片,并自动下载到本地电脑上。注意使用 manifest v3 版本开发, 注意按钮中文编码的问题。

二)案例二:自动分组浏览器 Tab

主要为了解决以下痛点:

  1. 浏览器 tab 过多时,容易混乱
  2. 无法自动分组, 手动分组麻烦

这个案例让我感触颇深。

去年 9 月做这个案例时,我与 AI 对话、调试、纠错、部署,花了 2 个多小时。

而这次,用 Cursor 不到五分钟就搞定了,没有做任何纠错,效率提高了二十多倍。

我突然想到:一年前, 2 个多小时,我是怎么忍得下来的。

AI 的进步,用一句话来形容:“AI 一天,人间一年”。

Cursor 提示词:

# 角色:
你是一位资深程序员,能够熟练开发google浏览器插件。
# 目的:
我需要开发一个插件,用于将google浏览器的tab自动分组, 根据配置的域名自动分组。通过插件,如果用户打开过多的浏览器tab, 这样看着会比较混乱. 自动分组后, 会显得更加整洁和干净.
# 功能:
1.
点击插件, 可以输出需要设置的域名, 分组名称, 和分组的颜色, 颜色有(Blue、Red、Grey、Yellow、Green)
2.
点击保存后, 页面消失,显示“保存成功”
3.
当在浏览器打开对应域名的链接, 后台将自动根据分组名称,和颜色, 进行分组.
若打开新链接时,没有分组,则创建分组
若打开新链接时,已经存在相同域名的分组, 则自动合并
# 注意:
1.
注意使用 manifest v3 版本开发。
2.
注意中文编码的问题。

三)案例三:汉语新解

除了前面两个插件,前几天过中秋,我趁着假期开发了一套“汉语新解”谷歌插件。

其中,90%的代码都是通过 Cursor 完成的。

开发思路很简单,我把开发思路和使用方式都写在这篇文章里了:免费还超快,我用 Cursor 做的“汉语新解”插件开源了

此外,我开源了代码,还将这款插件上架到了谷歌商店,大家如果感兴趣,可以试一试。

 

开源代码地址:https://github.com/jaylpp/chinese-insight,有帮助的话,记得 Star 一下,谢谢。

 

五、进阶案例: 卡密系统

 

适用人群:没有编程基础,但足够耐心的小伙伴

备注:需求相对于 初阶案例 更复杂一些,如果没有编程基础,则需要足够的耐心,有编程思维会更好。建议按照文章推荐的方法论操作。

 

最近一直在研究智能体怎么变现的问题,除了做教程,将智能体作为产品出售是个不错的选择。

玩过智能体的小伙伴都清楚,无论是国内还是国外,大多数智能体平台都存在着一些问题:

  1. 对于应用开发者没有付费支持。
  2. 对于插件提供者没有 API 费用支持。

面对这些问题,排除一些为爱发电的大佬,很多普通人结合多年的行业方法论,个人精心钻研和打磨出来的智能体,他们基本上不可能免费开放出来。

那么优秀的智能体就会很难被市场所发现。其实,最重要的问题就是:如何商业化?

除了背负着巨大的风险设计一整套商业化产品之外,我们怎么样找到一个最小化的商业模式。

我觉得最简单的模式就是卡密验证的方式了 — 用户输入卡密来使用智能体,或者是核心插件。

接下来我们利用最近大火的 Cursor 做一套卡密系统。

一)用户故事

用户故事是什么呢?

用户故事的目的在于确保开发团队能够理解用户需求,并从用户角度设计和开发功能。

其常规模板为:“作为[角色],我希望[活动],以便[理由]。”

为何在这一步需要写用户故事呢?

主要有三点作用:

  1. 首先,让 Cursor 这个执行者了解我们想要做什么样的应用,从而更准确地搭建代码框架。
  2. 中途作为关键的上下文信息,确保方向不偏移。
  3. 最后,可以让 Cursor 依据用户故事生成对应的测试用例,保持功能的完整和准确。

接下来,我来演示下如何在 Cursor 里生成 MVP 的用户故事(用其他 AI 功能生成也可以)。

1、点击 Cursor 后,选择提前创建的一个文件夹。

2、创建需求文档,输入简短的需求描述,让 AI 帮助我们生成用户故事。

可以看到 Cursor 为我们生成了用户故事,我们按照实际情况接受并修改即可。

二)生成初始代码框架

1、输入 command + i 唤起 composer,基于用户故事,生成代码结构,点击回车。建议使用 claude-3.5-sonnet, 目前代码生成能力最强的模型。

2、自动生成代码后,只有点击 Accept all 才会生效。

建议最好阅读一下 AI 的输出结果,看看它是否理解清楚了我们的意图,再点击接受,避免频繁修改。

仔细阅读后,发现漏掉了一些文件。

3、让 AI 自行检查并补充遗漏的文件。

补充文件完成,点击 Accept all。

根据 AI 的回答,我们发现只生成了后端 API,缺少前端界面,我们要求 AI 补充页面。

向下滑动,根据 AI 回答的测试方式执行命令即可。

这里第一步提到需确保后端服务器正在运行。然后,我们根据上一步 AI 的回复去启动后端服务。

出错了,别着急。记得规范纠错时的提问方式,然后告诉 AI 即可。

 

提问方式:在【xxxx】位置,做了【xxxx】动作,出现了【xxxx】错误,预期是【xxxx】

 

主要是因为 Python 使用的依赖包存在冲突导致的。我们不需要深究,按照 AI 的回复一步一步执行。

当出现下图中的标记时,则代表运行成功了。

接下来我们右击选择 New Terminal 创建一个命令行去启动前端服务。

使用 cd 命令,进入 frontend 目录。再运行启动命令。

 

cd 命名的介绍,可以进入 六、加餐 章节查看。

 

打开浏览器,访问对应的 URL。终于等到你,我的卡密管理系统。

emmmmm……有点简陋,不过没关系。我们先简单验证下功能,后面再考虑优化。

输入 AI 提供的账号密码,进入维护界面。

三)调试功能

我们先调试下“新增卡密”。调试前,记得在浏览器打开 F12,进入浏览器控制台。

 

如果无法进入,可以自行搜索下如何进入对应的浏览器控制台。

 

发现不少问题:

  1. 卡密的添加方式应为弹出框,不应该在下方显示。
  2. 卡密不应由用户自己输入,而是系统根据用户、过期时间和积分输入后自动生成。
  3. 添加后未生效,控制台出现错误。

我们逐个要求 AI 进行修复。

接受代码后,程序会自动重启,我们刷新下页面,发现第一个问题已经解决。

这一步的优化已经完成,虽然还存在瑕疵,但是不必纠结,先完成再完美。

接下来去修复生成卡密的问题。

这一步修复成功。

接下来测试下 编辑卡密,发现没有效果,测试时控制台出错了。

我们可以按照同样的思路修复其他问题。

修复成功。

还存在不少问题,比如表格的显示内容、统计信息的正确性以及页面美观度等。

我就不重复演示啦,大家可自行发挥~

在这里,我优化了统计信息的内容,还增加了一张饼状图来展示数据。

此外,我简单测试了其他功能,发现一切就绪后,再优化 UI。

如果第一次优化后的结果不满意的话,可以继续要求优化。最终效果如下:

当然,有很多地方值得优化,比如页面的美观度和卡密的复杂度等都需要进一步改进。

对了,卡密生成后如何使用也需要我们规划一下。

可以请 Cursor 告诉我们如何将卡密接入接口中,并为我们设计一套方案。大家可以自行尝试一下。

四)测试(可选)

最后,为了确保功能的准确性,我们可以请 AI 帮忙设计一套测试用例。

进入文档后,Mac 用户可以通过 Command + K 唤醒 AI,让它根据用户故事为我们生成测试用例。

我们需要逐个验证每个测试用例,检查功能是否遗漏、是否存在 Bug。

最终,你拥有了自己的第一个卡密系统。

是不是很有成就感~

五)注意事项

  1. 问题一个一个修复,贪多嚼不烂。
  2. 先完成,再完美,最开始不用在线细节,先完成核心功能。

六、加餐

一)纠错公式

在【xxxx】位置,做了【xxxx】动作,出现了【xxxx】错误,预期是【xxxx】

比如:我在编辑卡密页面修改了积分后点击保存,浏览器控制台出现了错误”””xxxxxxx”””,我期望保存成功,且表格自动刷新。

学会向 AI 提供线索非常重要,这直接影响我们能否快速修复问题。

二)切换目录命名 — CD

大家在 Cursor 中可能会遇到切换到某个文件夹下执行命名的情况。

我们可以使用 Cursor 的菜单 Open in intergrated Terminal 直接切换到对应目录:

除此之外,更方便的肯定是 cd 命令啦。

请允许我偷个懒,毕竟 Kimi 解释的更加全面,不了解该命令的小伙伴可以看下。

三)Python 教程

过去,我们在微信机器人教程 0 基础如何打造你的微信机器人?:

这篇文章介绍过怎么在 linux 环境安装 Python,以及什么是 Python 虚拟环境。

Python 的虚拟环境是一个独立的 Python 运行空间,用于隔离不同项目的依赖库,避免与系统的 python 版本形成冲突。

关于 Python,这个教程无论是在安装方面,还是在编程基础方面,都对每个知识点进行了通俗易懂的讲解,非常适合没有基础的新手。

强烈推荐大家在 AI 时代掌握一门编程语言,首选无疑是 Python。

此外,我准备了一份超详细的 Python 学习笔记,希望有帮助,评论区复 “ python ” 领取。

四)Cursor 提示词大全

分享个 Cursor 提示词网站:https://cursor.directory/

网站里有大量网友实践后上传的提示词,可供我们学习和参考。

七、总结

亲身体验后,不得不承认 Cursor 确实称得上当前最强 AI 编程工具。

但, 谁能想到,在与科技巨头的激烈竞争中脱颖而出的 Cursor,竟是一支仅有 12 人的小团队?

翻阅他们的博客,我们能感受到他们雄心勃勃的愿景:打造一款让编程更轻松、愉悦、有趣的工具,助力全球开发者聚焦更宏大的问题。

可以看得出来,他们满怀希望,干劲十足,用创新思维撬动了整个行业,一跃成为领跑者。

除了工具本身,Cursor 团队的崛起更值得我们学习。这个只有 12 人的小团队,竟然可以和众多大厂的 PK 中脱颖而出。

不禁让我想起齐白石大师的至理名言:“学我者生,似我者死”。

一味的模仿只是重复别人的步伐,创新性模仿才有机会追上,甚至超越~

希望有所帮助。