Cursor 入门:用自然语言写代码,新手 30 分钟出第一个网页

如果你 2026 年想开始学 AI 编程,Cursor 是一个绕不开的工具。

它不是一款”普通编辑器”——Cursor 是基于 VS Code 内核深度改造的 AI 原生 IDE,内置了 GPT-4、Claude 4.5、Gemini 2.5 等顶级模型的能力,可以通过自然语言指令直接生成、修改、调试代码。最关键的是,它对新手极其友好——你不需要懂任何编程语法,只要会说”人话”,就能在 30 分钟内写出一个能跑的个人网页。

这篇文章就是给”完全没写过代码”或者”只写过一点点代码”的读者准备的。跟着走一遍,你至少能用 Cursor 做出一个像样的作品——哪怕你之前听到”编程”两个字就头大。

一、Cursor 到底是什么

简单说,Cursor 是一款把 AI 深度集成到代码编辑器里的开发工具。它的核心思路是:你用自然语言描述”想要什么”,Cursor 在编辑器里帮你生成、修改、调试代码,你只需要负责”审阅”和”调整方向”。

它背后用的是 VS Code 的内核,所以界面、快捷键、扩展生态跟 VS Code 完全兼容——你之前在 VS Code 上装的插件、习惯的快捷键,在 Cursor 里一样能用。这意味着从 VS Code 迁过来没有学习成本。

2026 年的 Cursor 主要有三个核心功能:

• Tab 自动补全:不只补一个单词,而是预测你接下来要写的整段代码,你可以按 Tab 接受,也可以继续输入覆盖
• Cmd K 指令式编辑:选中一段代码,按 Cmd K,用自然语言告诉它”把这里改成异步””加个错误处理”,它直接帮你改
• Agent 模式:整个项目交给 Agent,让它自己读文件、写代码、跑命令、修 bug,直到任务完成

这三个功能加起来,意味着你不需要懂任何语法也能写代码——只要你会用自然语言表达”我想要什么”。

二、安装与初始配置

装 Cursor 很简单,3 步搞定:

1. 下载安装

去 [cursor.com](https://cursor.com) 下载对应操作系统的安装包(Mac / Windows / Linux 都有)。安装过程跟装任何软件没区别,跟着提示走就行。

装完之后用邮箱注册一个账号。新账号有 14 天 Pro 试用,足够你跑完这个教程。

2. 选择 AI 模型

装好后第一次打开 Cursor,会让你选择默认的 AI 模型。推荐选择以下两个之一:

• Claude 4.5 Sonnet:代码生成质量高,理解能力强,适合新手
• GPT-5:通用能力强,响应速度快

新手无需纠结选哪个,选完后面随时可以在设置里切换。

3. 配置快捷键

如果你之前用 VS Code,Cursor 的快捷键默认就跟 VS Code 一致,不用改。如果你想自定义,打开 Cursor → Settings → Keyboard Shortcuts 调整。

到这里,Cursor 就装好了,可以开始写代码了。

三、核心功能 1:Tab 自动补全——最简单的入门

Tab 是 Cursor 最基础也最好用的功能。你在编辑器里输入代码,Cursor 会预测你接下来要写什么,用灰色显示出来。

比如你新建一个 index.html,输入:

Cursor 立刻会在你输入位置的下一行显示灰色提示,告诉你它认为接下来要写什么。按 Tab 接受,继续;不按 Tab,自己写。

这种”半自动半手动”的写代码方式,对新手特别友好。你不会写代码没关系,Cursor 会提示,你只需要按 Tab 接受;你懂一点代码也没关系,你可以继续输入覆盖 Cursor 的建议。

实战小技巧:Tab 提示越长越省事,但也不是越长越好。一般 3-10 行的提示最稳。

四、核心功能 2:Cmd K 指令式编辑——会说话就能改代码

Cmd K 是 Cursor 的”指令式编辑”功能。选中一段代码,按 Cmd K(Mac)或 Ctrl K(Windows),会弹出一个输入框,你可以用自然语言告诉它”要怎么改这段代码”。

举个例子,假设你已经有一段 HTML:

你想给它加一个点击事件,让用户点击后弹出”你好”。选中 <button>点击我</button>,按 Cmd K,输入:

Cursor 会直接帮你改成:

整个过程不需要你懂 JavaScript、不需要你查文档、不需要你复制粘贴——只要你会说话。

Cmd K 支持的指令几乎无限:

• “把这段代码改成异步”
• “给函数加错误处理”
• “把 if-else 改成 switch”
• “把所有 console.log 删掉”
• “把代码翻译成 Python”

新手建议先从简单的指令开始,慢慢感受 Cursor 对自然语言的理解能力。

五、核心功能 3:Agent 模式——给 AI 一个项目,让它自己干

Agent 模式是 Cursor 最强大的功能,也是 2026 年所有 AI 编程工具的标配。

打开 Agent 模式最简单的方式:按 Cmd I(Mac)或 Ctrl I(Windows),在弹出的输入框里描述你想做什么。Agent 会自动:

1. 阅读你当前项目的文件结构
2. 生成代码
3. 创建新文件
4. 运行命令(比如启动本地服务器)
5. 检查报错
6. 修复
7. 重复直到完成

整个过程你完全不用动手,只需要在最后审阅 Agent 的成果。

Agent 的典型用法:让它”搭一个个人作品集网页,包含首页、关于我、项目列表三个页面”——它会自己建好 HTML、CSS 结构,然后还可以让它”加点动画””把配色改成蓝色””在底部加联系方式”。

注意一点:Agent 不是万能的,复杂的项目可能需要你分多次指令、多次调整。但对于”做一个网页””写一个爬虫””做个简单的小工具”这类任务,Agent 已经能独立完成 80% 以上的工作。

六、实战:30 分钟搭一个响应式个人网页

理论讲完了,我们来个真实项目:做一个响应式的个人作品集网页,30 分钟搞定。

步骤 1:新建项目(2 分钟)

1. 新建一个文件夹,叫 my-portfolio
2. 用 Cursor 打开这个文件夹(File → Open Folder)
3. 在 my-portfolio 里新建一个文件 index.html

步骤 2:让 Agent 搭框架(5 分钟)

按 Cmd I,输入:

Agent 会自动创建 index.html、style.css,可能还有 script.js。

步骤 3:加内容(10 分钟)

网页搭好了,但内容是占位的。回到 Cmd K 或 Agent,告诉它:

或者一次性让 Agent 替换:

步骤 4:启动预览(2 分钟)

让 Agent 在本地启动一个简单的 HTTP 服务器:

Cursor 的 Agent 会自动跑命令,打开浏览器就能看到你的网页。

步骤 5:调整细节(10 分钟)

预览看起来不错?那就开始微调。比如:

• 用 Cmd K 选中导航栏,告诉它”改个字体,看起来更现代”
• 选中”项目”区块,告诉它”卡片改成圆角,加阴影”
• 选中 footer,告诉它”加个回到顶部按钮”

整个过程不需要你写一行代码——Cursor 全程用自然语言驱动。

步骤 6:部署上线(1 分钟)

最后一步:让网页让全世界看到。告诉 Agent:

Agent 会引导你完成整个部署流程,几分钟后你就能拿到一个能访问的网址。

30 分钟,完全从零开始,一个能上线、能分享的个人作品集网页。这就是 Cursor + Agent 在 2026 年的能力。

实战后优化建议

网页搭起来后,有几个常被新手忽略的优化项:

• 加 SEO meta 标签:告诉 Agent “帮我加 SEO meta 标签,包括 description、keywords、og:image”
• 加 favicon:让 Agent 生成一个简单的 logo 当 favicon
• 加性能优化:告诉 Agent “帮我压缩 CSS、加 lazy loading、配置 gzip”,网页打开会快很多
• 加 PWA 支持:让 Agent 把网页做成 PWA,这样手机可以”加到主屏幕”像 App 一样用

这些都不需要你懂实现细节,Cmd K 或 Agent 一句话搞定。

附:常用指令模板库

为了让你用 Cursor 更顺手,这里整理一份新手必背的”指令模板库”——直接复制改改就能用:

建项目类

• “帮我新建一个 [类型] 项目,要求 [特性]”
• “把这个项目重构为 [框架/模式]”

改代码类(Cmd K)

• “把这段改成 [异步/同步]”
• “加 [错误处理/日志/重试] 逻辑”
• “把 [if-else/switch/字典] 改成 [新形态]”
• “把所有 [英文/中文] 翻译成 [另一门语言]”
• “提取重复代码,改成公共函数”
• “加详细的代码注释”

找 Bug 类

• “这段代码哪里有问题?”
• “运行报错了:[错误信息] 怎么修?”
• “为什么这个函数效率这么低?”
• “这段代码有安全漏洞吗?”

写新功能类

• “加一个 [功能名] 功能,要求 [行为描述]”
• “给 [模块] 加 [单元测试/集成测试]”
• “把这个函数改成可以配置的形式”

学代码类(让 Cursor 当老师)

• “用大白话解释这段代码”
• “这段代码用了什么设计模式?”
• “如果我是新手,这段代码哪里最难理解?”
• “给这段代码加个时间复杂度分析”

记住这个模板库,等遇到任何需求,先到模板库里找最相近的指令,改一改关键词就能用。

七、Cursor vs Claude Code vs Codex 怎么选

很多新手会问:Cursor、Claude Code、Codex、Windsurf 这些 AI 编程工具,到底选哪个?

简单对比:

新手建议先学 Cursor——它对小白最友好,有可视化界面,可以用鼠标操作。学会了 Cursor,后面想用 Claude Code / Codex 都能很快上手,因为它们的 AI 核心能力是一样的。

八、常见坑

新手用 Cursor 最容易遇到的几个坑:

坑 1:Agent 生成的代码有 bug —— 这是正常的。Agent 不是神,它也会犯错。遇到 bug 最简单的办法:把错误信息复制给 Agent,让它自己修。

坑 2:改不动 Agent 生成的代码 —— 不要试图自己一行行改,而是用 Cmd K 选中那段代码,告诉它要怎么改。这样 Cursor 会保留 AI 生成的上下文,你不需要懂代码也能调整。

坑 3:上下文太长 Agent 跑偏 —— Cursor 也有”上下文焦虑”问题。一个项目文件太多时,Agent 表现会下降。这种情况要么拆分成小任务,要么从”Agent 模式”切回”手动写代码 + Cmd K 局部修改”。

坑 4:不会写指令 —— 一开始觉得”我要做什么”很难描述。解决办法:模仿别人的 prompt。看 GitHub 上优秀的 AI 项目,看他们的 issue 怎么描述需求,这是个很快能学会的技能。

九、下一步

学完这篇,你已经掌握了 Cursor 的核心用法。接下来的几个方向:

• 想更深入地学 Agent 开发:看本系列下一篇文章《手把手搭建第一个 AI Agent:基于 LangGraph 实战》
• 想搞清楚 Cursor 背后的 AI 机制:看《AI Agent 到底是什么?2026 年最值得搞懂的 5 个核心概念》
• 想把 Cursor 用到极致:学一下怎么用 MCP 给 Cursor 接更多工具(MCP 实战系列)

Cursor 是 2026 年最值得学的 AI 编程工具之一,没有之一。30 分钟你能做出第一个网页,30 天你能用它做完整的应用。剩下要做的,就是动手做点东西。

最后送你一句话:Cursor 不是”替你写代码的工具”,而是”让你不必懂代码也能做东西的工具”。工具再强,你不开始动手,它什么都不是。今天就下载 Cursor,做出你的第一个网页,30 分钟后你会有一种”原来我也能写代码”的错觉——这种错觉,正是 2026 年新手的最大优势。

实战心法:用 Cursor 时的几个习惯

学完上面的内容,再分享几个能让你用 Cursor 顺手很多的习惯,都是社区里积累出来的实战经验:

习惯 1:每个项目都从 README 开始。让 Agent 先帮你写一份 README,描述项目目标、技术栈、目录结构——后面所有 Agent 操作都会优先参考这份 README,让你的项目始终有”主线”。

习惯 2:用 git 做版本控制。Agent 生成一段代码后,先 git commit;如果改崩了,git checkout 回到上一个版本。Cursor 与 git 深度集成,装好直接用。

习惯 3:不要怕”问错了问题”。新手最容易犯的错就是”我的问题太幼稚,不敢问 Agent”。事实上 Agent 不在乎问题幼稚不幼稚,你问什么它答什么,大胆问就行。

习惯 4:模仿优秀项目的目录结构。用 Agent 帮你”参考知名开源项目,给这个项目搭一个标准的目录结构”。这样你的项目从一开始就看起来”专业”,后续维护也方便。

习惯 5:把 Cursor 当成”代码合伙人”,不是”万能神”。它会犯错、会跑偏、会生成你看不懂的代码。遇到这种情况,要么用 Cmd K 微调,要么诚实承认”这块我需要自己学一下”。把 Cursor 当合伙人,你学得更快;把它当万能神,你会摔得更惨。

习惯 6:每天用 30 分钟,坚持 30 天。和学任何新工具一样,Cursor 的能力是”用出来的”,不是”看出来的”。今天跟着教程做了第一个网页,明天试试改它的样式,后天加个新功能。30 天后,你会发现自己已经能独立做完整的小项目了。

这些习惯可能比具体功能更值钱。2026 年,会用 Cursor 的人很多,会用 Cursor + 有好习惯的人很少——后者才是真正能在 AI 时代做出东西的人。

(综合 Cursor 官方文档、Claude/GPT 模型能力对比、Cursor 社区实战经验、开源项目最佳实践整理)