Cursor保姆级教程

一、效果展示

先剧透下 Cursor 生成程序的效果，让大家有动力继续看下去（手动狗头）～

一）谷歌插件

自动分割图片为四等份：

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

二）卡密系统

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

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

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

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

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

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

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

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

详情请查看:Cursor vs GitHub Copilot、通义灵码，谁才是真正的王者

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

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

安装和使用前，请自备 魔法 ！

教程包含：

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

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

四、初阶案例：谷歌插件

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

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

去年 9 月，我用 ChatGPT 编写过自己的第一个 Chrome 插件：任何人都可以利用ChatGPT开发自己的谷歌插件

我们来将 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 基础如何打造你的微信机器人？：0 基础如何打造你的微信机器人？

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

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

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

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

推荐教程地址：https://www.bilibili.com/video/BV1944y1x7SW/?spm_id_from=333.999.0.0&vd_source=e998bb2b9b446572cd19539682ad9dd4

四）Cursor 提示词大全

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

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

七、总结

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

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

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

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

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

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

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

希望有所帮助。

本文章转载微信公众号@熊猫Jay字节之旅