怎么看懂项目文件？

03-03 怎么看懂项目文件？

课程定位

这一课讲最小代码阅读能力。学员已经让项目跑起来了，接下来要知道每个文件大概负责什么。这里不要求学员读懂每一行代码，只要看懂项目地图。

看懂文件结构，学员会更敢提出修改，也更容易把报错交给 AI。

这一课的成果是一张「项目文件地图」。

本课目标

• 能让 AI 解释项目文件结构。
• 能找到入口文件。
• 能找到页面显示文字所在位置。
• 能找到主要按钮动作所在位置。
• 能完成项目文件地图。

录制建议

• 建议时长：20 到 30 分钟。
• 用刚跑起来的项目继续演示。
• 不逐行讲代码，只讲文件职责和主流程。
• 对静态网页重点讲 index.html、style.css、script.js。
• 收尾让学员用自己的话复述项目流程。

课前准备

• 已生成并能运行的第一版项目。
• AI 工作台工具。
• 项目文件地图。
• 浏览器运行结果。

讲稿正文

可以这样开场：

“项目能跑起来以后，我们要认识一下它的身体结构。你不用马上成为程序员，但要知道头在哪里，手在哪里，按钮连到哪里。”

以静态网页项目为例：

• index.html：页面骨架，标题、输入框、按钮、结果区通常在这里。
• style.css：页面衣服，颜色、间距、字体、布局通常在这里。
• script.js：页面动作，点击按钮、处理输入、生成结果通常在这里。
• README.md：项目说明，告诉未来的自己怎么运行、现在有什么功能。

让 AI 解释文件时，要让它按“人话”输出：

这个文件负责什么？
它和其他文件怎么配合？
我想改页面文字应该看哪里？
我想改按钮动作应该看哪里？

然后找三条线。

第一条线：入口线。

用户打开哪个文件或地址进入项目。

第二条线：显示线。

页面上的标题、说明、按钮文字在哪里。

第三条线：动作线。

用户点击按钮后，哪段逻辑处理输入并生成输出。

最后让学员用自己的话复述：

“用户打开页面，粘贴 CSV，点击转换，脚本读取输入，生成 Markdown，显示在结果区。”

最后收束：

“看懂项目文件，就像拿到一张地图。地图不需要让你认识每一块砖，但要让你知道从门口走到工作台该怎么走。”

屏幕演示流程

1. 打开项目文件夹。
2. 让 AI 列出文件清单。
3. 让 AI 用大白话解释每个文件职责。
4. 打开入口文件。
5. 找到页面显示文字。
6. 找到按钮相关代码位置。
7. 让 AI 画出用户操作流程。
8. 保存项目文件地图。

给 AI 的协作卡

请帮我看懂这个项目的文件结构。

请按下面方式解释：
1. 每个文件负责什么
2. 用户打开项目时先进入哪里
3. 页面文字主要在哪个文件
4. 按钮点击后的动作主要在哪个文件
5. 输入如何变成输出
6. 如果我要改文字、改样式、改逻辑，分别应该看哪里

请用普通人能听懂的话解释，不要逐行讲代码。

项目文件地图

• 入口文件：
• 页面结构文件：
• 样式文件：
• 逻辑文件：
• README：
• 用户操作流程：
• 改文字看哪里：
• 改样式看哪里：
• 改功能看哪里：

课堂练习

让学员为自己的第一版项目做文件地图。

要求：

• 至少解释 3 个文件。
• 找到入口文件。
• 说清输入到输出的主流程。

常见卡点

• 学员想读懂每一行：先读懂文件职责和主流程。
• AI 解释太专业：要求用生活比喻和项目动作解释。
• 找不到入口文件：看 README 和运行方式。
• 文件很多：先让 AI 标出第一版核心文件。

课后作业

完成主项目文件地图。

提交内容：

• 文件地图。
• AI 的文件解释。
• 自己复述的项目主流程。

课件页建议

• 第 1 页：先看地图，再看细节
• 第 2 页：HTML、CSS、JS 的分工
• 第 3 页：入口线、显示线、动作线
• 第 4 页：让 AI 用人话解释文件
• 第 5 页：项目文件地图