3.3 AI IDE：Cursor、Trae 的界面、Chat 与 Agent 模式

📌 基于 Cursor / Trae 的 2026-09 版本。这两款产品改版频繁，菜单位置和按钮名称以你屏幕上看到的为准。本节教的是不会变的东西：界面的五个区域、三种使用方式的分工、以及怎么验收改动。

一、本节你会做出什么

你会打开一个 AI IDE，看懂它的界面，并用三种不同的方式各改一次代码——而且每一次改动你都看得见红绿对照。

📷 效果位：AI IDE 界面全景，右侧 Chat 面板 + 中间代码区显示红绿 diff

“看得见”是这一节的全部价值。 3.2 的终端 Agent 干活猛，但改动是滚过去的一串字；AI IDE 把同样的改动摆成左右对照，让你点「接受」或「拒绝」。对零基础来说，这是最好的学习界面。

---

二、开始前你需要

• 已完成 3.1 工具全景与选择建议
• 已完成 2.2，有 hello-node 项目
• 已完成 2.3，项目已经 git init 过

💡 选了 Pi 做主力的同学也要读这一节：至少把 IDE 当成“看 diff 和微调的工具”。3.1 讲过，这是最划算的组合。

---

三、跟着做

第 1 步：选一个装上

	Cursor	Trae
来历	基于 VS Code 改造的 AI IDE，海外产品	字节跳动出品，有国内版和国际版
界面语言	英文为主（可装中文插件）	国内版全中文
网络	国内访问可能需要折腾	国内访问稳定
免费档	有，额度有限	有，相对宽松
生态	VS Code 插件全都能用	同样基于 VS Code 内核，插件兼容

怎么选： 国内网络不稳、英文界面头疼 → Trae；其余情况 → Cursor（生态和资料更多）。

两者核心概念完全一致，本节的内容两边通用，具体按钮位置略有差别。

去官网下载安装包，双击安装，用 GitHub 账号登录即可。

第一次打开会问你要不要导入 VS Code 的配置、要不要装中文语言包——都按你的喜好选，不影响功能。编辑器本身的基本使用（打开文件夹、新建文件、保存）在 [附录 G]。

第 2 步：认识界面的五个区域

打开你的项目：菜单 File → Open Folder，选中 hello-node 文件夹。

🔴 和 3.2 一样的坑：一定要打开文件夹，不是打开单个文件。打开单个文件的话，AI 看不到项目全貌。

界面分五块，记住它们各自的作用就够了：

┌──────────┬────────────────────────────┬──────────────┐
│          │                            │              │
│  ①       │        ②  代码区            │   ④ AI 面板   │
│  文件树   │     （中间，看和改代码）      │   （右侧，    │
│  （左侧） │                            │    对话区）   │
│          ├────────────────────────────┤              │
│  ③ 源代码 │      ⑤  终端（底部）         │              │
│    管理   │                            │              │
└──────────┴────────────────────────────┴──────────────┘

区域	干什么的	怎么打开
① 文件树	项目里有哪些文件，点一下打开	左侧栏最上面的图标
② 代码区	看代码、改代码；AI 的改动也在这里显示红绿对照	中间，默认就在
③ 源代码管理	2.3 学的 Git 面板：改了哪些文件、diff、commit	左侧栏的分支状图标
④ AI 面板	和 AI 对话的地方	通常 Cmd/Ctrl+L 或 Cmd/Ctrl+I
⑤ 终端	2.1 学的黑框框，内嵌在这里，pnpm dev 在这儿跑	Ctrl+`（反引号，Esc 下面那个键）

③ 源代码管理面板值得单独说一句：点开它，你昨天在 2.3 敲的 git status / git diff / git commit，在这里全是点击操作——改动的文件列成一排，点文件名就是左右对照的 diff，上方输入框写说明、点 ✓ 就是 commit。

📷 截图位 1：五个区域标注图

第 3 步：三种使用方式，分别在什么时候用

这是本节的核心。同一个 AI，有三种叫法，分工完全不同。

	① 自动补全	② 行内编辑	③ Chat / Agent 面板
怎么触发	你打字，它自动灰字提示	选中代码，Cmd/Ctrl+K	Cmd/Ctrl+L 打开右侧面板
改动范围	当前这一两行	你选中的那一段	可以跨多个文件
适合	手写代码时（本课用得少）	「把这个按钮改成圆角」	「加一个联系表单」
怎么接受	按 Tab	弹出 diff，点接受/拒绝	逐文件接受/拒绝，或全部接受

对零基础来说，②和③是主力，①基本用不上（你本来就不手写代码）。

② 行内编辑（Cmd/Ctrl+K）—— 精确制导

现在动手：

1. 左侧文件树里打开 app/page.tsx
2. 用鼠标选中页面主标题那一行
3. 按 Cmd+K（Windows 是 Ctrl+K）
4. 在弹出的小输入框里打：把这行文字改成「我的 IDE 改动测试」，字号调大一点
5. 回车

代码区会立刻出现红绿对照：红色是原来的，绿色是新的。点 Accept / 接受 或 Reject / 拒绝。

这是零基础最该练熟的一招。 因为它的改动范围被你的选区锁死了，AI 跑不偏。页面上任何你不满意的细节，都可以「选中 → Cmd+K → 说一句话」。

📷 截图位 2：Cmd+K 的红绿对照与接受/拒绝按钮

③ Chat 与 Agent —— 两种模式，务必分清

打开右侧 AI 面板（Cmd/Ctrl+L），面板顶部有个模式切换器。名字各产品不同，但永远是这两类：

	Chat / Ask 模式（只说不做）	Agent / Builder 模式（自己动手）
它会做什么	回答问题、给建议、贴代码给你看	自己读文件、改文件、跑命令，多轮循环
会改你的文件吗	不会	会
像什么	请教一位顾问	派活给 3.2 那个施工队
什么时候用	「这段代码什么意思」「为什么报错」「有几种做法」	「加一个功能」「修好这个 bug」

🚨 新手最常见的事故：以为自己在 Chat 模式下随口说说，结果开着 Agent 模式，它把项目改了。每次开口前，先扫一眼模式切换器。

现在动手，先用 Chat 模式：

这个项目的 app/page.tsx 是干什么的？用中文讲，我是零基础。

它只会回答，不会动文件。

再用 Agent 模式（动手前先存档）：

底部终端里执行 git add -A && git commit -m "IDE 实验前的存档点"，然后切到 Agent 模式：

在首页下方加一个页脚，显示「© 2026 我的第一个项目」，文字居中、灰色小字。
只加这一处，不要改动页面其他部分。

它会开始工作，然后把改动摆出来让你逐个接受或拒绝。

📷 截图位 3：Agent 模式的改动列表与接受/拒绝

第 4 步：@ 引用——让 AI 看对地方

和 3.2 的 Pi 一样，IDE 的对话框里 @ 是最有用的符号。输入 @ 会弹出一个列表：

引用	作用	例子
@文件名	让它看指定文件	@page.tsx 这里的标题怎么改
@文件夹	让它看整个目录	@components 这些组件都是干什么的
@Web（部分产品有）	让它联网查	查某个库的最新用法
直接贴图	把设计稿、报错截图贴进对话框	「照着这张图做一个卡片」

💡 贴图这一招对做页面极其有用：截一张你想要的效果图丢进去，比你用一千字描述“要那种圆角加阴影的卡片”有效得多。

第 5 步：验收——IDE 的最大优势

AI 改完，不要直接相信“看起来对”。三层验收，从快到慢：

层次	怎么做	看什么
1. 当场看 diff	AI 给出改动时的红绿对照	有没有删掉不该删的（红色部分要看清）
2. 看源代码管理面板	点左侧 ③	一共动了几个文件——超出预期就是危险信号
3. 跑起来看	底部终端 pnpm dev	浏览器里效果对不对、控制台有没有红字（1.3 教的）

三层都过了，在源代码管理面板写上说明、点 ✓ 提交。

这正是 2.3 那套后悔药的图形化版本，命令和按钮是一一对应的：

2.3 的命令	IDE 里的操作
git status / git diff	源代码管理面板，点文件名
git add -A + git commit -m	填说明 → 点 ✓
git restore .	文件右侧的「撤销更改 / Discard Changes」↩
git push	点「同步更改 / Sync」

⚠️ 「撤销更改」和 git restore . 一样是不可逆的，点之前先确认没有你舍不得的改动。

第 6 步：规则文件（和 3.2 的 AGENTS.md 是一回事）

AI IDE 也支持项目级规则文件，让你不用每次重复交代。各产品位置不同，常见的是项目根目录下的规则目录（如 .cursor/rules/），部分产品也直接读根目录的 AGENTS.md。

内容和 3.2 那份一样：

- 本项目使用 Next.js + TypeScript + Tailwind CSS
- 所有回复用中文
- 大改动前先说方案，等我确认再动手
- 不要擅自新增依赖包

怎么写才真正有效，是 3.5 的重点。 这里先建一个，混个眼熟。

第 7 步：Pi 和 IDE 一起用（推荐工作流）

两个工具可以同时开着，因为它们改的是同一批文件。文件被外部改动后，IDE 会自动刷新显示。

Pi（终端）      → 干大活：加功能、批量改、查报错
IDE 代码区      → 看 diff：AI 到底改了什么
IDE Cmd+K       → 抠细节：这一行不满意，就地改掉
IDE 源代码管理   → 验收 + commit

⚠️ 唯一要注意的：别让 Pi 和 IDE 的 Agent 同时改同一个文件，改动会互相覆盖。一次只让一个动手。

---

四、完成的标志是

• 我装好了 Cursor 或 Trae，并用 Open Folder 打开了项目（不是打开单个文件）
• 我说得出五个区域分别在哪、干什么
• 我用 Cmd/Ctrl+K 改过一次选中的代码，并看到了红绿对照
• 我分得清 Chat 模式和 Agent 模式，知道前者不会改我的文件
• 我在 Chat 模式下问过一个问题，它只回答没动文件
• 我在 Agent 模式下完成了一次改动（动手前存了档）
• 我用过 @ 引用文件
• 我在源代码管理面板里看过改动、并点 ✓ 提交过一次
• 我知道「撤销更改」按钮等于 git restore .，且不可逆
• 我建了规则文件（内容简单没关系）

---

五、卡住了看这里

Q：AI 说“我看不到你的项目文件”。 你打开的是单个文件而不是文件夹。File → Open Folder，选中项目根目录重开。

Q：我按 Cmd+K 没反应 / 弹出来的是别的东西。 ① 先用鼠标点一下代码区，让焦点在编辑器里；② 快捷键可能被系统或输入法占用了，去设置里搜 “Inline Edit” 看实际绑定的键；③ 部分版本用的是 Cmd+I。

Q：我没注意模式，Agent 把项目改了。 不慌，这正是 2.3 存在的意义。三步：① 对话里点「撤销 / Restore」回到改动前；② 或者在源代码管理面板里对每个文件点「撤销更改」；③ 或者终端里 git restore .。只要你之前 commit 过，损失就是零。

Q：免费额度用完了，提示要升级。 ① 切到它提供的免费/低配模型，简单任务够用；② 换用 3.2 的 Pi 接你自己的 API Key；③ 真要付费，等你跟完第 4 章再决定（3.1 讲过）。

Q：编辑器很卡 / 风扇狂转。 ① 关掉不用的标签页和其他项目窗口；② 确认 node_modules 没有被索引（正常配置会自动排除，2.2 讲过它有几百 MB）；③ 8G 内存的机器，别同时开着浏览器几十个标签页。

Q：AI 给的代码贴进去以后报错，红色波浪线一片。 先别急着改。把报错信息复制给它（鼠标悬停在波浪线上能看到完整信息），或者直接在 Chat 里说“刚才的改动报错了，错误是……”。这是第 6 章的核心技能，那里会系统讲。

Q：Trae 和 Cursor 我能都装吗？ 能，互不影响，可以打开同一个项目。但同一时间只让一个 Agent 动手，否则改动会打架。

---

六、本节提示词

① 让 AI 带你认识界面（在 Chat 模式下问）：

我是零基础新手，第一次用【Cursor / Trae】。
请告诉我：
1. 当前版本里，行内编辑（选中代码后就地修改）的快捷键是什么；
2. Chat 模式和 Agent 模式怎么切换，切换器在界面哪个位置；
3. 怎么查看 AI 的改动并撤销；
4. 项目规则文件应该放在哪个路径、叫什么名字。

如果你不确定当前版本的具体位置，请明确说不确定，让我去设置里搜哪个关键词。

② 精确修改的万能句式（配合 Cmd+K 用）：

只修改我选中的这部分，把它改成：【具体要求】。
不要改动选区以外的任何代码。

③ Agent 模式动手前的安全咒（每次大改都加上）：

我要实现：【具体需求】

请遵守：
1. 先列出你打算改哪些文件、每个文件改什么，**等我回复"可以"再动手**；
2. 不要新增任何依赖包，需要的话先问我；
3. 不要改动和本需求无关的文件；
4. 做完列一个清单，告诉我怎么验证。

④ 让 AI 解释它自己的改动（看不懂 diff 时）：

你刚才的改动我看不太懂。请用零基础能懂的话，
逐个文件告诉我：
1. 这个文件原来是干什么的；
2. 你改了哪里，改成了什么；
3. 这个改动会让页面上出现什么变化；
4. 有没有可能影响到页面的其他部分？

---

上一节 ← 3.2 Pi 入门 下一节 → 3.4 MCP 与 Skills：给 AI 装上外部能力