防止项目跑偏
越是零基础，越需要先讲清楚产品。PRD 能让 AI 少猜测，也让后续修改有判断依据。
Learning Loop
不是让 AI 写完，而是你要会判断。
你的学习闭环是：说清目标、写出提示词、生成作品、运行检查、记录问题、小步修改、展示复盘。AI 负责加速生成，你负责定义问题和验收结果。
Part 01 · PRD
先学写 PRD，再开始写提示词。
PRD 是把“我想做一个网站”变成“给谁用、解决什么、第一版做什么、怎样算完成”的说明书。没有 PRD，AI 很容易做出漂亮但无用的页面。
一页最小 PRD
项目名称、目标用户、使用场景、用户痛点、核心动作、页面范围、数据字段、验收标准和暂不实现。
转成开发提示词
PRD 负责说明产品，提示词负责说明这一次让 AI 具体实现什么。两者不要混在一起。
| PRD 部分 | 要回答的问题 | 填写提示 |
|---|---|---|
| 一句话定位 | 这个网站帮谁完成什么？ | 不要写口号，要写用途。 |
| 目标用户 | 谁会真正打开它？ | 越具体越好，不要写“所有人”。 |
| 核心动作 | 用户最重要的一步是什么？ | 搜索、提交、报名、查看、生成。 |
| 验收标准 | 怎样证明完成？ | 写成可点击、可观察、可判断的标准。 |
实操：25 分钟写出第一版 PRD
5 分钟写一句话定位，必须包含“谁”和“做什么”。例如：帮助新生快速发现近期校园活动并报名。
8 分钟写用户场景。要求出现具体时间、地点和行为，例如“晚上在宿舍用手机找本周活动”。
7 分钟写 MVP 页面和功能。最多 4 个页面或模块，最多 1 个核心表单。
5 分钟写验收标准。每条必须能被点击、观察或演示，不能写“页面要好看”。
你的自检标准
- 目标用户是否具体到一类人，而不是“所有人”。
- 核心动作是否只有一个主线，例如“报名活动”，而不是同时报名、聊天、支付、发帖。
- 页面范围是否能在当前学习阶段做完。
- 验收标准是否能现场演示，例如“点击报名按钮能打开表单”。
最小 PRD 完整填写模板
# 项目名称
写一个 4 到 10 个字的名称。
# 一句话定位
这个网站帮助【目标用户】在【使用场景】完成【核心动作】。
# 目标用户
主要用户：
次要用户：
用户已有能力：
用户最怕什么：
# 使用场景
用户在什么时间、什么地点、用什么设备打开网站？
用户打开网站前正在遇到什么问题？
# 用户痛点
痛点 1：
痛点 2：
痛点 3：
# 核心动作
第一版只保留一个主动作：
用户完成动作后的反馈：
# 页面范围
首页：
列表区：
详情区：
表单区：
成功/失败提示：
# 数据字段
卡片字段：
表单字段：
状态字段：
# 验收标准
1.
2.
3.
4.
5.
# 暂不实现
第一版明确不做：
PRD Example
示例：校园活动报名网站。
这个案例适合练习，因为用户明确、场景真实、第一版功能可控，不会一上来变成大型平台。
PRD 摘要
- 项目名称：校园活动助手
- 目标用户：刚入学的新生
- 核心动作：浏览活动卡片，选择活动并提交报名
- 页面范围：首页、活动列表、详情弹窗、报名表单、成功提示
- 暂不实现：登录、支付、短信通知、复杂后台
验收标准
- 首页 10 秒内能看懂网站用途
- 至少展示 4 个活动卡片
- 点击活动能查看详情
- 点击报名能打开表单
- 必填为空不能提交
- 提交后有成功反馈
把这个 PRD 继续写完整
| 模块 | 具体内容 | 你要输出 |
|---|---|---|
| 活动卡片 | 活动名称、日期、地点、标签、80 字以内简介、报名按钮 | 至少 4 条示例活动数据 |
| 活动详情 | 适合谁参加、活动流程、注意事项、剩余名额 | 点击卡片后能看到详情 |
| 报名表单 | 姓名、班级、联系方式、选择活动、报名理由 | 空字段提示，成功后展示提交结果 |
| 成功反馈 | “报名已提交，请等待社团联系” | 用户知道下一步会发生什么 |
常见错误示范
错误写法：做一个校园平台，可以发布活动、报名、聊天、支付、签到、积分、抽奖、后台管理。
修改方式：第一版只做“浏览活动并报名”。签到、积分、后台统计全部放到下一版。
Prompt Structure
好提示词不是一句命令，而是一份任务说明。
你要把背景、用户、页面、功能、数据、风格、边界和验收标准都写进去。这样 AI 才知道做什么，也知道什么不要做。
我要做一个校园活动报名网站。
目标用户：刚入学的新生，他们想快速了解近期活动并报名。
首页需要包含：活动名称、活动亮点、时间地点、活动卡片列表、报名按钮。
需要一个报名表单：姓名、班级、联系方式、想报名的活动、报名理由。
视觉风格：清爽、校园感、信息清楚，不要花哨动画。
暂时不要做：登录、支付、复杂后台、真实短信通知。
验收标准：
1. 打开页面后 10 秒内知道这是活动报名网站；
2. 至少能看到 4 个活动卡片；
3. 点击报名按钮能打开表单；
4. 空字段不能提交；
5. 提交成功后有明确反馈。
请先给出页面结构，再生成第一版。
提示词不是一次写完，要迭代三轮
| 轮次 | 目标 | 提示词重点 | 验收方式 |
|---|---|---|---|
| 第 1 轮 | 生成页面骨架 | 说明用户、页面模块、视觉风格和不做什么 | 打开页面，看是否能理解用途 |
| 第 2 轮 | 补交互 | 要求点击卡片看详情、点击报名打开表单 | 逐个按钮点击，不允许假按钮 |
| 第 3 轮 | 补验收细节 | 要求空字段提示、成功提示、移动端可读 | 用手机宽度测试一次完整流程 |
可直接复制的修正提示词
当前页面已经能显示活动卡片，但用户点击“报名”后没有明确反馈。
请只修改报名流程，不要重写整个页面。
要求：
1. 点击报名按钮打开表单弹窗；
2. 表单包含姓名、班级、联系方式、报名理由；
3. 必填为空时显示错误提示；
4. 提交成功后显示“报名已提交，请等待联系”；
5. 保持现有视觉风格不变。
Part 03 · Build
第一版网站只追求完成一个核心动作。
不要一开始就做登录、支付、复杂后台和过多动画。先让用户完成最关键的那一步，再逐步迭代。
静态首页
标题、说明、主要按钮、内容卡片。先让用户知道这是什么。
补充交互
点击按钮、打开弹窗、搜索或筛选，让页面能被使用。
加入表单
设计字段、必填校验、成功反馈和失败反馈。
运行验收
像真实用户一样点击流程，记录问题，再做最小修改。
第一版网站的具体制作顺序
- 先写 4 条示例数据，不要等数据库。例如 4 个活动，每个活动有名称、时间、地点、标签和简介。
- 生成首页布局：顶部标题、说明文字、主按钮、活动卡片区。
- 给卡片加详情弹窗：点击任何活动都能看到更多信息。
- 给报名按钮加表单：表单字段必须来自 PRD。
- 补状态：空字段、提交中、提交成功、关闭弹窗。
- 做移动端检查：宽度 390px 时标题、卡片、按钮不能挤出屏幕。
你的交付物
截图首页、详情弹窗、报名表单、成功提示四张截图。
说明一句话说明目标用户和核心动作。
问题清单至少记录 3 个发现并修复的问题。
复盘写出下一版最想改的一个功能。
Course Projects
适合练手的项目题目。
题目要小、清楚、可展示。重点不是做大系统，而是完整走过 PRD、提示词、生成、验收和复盘。
| 题目 | 适合练习什么 | 第一版范围 |
|---|---|---|
| 个人作品集 | 页面结构、作品卡片、联系表单 | 首页、作品列表、联系区 |
| 社团招新页 | 活动介绍、报名表单、视觉表达 | 介绍、时间地点、报名表单 |
| 校园资料库 | 搜索、分类、详情 | 资料卡片、搜索框、详情弹窗 |
| AI 小工具展示页 | 输入输出、示例、说明 | 输入框、结果区、示例卡片 |
| 班级作品展 | 内容墙、详情、投票入口 | 作品卡片、详情弹窗、点赞按钮 |
每个题目的最低完成要求
- 个人作品集：至少 3 个作品卡片，每个作品有截图占位、项目说明、所用技能、查看按钮。
- 社团招新页：至少 4 个社团活动，必须有报名表单和提交成功提示。
- 校园资料库：至少 8 条资料，必须支持关键词搜索或分类筛选。
- AI 小工具展示页：必须有输入框、生成按钮、结果区和 3 个示例输入。
- 班级作品展：至少 6 个作品卡片，点击能看详情，可以有点赞或收藏按钮。
Part 03.5 · Setup
开始前准备要细到不会迷路。
零基础学习最怕一开始就卡在账号、文件夹、路径、浏览器和编辑器上。先把环境和文件规范准备好，后面会顺很多。
账号准备
你需要能登录 AI 工具、GitHub，以及你准备用来部署的网站平台。开始前先确认账号能正常使用。
文件夹准备
每个项目一个文件夹，文件名尽量用英文，不要用“新建文件夹”“最终版2”。
浏览器准备
你要会刷新页面、打开开发者工具、复制报错、截图反馈，而不是只说“打不开”。
推荐项目文件夹结构
my-vibe-project/
├── index.html # 页面入口
├── styles.css # 页面样式
├── script.js # 交互逻辑
├── assets/ # 图片和素材
│ ├── hero.png
│ └── card-1.png
├── PRD.md # 产品需求文档
├── prompts.md # 关键提示词记录
├── bugs.md # 问题和修复记录
└── README.md # GitHub 项目说明
第一节课前检查清单
| 检查项 | 你要做到 | 怎么确认 |
|---|---|---|
| AI 工具 | 能正常提问，能复制回答 | 发一条测试提示词 |
| GitHub | 能登录账号，能创建仓库 | 创建 test-repo 后删除 |
| 文件夹 | 创建自己的项目文件夹 | 检查文件夹命名是否清楚 |
| 浏览器 | 能打开本地 HTML 文件 | 打开一个测试页面 |
| 截图 | 会截图并标注问题位置 | 截一次页面局部 |
素材和版权规则
- 你的项目可以使用 AI 生成图、无版权图片或自己拍摄的图片。
- 不要随便拿同学照片、学校内部资料、商业 Logo 放到公开网页。
- 图片文件要放到
assets文件夹，不要散落在桌面。 - 图片文件名要可读，例如
club-photo.png，不要叫微信图片_20260914.png。
Part 04 · GitHub
用 GitHub 保存、提交和展示你的作品。
GitHub 的重点不是一开始就成为专业工程师，而是养成版本记录、作业提交、作品展示和安全意识。
一个项目一个仓库
仓库是项目的云端文件夹。你展示作品时，至少要有仓库链接和 README。
完成小功能就提交
不要所有提交都叫 update。提交说明要写清做了什么，例如“完成首页活动卡片布局”。
让别人看懂作品
README 要写项目用途、目标用户、主要功能、页面说明、作者和版本记录。
# 项目名称
一句话介绍这个网站。
## 目标用户
这个网站给谁使用，解决什么问题。
## 主要功能
- 功能 1
- 功能 2
- 功能 3
## 作者
Author: QiuLingYan
Co-Author: GPT-6-Astra
GitHub 实操步骤
- 创建仓库：仓库名用英文，例如 campus-activity-helper。
- 上传文件：至少包含 HTML、CSS、图片资源和 README。
- 第一次提交：提交说明写“初始化项目并添加首页”。
- 第二次提交：完成表单后提交，说明写“添加活动报名表单和成功提示”。
- 第三次提交：修复问题后提交，说明写“修复移动端卡片间距”。
- 交作业：提交 GitHub 仓库链接、预览地址、PRD、提示词记录和问题清单。
提交说明对照
| 不合格 | 合格 | 优秀 |
|---|---|---|
| update | 更新首页 | 完成首页活动卡片布局和主按钮 |
| fix | 修复表单 | 修复报名表单空字段也能提交的问题 |
| final | 补充说明 | 补充 README、PRD 摘要和项目复盘 |
Part 05 · Debug
排错要有流程，不能只说“坏了”。
你要学会把问题描述成 AI 能理解、别人能复现、自己能验证的任务。排错能力是 Vibe Coding 能不能真正学会的分水岭。
发生了什么
例如：点击报名按钮没有弹窗、搜索框输入后列表不变化、手机端按钮超出屏幕。
怎么复现
必须写清从打开页面到出错的每一步。别人和 AI 应该能照着复现。
截图和报错
复制控制台报错、截图标注位置、说明浏览器和屏幕宽度。
问题记录模板
# 问题编号
Bug 001
# 问题现象
我点击“报名”按钮后，没有打开表单弹窗。
# 复现步骤
1. 打开首页
2. 找到“摄影社招新”活动卡片
3. 点击“报名”
4. 页面没有任何变化
# 期望结果
点击后应该打开报名表单弹窗。
# 实际结果
没有弹窗，也没有提示。
# 错误信息
控制台报错：
（粘贴完整报错）
# 我希望 AI 怎么改
请只修复报名按钮点击事件，不要重写整个页面。
常见问题排查表
| 问题 | 优先检查 | 给 AI 的描述方式 |
|---|---|---|
| 按钮没反应 | 按钮是否绑定点击事件，脚本是否加载 | 点击哪个按钮，期望出现什么，实际没有什么 |
| 样式没生效 | CSS 文件路径、类名是否写错 | 哪个元素样式不对，期望颜色/间距/布局是什么 |
| 图片不显示 | 图片路径、文件名大小写、是否在 assets 中 | 图片文件名和页面引用路径分别是什么 |
| 表单可空提交 | 是否有 required 或 JS 校验 | 哪些字段为空时仍能提交 |
| 手机端错位 | 媒体查询、宽度、网格列数 | 在多少宽度下哪里溢出或重叠 |
| Git 提交失败 | 是否 git init、是否 add、是否有提交说明 | 完整粘贴终端错误，不要截一半 |
最小修复提示词
请根据下面的问题做最小修复。
不要重写整个项目，不要改变无关样式。
问题现象：
复现步骤：
期望结果：
实际结果：
错误信息：
请你：
1. 先判断最可能原因；
2. 指出需要改哪些文件；
3. 只修改相关代码；
4. 修完后给我一份验证步骤。
Part 04.5 · Git
先会用 Git，再把项目推到 GitHub。
Git 是本地版本管理工具，GitHub 是云端代码仓库。你要先理解“保存一次版本”这件事，再学习上传和协作。
工作区
你正在修改的项目文件。改了 HTML、CSS、图片或 README，都先发生在工作区。
暂存区
准备放进下一次提交的文件。可以只选择这次真正相关的修改，不必全部塞进去。
提交记录
一次带说明的版本快照。提交不是“保存文件”，而是“保存一个可解释的阶段”。
你必须掌握的 Git 命令
| 命令 | 作用 | 什么时候用 |
|---|---|---|
git --version | 检查 Git 是否安装成功 | 第一次上课或换电脑时 |
git init | 把当前文件夹变成 Git 项目 | 创建新项目后 |
git status | 查看哪些文件被修改 | 每次提交前 |
git add . | 把当前修改放进暂存区 | 准备提交时 |
git commit -m "说明" | 保存一次版本记录 | 完成一个小功能后 |
git log --oneline | 查看提交历史 | 复盘项目过程时 |
git diff | 查看这次具体改了什么 | 提交前检查修改范围 |
git branch | 查看分支 | 做大改动前确认位置 |
git checkout -b feature-form | 创建并切换到新分支 | 尝试新功能时 |
git push | 把本地提交推到 GitHub | 需要把最新作品同步到 GitHub 时 |
从 0 到第一次提交
# 1. 进入项目文件夹
cd 你的项目文件夹
# 2. 初始化 Git
git init
# 3. 查看当前状态
git status
# 4. 把文件加入暂存区
git add .
# 5. 提交第一个版本
git commit -m "初始化项目并添加首页"
# 6. 查看提交历史
git log --oneline
练习：三次有意义提交
- 第一次提交：完成首页标题、介绍文案和主按钮。提交说明写：完成首页基础结构。
- 第二次提交：加入内容卡片或活动列表。提交说明写：添加活动卡片列表。
- 第三次提交：加入表单和成功提示。提交说明写：添加报名表单和提交反馈。
常见 Git 错误怎么处理
| 现象 | 可能原因 | 处理方式 |
|---|---|---|
| 提示不是 Git 仓库 | 没有运行 git init，或不在项目目录 | 先确认当前目录，再运行 git init |
| 提交时说没有内容 | 没有 git add，或文件没有改动 | 运行 git status 查看状态 |
| 提交说明写错 | 刚提交完发现说明不清楚 | 可用 git commit --amend -m "新说明" 修改最近一次提交说明 |
| 不小心改乱了一个文件 | 工作区文件被误改 | 先确认真的不要保留，再用 git checkout -- 文件名 |
| 推送失败 | 远程仓库没绑定或权限问题 | 检查 GitHub 仓库地址和账号登录状态 |
Git 推送到 GitHub 的完整流程
# 1. 绑定远程仓库，只需要做一次
git remote add origin https://github.com/你的用户名/仓库名.git
# 2. 把主分支命名为 main
git branch -M main
# 3. 推送到 GitHub
git push -u origin main
# 以后再次提交后，只需要：
git push
使用提醒
- 不要一开始背很多 Git 概念。先完成三次提交，再理解工作区、暂存区和提交历史。
- 提交说明必须具体，不能只写 update、fix、final。
- 你整理项目时，可以展示
git log --oneline，证明不是只交最后结果。 - 不要随便使用强制覆盖或大规模回退命令。先学会看状态，再学会修问题。
Part 06 · Deploy
部署不是炫技，是让别人能打开你的作品。
完成网站后，你至少要知道“本地能看”和“别人能访问”不是一回事。部署就是把作品发布到公网。
GitHub Pages
适合只有 HTML、CSS、JavaScript 的项目。最推荐从这里开始。
Vercel / Netlify
适合 React、Vue、Next.js 等前端项目。进阶后再学。
后端平台
如果有数据库、登录、真实接口，需要额外后端服务。第一阶段可以暂缓。
GitHub Pages 发布静态网页步骤
- 确认仓库里有
index.html，并且图片路径是相对路径。 - 进入 GitHub 仓库页面，点击 Settings。
- 找到 Pages。
- Source 选择 Deploy from a branch。
- Branch 选择 main，文件夹选择 /root。
- 点击保存，等待 1 到 3 分钟。
- 复制 GitHub Pages 给出的链接，打开检查页面是否正常。
部署前自检
| 自检项 | 通过标准 | 常见问题 |
|---|---|---|
| 首页入口 | 根目录有 index.html | 文件叫 home.html，Pages 找不到首页 |
| 图片路径 | 使用 assets/xxx.png | 引用了自己电脑的绝对路径 |
| 文件大小写 | 文件名和代码引用完全一致 | 本地能显示，线上因为大小写不一致失败 |
| README | 说明项目用途和访问地址 | 别人打开仓库不知道项目是什么 |
| 隐私 | 没有手机号、密码、密钥、私人照片 | 把真实个人信息传到公开仓库 |
部署失败时怎么问 AI
我的 GitHub Pages 部署后页面显示不正常。
仓库链接：
Pages 链接：
问题现象：
本地是否正常：
浏览器控制台报错：
项目文件结构：
请帮我判断是 index.html、资源路径、文件名大小写还是 GitHub Pages 设置问题。
请给出最小修复步骤。
Assessment
检查成果，不只看最后页面。
学习 Vibe Coding 要同时保留过程和结果。最终网页只是成果之一，PRD、提示词、问题记录、GitHub 和复盘同样重要。
| 交付维度 | 占比 | 完成标准 |
|---|---|---|
| 产品清晰 | 20 | 能说清用户、场景和核心动作。 |
| PRD 和提示词质量 | 20 | 需求完整，边界清楚，有验收标准。 |
| 功能完成 | 25 | 网站能运行，核心交互可用。 |
| 检查迭代 | 20 | 能发现问题并做最小修正。 |
| GitHub 与复盘 | 15 | 有仓库、README、版本记录，能讲清过程。 |
你可以对照的交付细则
| 等级 | 判断标准 | 下一步建议 |
|---|---|---|
| 优秀 | PRD 清楚，提示词有迭代，网站可完整演示，有 GitHub 和 README | 你已经能把想法推进成作品，下一步可以尝试真实部署。 |
| 良好 | 网站能完成核心动作，但复盘和版本记录还不够完整 | 功能已经成立，补充过程记录后会更像正式项目。 |
| 合格 | 页面能打开，但交互、验收或说明缺失 | 先不要加新功能，把核心流程跑通。 |
| 需改进 | 无法运行，或你无法解释项目目标 | 回到 PRD，先重写用户和核心动作。 |
最终交付包 一项都不能少
| 交付物 | 文件名建议 | 最低要求 |
|---|---|---|
| PRD | PRD.md | 包含用户、场景、核心动作、页面范围、验收标准 |
| 提示词记录 | prompts.md | 至少 3 轮提示词：生成、修正、验收 |
| 问题记录 | bugs.md | 至少 3 个问题，写明现象、原因、修复方式 |
| 项目代码 | 项目文件夹 | 页面能打开，核心交互能演示 |
| README | README.md | 说明项目用途、功能、作者、版本记录、预览地址 |
| GitHub 仓库 | 仓库链接 | 至少 3 次有意义提交 |
| 演示视频或现场展示 | 1 到 3 分钟 | 讲清用户、核心动作、完成效果和下一步 |
最终展示讲稿模板
大家好，我的项目是【项目名称】。
它的目标用户是【目标用户】。
用户遇到的问题是【痛点】。
我的网站第一版主要帮助用户完成【核心动作】。
我写的 PRD 里，第一版只做了【页面范围】。
我一共用了三轮关键提示词：
第一轮用于生成页面骨架；
第二轮用于补交互；
第三轮用于修复问题和验收。
演示流程：
1. 打开首页；
2. 查看内容；
3. 点击详情；
4. 提交表单；
5. 查看成功反馈。
我遇到的一个问题是【问题】。
我通过【修复方式】解决了它。
如果做下一版，我会优先改【下一步计划】。
最终目标：把想法变成可运行作品。
学 Vibe Coding，不是为了只会让 AI 写代码，而是为了能写 PRD、能设计提示词、能验收结果、能用 GitHub 管理版本、能展示和复盘自己的作品。