大家好,我是程序员鱼皮。

AI 编程工具的竞争已经进入了白热化阶段,国外有 Cursor、Claude Code、Codex 三巨头,国内有字节的 TRAE、阿里的 Qoder、腾讯的 CodeBuddy 三剑客。

其中,Cursor 算是我最早为之付费的产品了,虽然现在它因为价格等原因被人诟病,但仍然是非常能打的主流 AI 编程工具,而且更新嘎嘎快。

打开网易新闻 查看精彩图片

我自己用 Cursor 做了不少项目,烧的钱也最多。。。这篇文章我会从安装开始,带你用 Cursor 从 0 做出一个完整的网站项目,完整走一遍 AI 编程的流程。看完之后,你就能用 Cursor 独立完成各种 AI 编程任务了。

干货密集,建议先收藏,找个安静的地方慢慢食用~

1、安装和基础准备 下载安装

打开 Cursor 官网,网站会自动识别你的操作系统,直接下载安装包,一路点下一步就行了,跟装微信一样简单。

打开网易新闻 查看精彩图片

安装完成后打开 Cursor,先注册一个账号。建议用 GitHub 账号来注册登录,因为后面做项目的时候会用到 GitHub 来管理代码和部署上线,提前关联好会方便很多。

 两种界面
打开网易新闻 查看精彩图片
两种界面

Cursor 提供了两套操作界面。

一套叫 Agent Window,是不是有点眼熟?

跟你平时用的 AI 聊天工具长得差不多,左边管理对话和项目,中间跟 AI 聊天,适合新手上手。

打开网易新闻 查看精彩图片

另一套叫 Editor Window,就是一个完整的代码编辑器界面,左边看文件、中间写代码、右边跟 AI 对话、底部打开终端,适合管理复杂的代码项目。

打开网易新闻 查看精彩图片

两种界面可以同时打开、随时切换。我建议新手先从 Agent Window 开始用,界面更简洁,上手零门槛。等你对 Cursor 熟悉了,再切到 Editor Window。

免费版和付费版

Cursor 默认提供免费的 Hobby 套餐,可以体验基本的 AI 对话功能,但模型能力和使用额度都有限制。

如果你要认真学 AI 编程,建议至少开通 Pro 套餐,每月 20 美元(约 150 元人民币)。更高级的 Pro+ 和 Ultra 套餐主要是增加了用量额度,功能上跟 Pro 是一样的,不够用了再升级就行。

 选择 AI 模型
打开网易新闻 查看精彩图片
选择 AI 模型

Cursor 的 Pro 用户可以自由选择 AI 模型。Cursor 支持 Claude、GPT、Gemini、Grok 等国外主流大模型,你可以在对话面板的模型选择器里一键切换,还能调节模型的推理等级。

打开网易新闻 查看精彩图片

不知道选什么的话,直接用 Auto 模式就好,Cursor 会自动帮你选合适的模型,既省心又省钱。等你熟练了之后,可以根据任务复杂度手动切换,比如简单任务用便宜快速的模型,复杂任务切到更强的模型。

打开网易新闻 查看精彩图片

好了,基础准备搞定了,接下来正式体验 Cursor 的 AI 能力。

2、认识 Cursor 的几种能力 Agent 模式初体验

新开一个对话,默认就是 Agent 模式。这是 Cursor 最核心、最常用的模式,AI 可以自己分析需求、创建文件、调用工具、写代码、运行命令,一条龙完成任务。

先来个简单的,让 AI 帮你做一份 AI 编程热点的网页报告:

今天有哪些值得关注的 AI 编程热点?
总结为一份 HTML 网页报告

AI 会自动联网搜索最新信息,然后帮你整理总结,生成一份 HTML 网页文件。

打开网易新闻 查看精彩图片

看看效果,只需要跟 AI 说一句话,天下热点尽在你手~

 其他交互方式
打开网易新闻 查看精彩图片
其他交互方式

除了 Agent 模式,Cursor 还有几种轻量的交互方式。

Ask 模式是纯问答,执行速度快,但是不能修改文件,适合你想了解某个知识点、或者让 AI 解释一段代码的时候用。

打开网易新闻 查看精彩图片

编辑器模式写代码的时候,AI 还会自动预测你下一步要写什么,按 Tab 就能接受建议,形成「Tab, Tab, Tab」的连续补全节奏。

打开网易新闻 查看精彩图片

选中一段代码按Cmd+K(Mac)或Ctrl+K(Windows),还能弹出一个小对话框,直接让 AI 在当前位置修改代码,更轻量。

打开网易新闻 查看精彩图片

不过有了 Agent 模式之后,大多数情况你已经不需要自己动手写代码了。Agent 模式才是 Cursor 真正的杀手锏,接下来我们用它做一个完整的编程项目。

3、AI 编程实战 - 网页总结工具 搞清楚要做什么

做项目的第一步始终是需求分析,先搞清楚你要做什么。

这个工具的功能很简单,就是用户输入一个网址,AI 自动提取网页内容并生成摘要总结,帮你快速理解一篇文章的核心内容,省去逐字阅读的时间。

像我平时要大量阅读国外的技术博客和新闻,有了这个工具就方便多了。

Plan 模式 - 先想清楚再动手

创建一个空文件夹作为项目目录,注意路径最好是纯英文的,中文路径有时候会导致一些奇怪的兼容问题。

然后在 Cursor 的 Editor Window 中打开这个文件夹,在对话面板里把模式切换到 Plan(按Shift+Tab可以快速切换模式)。

打开网易新闻 查看精彩图片

Plan 模式的好处是 AI 会先帮你想清楚怎么做,生成一份实施计划,确认没问题后再动手写代码。这样可以避免 AI 一上来就乱写一通。

我假设自己什么技术都不懂,直接把需求丢给 AI:

帮我开发一个网页总结工具,功能如下:

1. 用户在页面上输入一个网址
2. 点击按钮后,自动提取该网页的内容
3. 然后用 AI 对内容进行总结概括,生成简洁的摘要
4. 支持中英文网页,结果都用中文展示
5. 界面要简洁美观,有加载动画

请先帮我规划一下整体的技术方案和实施步骤

AI 会分析需求,有任何不确定的地方会弹窗找你确认。然后输出一份详细的实施计划,包括技术选型、文件结构、任务列表。你不需要看懂计划里提到的每个技术名词,大致扫一遍觉得合理就行。

 Agent 自主开发
打开网易新闻 查看精彩图片
Agent 自主开发

确认计划没问题后,点击对话中的「Build」按钮,AI 就开始按照计划自主执行了。

它会自动创建项目文件、编写前端页面、写后端接口、配置 AI 模型调用。如果计划中有多个可以同时进行的步骤,Cursor 还可能会启动多个子 Agent 并行工作,加快速度。

打开网易新闻 查看精彩图片

几分钟后,AI 完成了开发,还会自动运行项目,并且在 Cursor 内置的浏览器面板中自动打开网页,你可以直接预览效果,不用切到外部浏览器。

 测试验证
打开网易新闻 查看精彩图片
测试验证

项目跑起来之后,AI 会告诉你需要准备什么。由于我们的项目使用了 DeepSeek 大模型的 API 来做总结,需要先去 DeepSeek 开放平台获取一个 API Key,填到项目的环境变量文件里。

打开网易新闻 查看精彩图片

然后试试看效果。我输入一篇文章的网址,点击总结按钮,很快 AI 就给出了总结,还是很到位的。

打开网易新闻 查看精彩图片

但是我发现有些网站的内容无法正常提取和总结……

打开网易新闻 查看精彩图片

人工一个个测试太麻烦了,我们可以让 AI 自己来测试和修复。

输入@Browser使用 Cursor 内置的 Browser Use 浏览器操控功能,让 AI 自主测试:

请你自主测试和修复 AI 提取和总结功能,确保兼容大多数网站
比如当我输入 https://ai.codefather.cn 时,报错:未提取到足够正文

打开网易新闻 查看精彩图片

AI 先分析了当前的代码,然后通过终端命令尝试复现 Bug,修复了代码,还开了一个子 Agent 来打开浏览器自动验证。

打开网易新闻 查看精彩图片

修复完成后再试一次,这次就能够正常总结了。

打开网易新闻 查看精彩图片

每次任务执行完成后,你可以查看代码改动,按需保留或者撤销部分修改,也可以直接点击 Keep 保留全部改动。建议每验证完成一个功能就 Keep 一下。

 迭代优化
打开网易新闻 查看精彩图片
迭代优化

AI 编程的核心思路就是「先完成再迭代」,第一版做出来之后,通过多轮对话不断调整,直到满意为止。

这个过程中,有几个 Cursor 的核心技巧值得一提。

用 @ 引用精准提供上下文

在对话框里输入@,可以让 AI 精准地参考你指定的内容。比如@文件名引用项目中的某个文件,@Docs引用已索引的官方文档,@Terminals引用当前终端的报错信息。

打开网易新闻 查看精彩图片

比如你要用 Ant Design 组件库来美化网站,可以用@Docs引入 Ant Design 的官方文档,AI 就能基于最新的文档来编写代码,避免编造过时的写法。

你也可以直接把文件拖拽到对话框里。比如我把自己的产品信息文档拖进来,AI 在做底部版权推荐的时候就知道该展示什么信息了。

打开网易新闻 查看精彩图片

Cursor 还支持直接把图片拖进对话框。比如你觉得苹果官网的设计风格好看,截张图粘进来让 AI 参考着修改就行。

打开网易新闻 查看精彩图片

执行上述提示词后,网站被优化成了下面这样,还不错吧~

 Checkpoints 快照回滚
打开网易新闻 查看精彩图片
Checkpoints 快照回滚

多轮修改的过程中,难免会遇到 AI 越改越乱、或者一个 Bug 始终解决不了的情况。

这时候用 Cursor 的快照回滚功能就好了。Agent 每次修改都会自动保存一个快照,你只要把鼠标悬停在对话记录中之前某条消息上,点击回滚图标,就能一键恢复到那个时间点的代码状态。

打开网易新闻 查看精彩图片

就像游戏里的存档功能,搞砸了可以读档重来。

查看用量

做了这么多操作,消耗了多少 AI 额度呢?

在对话框的右下角可以看到当前对话的上下文使用情况,包括消耗了多少 Token 和各部分占比,一目了然。

打开网易新闻 查看精彩图片

你也可以打开 Cursor 后台面板 查看一段时间的消耗明细,建议给每月的按需用量加个上限,防止破产。

打开网易新闻 查看精彩图片

恭喜你,到这里你已经用 AI 从 0 做出了一个完整的网页应用!

4、让 Cursor 更强 - 扩展能力

Cursor 本身已经很强了,但它还有一套扩展体系,可以让 AI 连接外部工具、获取最新信息、遵守你的编码规范。

 Cursor 插件系统 MCP - 让 AI 连接外部世界
打开网易新闻 查看精彩图片
Cursor 插件系统 MCP - 让 AI 连接外部世界

MCP 的全称是 Model Context Protocol,听起来很唬人,但你可以把它理解为 AI 的万能插头。原本 AI 只能根据训练数据来回答问题、生成代码,但有了 MCP,它就能连接各种外部工具和数据源,比如查天气、操作数据库、规划出行路线。

打开网易新闻 查看精彩图片

比如安装高德地图的 MCP,只需要去高德开放平台申请一个 API Key,然后在 Cursor 设置里配置一下就行:

{
"mcpServers": {
"amap-maps": {
"url":"https://mcp.amap.com/mcp?key=你的API_KEY"
}
}
}

打开网易新闻 查看精彩图片

配置完成后,能够在 Cursor 设置面板中看到 MCP Server 提供的工具列表:

打开网易新闻 查看精彩图片

来试一试,直接跟 AI 说:用高德地图帮我规划一次周末上海两日游,查一下明天天气,推荐适合的景点。

打开网易新闻 查看精彩图片

AI 就会自动调用高德地图的各种工具,整合成一份完整的出游方案。

打开网易新闻 查看精彩图片

像我现在分析自己的产品数据时,就用数据库 MCP 让 AI 直接连接数据库查询数据,省得自己写 SQL 语句了。

Skills - 给 AI 装技能包

Skills 你可以理解为给 AI 提供的技能包,装了某个技能后,AI 在遇到相关任务时就能自动按照这套方法来干活,不用你每次都写一大堆提示词。而且技能是按需加载的,只有任务匹配时才会调用,不会浪费上下文空间。

打开网易新闻 查看精彩图片

比如 AI 编程时常用的几个技能,用于联网搜索的 Firecrawl、用于获取最新技术文档的 Context7、用于美化前端页面的 UI UX Pro Max 等等。

安装技能很简单,以 Firecrawl 为例,直接到官网复制一行安装命令,打开终端执行,按照指引完成授权就好。

打开网易新闻 查看精彩图片

安装完成后,在对话中输入/firecrawl就能调用:

/firecrawl 鱼皮的 AI 导航有哪些资源?

你会发现,Firecrawl 目前比 Cursor 内置的网页搜索工具效果更好、搜索结果更全面。

打开网易新闻 查看精彩图片

你还可以用 Cursor 内置的/create-skill命令来创建自己的技能。比如你刚做完一个网页总结工具,觉得这个流程以后还会重复用到,就可以让 AI 把这次的工作流程封装成技能,以后遇到类似任务就省事儿了。

 Rules - 约束 AI 的行为
打开网易新闻 查看精彩图片
Rules - 约束 AI 的行为

用 Cursor 做项目的时候,你可能会发现 AI 生成的代码风格跟你的习惯不太一样。比如你希望注释用中文写,但 AI 老是写英文注释。

最简单的方式是在项目根目录创建一个AGENTS.md文件,用 Markdown 写上你希望 AI 遵守的规则:

## 编码规范

-所有代码注释使用中文
-使用 TypeScript 而非 JavaScript
-变量命名使用驼峰式(camelCase)

保存之后,AI 在当前项目中工作时就会自动遵循这些规则。

打开网易新闻 查看精彩图片

这个文件不是 Cursor 独有的,Claude Code、Codex 等主流 AI 编程工具都会读取它,写一份规则就能在多个工具间通用。

如果你需要更精细地控制规则在什么时候生效,Cursor 还有一套专门的规则系统。

在设置面板的 Rules 配置中,可以创建针对特定文件类型生效的规则,也可以让 AI 智能判断是否需要某条规则。

打开网易新闻 查看精彩图片

不过对于刚入门的同学来说,用AGENTS.md就完全够了。

5、进阶功能速览

到这里你已经掌握了 Cursor 日常使用中最核心的功能。

此外,Cursor 还有不少进阶能力,现在不需要深入学,知道有这些东西就行,做项目的时候遇到了再回来查。

1)Cloud Agent 云端智能体:前面我们用的 Agent 都是跑在自己电脑上的。

Cursor 还有一种 Cloud Agent,跑在云端服务器上,关掉电脑它也能继续工作,适合大规模代码重构这种耗时任务。你甚至可以在手机上打开网页,随时随地让 AI 干活和查看进度。

打开网易新闻 查看精彩图片

2)Automations 自动化:可以设置定时触发或者事件触发的自动化任务。比如让 AI 每天早上 9 点自动整理项目进度并生成报告,或者当 GitHub 仓库有人提交代码时自动做代码审查。

打开网易新闻 查看精彩图片

3)Marketplace 插件市场:Cursor 有自己的官方插件市场,里面有 Figma 设计稿转代码、AWS 云服务部署、Notion 知识库等各种插件,一键安装就能用。

打开网易新闻 查看精彩图片

4)代码索引:Cursor 会自动分析整个代码库建立语义索引,你在对话中就能快速检索到项目里任何角落的代码。这个能力很适合用来学习开源项目,用 Cursor 打开项目后让 AI 帮你分析整体架构。

打开网易新闻 查看精彩图片

5)Git 集成:Cursor 自带了 Git 操作面板,可以查看代码变更、提交记录、撤销修改,不用打开终端敲命令。

你现在不用深入学 Git,就把它当成代码的「后悔药」就好。

打开网易新闻 查看精彩图片

6)VS Code 扩展:由于 Cursor 是基于 VS Code 开发的,所以它兼容所有 VS Code 的扩展插件。你甚至还可以安装 Claude Code 插件和 Codex 插件,在同一个编辑器里使用多个 AI 编程工具。

 6、我的使用感受
打开网易新闻 查看精彩图片
6、我的使用感受

最后再聊聊我使用 Cursor 的感受。

首先 Cursor 的功能非常全面,从代码补全、到 Agent 编程、到云端管理,AI 编程要用的能力它全都有。而且支持的模型多,Claude、GPT、Gemini 随便切,基于 VS Code 的插件也都能用。社区生态也很成熟,遇到问题容易找到解决方案。

不足的话,就是价格确实不便宜,Pro 套餐每月 20 美元,像我这种重度用户每月花费远不止这个数。不过对于认真做项目的人来说,这笔投资带来的效率提升是值得的。

由于 Cursor 的界面更新比较频繁,如果你看到的界面跟我的有些不一样,不用担心,核心的操作方式都是一样的,自己摸索摸索就好。

目前市面上类似的 AI 编辑器还有不少,但它们的核心操作方式都差不多,学完 Cursor 之后你再用其他工具也能游刃有余。

OK 就分享到这里。如果你想系统学习 AI 编程,可以看看我免费开源的,上千张图、几十万字,从 0 开始带你学会 AI 编程。

开源指路:https://github.com/liyupi/ai-guide
打开网易新闻 查看精彩图片

我是鱼皮,持续分享 AI 编程干货。觉得有用的话记得点赞收藏和关注,也欢迎在评论区聊聊:你现在主力用哪个 AI 编程工具?做出过什么有意思的项目?