最近啊,Cursor 真的是火到不行,网上满是关于它的文章和视频。

它就像一个能即时分析你代码的编程高手,提供建议、捕捉错误,还能帮你重构代码。
你根本不用写代码,只需说出你的需求,它就能迅速给你搞定一个官网、Chrome 插件、甚至是一个卡密系统等等。

要是继续这样发展下去,Cursor 可能会从 Copilot 变成 Pilot,人类就变成了 Copilot!
相比之下,GitHub Copilot 就显得有些落后了,它的代码修改和上下文引用能力远不及 Cursor,因此只能停留在 Copilot 的层次。
GitHub Copilot 只能添加代码,没法直接修改。
而 Cursor 不仅能添加,还能修改代码。
GitHub Copilot 用两种符号 (@ 和 #) 来引用不同的上下文,这可真让人难记。。。
Cursor 只用一种符号 (@) 来引用,简单易懂,而且选择的上下文范围更广。
难怪 GitHub Copilot 只能叫 Copilot。

等等,你们好像忘了一个问题:Cursor 为什么叫 Cursor?
今天我就来为大家揭晓这个秘密。
Cursor 之所以取这个名字,是因为它对光标的运用达到了极致。
我们刚才提到,Cursor 最牛逼的地方就是它可以直接修改代码。它会根据光标的位置,自动给出代码补全建议,用户只需按下 Tab 键就能完成补全(当然 GitHub Copilot 也能补全,但咱们聊点不一样的)。
对于已经写好的代码,Cursor 在修改或重构时,会根据上下文给出修改建议,这些建议会以提示框的形式展示,而不是那种灰色的补全提示。
还有一个更厉害的功能叫光标预测 (Cursor Prediction),它能根据上下文来预测你下一个要编辑的代码位置。
现在你明白它为什么叫 Cursor 了吧?
接下来,我会通过一个实际的例子,来展示 Cursor 的强大之处。
咱们不说那些空话,直接来看一个实用的案例,你注意到这个网站的流量了吗?
轻松搭建你的开发环境

你知道这个网站是关于 Cursor 的入门教程吗?它其实是个导航站,刚上线没多久,流量就像火箭一样飞速上涨。
你可能会想,这种网站技术难度应该很高吧?
其实并没有!我只要开口,就能轻松复制出一个类似的网站。
在这里说明一下:我对 Next.js、Tailwind CSS 和 Node.js都不懂,我唯一会的就是指挥 AI 来帮忙。
开始搭建开发环境
为了快速搭建开发环境,我们可以使用 Sealos DevBox[1],它能一键搞定开发环境的配置,还会自动处理公网域名和 HTTPS 证书,真心方便。
首先,打开 Sealos 桌面[2],然后启动 Debox 应用,创建一个新项目,选择 Next.js 作为你的运行环境。

Devbox 为开发者提供了一些非常实用的功能:
- 灵活的资源配置:可以根据项目需要随意调整 CPU 和内存,确保性能的同时也能控制花费。
- 一键启用 HTTPS:系统会自动分配安全域名,再也不用为 SSL 证书的配置而烦恼。
- 全自动域名管理:从开发到测试,域名配置都由系统处理,开发者可以专心写代码。
创建完项目后,几秒钟内就能启动开发环境。
环境准备好后,我们就可以用 Cursor 连接进去了。在操作选项里选择用 Cursor 进行连接:

第一次打开时会提示你安装 Devbox 插件,安装好后就能自动连接到开发环境了。
轻松初始化你的项目,快来看看吧!

首先,打开 Cursor 的终端,记得先把项目根目录下的所有文件清空哦:

接下来,我要分享一个很酷的技巧给大家。
项目初始化步骤
最近有个新玩意儿,叫 Bolt.new,这是一款 AI 驱动的全栈开发平台,集成了终端和编辑器,感觉可以和 Cursor 一较高下。
不过呢,Bolt.new 是基于网页的,所以它和本地开发工具的体验略有不同,但用来初始化项目可是非常棒的选择。
虽然使用 Cursor 从零搭建项目也很厉害,但我觉得 Bolt.new 的前端界面看起来更漂亮,真心比 Cursor 好看多了。
所以,咱们可以先用 Bolt.new 初始化项目,再把它导入到 Cursor 中继续开发,这简直是个绝妙主意!
接下来,让我们一起看看具体的操作步骤吧。
首先,访问 Bolt.new 的官网:

在这个页面上,你可以输入提示词来启动项目,或者在“or start a blank app with your favorite stack”下选择你喜欢的技术栈,然后点击开始。
我选择的是 Next.js,进入后项目就完成初始化了。

而且还可以实时预览,真是太方便了,你说是不是?

接下来就是见证奇迹的时刻!我们有个网站作为模板:https://cursor101.com[4],现在就让 Bolt.new 帮我们创建一个风格相似的网站吧。提示词可以这样写:
参考我上传的截图给我生成一个 UI 风格一致的导航站,导航站的主题是“集成了 AI 技术的强化型代码编辑器 Cursor”的各种入门教程和实用技巧以及视频资源。
把参考网站的截图上传之后,输入提示词,接着点击输入框下面的 “Enhance prompt” 按钮,然后按回车键就行了。

这时候,AI正在全力以赴为我们生成代码,简直是效率惊人啊!

生成完毕后,它甚至帮我直接启动了项目,启动完还顺便打开了预览界面,简直贴心啊……

你这……我这……哎呀,你看看你……
没事了,我就坐在这,只需要动动嘴,连启动都不用我亲自来。
那么我就顺便把项目代码下载下来吧。点击右上角的 “Download” 按钮,就能下载到项目代码的压缩包了。
轻松导入项目到 Cursor
下载完成后,解压缩包,打开文件夹,你会发现项目代码已经准备好了。
接下来,我们要把这些代码导入到 Cursor 中。你只需选中项目文件夹里的所有文件,然后把它们拖到 Cursor 代码编辑器左侧的文件列表里,这样整个项目就导入成功了!是不是很简单?
导入完毕后,别忘了在终端里运行 npm install 来安装项目所需的依赖,安装完成后,执行 npm run dev 启动项目。
现在,回到 Devbox 界面,找找 Next.js 开发环境的详情页面:
只要点击外网地址,就可以通过公网域名访问你的网站了!


太棒了!接下来我们要用 Cursor 继续把这个网站打磨得更完美。
用 Cursor 继续开发
现在,咱们回到 Cursor 的界面,准备开始下一步的操作。
只需按下 CMD + I(如果你是 Windows 或 Linux 用户,那就按 Ctrl + I),这样就能打开 Cursor Composer 的界面了。
在 Composer 的输入框里,先输入 @,接着选择 Codebase,这样 Cursor 就能分析你项目中的所有文件。然后,输入下面这段提示:
这个项目是一个导航站,主题是“集成了 AI 技术的强化型代码编辑器 Cursor”的各种入门教程、实用技巧和视频资源。请将网站中所有英文文本翻译成中文。请使用 CoT 思维链,一步一步来完成任务。
接下来,它就会逐步思考并完成任务了。

小提示:在提示中加上 CoT 思维链,可以让 Cursor 更加高效地逐步完成任务,准确度也会更高哦。
现在呢,我只需要确认一下 AI 修改的代码是否正确,然后点击 “Accept all” 就可以接受所有的修改了。
来看看它的修改效果吧:

聊天中发现的神奇工具
嘿,大家好,我就不多说了,大家自己来体会一下吧~
其实呢,我们还可以继续改善这个工具,看我又要开始“念咒”了。说实话,我对 Node.js、Next.js 这些一窍不通,更别提 Tailwind CSS 了,不过,我就能念念咒语。

接下来咱们来看看效果如何:

你看我这边的操作……哎呀,真是让人感慨啊……
当然了,这只是开始,你完全可以继续“念咒”,让它来优化你的文案、支持国际化、生成单元测试,甚至帮你写文档……
如果你想自己动手改改代码,那也没问题!你瞧,我在这里随便换行,Cursor 就能开始猜测我想打什么了。如果你觉得不错,就直接按 Tab 键来补全吧。

我觉得“安装指南”这个词不太合适,所以把它删掉了。接着,Cursor 又开始预测我接下来要写的内容了,觉得没问题的话就继续按 Tab 键补全吧。

总结一下
好了,今天的演示就到这里,我相信你们已经体会到 Cursor 的强大之处了。
其实这个网站还有许多可以进一步优化的地方,比如:
- 可以增加一个搜索功能,方便用户快速找到所需的教程
- 可以引入评论系统,让用户分享他们的使用心得
- 不妨考虑加入用户系统,这样大家就能收藏自己喜欢的教程了。
- 可以多增加一些教程分类,像是进阶技巧、实战案例这些,让内容更丰富。
- 别忘了优化一下 SEO,帮助更多人找到这个网站哦。
- ……
优化你的教程网站,让它更贴心
这些优化的点子就交给你来实现吧。记住,你不需要成为编程高手,只需要会使用一些工具就行了。
让 Cursor 成为你得力的小帮手,协助你完成这些优化工作。毕竟,咱们人类是副驾驶,而 AI 才是主驾驶呢~
参考链接
[1]Sealos DevBox: https://sealos.run/devbox
[2]Sealos 桌面: https://hzh.sealos.run
[3]Bolt.new 官网: https://bolt.new
[4]: https://cursor101.com
