# 第五章：学会和 AI 对话——Prompt 的艺术

> **本章你将学到：** 如何写出让 AI 更好理解你的 prompt，一个实用的需求描述框架，以及最常见的沟通错误和迭代技巧。

## 这是整个教程最重要的一章

前面几章我们做了准备、认识了工具、选好了要用的东西。现在，进入真正的核心技能。

Vibe coding 的核心不是写代码——代码是 AI 写的。你的核心技能是：**说清楚你要什么。**

你输入给 AI 的那段文字，有个专门的名字叫 **Prompt**（读作"prahm-pt"），翻译过来就是"提示词"或"指令"。简单说，prompt 就是你发给 AI 的消息——你写什么，AI 就根据什么来工作。

这听起来很简单，对吧？但实际操作起来，你会发现"说清楚"比想象的要难。同一个想法，不同的表达方式，AI 给出的结果可能天差地别。

这一章就是教你怎么写好 prompt。建议你反复看，因为这些技巧会贯穿你整个 vibe coding 的过程。

## 核心原则：AI 不会读心

在开始之前，你需要理解一个最基本的事实：**AI 只能根据你说的话来工作。** 你没说的，它猜不到。

打个比方：想象你给一个从没来过你家的外卖员打电话。如果你只说"送到我家"，他肯定找不到。你得说"XX 小区 3 号楼 2 单元 1501 室，到了按门铃"。说得越具体，他越能准确找到你。

和 AI 沟通也是一样的道理：

- **你说"帮我做个网站"** → AI：什么类型的网站？什么风格？放什么内容？（它只能瞎猜）
- **你说"帮我做一个个人摄影作品集网站，左侧是照片缩略图列表，点击放大查看，整体黑白灰色调，简洁现代风"** → AI：收到，这我能做！

记住三个关键词：**具体、明确、分步。**

## 需求描述框架：WAFS 模板

为了帮你更好地组织需求描述，我总结了一个简单的框架，叫 **WAFS**：

| 字母 | 含义 | 要回答的问题 |
|------|------|-------------|
| **W** | What（做什么） | 我要做一个什么东西？核心目标是什么？ |
| **A** | Appearance（长什么样） | 页面布局是怎样的？有哪些区域？ |
| **F** | Function（有什么功能） | 用户可以做什么操作？点击会发生什么？ |
| **S** | Style（什么风格） | 颜色偏好？氛围感觉？有没有参考？ |

你不需要每次都写全四个部分——有时候一两句话就够了。但写得越全面，AI 给出的第一版结果就越接近你想要的，你需要修改的次数就越少。

### 一个完整的 WAFS 示例

假设你想做一个"每日一句"的网页，用 WAFS 框架写出来是这样的：

> **W（做什么）：** 帮我做一个"每日一句"的网页，每次打开或刷新会显示一句随机的励志名言。
>
> **A（长什么样）：** 页面只有一个主要区域，名言居中显示，字号要大。下面有一个小按钮可以切换下一句。页面底部有一行小字显示名言的作者。
>
> **F（有什么功能）：** 打开页面自动显示一句随机名言。点击"换一句"按钮显示另一句。名言至少准备 20 条。
>
> **S（什么风格）：** 背景用浅色渐变（米白到浅灰），字体用衬线体，整体感觉安静、舒服。

看到了吗？这比简单地说"帮我做一个名言网页"要具体得多。AI 读到这段描述，几乎可以直接开始做了。

## 好 Prompt vs 坏 Prompt：6 组对比

说了这么多原则，我们来看看实际例子。下面每组对比都是针对同一个需求，但不同的表达方式。

### 对比 1：太模糊 vs 具体描述

**坏 prompt：**
> 帮我做一个网站。

**好 prompt：**
> 帮我做一个个人介绍页面，包含：我的名字（张三）、一句自我介绍、三个技能标签、一个联系邮箱。单页面就行。

**为什么好的更好：** 坏 prompt 里 AI 什么信息都没有——不知道做什么类型的网站、放什么内容、什么风格。好 prompt 明确说了类型（个人介绍页）、内容（名字、介绍、技能、邮箱）、范围（单页面）。

<!-- screenshot: 分别用这两个 prompt 在 Lovable 中生成的结果对比 -->

### 对比 2：没说布局 vs 说清楚了布局

**坏 prompt：**
> 做一个展示三个产品的页面。

**好 prompt：**
> 做一个产品展示页面，上方是大标题"我们的产品"，下面用三列卡片布局，每张卡片包含：产品图片（先用占位图）、产品名称、一行简介、一个"了解更多"按钮。

**为什么好的更好：** AI 不知道你想要什么布局——是上下排列？左右排列？网格？卡片？你说清楚"三列卡片布局"和每张卡片的内容，AI 就能精准地做出来。

<!-- screenshot: 布局对比效果图 -->

### 对比 3：没提风格 vs 提了参考风格

**坏 prompt：**
> 做一个好看的登录页面。

**好 prompt：**
> 做一个登录页面，左边是一张全屏背景图（用渐变色代替），右边是登录表单。整体风格参考 Apple 官网那种简洁感——大量留白，细线条，深灰色文字。

**为什么好的更好：** "好看"是非常主观的，每个人的审美不同。但当你说"参考 Apple 官网那种简洁感"，AI 立刻就有了方向。给参考比形容词管用得多。

<!-- screenshot: 风格对比效果图 -->

### 对比 4：一次说太多 vs 分步来

**坏 prompt：**
> 帮我做一个记账应用，要有登录注册、记一笔账、分类管理、月度统计图表、导出 Excel、多账本切换、预算设置、提醒功能。

**好 prompt（第一步）：**
> 帮我做一个简单的记账页面。先做最基础的功能：一个输入框填金额，一个下拉框选分类（餐饮、交通、购物、其他），一个按钮提交。下面用列表显示已经记过的账。

**为什么好的更好：** 一次丢 8 个功能给 AI，它很可能每个都做得半吊子，或者做着做着就乱了。先把最核心的功能做好，然后一步步加。这是 vibe coding 最重要的策略之一。

<!-- screenshot: 先做好基础版再迭代的效果 -->

### 对比 5：只说"改一下" vs 说清楚改什么

**坏 prompt：**
> 标题不好看，改一下。

**好 prompt：**
> 标题字号太小了，改成 36px。颜色从黑色改成深蓝色（#1a365d）。标题和下面的内容之间间距再大一些。

**为什么好的更好：** "不好看"太模糊了——AI 不知道你觉得哪里不好看。是字太小？颜色不对？位置不对？说清楚具体要改什么，AI 就能精准修改。

<!-- screenshot: 修改前后的对比效果 -->

### 对比 6：没给上下文 vs 给了背景信息

**坏 prompt：**
> 加一个搜索功能。

**好 prompt：**
> 我目前做的是一个菜谱收藏网站，首页显示所有菜谱卡片。现在想在页面顶部加一个搜索框，用户输入关键词后，下面的卡片列表实时过滤，只显示标题包含关键词的菜谱。

**为什么好的更好：** "加搜索功能"太泛了——搜什么？在哪里搜？搜索结果怎么展示？给了上下文之后，AI 知道搜的是菜谱、在首页搜、结果是过滤卡片列表。

<!-- screenshot: 搜索功能实现效果 -->

## 迭代对话技巧

做 vibe coding 不是"一句话出奇迹"——大部分时候，你需要和 AI 来回对话好几轮才能得到满意的结果。这很正常，不是你的问题，也不是 AI 的问题。以下是一些迭代时的实用技巧。

### 怎么追加修改

当你想让 AI 修改上一版的结果时，**直接说要改什么就行，不需要重复之前的描述。** AI 记得你之前说的话。

比如：
- "把导航栏固定在页面顶部，滚动时不消失"
- "按钮的圆角再大一些，颜色换成绿色"
- "表格加一列，叫'状态'"

简洁、直接、一次只改一件事。

### 怎么用截图辅助

很多时候，语言描述不如一张图来得直接。如果你在网上看到一个喜欢的设计，可以截图发给 AI：

> "我想要类似这样的导航栏效果"（附截图）

> "把卡片的样式改成类似这张图片里的风格"（附截图）

大部分 AI 编程工具都支持在对话中上传图片。善用这个功能，能省很多口舌。

### 什么时候继续迭代 vs 重新开始

**继续迭代的情况：**
- 整体方向是对的，只是细节需要调整（颜色、字号、间距、小功能）
- 修改范围比较小，只涉及某一个部分

**重新开始一个对话的情况：**
- 整体方向偏了，改来改去越来越不像你想要的
- AI 似乎"忘记"了之前的内容，给出的修改越来越离谱
- 你改了很多轮（超过 15-20 轮），对话变得很长，AI 的表现明显变差

重新开始不是失败——它只是你清理桌面、重新整理思路的过程。把当前满意的部分记下来，在新对话里把需求描述得更清楚，往往能比继续硬改更快得到好结果。

## 五个常见错误

根据很多 vibe coding 新手的经验，以下是最容易犯的五个错误：

### 错误 1：一次提太多需求

**问题：** 把十个功能一股脑丢给 AI，结果每个功能都做得很粗糙。

**正确做法：** 先列出所有需求，然后排个优先级。从最核心的 1-2 个功能开始，做好一个再加下一个。就像盖房子，先打地基，再起墙，最后装修。

### 错误 2：描述太模糊

**问题：** "帮我做个好看的页面"——什么叫"好看"？每个人标准不同。

**正确做法：** 用具体的描述代替模糊的形容词。"好看"换成"参考 XX 网站的风格"、"用蓝白配色"、"卡片式布局、大量留白"。

### 错误 3：不看结果就继续提需求

**问题：** AI 给了第一版，你看都不看就说"再加个 XX 功能"。结果第一版就有问题，后面的功能建在有问题的基础上，越来越歪。

**正确做法：** 每次 AI 生成结果后，花一两分钟仔细看看。满意了，再提下一步需求。不满意，先修好当前的问题。

### 错误 4：AI 说的话看不懂就跳过

**问题：** AI 有时候会解释它做了什么，或者问你一个问题。你看不懂就直接跳过，结果后面出了问题。

**正确做法：** 如果 AI 的回复里有你不懂的部分，直接问它："你刚才说的 XX 是什么意思？能用大白话解释一下吗？"AI 非常擅长换个方式解释。

### 错误 5：完全不修改 AI 的第一版输出

**问题：** AI 的第一版做出来就直接用了，觉得"差不多就行"。但其实花几分钟迭代两三轮，效果能好很多。

**正确做法：** 把 AI 的第一版当作"初稿"，不是"终稿"。就像写文章一样，初稿总有可以改进的地方。花几分钟提几个修改意见，你会发现最终效果远好于第一版。

## 高效协作的三个习惯

除了写好 prompt，和 AI 高效协作还有三个重要习惯，掌握了能让你事半功倍：

### 习惯 1：先规划再动手

不要上来就让 AI 写代码。先花一两分钟想清楚你要做什么，甚至可以先让 AI 帮你**列一个计划**：

> 我想做一个记账小工具，请先帮我列出需要的功能清单和实现步骤，不要写代码。

等 AI 列出计划后，你看看有没有遗漏或不需要的功能，确认后再让它开始做。这样可以提前发现理解偏差，避免 AI 做了一堆你不想要的东西。

一些编辑器端工具（如 Cursor）甚至内置了"Plan 模式"，可以让 AI 先出方案再执行，非常好用。

### 习惯 2：主动提供你知道的信息

你脑子里的想法，AI 是看不到的。如果你已经知道一些信息，**主动告诉 AI**，不要让它去猜：

- 你想用什么颜色、什么风格？直接说
- 你参考了某个网站？把链接或截图给 AI
- 你知道某个功能该怎么做？告诉 AI 你的思路
- 有哪些技术限制或要求？提前说明

你提供的信息越多，AI 就越不需要猜测，结果就越接近你想要的。

### 习惯 3：想清楚再提问

AI 不是许愿机。在提出请求之前，先想清楚三个问题：

1. **我要解决什么问题？**（不是"帮我改一下"，而是"标题太小了看不清"）
2. **我期望的结果是什么？**（不是"好看一点"，而是"标题用 36px 加粗黑色"）
3. **有什么约束条件？**（比如"不要改动其他部分"、"保持现有的配色方案"）

让 AI 帮你完善"怎么做"，而不是替你想"做什么"。

## 本章小结

- **核心原则：** AI 不会读心，你说得越清楚，结果越好
- **WAFS 框架：** What（做什么）、Appearance（长什么样）、Function（什么功能）、Style（什么风格）
- **好 Prompt 的关键：** 具体、有布局描述、有风格参考、一次一件事、说清楚上下文
- **迭代技巧：** 直接说要改什么、善用截图、知道何时重新开始
- **避免五个错误：** 不要一次提太多、不要太模糊、要看结果、不懂就问、不要只用初稿
- **三个好习惯：** 先规划再动手、主动提供你知道的信息、想清楚再提问

## 下一步预告

理论和技巧都学了，下一章我们就要真正动手了——从零开始，用你自己的想法做一个完整的项目。准备好了吗？