3.3 让 AI 进项目干活：优先使用带界面的 IDE Agent

上一节，我们做了一件很朴素但很关键的事：

让电脑能听懂基本命令。

node 能不能叫出来，npm 能不能运行，python 会不会打开应用商店，依赖下载会不会卡死，这些问题解决以后，项目才有继续往前走的基础。

但很快，老师会遇到第二个问题：

AI 到底在哪里用？

是在网页聊天框里问？

是在 VS Code、Trae、Qoder 这类带界面的工具里问？

还是在 Windows Terminal 里启动一个命令行工具，让它直接读项目、改文件、跑命令？

这篇就把这个问题单独说清楚。

先给一个明确建议：如果你是第一次让 AI 进入项目干活，优先使用带用户界面的 IDE 型 Agent。

因为 IDE 能让你看见文件、看见改动、看见项目结构。对非技术出身的老师来说，“看得见”比“命令更强大”更重要。

这篇不会把 CLI Agent 讲成主角。你只需要先知道它是什么，后面真正需要跑命令、查报错、改后端时，再把它当成辅助工具。

AI 不只有聊天框

很多老师第一次接触 AI 编程，是从聊天框开始的。

这很正常。

你可以对 DeepSeek、通用对话模型或者其他聊天型 AI 说：

请帮我生成一个科技节答题页面。

它会给你一段 HTML、CSS 或 JavaScript。

这种方式很适合做头脑风暴、写需求、生成静态页面草稿。

但项目一旦变大，只靠聊天框就会很累。

因为聊天框通常不知道你电脑上的项目目录是什么样，也不能稳定地帮你打开文件、修改多个文件、运行 npm install、查看终端报错。

这就是为什么后面要切换到 Coding Agent。

在本书里，Coding Agent 指的是能进入项目目录，读取文件，修改文件，运行命令，并把结果解释给你的 AI 编程助手。

它不是单纯“更会聊天”的 AI。

它更像一个能走进项目现场的助手。

先分清三种入口

对非技术出身的老师来说，不需要一上来记很多工具名。

先把入口分成三类就够了。

第一类，是聊天型 AI。

它适合：

• 讨论需求。
• 追问场景。
• 整理 PRD。
• 生成静态 HTML 草稿。
• 把一段报错翻译成人话。

第二类，是 IDE 型 Agent。

IDE 可以先理解成“写代码的工作台”。VS Code + GitHub Copilot、Trae、Qoder、Cursor 这类带用户界面的工具，都可以归到这个使用入口里。

它们通常能让你看到项目文件树，点开代码文件，在编辑器里让 AI 解释或修改局部内容。

第三类，是命令行 CLI Agent。

CLI 是命令行工具的意思。OpenCode CLI、Codex CLI、Claude Code、Gemini CLI 等，都属于这种常见形态。

它们通常是在项目目录里启动，然后你在终端里和它对话。它能读项目文件，也能运行命令、分析报错、改后端代码。

先不用纠结哪个工具最强。

对老师来说，更重要的是知道：

讨论想法用 Chat。
真正进项目，优先用带界面的 IDE Agent。
CLI Agent 知道有这种工具即可，需要跑命令和查报错时再用。

IDE 型 Agent：适合看得见的修改

IDE 型 Agent 的好处，是“看得见”。

你能看到左侧有哪些文件，能打开某个页面文件，也能看到 AI 改了哪些地方。

所以对新手老师来说，IDE 型 Agent 更适合作为第一入口。

比如 VS Code + GitHub Copilot、Trae、Qoder 这类工具，通常都会把项目文件树、代码编辑区、AI 对话区放在同一个工作台里。你不用一开始就记住很多命令，先学会打开项目、点开文件、让 AI 解释局部内容，就已经能完成很多实用修改。

可以这样粗略理解：

• VS Code 是通用工作台，配合 GitHub Copilot 等扩展后，可以在熟悉的编辑器里使用 AI。
• Trae 更偏 AI 编程入口，界面里通常会突出 AI 对话、代码解释和文件修改。
• Qoder 也是带界面的 AI 编程工具，适合用“项目文件 + AI 对话”的方式推进任务。

这里不需要判断谁最强。对新手老师来说，更实际的标准是：能不能顺利打开项目目录，能不能看到 AI 修改了哪些文件，能不能方便地回到页面效果里验收。

如果你正在做这些事，IDE 型 Agent 往往更顺手：

• 看项目目录里有哪些文件。
• 打开 index.html、style.css、README.md。
• 让 AI 解释某一段代码是什么意思。
• 修改页面文字、按钮、颜色、布局。
• 对照浏览器效果继续微调。

比如你已经有了一个静态答题页面，想把标题从“在线答题”改成“校园科技节闯关答题”，或者想让按钮更醒目，这种任务放在 IDE 里做会比较直观。

老师不用先背命令。

先点开文件，看见页面和代码之间的关系，再让 AI 局部修改，心理压力会小很多。

但 IDE 型 Agent 也不是万能的。

当项目需要安装依赖、启动后端、连接数据库、连续查看终端报错时，只在编辑器里点来点去就不一定够用了。

这时就该认识命令行 CLI Agent。

CLI Agent：知道它是后台执行助手就够了

命令行 CLI Agent 仍然有价值，但在这篇里不用把它学深。

它的工作方式更像这样：你先打开项目目录，再在终端里启动 Agent，然后用自然语言告诉它要做什么。

OpenCode CLI、Codex CLI、Claude Code、Gemini CLI 等，都属于这种常见形态。

对新手老师来说，先记三点就够了：

• 它通常要站在项目目录里启动。
• 它适合让 AI 安装依赖、启动服务、运行测试、分析终端报错。
• 它的反馈主要在终端里，所以更需要先解释计划、再确认执行。

本章后面会用 form-example 做表单统计热身项目。到了那一步，如果需要让 Agent 执行安装、启动、排错、后端改造等任务，CLI Agent 或 IDE 里的终端能力就会派上用场。

但这不代表老师要自己把所有命令背下来。

更稳的方式是：让 Agent 先解释它准备做什么，老师确认后再继续。

你可以把 CLI Agent 理解成“后台执行助手”，而不是新手老师的第一块工作台。

不要一上来就让它重写项目

第一次使用 Coding Agent 时，最危险的说法是：

帮我把这个项目做完整。

这句话太大了。

Agent 可能会一次改很多文件，老师看不懂，也不知道哪里该验收。

更稳的方式，是先让它只读不改。

你可以这样发第一句话：

我是一名信息科技老师，正在学习用 Coding Agent 维护一个校园 Web 小项目。

当前项目目录是 D:\projects\form-example。

请先阅读 README.md、package.json 和项目主要目录结构。
先不要修改任何文件，也不要执行危险操作。

请用中文告诉我：

1. 这个项目大概做什么。
2. 它应该用哪些命令安装依赖和启动。
3. 如果要加入后端数据回收和统计看板，你建议分成哪几步。
4. 每一步改动前需要我确认什么。

这段提示词的重点不是格式漂亮。

重点是四个字：

先读后改。

Agent 先读项目，先解释结构，先提出计划。老师确认以后，再让它执行下一步。

第一次协作可以按这条线走

对新手来说，第一次和 Coding Agent 协作，可以按这条线：

用 VS Code、Trae、Qoder 这类 IDE 打开项目目录
-> 让 IDE Agent 先读项目
-> 让 Agent 解释项目结构
-> 让 Agent 提出小步计划
-> 老师确认其中一步
-> Agent 修改并说明改动
-> 老师查看页面或文件效果
-> 需要跑命令或改后端时，再让 Agent 使用终端或 CLI
-> Agent 运行验证
-> 老师验收结果
-> Git 存档

最后一步 Git 存档，后面 3.7 会单独讲。

这里先记住：不要让 AI 一口气改完整个系统。

一个更适合老师掌控的节奏是：

一次只改一个小目标。

比如：

• 先让页面能提交。
• 再让后端能接收。
• 再让数据能保存。
• 再让统计看板能读取。

每完成一步，都要让 Agent 解释改了哪些文件、怎样验证、还有什么风险。

老师负责判断，Agent 负责执行

Vibe Coding 不是老师完全放手。

也不是老师亲手写完所有代码。

更合适的分工是：

老师负责判断：

• 这个功能是不是校园真实需要。
• 字段有没有包含敏感信息。
• 学生和班级数据是否应该脱敏。
• 页面流程是否符合使用场景。
• 这一步是否已经可以验收。

Agent 负责执行：

• 读取文件。
• 修改代码。
• 运行命令。
• 分析报错。
• 解释改动。
• 给出下一步建议。

这样分工以后，老师不需要把自己伪装成职业程序员。

你要做的是当好项目的主人。

三条安全边界要先说清楚

第一，不要把学生隐私直接发给公开 AI。

真实姓名、学号、成绩、身份证号、联系方式，都应该谨慎处理。练习时可以用测试数据，例如“学生 A”“三年级 1 班”。

第二，不要把密钥和账号写进公开仓库。

以后你会看到 .env 文件、数据库地址、登录密钥这些内容。它们不应该随便上传，也不应该直接贴到公开聊天里。

第三，不要让 Agent 在没有解释的情况下批量删除、重构或覆盖大量文件。

遇到这类操作，要先问：

请先说明你准备修改哪些文件，为什么要改，是否会删除已有内容。
在我确认之前，不要执行。

这不是不信任 AI。

这是给项目留出可控边界。

选对入口，再进入实战

到这里，你已经知道：

• 聊天型 AI 适合讨论和生成草稿。
• 新手老师建议优先使用带界面的 IDE Agent，例如 VS Code、Trae、Qoder 这类入口。
• CLI Agent 不必一开始学深，知道它适合跑命令、查报错、做后端和项目级改造即可。
• 第一次使用 Agent，不要立即修改，要先阅读、先解释、先给计划。

下一篇，我们先不急着让 Agent 大改项目。

我们先用 DeepSeek 生成一个能看的静态 HTML 答题页面。

这个页面不是终点，而是一个需求草图。

等页面、字段、题目和交互流程确认清楚以后，再把它交给 Coding Agent，让它进入项目目录，补上后端、数据库和统计看板。

封面