Cursor新手教程：安装后完成第一次改代码、预览与回退
资料核对：2026年10月10日｜适用于第一次使用AI编辑器的读者
Cursor怎么用？安装并打开一个小项目，先让Agent解释文件，再提出范围明确的修改，查看差异，最后在本地验证。第一次不必直接制作复杂应用；用一个简单网页练习，你更容易看懂AI到底改了什么。
这篇Cursor新手教程带你做一张学习卡片页面，修改按钮文字与颜色，并学会保存和回退。无需先购买服务器或发布网站。
本站原创操作示意图，非Cursor界面截图。
第一步：从官网下载并打开练习文件夹
从Cursor官网下载与你的系统对应的安装包，安装后登录自己的账号。具体安装和新手流程可核对官方快速入门。
建立一个新文件夹，例如cursor-practice，在Cursor中打开它。把练习与工作项目分开，减少误改真实文件的可能。第一次登录后，检查当前账户的功能与额度，不要假设安装完成就能无限使用所有模型。
如果你有VS Code经验，可以迁移熟悉的设置；如果没有，先保持基础环境，暂时不安装大量扩展。
第二步：准备一个能直接打开的网页
在文件夹中新建index.html，粘贴下面的初始页面并保存。注意文件名不要变成index.html.txt。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的学习卡片</title>
<style>
body { margin: 0; padding: 24px; font-family: sans-serif; background: #f4f7f5; }
.card { max-width: 520px; margin: 40px auto; padding: 28px; background: white; border-radius: 16px; }
button { padding: 12px 20px; border: 0; border-radius: 8px; background: #334155; color: white; cursor: pointer; }
</style>
</head>
<body>
<main class="card">
<h1>我的学习卡片</h1>
<p>今天练习：让AI完成一个可检查的小修改。</p>
<button type="button" onclick="this.textContent='今日练习已完成'">开始学习</button>
</main>
</body>
</html>
先在文件管理器中双击这个文件，用浏览器打开。确认能看到标题和按钮，点击后按钮文字变化。这个例子不需要安装项目依赖，也没有后端服务。
修改之前，另外复制一份初始文件到备份文件夹。稍后如果不满意，可以用备份恢复，不必完全依赖AI记住原始内容。
第三步：先让Agent解释，再要求修改
打开Cursor里的Agent对话，确保当前项目就是练习文件夹，给它这个任务：
请阅读index.html，先不要修改。
用简体中文解释页面的结构：内容在哪、颜色在哪、按钮点击后做什么。
只说明与这次练习有关的部分，不要添加框架或安装依赖。
对照文件看它是否找到了标题、按钮和样式。这一步帮助你理解代码，也能确认AI关注的是正确文件。
然后提出第一次修改：
只修改index.html：
把按钮初始文字改成“开始今日练习”，背景改为深绿色#18624d。
保留点击后显示“今日练习已完成”的行为。
不要修改标题、正文、文件结构，不增加依赖。
完成后说明改动位置和检查方法。
这个任务的完成标准明确：改两项，保留一个行为，其余不动。比“把页面做得高级一点”更容易判断是否完成。
第四步：检查差异，再接受结果
Cursor会展示新增和删除内容。打开改动查看入口，对照修改前后，确认是否只改了按钮文字和背景颜色。官方代码审查与测试指南介绍了审查改动的流程。
即使不熟悉代码，也可以先检查这些问题：有没有新增不需要的文件，有没有安装依赖，有没有删除点击行为，有没有修改其他正文。
发现范围扩大时，明确指出哪项不需要，并恢复对应内容。不要只看AI最后一句“已经完成”，就接受所有改动。
第五步：保存文件，在浏览器验证
保存index.html，刷新浏览器。检查按钮初始文字和颜色，再点击确认原有行为正常。缩小浏览器宽度，看看卡片与按钮是否能在窄屏显示。
如果看不到变化，先检查文件是否保存、浏览器打开的是不是同一个文件，以及是否需要重新刷新。单文件练习里，文件路径错误比复杂技术问题更常见。
给自己留一条验证记录：
初始按钮文字：正确 / 不正确
按钮颜色：正确 / 不正确
点击后文字：正确 / 不正确
窄屏显示：正常 / 需要调整
是否有额外文件或依赖：
只有这些检查通过，第一次修改才算完成。你可以接着练习第二个小任务，例如调整卡片间距，但不要把多个无关需求一次塞进去。
现有项目该怎么操作？
有工作项目时，先让Agent说明目录、启动方式和项目已有检查，再选一个小问题。保持项目原来的技术栈，让它解释改动范围后再实施。
可用这个提示词：
先理解当前项目，不要修改。
说明入口文件、启动方式和已有检查。
我接下来只想修复一个按钮显示问题。
请指出可能相关的文件，并解释依据。
不要升级依赖、重构目录或处理无关问题。
需要运行命令时，先看它为什么执行、会改哪些文件。涉及发布、删除或外部服务的操作，应按项目本来的流程处理，而不是因为Agent提出就全部执行。
做错了怎么回退？
练习项目可以用初始备份恢复文件。已有Git项目则先保存当前状态，再按项目规范创建提交或分支，修改后通过差异确认。不要在不理解影响范围时使用会丢弃所有未保存改动的操作。
AI生成的回退说明也需要检查。如果只是颜色改错，恢复那一行就够了，没有必要把整个项目重新生成。
Agent连接失败或请求一直转圈
先检查账号登录、当前额度和服务状态，再用一个很小的解释任务测试。不要把项目启动失败、模型请求失败和浏览器预览错误混为一谈。
若只有模型请求出现连接超时，检查编辑器实际使用的网络配置；浏览器能上网，不代表编辑器采用相同链路。已经确认连接质量问题时，可以参考本站机场推荐与网络服务选购指南，重点看客户端支持和短期试用。购买网络套餐不能恢复已经用尽的Cursor额度。
常见问题
不会编程可以用Cursor吗？
可以从这样的小练习开始，但仍需学习文件、保存、预览和差异检查。让AI解释每次修改，能逐渐建立判断能力。
Cursor会自动把网页发布出去吗？
本篇单文件练习只在本机查看。发布需要另外的部署配置和操作，不能把本地预览当成已上线。
为什么AI改完还报错？
可能是需求理解、代码、环境或依赖问题。保存错误原文、复现步骤和最近改动，再让它只处理相关原因。
要给Cursor自己的API Key吗？
先检查当前产品与账户提供的使用方式，只有明确选择自带密钥功能时再配置。不同接入方式的计费和功能可能不同，不能只看一个Key输入框。
掌握“读懂任务—限制范围—检查差异—验证结果”这套流程后，再把练习扩大到多文件项目。能解释和恢复自己的改动，才更容易把AI编程变成日常工具。
评论