# 第七章：当 AI 搞砸了怎么办

> **本章你将学到：** AI 常见的四类问题、每种问题的应对方法、简易调试工具箱，以及面对问题时该有的心态。

## 如果你做到这里还没遇到问题……

那你太幸运了。

不过别担心，问题迟早会来的。AI 会犯错，这完全正常——就像再厉害的厨师也会偶尔把菜做咸了一样。重要的不是永远不出错，而是**出错了知道怎么办**。

这一章就是你的"急救手册"。遇到问题的时候翻开看看，按步骤操作，大部分情况都能解决。

## 正常化失败：犯错不可怕

在我们聊具体解决方案之前，我想先帮你建立一个正确的心态。

**连专业程序员写的代码也有 bug。** 是的，你没看错。哪怕是在谷歌、微软、苹果这种顶级科技公司工作的程序员，每天也在跟 bug 打交道。"写代码"这件事本身就是一个不断试错、不断修正的过程。

AI 也一样。它不是一个完美的机器，它本质上是在"猜"你想要什么，然后尽力去实现。有时候它猜对了，有时候猜错了，有时候虽然方向对了但细节有偏差。

所以，**遇到问题不代表你做错了什么。** 这就是 vibe coding 的正常流程——做出来、检查、发现问题、修改、再检查。

## 问题类型 1：界面和你想的不一样

这是最常见的问题。你脑子里想的是一种效果，AI 做出来的是另一种。

### 为什么会这样？

大多数时候，是因为你的描述不够具体。你可能觉得自己说清楚了，但 AI 的理解方式和你不同。比如你说"把内容放在右边"，AI 可能理解为"紧贴右侧边缘"，但你想的是"右半部分居中"。

### 怎么解决？

**方法 1：更精确地描述**

不要只说"不对"，要说清楚哪里不对、你想要什么样。

坏的反馈：
> 布局不对，改一下。

好的反馈：
> 我想要的布局是：左边占 1/3 宽度放导航菜单，右边占 2/3 放主要内容。现在这个是上下排列的，我要改成左右排列。

**方法 2：截图给 AI 看**

如果语言描述不清楚，截一张你想要的效果图（可以是别的网站的截图，甚至是你手画的草图），发给 AI 说：

> "我想要的效果类似这样"（附图片）

很多时候一张图胜过千言万语。

<!-- screenshot: 把参考图发给 AI 后，AI 按照参考图修改的前后对比 -->

**方法 3：分步描述**

如果你的期望很复杂，不要一次性描述完。先说最重要的部分：

> "先把整体布局改成我说的左右结构"

等这个改好了，再说下一步：

> "好的，现在左边的导航菜单加上图标"

## 问题类型 2：功能不对

按钮点了没反应，或者点了之后做了一个奇怪的事情。

### 为什么会这样？

通常是 AI 理解错了你的意思。你说"点击之后保存"，AI 可能只是做了一个视觉上的"保存成功"提示，但数据并没有真正保存。

### 怎么解决？

用这个万能句式跟 AI 描述问题：

> **"当我做 X 的时候，应该发生 Y，但实际发生了 Z。"**

这个句式非常好用，因为它清楚地告诉了 AI 三件事：
1. 你做了什么操作（X）
2. 你期望的结果（Y）
3. 实际的结果（Z）

**示例：**

> "当我点击'添加到收藏'按钮的时候，应该在收藏列表里看到这个项目，但实际上按钮点击后没有任何反应，收藏列表也没有变化。"

> "当我在输入框里输入中文的时候，应该正常显示，但实际上显示成了乱码。"

> "当我在手机上打开这个页面的时候，应该自适应手机屏幕宽度，但实际上页面没有缩放，需要左右滑动才能看到全部内容。"

<!-- screenshot: 用"当我做X，应该Y，实际Z"句式反馈问题后 AI 修复的过程 -->

## 问题类型 3：代码报错 / 页面崩了

页面一片空白，或者弹出一个红色的错误信息，完全不能用了。

### 为什么会这样？

AI 写的代码有 bug——可能是拼错了一个单词，可能是逻辑上出了问题。这在编程中很常见。

### 怎么解决？

**最简单的方法：直接把错误信息复制给 AI。**

你不需要看懂错误信息是什么意思——AI 能看懂。你只需要做两件事：

**第一步：找到错误信息。**

如果你用的是网页端工具（如 Lovable），错误通常会直接显示在页面上或者工具的控制台里。

如果页面显示空白或者看起来坏了，你可以用浏览器的"开发者工具"来查看错误：

1. 在页面上按 **F12** 键（Windows）或 **Command + Option + J**（Mac）
2. 点击顶部的 **"Console"（控制台）** 标签
3. 你会看到红色的错误信息

<!-- screenshot: 浏览器按 F12 打开开发者工具，Console 标签中显示红色错误信息的截图 -->

**第二步：把错误信息复制给 AI。**

直接复制那段红色的错误信息，粘贴到 AI 对话框里：

> "页面出错了，报错信息如下：（粘贴错误信息）"

你甚至不需要说任何其他的话。AI 看到错误信息后，通常就能理解问题出在哪里，并自动修复。

这是 vibe coding 中最"魔法"的操作之一——你完全不懂代码，但只要把错误信息扔给 AI，它大概率就能帮你修好。

## 问题类型 4：越改越乱

你已经改了十几轮了，结果越改越不对劲。修好一个地方，另一个地方又坏了。整个项目似乎进入了一个怪圈。

### 为什么会这样？

通常有两个原因：

1. **对话太长了。** AI 的"记忆力"有限（技术上叫"上下文窗口"）。当你们的对话变得非常长（比如超过 15-20 轮），AI 可能会"忘记"前面的内容，导致它的修改和之前的内容冲突。

2. **修改太零碎。** 每次只改一小块，但没有从整体上审视。就像装修房子，如果你每天随机改一面墙的颜色，最后整个房子的配色可能一团糟。

### 怎么解决？

**方案 A：让 AI 重新整理一遍**

在当前对话里，试着说：

> "现在的代码有些乱了。请帮我重新整理一下整个代码，确保所有功能正常工作，不要改动任何功能，只做代码清理。"

这就像让 AI"打扫房间"——功能不变，但把代码理顺。

**方案 B：开一个新对话**

如果方案 A 不管用，就果断开一个新对话。做法是：

1. 把当前的代码完整复制下来
2. 开一个新对话
3. 把代码发给 AI，说清楚你的完整需求

> "这是我目前项目的代码（粘贴代码）。这个项目是一个 XX 工具，目前有 XX 和 XX 功能。现在的问题是 XX。请帮我修复这个问题。"

在新对话里，AI 是"从头开始看"你的代码，不会受之前混乱对话的影响，通常能更准确地定位和解决问题。

**方案 C：推倒重来**

如果你做的东西还比较简单（比如只花了 10-20 分钟），而且整体方向都偏了，那最快的方法可能是——重新开始。

这不是浪费时间。因为你已经有了第一次的经验，知道哪些地方需要更清楚地描述，知道哪些坑要避开。你的第二版往往会比第一版好很多，而且做起来更快。

## 简易调试工具箱

这里总结几个最基本的"工具"，让你在遇到问题时不至于手足无措。

### 浏览器开发者工具（只看 Console）

按 F12 打开，只看 Console（控制台）标签页。红色的就是错误信息，复制给 AI 就行。你不需要理解其他任何东西。

### 截图大法

遇到任何界面问题，截图发给 AI，说"这里不对"并描述你期望的效果。截图是最直观的沟通方式。

### 撤销

各个工具都有撤销的方式：

- **Lovable**：左侧有版本历史，可以回退到之前的版本
- **Cursor**：用 `Ctrl+Z`（Windows）或 `Command+Z`（Mac）撤销最近的修改
- **v0.dev**：可以回退到之前某一轮对话的版本

如果你用了第八章会讲到的 Git 版本管理，那就更方便了——随时可以回到任何一个"存档点"。

### 多问 AI

AI 不仅能写代码，还能帮你分析问题。你可以直接问它：

> "这个页面现在有什么问题？帮我检查一下。"

> "我应该先修哪个问题？"

> "你能解释一下为什么点击按钮后没有反应吗？"

## 管理对话上下文

这里有一个容易被忽略的问题：**对话太长了，AI 会变"笨"。**

AI 工具都有一个"记忆容量"的限制。当你在一个对话里聊了太久、改了太多东西，AI 可能会开始"犯迷糊"——忘记之前说过的要求，或者做出矛盾的修改。

### 怎么判断 AI 开始"犯迷糊"了？

- 你已经说过的要求，AI 又改回去了
- AI 的回复越来越不准确，或者开始重复之前的错误
- 你感觉 AI "降智"了，不像刚开始那么聪明了

### 怎么办？

- **复杂任务分多个对话完成。** 不要在一个对话里从头做到尾。做完一个大功能，开个新对话继续下一个
- **使用压缩功能。** 一些工具（如 Claude Code）支持 `/compact` 命令来压缩对话历史，保留关键信息的同时释放空间
- **发现 AI 开始"犯傻"时，果断开新对话。** 把当前的代码和需求重新描述一遍，从头来往往比继续纠正更快

## 知道何时从头来

有时候，你和 AI 会陷入一个"错误循环"——你说改这里，它改了但又弄坏了那里，你再说改那里，它又弄坏了其他地方。

当这种情况发生时：

1. **先尝试明确指出方向：** "停止当前方向，我们换一种思路来做"
2. **给正确示例比描述错误更有效：** 与其说"不要这样做"，不如说"按照这个方式做"
3. **三次纠正还不行？** 果断放弃当前对话：
   - 如果你用了 Git（第八章会教），回滚到上次提交的版本
   - 开一个全新的对话，用更清晰的方式重新描述需求
   - 你第二次做会比第一次快得多，因为你已经知道了哪些坑要避开

> 有时候从头再来比反复纠正更快。这不是失败，这是高效。

## 心态建议

最后分享几条面对问题时的心态建议：

**每次只解决一个问题。** 如果你发现了三个问题，不要一次性全提给 AI。一个一个来，解决一个确认一个。这样更不容易出新问题。

**小步快跑，及时验证。** 每次只让 AI 完成一个小功能，生成后立即运行、测试，验证通过后再继续下一步。避免一口气让 AI 做一大堆东西然后发现全是问题。

**进步比完美更重要。** 你的项目不需要一开始就完美。做出一个 80 分的版本，比卡在追求 100 分的路上什么都没有要好得多。

**遇到实在搞不定的问题，暂时跳过也没关系。** 有些问题可能是当前工具的限制，或者需要更高阶的技巧。先把你能做的做了，那个搞不定的地方以后再回来处理——也许到时候你已经学会了新的解决方法，也许工具本身也更新了。

**休息一下再回来。** 有时候连续改了一个小时还不对，最好的方法是关掉电脑去喝杯水。等你回来，很可能一下子就想到解决办法了。有时候离开问题反而更容易解决它。

## 本章小结

- AI 犯错是正常的，连专业程序员写的代码也有 bug
- **四种常见问题及解决方法：**
  - 界面不对 → 更具体地描述 / 截图给 AI
  - 功能不对 → 用"做了 X，应该 Y，实际 Z"句式
  - 代码报错 → 复制错误信息给 AI
  - 越改越乱 → 让 AI 整理 / 开新对话 / 推倒重来
- **对话管理：** 对话太长会让 AI 变笨，复杂任务分多个对话完成
- **何时从头来：** 三次纠正不行就果断开新对话，第二次会更快
- **调试工具箱：** F12 看 Console、截图、撤销、多问 AI
- **心态：** 小步快跑、一次解决一个、进步比完美重要、搞不定就先跳过

## 下一步预告

现在你已经能做项目、能和 AI 对话、也能处理问题了。下一章我们来学一些进阶技巧——版本管理（给你的代码买保险）、拆分复杂需求、以及怎么把你做的东西发布到互联网上让别人看到。