实战教程
第一课：把想法变成可打开的页面
从一句模糊愿望到一份需求说明，再到你能双击打开的第一张网页——全程本地完成，不需要部署。
本课改编自一套真实教学指南的第一课（2026-09-08 核对）。学完这课，你会拿到两样东西：一份能交给 AI 执行的需求说明，和一张你能自己打开、自己修改的网页。全程只在自己电脑上完成，不涉及花钱和上线。
目标
学完这课，你要能做到这三件事（这就是本课的验收标准）：
- 能找到并打开自己的作品；
- 能指着页面说出它的三项主要内容；
- 能独立完成一处小修改，并说出你改了哪里、看到了什么变化。
前置条件
开始前花 20 分钟确认这四件事（来自课前准备清单）：
- 一台 Mac，知道怎么打开“终端”（Command + 空格，输入“终端”）
- 一个能用的 AI 编程工具（本课默认终端版 Claude Code；安装与登录见官方快速开始，由你自己完成账号操作）
- 一个固定的项目文件夹，比如
~/Documents/pet-points——你知道作品存在哪 - 想好一个模拟班级名称、五个学生昵称、三条加分规则（用于生成页面，不用真实学生信息）
卡在哪一步？先看排错速查，再继续往下。
操作步骤
第 1 步：把模糊愿望说成需求（约 15 分钟）
“我想要一个好看的网站”这句话 AI 没法执行。先用一张纸或一个文本文件回答三个问题：
- 谁用：这个页面给谁看？（示例：老师，上课投屏用）
- 做什么：打开页面后要能完成什么操作？（示例：看到五名学生的昵称和积分）
- 怎么算做好了：（示例：投屏时能看清昵称和积分数字）
然后套用这个需求骨架，把空填上：
做一个老师操作的页面。内容是一个模拟班级，共五名学生，每人显示昵称、积分和宠物。页面要投屏时看得清楚。先只做展示，说明哪些按钮尚未实现。
写好后读一遍：每个词都是具体的吗？“好看一点”不行，“投屏能看清昵称和积分”行。
第 2 步：交给 AI 生成页面（约 15 分钟）
- 打开终端，进入你的项目文件夹：
cd ~/Documents/pet-points - 启动你的 AI 编程工具，把第 1 步写好的需求说明发给它。
- AI 生成文件后，问它一句：“文件保存在哪？叫什么名字？”——记下这个路径，这是你的作品。
第一次生成不用追求完美。这课只做展示页面，加分功能是后面课程的事。
第 3 步：打开并检查页面（约 10 分钟）
- 在访达（Finder）里找到那个 HTML 文件，双击它——它会在浏览器里打开。这就是“预览”。
- 对照检查：
- 能看到五名学生的昵称吗？
- 每人有积分数字和宠物吗？
- 窗口放大缩小后，内容还看得清吗？
第 4 步：独立完成一次修改（约 15 分钟）
这是本课最重要的练习——修改由你发起，不是 AI 发起：
- 选一处明确的小改动，例如：把班级名称换成你自己的，或改一条学生的昵称。
- 先在心里预测：改完后页面上哪里会变？
- 把修改要求发给 AI（说清“改哪里、改成什么”），等它完成。
- 回到浏览器刷新页面，对比结果和你的预测。
第 5 步：保存并复述（约 5 分钟）
- 关闭页面，重新双击打开——确认作品还在。
- 用三句话复述：这个页面给谁用、能看到什么、你今天改了什么。
- 把你的需求说明保存在项目文件夹里（比如
需求说明.md），下节课要用。
成功检查
全部打勾才算通过；没通过不算失败，对照检查表就知道差在哪：
- 能在访达里找到作品文件，双击能在浏览器打开
- 能指着页面说出三项主要内容（如：五名学生、每人有积分和宠物、投屏能看清）
- 完成了一处独立修改，能说出“改了什么、页面哪里变了”
- 关闭再打开，作品还在
- 需求说明已保存在项目文件夹
常见卡点
- 只会说“更高级一点”：找一张参考图，指着其中一个区域描述差异（卡片排列？颜色？字号？）。
- 改了但页面没变：先确认文件保存了，再刷新浏览器；还不动就看排错速查。
- AI 生成的文件找不到：直接问 AI “文件完整路径是什么”，在访达里按路径前往（Command + Shift + G）。
下一步
- 完成排错速查，了解出问题时的标准动作。
- 想系统提高需求写作？读提示词手册；想继续动手，去项目库挑一个项目。
- 教程里的页面只是展示。在上线准备里，你会把这个页面发给别人看；积分真正能加减，会在后续课程中实现。
- 想先看看别人做完长什么样？这个案例有参考完成版和真实案例说明。