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