本节目标：回顾从零到静态页面的完整对话过程，作为你的参考模板
记录完整的对话过程有几个好处：
以下是小李完成第一轮静态页面的完整对话过程。
小李发送：
【Situation - 情境】
我是一个编程零基础的初学者，正在学习用 AI 做一个个人待办清单网页。
这是我的第一个 AI 编程项目。
目标用户是像我一样容易忘事的职场新人，需要一个简单的任务管理工具。
【Challenge - 挑战】
请帮我生成待办清单的静态页面，包含以下元素：
1. 页面标题："我的待办清单"
2. 输入区域：
- 一个输入框（用于输入新任务）
- 一个"添加"按钮
3. 任务列表区域：
- 先用 3 条假数据展示样式
- 每个任务显示任务内容
- 每个任务右侧有"完成"按钮和"删除"按钮
【Audience - 受众】
代码将由我这个初学者阅读和修改，请保持简单易懂，在关键位置添加中文注释。
【Format - 格式】
请生成一个完整的 HTML 文件，包含内嵌的 CSS 样式。
【Foundations - 基础约束】
- 只做静态页面，暂时不需要 JavaScript 功能
- 不使用任何外部框架
- 现代简约风格，配色清新
- 响应式设计，手机上也能正常显示AI 回复：[生成 HTML + CSS 代码，页面包含基本结构]
使用的技巧：
小李的检查结果：
小李发送：
整体结构很好！请做以下调整：
1. 配色问题：
- 背景改成更浅的灰色（#f8fafc）
- 主色调用明亮的蓝色（#3b82f6）
2. 按钮样式：
- "添加"按钮改成圆角（8px），背景用蓝色，文字白色
- 鼠标悬停时颜色加深
- "完成"按钮用绿色（#10b981），"删除"按钮用红色（#ef4444）
其他部分保持不变。AI 回复：[更新后的代码，配色和按钮样式已调整]
使用的技巧：
小李的检查结果：
小李发送：
颜色很好！请调整一下间距：
1. 任务列表的每一项之间增加 12px 的间距
2. 每个任务加一条浅灰色的底边框（颜色用 #e5e7eb）
3. 任务右侧的"完成"和"删除"按钮之间留 8px 间距
配色和其他样式保持不变。AI 回复：[最终版本代码，间距已调整]
使用的技巧：
小李的检查结果：
小李发送：
看起来很不错了！请帮我确认一下：
1. 页面在手机宽度（375px）下显示是否正常？
2. 如果有问题，请修复。AI 回复：[确认响应式正常，或者提供修复后的代码]
使用的技巧：
| 轮次 | 主要技巧 | 来自章节 |
|---|---|---|
| 第 1 轮 | S.C.A.F.F. 框架 | 3.2.2 |
| 第 2 轮 | 具体描述 + 保留好的部分 | 3.5.3 |
| 第 3 轮 | 渐进式调整 | 3.5.2 |
| 第 4 轮 | 主动验证 | 3.5.3 |
回顾这段对话，有几个地方可以做得更好：
原版：
现代简约风格，配色清新改进版：
参考苹果备忘录的风格，纯白背景，圆角卡片，主色调用蓝色（#3b82f6）教训：第一轮就给出具体的风格参考和颜色，可以减少后续调整轮数。
如果一开始就把配色和间距问题一起说，可以省一轮对话：
请做以下调整：
配色：
- 背景用 #f8fafc
- 主色调用 #3b82f6
按钮：
- 圆角 8px，悬停时颜色加深
- "完成"用绿色，"删除"用红色
间距：
- 任务之间 12px 间距
- 按钮之间 8px 间距教训：如果问题明确，可以一次提多个调整，节省对话轮数。
响应式测试可以在第 1 轮生成后就做，不用等到最后。
教训：核心功能和响应式要尽早验证，发现问题早修复。
你可以用这个模板记录自己的对话过程：
## 项目：[项目名称]
## 日期：[日期]
### 第 1 轮
**我发送**：
[你的 Prompt]
**AI 回复**：
[简要描述 AI 做了什么]
**检查结果**：
- ✅ [好的地方]
- ⚠️ [需要改进的地方]
### 第 2 轮
...记录对话不是必须的，但如果你想回顾学习过程，或者以后遇到类似项目想参考，这会很有帮助。
通过这个完整的对话记录，你可以看到：
现在，你可以进入第二轮，让页面"活"起来了。