---
title: "3.5.2 迭代对话的基本模式"
---


![03-technique_3.5-iterative-dialogue_3.5.2-iteration-pattern.png](/images/Basic/03-technique_3.5-iterative-dialogue_3.5.2-iteration-pattern.png)
# 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 有效的反馈——这是迭代成功的关键。