第1课：开发工具箱

本课目标

第一册带你做出了一个能打开、能输入、能输出的小工具。

第二册开始，你要看懂：这个小工具不是一个孤立页面，而是一个项目文件夹。

本课只解决一个问题：

当我打开一个 AI 小工具项目时，我知道自己在看什么。

你不需要学编辑器快捷键，也不需要读懂所有代码。

本课结束时，你要完成一张“我的项目地图”。

开始之前

第一册结束时，你可能已经在浏览器里看到了自己的小工具：

标题
输入框
按钮
结果区

你可能会觉得：

我做的是这个页面。

这句话只说对了一半。

页面只是项目运行以后，在浏览器里显示出来的结果。

真正的项目，通常是一个文件夹。这个文件夹里有页面文件、样式文件、逻辑文件、配置文件、依赖说明和运行方式。

第二册的第一步，就是带你认真看这个项目文件夹。

一个小故事

小林在第一册做了一个“小红书标题助手”。

它能做到：

输入产品和人群
点击生成按钮
看到 5 个标题

第二天，他想加一个新功能：

把每次生成过的标题保存下来，形成历史记录。

他打开 Codex，对 AI 说：

帮我加历史记录。

AI 很快改了一堆文件。

小林看着编辑器左边的文件列表，突然不知道发生了什么：

这个文件夹是什么？
哪个文件是页面？
哪个文件是按钮？
历史记录应该保存在哪里？
AI 到底改了什么？
我现在应该运行哪里？

这就是第二册要解决的问题。

不是让你自己写代码，而是让你看得懂项目的工作台。

今天要认识的 7 个东西

1. 项目文件夹

项目文件夹是一整个小工具所在的地方。

它不是单个页面，也不是一段聊天记录。

一句话记住：

项目文件夹 = 小工具的家

这个家里面可能有页面文件、样式文件、逻辑文件、图片资源、配置文件、依赖说明和运行说明。

以后让 Codex 做任何修改，它通常都是在这个项目文件夹里改文件。

2. 编辑器

编辑器是打开项目文件夹的工作台。

你可以在编辑器里：

• 看文件。
• 搜索内容。
• 打开终端。
• 和 AI 说话。
• 让 AI 修改项目。
• 查看 AI 改了哪些文件。

常见编辑器包括 Cursor、VS Code、Codex 工作区等。

一句话记住：

编辑器 = 打开和修改项目的工作台

3. 文件树

文件树通常在编辑器左边。

它像项目的目录。

你可能会看到：

src
app
pages
components
styles
public
package.json
README.md

不用害怕。

你现在不用看懂每个文件夹，只要知道文件树能帮你看到项目里有什么。

4. 当前文件

你点击文件树里的一个文件，中间打开的内容就是当前文件。

当前文件可能是页面代码、样式、配置、文档或项目说明。

第二册你不需要读懂所有代码，但要知道自己正在看哪个文件。

5. 搜索

搜索可以帮你在项目里找文字。

比如你想找按钮上的文字“生成标题”，可以搜索：

生成标题

如果找到了这个文字，说明那个文件很可能和页面显示有关。

6. 终端

终端是运行项目、查看运行信息和报错的地方。

第二册第 2 课会专门讲终端。

本课你只需要先知道：

终端 = 项目启动和报错经常出现的窗口

7. AI 聊天窗口

AI 聊天窗口是你和 Codex、Cursor 或其他 AI 编辑器沟通的地方。

但要记住：

AI 不是许愿池。

不要一上来就说：

帮我改好。

第二册第一条保护句是：

请先不要改代码。

先让 AI 解释项目结构，再让它计划，再决定是否修改。

一个比喻：开发工具箱

你可以把编辑器想成一张工作台。

工作台上的东西	项目里的东西
工具箱	编辑器
抽屉目录	文件树
正在看的图纸	当前文件
找东西的放大镜	搜索
开机和报警面板	终端
会帮你看图纸的助手	AI 聊天窗口
整个作品所在的盒子	项目文件夹

你不需要今天学会每个工具的高级用法。

你只要知道每个工具大概放在哪里，负责什么。

错误打开项目的 3 种方式

错误方式	问题
只打开浏览器页面	你只能使用工具，不能继续改项目
只把一段代码贴给 AI	AI 看不到整个项目结构
打开了错误的文件夹	AI 可能找不到真正的项目文件

判断是否打开了真正项目文件夹，可以先看里面有没有 package.json、页面文件、项目说明等内容。

课堂练习：给项目画地图

请打开你第一册做出的小工具项目。

先不要改任何代码。

你只做观察。

项目	我的填写
我的项目名称
我的项目文件夹位置
我用什么编辑器打开
我看到的 5 个文件或文件夹

再找一找有没有这些名字：

名字	我找到了吗	它可能负责什么
package.json		项目说明、运行命令、依赖
README.md		项目说明文档
src		代码文件夹
app 或 pages		页面入口
components		页面组件
styles 或 css		样式
public		图片等静态资源

如果找不到也没关系。

不同项目结构不一样。你现在只是观察。

给 AI 的一句话

把这段提示词复制给 Codex。

请你先不要改代码。
请帮我阅读这个项目，告诉我：
1. 这个项目主要有哪些文件和文件夹；
2. 每个重要文件大概负责什么；
3. 页面相关文件在哪里；
4. 样式相关文件在哪里；
5. 配置文件有哪些；
6. 我应该从哪里运行项目；
7. 如果我要加“历史记录”，你建议先看哪些文件。

请用完全不会代码的新手也能听懂的话解释。
最后请整理成一张“项目地图”。

AI 回答后，不要马上让它改代码。

如果 AI 开始直接改代码，你要打断它：

先暂停修改。
请先只解释项目结构，不要改代码。

自己动手：我的项目地图

项目	我的记录
项目名称
项目文件夹位置
我用什么编辑器打开
页面相关文件可能在哪里
样式相关文件可能在哪里
配置文件有哪些
package.json 在哪里
终端在哪里打开
AI 聊天窗口在哪里
如果我要加历史记录，AI 建议我先看哪些文件

本课最低标准

你能说出：

项目不是一个孤立网页，而是一个文件夹。
编辑器是打开项目文件夹的工作台。
让 AI 修改前，先让它解释项目结构。

并且你完成了一张“我的项目地图”。