4.2.4 阶段性成果检查
本步目标：确认第一轮完成，准备进入下一轮
第一轮完成检查清单
在进入下一轮之前，请确认以下内容：
必须项
- [ ] 页面能正常显示：在浏览器中打开，没有空白或报错
- [ ] 标题存在：能看到"我的待办清单"（或你自定义的标题）
- [ ] 输入框存在：有一个可以输入文字的输入框
- [ ] 添加按钮存在：有一个"添加"按钮
- [ ] 任务列表存在：能看到任务列表区域（即使是假数据）
- [ ] 操作按钮存在：每个任务有"完成"和"删除"按钮
加分项
- [ ] 整体样式你基本满意
- [ ] 鼠标悬停在按钮上有视觉反馈
- [ ] 在手机尺寸下也能正常显示
如何测试响应式效果
想知道页面在手机上看起来怎么样？不需要真的用手机，浏览器可以模拟：
- 在浏览器中打开你的页面
- 按
F12打开开发者工具 - 点击工具栏左上角的"设备切换"图标（长得像手机和平板）
- 选择一个手机型号（如 iPhone 12）或者直接拖动页面宽度
检查这些情况：
- [ ] 页面内容没有超出屏幕
- [ ] 文字大小在手机上也能看清
- [ ] 按钮在手机上也容易点击
- [ ] 输入框宽度适合手机屏幕
小技巧
如果手机上显示有问题，回到 4.2.3 节，使用"响应式适配类"的调整 Prompt。
预期效果参考
此时你的页面应该看起来类似这样：
[配图建议] 画面内容：完成第一轮后的待办清单页面截图，展示桌面和手机两种视图 Prompt: clean mockup of a simple todo list webpage, showing both desktop and mobile views, minimalist design, soft blue accent colors, friendly and approachable style, white background, high quality, 8k --ar 16:9
此时的"正常"状态
现在你的页面是这样的状态：
| 功能 | 当前状态 |
|---|---|
| 页面显示 | ✅ 正常 |
| 点击"添加"按钮 | ❌ 没反应（正常！） |
| 点击"完成"按钮 | ❌ 没反应（正常！） |
| 点击"删除"按钮 | ❌ 没反应（正常！） |
| 刷新页面后数据还在 | ❌ 数据会消失（正常！） |
这些都是正常的——我们目前只完成了"外观"，还没有添加"功能"。
🎉 第一轮完成！
恭喜你！你已经完成了待办清单的第一轮开发。
现在你拥有了：
- ✅ 一个可以在浏览器中打开的 HTML 页面
- ✅ 包含标题、输入框、按钮的完整界面
- ✅ 一个任务列表区域
- ✅ 基本美观的视觉设计
这是一个重要的里程碑——你已经从"什么都没有"变成了"能看到东西"。
回顾：你用到了什么
在这一轮中，你实践了：
| 来源 | 用到的内容 |
|---|---|
| 第二章 | 项目启动卡作为 Prompt 的素材 |
| 第三章 | S.C.A.F.F. 框架组织 Prompt |
| 第三章 | 迭代对话调整样式 |
这就是 Vibe Coding 的工作流程：想清楚 → 说明白 → 让 AI 做 → 调整优化。
下一步预告
页面有了，但还只是一个"空壳"——点击按钮没有反应，刷新页面数据就没了。
下一轮，我们要让它"活"起来：
- 点击"添加"按钮，能把新任务加到列表
- 点击"完成"按钮，任务显示为已完成状态
- 点击"删除"按钮，任务从列表中消失
准备好了吗？
→ 4.2.5 完整 Prompt 对话记录（可选阅读）