3.5.2 迭代对话的基本模式
经过本节学习，你将掌握
- 三阶段迭代模型：看方向 → 改问题 → 磨细节
- 每一轮对话的关键动作和检查点
- 一个完整的迭代对话示例（小李的待办清单）
- 可直接复制使用的迭代对话模板
三阶段迭代模型
迭代对话不是漫无目的地来回修改。高效的迭代遵循一个清晰的模式：
第一轮：看方向
↓
方向对吗？整体思路对吗？
↓
第二轮：改问题
↓
功能完整吗？有没有明显缺陷？
↓
第三轮：磨细节
↓
代码结构好吗？有没有边界情况？
↓
完成第一轮：看方向
目标：确认 AI 理解了你的意图，整体方向正确。
关键动作：
- 提出核心需求，不要纠结细节
- 明确告诉 AI「先给我一个基础实现」
- 重点看：AI 的理解对不对？大方向对不对？
检查点：
- [ ] AI 做的是你想要的功能吗？
- [ ] 技术方案和你预期一致吗？
- [ ] 如果方向错了，现在就要纠正
常见问题：方向错误。比如你想要一个弹窗，AI 给你做了一个新页面。
第二轮：改问题
目标：修正第一轮的明显问题，补充遗漏的功能。
关键动作：
- 指出具体问题，不要说「不太对」
- 列出需要添加的功能点
- 可以一次提多个修改，但不要超过 3-5 个
检查点：
- [ ] 核心功能都实现了吗？
- [ ] 交互逻辑正确吗？
- [ ] 有没有明显的 bug？
常见问题：功能缺失或逻辑错误。比如缺少输入验证，或者按钮点击没反应。
第三轮：磨细节
目标：优化代码结构，处理边界情况，提升质量。
关键动作：
- 关注代码的可维护性
- 检查边界情况（空输入、超长输入、特殊字符）
- 优化命名、注释、结构
检查点：
- [ ] 代码结构清晰吗？
- [ ] 边界情况处理了吗？
- [ ] 代码可以直接用于生产吗？
常见问题：代码能用但不够好。比如逻辑全写在一个函数里，或者没有错误处理。
完整案例：小李的「添加任务」功能
让我们看小李如何用三阶段模型，迭代出一个满意的添加任务功能。
第一轮对话：看方向
小李的提示词：
我正在开发一个待办清单应用，使用 React + TypeScript + Tailwind CSS。
请帮我实现「添加任务」功能：
- 一个输入框 + 一个添加按钮
- 点击按钮可以添加任务到列表
先给我一个基础实现，后续再完善。AI 的输出：
tsx
import { useState } from 'react';
interface Task {
id: number;
title: string;
}
export default function AddTaskForm() {
const [tasks, setTasks] = useState<Task[]>([]);
const [inputValue, setInputValue] = useState('');
const handleAdd = () => {
const newTask: Task = {
id: Date.now(),
title: inputValue,
};
setTasks([...tasks, newTask]);
setInputValue('');
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
className="border p-2"
/>
<button onClick={handleAdd} className="bg-blue-500 text-white p-2 ml-2">
添加
</button>
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
}小李的检查：
- ✅ 方向对：输入框 + 按钮 + 任务列表
- ✅ 技术栈对：React + TypeScript + Tailwind
- ⚠️ 但有问题：没有输入验证，可以添加空任务
判断：方向正确，进入第二轮。
第二轮对话：改问题
小李的提示词：
基础功能可以了，请加上以下改进：
1. 支持按回车键添加任务（不只是点击按钮）
2. 添加空输入验证：
- 输入为空时，按钮显示为禁用状态
- 尝试添加空任务时，不执行任何操作
3. 输入框添加 placeholder："输入新任务..."AI 的输出：
tsx
import { useState } from 'react';
interface Task {
id: number;
title: string;
}
export default function AddTaskForm() {
const [tasks, setTasks] = useState<Task[]>([]);
const [inputValue, setInputValue] = useState('');
const isInputEmpty = inputValue.trim() === '';
const handleAdd = () => {
if (isInputEmpty) return;
const newTask: Task = {
id: Date.now(),
title: inputValue.trim(),
};
setTasks([...tasks, newTask]);
setInputValue('');
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
handleAdd();
}
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="输入新任务..."
className="border p-2 rounded"
/>
<button
onClick={handleAdd}
disabled={isInputEmpty}
className={`p-2 ml-2 rounded ${
isInputEmpty
? 'bg-gray-300 cursor-not-allowed'
: 'bg-blue-500 text-white hover:bg-blue-600'
}`}
>
添加
</button>
<ul className="mt-4">
{tasks.map((task) => (
<li key={task.id} className="py-1">{task.title}</li>
))}
</ul>
</div>
);
}小李的检查：
- ✅ 回车添加：已实现
- ✅ 空输入验证：已实现
- ✅ placeholder：已添加
- ⚠️ 代码结构问题：验证逻辑和 UI 逻辑混在一起
判断：功能完整，进入第三轮优化结构。
第三轮对话：磨细节
小李的提示词：
功能完整了，请优化代码结构：
1. 把输入验证逻辑抽成独立函数 validateTaskInput
2. 把样式类名用常量统一管理（方便后续修改）
3. 添加必要的注释说明组件用途AI 的最终输出：
tsx
import { useState } from 'react';
// 任务数据类型
interface Task {
id: number;
title: string;
}
// 样式常量
const STYLES = {
input: 'border p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-300',
buttonBase: 'p-2 ml-2 rounded transition-colors',
buttonEnabled: 'bg-blue-500 text-white hover:bg-blue-600',
buttonDisabled: 'bg-gray-300 cursor-not-allowed text-gray-500',
taskItem: 'py-1 border-b border-gray-100',
};
// 验证任务输入
function validateTaskInput(input: string): boolean {
return input.trim().length > 0;
}
/**
* 添加任务表单组件
* 功能：输入框 + 添加按钮，支持回车添加，包含空输入验证
*/
export default function AddTaskForm() {
const [tasks, setTasks] = useState<Task[]>([]);
const [inputValue, setInputValue] = useState('');
const isValid = validateTaskInput(inputValue);
const handleAdd = () => {
if (!isValid) return;
const newTask: Task = {
id: Date.now(),
title: inputValue.trim(),
};
setTasks([...tasks, newTask]);
setInputValue('');
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
handleAdd();
}
};
return (
<div className="p-4">
<div className="flex">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="输入新任务..."
className={STYLES.input}
/>
<button
onClick={handleAdd}
disabled={!isValid}
className={`${STYLES.buttonBase} ${
isValid ? STYLES.buttonEnabled : STYLES.buttonDisabled
}`}
>
添加
</button>
</div>
<ul className="mt-4">
{tasks.map((task) => (
<li key={task.id} className={STYLES.taskItem}>
{task.title}
</li>
))}
</ul>
</div>
);
}小李的检查：
- ✅ 验证逻辑独立：
validateTaskInput函数 - ✅ 样式统一管理：
STYLES常量 - ✅ 注释清晰：组件用途说明
- ✅ 代码可维护：结构清晰，易于扩展
结果：三轮对话，从「能用」到「好用」。
每轮对话的行动清单
| 阶段 | 你的重点 | 提示词关键词 | 检查什么 |
|---|---|---|---|
| 第一轮 | 看方向 | "基础实现"、"先给我一个..." | 方向对不对？理解对不对？ |
| 第二轮 | 改问题 | "请加上..."、"修正..." | 功能完整吗？逻辑对吗？ |
| 第三轮 | 磨细节 | "优化结构"、"抽成函数" | 代码好维护吗？边界情况？ |
可复制模板：迭代对话脚本
第一轮模板：建立方向
markdown
我正在开发 [项目名称]，使用 [技术栈]。
请帮我实现 [功能名称]：
- [核心需求1]
- [核心需求2]
先给我一个基础实现，我们后续再逐步完善。第二轮模板：修正问题
markdown
基础功能可以了，请加上以下改进：
1. [需要添加的功能/修正的问题]
2. [需要添加的功能/修正的问题]
3. [需要添加的功能/修正的问题]第三轮模板：优化细节
markdown
功能完整了，请优化代码：
1. [结构优化要求]
2. [边界情况处理]
3. [其他质量要求]什么时候可以跳过某个阶段？
| 情况 | 可以跳过 | 原因 |
|---|---|---|
| 任务非常简单 | 第三轮 | 代码量小，不需要结构优化 |
| 第一轮输出已经很好 | 第二轮 | 直接进入细节打磨 |
| 只是快速原型验证 | 第三轮 | 后续会重写，不需要完美 |
迭代次数的经验值
| 任务复杂度 | 典型迭代次数 | 示例 |
|---|---|---|
| 简单（单一功能） | 1-2 轮 | 一个按钮、一个输入框 |
| 中等（多个功能） | 2-3 轮 | 一个表单、一个列表组件 |
| 复杂（完整模块） | 3-5 轮 | 一个完整页面、一个复杂交互 |
如果超过 5 轮还没达到满意效果，考虑是不是需求本身不够清晰，或者应该开始新对话。
本节要点
✓ 三阶段模型：看方向 → 改问题 → 磨细节
✓ 每轮有焦点：第一轮不纠结细节，第二轮不纠结结构，第三轮专注质量
✓ 明确检查点：每轮结束都有清晰的检查标准
✓ 灵活调整：简单任务可以跳过阶段，复杂任务可能需要更多轮次
下一节，我们来学习如何给 AI 有效的反馈——这是迭代成功的关键。