第五章：学会和 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 明确说了类型（个人介绍页）、内容（名字、介绍、技能、邮箱）、范围（单页面）。
对比 2：没说布局 vs 说清楚了布局
坏 prompt：
做一个展示三个产品的页面。
好 prompt：
做一个产品展示页面，上方是大标题"我们的产品"，下面用三列卡片布局，每张卡片包含：产品图片（先用占位图）、产品名称、一行简介、一个"了解更多"按钮。
为什么好的更好： AI 不知道你想要什么布局——是上下排列？左右排列？网格？卡片？你说清楚"三列卡片布局"和每张卡片的内容，AI 就能精准地做出来。
对比 3：没提风格 vs 提了参考风格
坏 prompt：
做一个好看的登录页面。
好 prompt：
做一个登录页面，左边是一张全屏背景图（用渐变色代替），右边是登录表单。整体风格参考 Apple 官网那种简洁感——大量留白，细线条，深灰色文字。
为什么好的更好： "好看"是非常主观的，每个人的审美不同。但当你说"参考 Apple 官网那种简洁感"，AI 立刻就有了方向。给参考比形容词管用得多。
对比 4：一次说太多 vs 分步来
坏 prompt：
帮我做一个记账应用，要有登录注册、记一笔账、分类管理、月度统计图表、导出 Excel、多账本切换、预算设置、提醒功能。
好 prompt（第一步）：
帮我做一个简单的记账页面。先做最基础的功能：一个输入框填金额，一个下拉框选分类（餐饮、交通、购物、其他），一个按钮提交。下面用列表显示已经记过的账。
为什么好的更好： 一次丢 8 个功能给 AI，它很可能每个都做得半吊子，或者做着做着就乱了。先把最核心的功能做好，然后一步步加。这是 vibe coding 最重要的策略之一。
对比 5：只说"改一下" vs 说清楚改什么
坏 prompt：
标题不好看，改一下。
好 prompt：
标题字号太小了，改成 36px。颜色从黑色改成深蓝色（#1a365d）。标题和下面的内容之间间距再大一些。
为什么好的更好： "不好看"太模糊了——AI 不知道你觉得哪里不好看。是字太小？颜色不对？位置不对？说清楚具体要改什么，AI 就能精准修改。
对比 6：没给上下文 vs 给了背景信息
坏 prompt：
加一个搜索功能。
好 prompt：
我目前做的是一个菜谱收藏网站，首页显示所有菜谱卡片。现在想在页面顶部加一个搜索框，用户输入关键词后，下面的卡片列表实时过滤，只显示标题包含关键词的菜谱。
为什么好的更好： "加搜索功能"太泛了——搜什么？在哪里搜？搜索结果怎么展示？给了上下文之后，AI 知道搜的是菜谱、在首页搜、结果是过滤卡片列表。
迭代对话技巧
做 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 不是许愿机。在提出请求之前，先想清楚三个问题：
- 我要解决什么问题？（不是"帮我改一下"，而是"标题太小了看不清"）
- 我期望的结果是什么？（不是"好看一点"，而是"标题用 36px 加粗黑色"）
- 有什么约束条件？（比如"不要改动其他部分"、"保持现有的配色方案"）
让 AI 帮你完善"怎么做"，而不是替你想"做什么"。
本章小结
- 核心原则： AI 不会读心，你说得越清楚，结果越好
- WAFS 框架： What（做什么）、Appearance（长什么样）、Function（什么功能）、Style（什么风格）
- 好 Prompt 的关键： 具体、有布局描述、有风格参考、一次一件事、说清楚上下文
- 迭代技巧： 直接说要改什么、善用截图、知道何时重新开始
- 避免五个错误： 不要一次提太多、不要太模糊、要看结果、不懂就问、不要只用初稿
- 三个好习惯： 先规划再动手、主动提供你知道的信息、想清楚再提问
下一步预告
理论和技巧都学了，下一章我们就要真正动手了——从零开始，用你自己的想法做一个完整的项目。准备好了吗？