大家好,我是程序员鱼皮。
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 模型
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 自主开发
确认计划没问题后,点击对话中的「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 快照回滚
多轮修改的过程中,难免会遇到 AI 越改越乱、或者一个 Bug 始终解决不了的情况。
这时候用 Cursor 的快照回滚功能就好了。Agent 每次修改都会自动保存一个快照,你只要把鼠标悬停在对话记录中之前某条消息上,点击回滚图标,就能一键恢复到那个时间点的代码状态。
![]()
就像游戏里的存档功能,搞砸了可以读档重来。
查看用量
做了这么多操作,消耗了多少 AI 额度呢?
在对话框的右下角可以看到当前对话的上下文使用情况,包括消耗了多少 Token 和各部分占比,一目了然。
![]()
你也可以打开 Cursor 后台面板 查看一段时间的消耗明细,建议给每月的按需用量加个上限,防止破产。
![]()
恭喜你,到这里你已经用 AI 从 0 做出了一个完整的网页应用!
4、让 Cursor 更强 - 扩展能力
Cursor 本身已经很强了,但它还有一套扩展体系,可以让 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 的行为
用 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、我的使用感受
最后再聊聊我使用 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 编程工具?做出过什么有意思的项目?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.