难得一见的Cursor保姆级教程,错过可真要后悔哦!

一起聊聊编程工具Cursor,快速上手不再难!

嘿,大家还记得我们之前聊过的那个超级火的编程工具Cursor吗?

有没有小伙伴在下载完Cursor后,感觉有点不知所措呢?

几天前,我分享过Cursor的一些基础教程,还有它和其他编程工具的不同之处。

不过,很多朋友还是对如何快速上手Cursor,以及它能做些什么感到疑惑。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

为了满足一些朋友的需求,我把这两周的Cursor实践经验整理成了一篇教程,希望能帮到你们。

读完之后,你将会收获:

  1. Cursor与其他编程工具的不同之处。

  2. Cursor的入门:安装与使用

  3. 基础案例:如何开发谷歌插件

  4. 进阶案例:如何开发卡密系统

  5. 还有更多实用的补充内容…

内容可能有点干,记得备点饮料哦!废话不多说,我们开始吧。

一、效果展示

先给大家揭晓一下Cursor生成的程序效果,看看是不是能激发你们的兴趣呢~

一)谷歌插件

自动将图片分割成四份:

根据域名自动对浏览器标签进行分组:

二)卡密系统

功能包括:用户管理、卡密管理、卡密统计等。

二、Cursor与其他编程工具的不同

相比于其他工具,Cursor有以下更方便的功能:

  1. 模型更全面,选择更加灵活。

  2. 全局引用,随心所欲。

  3. 一键全局创建代码,省时省力。

  4. 更多好用的功能。

我觉得最实用的功能就是Composer了。

在使用其他工具时,我们通常需要通过对话来获取一段段的代码,然后逐个创建文件,粘贴进去。

虽然这样逐个确认让人觉得更安全,但如果功能复杂,文件多了就会特别耗时。

而Composer能帮助我们快速有序地创建多个文件,满足不同需求,大幅提升效率。

想了解更多请继续关注:

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

在讲具体案例之前,我们先来看看工具的注册和使用方法。

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

本教程内容包括:

  1. 工具的注册与安装

  2. 全局创建代码结构

  3. 新增与修改代码

  4. 自动补全功能

  5. 对话窗口、全局搜索等其他实用功能

更多内容请查看:有了Cursor,真没理由说不会写代码了。

四、初阶案例:开发谷歌插件

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

备注:这个案例相对简单,大家可以细心阅读AI的回答结果。

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

接下来我们就来对比一下ChatGPT和今天的Cursor。

当时我做了两个案例,第一个是将图片分割成四份。 第二个是自动分组浏览器标签。

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

这个功能主要是为了快速将Midjourney生成的图片分割成四等份。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

当时和ChatGPT进行对话,加上创建文件和部署插件,前前后后大概花了15分钟。现在我们来看看Cursor的能力。

使用Cursor编写代码,再加上部署和演示,总共也就一分钟多一点,速度真是飞快!

轻松搞定图片分割与浏览器标签管理的插件开发

Cursor 提示词:

帮我开发一个谷歌插件吧,功能是将用户上传的图片切分成四份,并能自动下载到本地。一定要用 manifest v3 版本哦,同时也要注意按钮的中文编码问题。

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

我们都知道,当浏览器标签开得太多,画面就会变得很混乱,对吧?

  1. 很多时候,标签太多时让人觉得无从下手。
  2. 而且手动分组标签又是另一番麻烦,真希望能自动分组。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

这个项目让我收获满满。

去年9月,我在做这个项目时,和AI聊了很久,调试、纠错、部署,前后花了两小时多。

而这次用Cursor,居然不到五分钟就搞定了,完全没有纠错,效率提升了二十多倍!

我突然想:一年前,我怎么能忍受花那么多时间呢?

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

Cursor 提示词:

# 角色:

你是一位资深程序员,能熟练开发谷歌浏览器插件。

# 目的:

我需要开发一个插件,让谷歌浏览器的标签能够自动分组,按配置的域名来分类。这样当用户打开过多标签时,浏览起来就会更清晰。

# 功能:1.

点击插件后,可以输入需要设置的域名、分组名称和颜色(可选蓝色、红色、灰色、黄色、绿色)。

2.

点击保存后,窗口消失,提示“保存成功”。

3.

当在浏览器中打开对应域名的链接时,后台会根据分组名称和颜色自动进行分组。

若打开新链接时没有分组,就新建一个分组。

若打开新链接时已有相同域名的分组,则自动合并。

# 注意:1.

一定要使用manifest v3版本进行开发。

2.

注意中文编码的问题。

三)案例三:汉语新解

除了前面提到的两个插件,前几天中秋假期我还开发了一款“汉语新解”的谷歌插件。

大部分代码都是通过Cursor完成的,效率挺高的。

开发思路很简单,我已经把开发流程和使用方法写在这篇文章里了:免费又快捷的“汉语新解”插件已经开源。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

此外,我还将这款插件开源,并上传到谷歌商店,如果你感兴趣,欢迎试试!

开源代码地址:[https://github.com/jaylpp/chinese-insight](https://github.com/jaylpp/chinese-insight),如果觉得有用,请记得给个Star哦,谢谢。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

五、进阶案例:卡密系统

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

备注:此需求比初阶案例更复杂一些,若没有编程基础,需要耐心学习,有编程思维会更好。建议按照文章推荐的方法进行操作。

最近我一直在思考如何让智能体变现的问题,除了做教程外,直接将智能体作为产品出售也是个不错的选择。

对于玩过智能体的朋友来说,不论国内外,大多数智能体平台都存在着一些问题:

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

面对这些难题,除了那些愿意无私奉献的大神,很多普通开发者结合多年的行业经验,自己开发的智能体一般不会免费分享。

所以,优秀的智能体就难以被市场发现。其实,最根本的问题就是:如何商业化?

除了承担巨大的风险去设计一整套商业产品,我们还能找到什么最小化的商业模式呢?

我认为最简单的方法就是使用卡密验证的方式——用户输入卡密来使用智能体或核心插件。

接下来,让我们利用最近非常火的Cursor,打造一套卡密系统。

一)用户故事

用户故事是什么呢?

用户故事的目的在于帮助开发团队理解用户需求,从用户的角度来设计和开发功能。

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

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

主要有三大作用:

  1. 首先,让Cursor这个执行者更清楚我们想要开发什么样的应用,从而更准确地搭建代码框架。

  2. 其次,作为关键的上下文信息,确保开发方向不偏离。

  3. 最后,可以让Cursor根据用户故事生成相应的测试用例,确保功能的完整性和准确性。

轻松创建你的 MVP 用户故事和代码框架

嘿,下面我来给你展示一下如何在 Cursor 里生成 MVP 的用户故事。其实,其他 AI 功能也可以做到哦!

1、首先,点击 Cursor,然后从你的文件夹列表中选择一个已经创建好的文件夹。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

2、接下来,创建一个需求文档,简单输入你的需求描述,让 AI 来帮你生成用户故事。

你会发现,Cursor 已经为我们生成了用户故事,接下来只需根据实际情况进行调整和修改。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

二)生成初步的代码框架

1、接着,你可以输入 command + i 来唤起 composer,根据用户故事生成代码结构,然后按回车。推荐使用 claude-3.5-sonnet,它是目前最强的代码生成模型。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

2、代码生成完成后,记得点击 Accept all 才能生效哦。

最好先仔细看看 AI 的输出结果,确认它理解了我们的意图,这样可以避免频繁的修改。

经过仔细检查,我发现少了一些文件。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

3、接下来,让 AI 自行检查并补充那些缺少的文件。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

补充文件完成后,别忘了点击 Accept all。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

根据 AI 的反馈,我发现只生成了后端 API,前端界面还是缺失的,于是我让 AI 补充页面。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

向下滑动,根据 AI 给出的测试方式执行命令。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

在第一步中提到了要确保后端服务器正在运行。然后,我们按照上一步 AI 的提示启动后端服务。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

遇到问题了?别着急。记得规范提问方式,然后告诉 AI 问题所在。

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

主要是因为 Python 的依赖包有冲突导致。其实我们不需要太在意细节,只需按照 AI 的指示一步一步来。

当看到下图中的标记时,就说明一切顺利进行了。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

接下来,右击选择 New Terminal 来创建一个命令行窗口以启动前端服务。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

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

关于 cd 命令的详细介绍,可以参考、加餐章节。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

打开浏览器,访问相应的 URL。终于能见到我的卡密管理系统了!

虽然有点简单,但没关系。我们先验证一下功能,以后再考虑怎么优化。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

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

难得一见的Cursor保姆级教程,错过可真要后悔哦!

三)调试功能

我们先来调试一下“新增卡密”的功能。在调试之前,记得在浏览器中打开 F12,进入控制台哦。

让我们一起优化卡密管理系统吧!

如果你进不去,可以上网查查怎么打开浏览器的控制台哦。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

我发现了一些问题:

  1. 卡密的添加方式应该用弹出框,而不是在页面底部显示。
  2. 卡密的生成不应该让用户自己输入,而是由系统根据用户信息、过期时间和积分自动生成。
  3. 添加后没有生效,控制台上报了错误。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

于是我们一个个地让 AI 来修复这些问题。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

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

难得一见的Cursor保姆级教程,错过可真要后悔哦!

难得一见的Cursor保姆级教程,错过可真要后悔哦!

这一轮的优化完成了,虽然还有小问题,但别太纠结,先解决再说。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

接下来,我们来修复生成卡密的问题。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

难得一见的Cursor保姆级教程,错过可真要后悔哦!

这一修复也顺利完成了。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

接着,我们来测试一下编辑卡密的功能,结果发现没有效果,控制台又出错了。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

我们可以用同样的方法来解决其他问题。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

修复成功了!

难得一见的Cursor保姆级教程,错过可真要后悔哦!

不过,还有很多问题待解决,比如表格内容的显示、统计信息的准确性,以及页面的美观程度等。

我就不一一演示了,大家可以自己动手试试哦~

在这里,我对统计信息进行了优化,还加了一张饼状图来更好地展示数据。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

此外,我简单测试了其他功能,发现一切都正常后,再来优化 UI。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

如果第一次的优化结果不太满意,随时可以要求进一步调整。最后的效果就是这样:

难得一见的Cursor保姆级教程,错过可真要后悔哦!

难得一见的Cursor保姆级教程,错过可真要后悔哦!

难得一见的Cursor保姆级教程,错过可真要后悔哦!

当然,还有很多地方可以改进,比如页面的美观性和卡密的复杂度等,都是需要我们进一步努力的。

对了,卡密生成后该怎么用,我们也需要好好规划一下。

可以请 Cursor 给我们讲讲如何将卡密接入接口,并为我们设计一套方案。大家可以尝试一下!

四)进行测试(可选)

最后,为了确保所有功能都正常,我们可以请 AI 帮忙设计一套测试用例。

在文档中,Mac 用户可以通过Command + K唤醒 AI,来根据用户故事生成测试用例。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

打造你的卡密系统,成就感满满!

咱们得一个一个去验证测试用例,看看有没有漏掉的功能或者存在的 Bug。

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

是不是觉得特别有成就感呢~

五)注意事项

  1. 问题要逐个解决,别急于求成。
  2. 先把基本功能搞定,再去追求完美,初期不必太在意细节。

六、加餐

一)纠错公式

在【xxxx】这个地方,做了【xxxx】的操作,结果出现了【xxxx】的错误,而我期望的是【xxxx】

举个例子:我在编辑卡密页面时修改了积分,点击保存后,浏览器控制台显示了错误”””xxxxxxx”””,我本来希望保存能成功,并且表格能够自动更新。

给 AI 提供线索是非常关键的,这直接影响我们能否迅速修复问题。

二)切换目录命名 — CD

在 Cursor 中,有时你可能需要切换到某个文件夹去执行命令。

你可以使用 Cursor 菜单中的 “Open in integrated Terminal” 选项来直接切换到指定目录:

难得一见的Cursor保姆级教程,错过可真要后悔哦!

当然,使用 cd 命令会更方便一些。

让我偷个懒,毕竟 Kimi 对这个命令的解释更详细,想了解的朋友可以去看看。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

三)Python 教程

之前,我们在微信机器人教程中探讨过如何从零开始打造自己的微信机器人:

这篇文章介绍了如何在 Linux 环境下安装 Python,以及 Python 虚拟环境的概念。

Python 的虚拟环境就像是一个独立的小空间,用来隔离不同项目的依赖库,避免和系统的 Python 版本发生冲突。

这份教程在安装和编程基础方面都做了通俗易懂的讲解,特别适合新手学习。

我强烈建议大家在这个 AI 时代掌握一门编程语言,而 Python 无疑是最好的选择。

另外,我准备了一份超级详细的 Python 学习笔记,希望对你们有帮助,想要的朋友可以在评论区回复“python”来领取哦。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

四)Cursor 提示词大全

给大家分享一个 Cursor 提示词网站:https://cursor.directory/

这个网站上有很多网友实践后上传的提示词,大家可以去学习和参考哦。

难得一见的Cursor保姆级教程,错过可真要后悔哦!

七、总结

经过亲自使用,我不得不说 Cursor 确实是目前最强大的 AI 编程工具。

但谁能想到,在与众多科技巨头的竞争中脱颖而出的 Cursor,竟然只是一个 12 人的小团队呢?

翻看他们的博客,我们可以感受到他们宏伟的愿景:希望打造一个让编程变得更轻松、有趣的工具,帮助全球开发者专注于更大问题。

可以看出,他们满怀信心,充满激情,用创新的思维改变了整个行业,迅速崛起。

除了工具本身,Cursor 团队的崛起故事也让我们深受启发。这个只有 12 人的小团队,竟然能在与大公司的竞争中脱颖而出。

让我想起了齐白石大师的一句名言:“学我者生,似我者死”。

单纯模仿只是在重复别人的路,而创新性的模仿才有可能追赶上,甚至超越哦~

希望这些内容能对你有所帮助。

关于 Cursor,你想用它制作什么小工具呢?欢迎在评论区告诉我哦~

如果觉得这篇文章不错,别忘了点赞、收藏和转发哦!

想第一时间获取更新,可以给我个星标 ⭐

感谢你阅读我的文章 ~

来源:百家号
原文标题:终于有人讲清楚了!Cursor保姆级教程,错过后悔
声明:
文章来自网络收集后经过ai改写发布,如不小心侵犯了您的权益,请联系本站删除,给您带来困扰,深表歉意!

《难得一见的Cursor保姆级教程,错过可真要后悔哦!》有6条评论

发表评论