1. Prompt基础
工具都装好了，从这一篇起，我们要正式开练 Vibe Coding 最核心、也最值钱的一项功夫——写 Prompt。前面反复说过，Vibe Coding 把编程从"写代码"变成了"表达需求"，而表达需求的载体就是 Prompt。同一个 AI、同一个工具，有人三言两语就让它做出像模像样的作品，有人折腾半天却只得到一坨四不像，差距几乎全在 Prompt 上。
这一篇先打地基：讲清 Prompt 到底是什么、一条好 Prompt 该有哪些要素，并用一个真实的网页生成案例，让你亲眼看看"随口一说"和"说清楚"之间到底差多远。看完你就会明白，为什么我说这是整个系列里最该反复练的一章。
1. Prompt 到底是什么
Prompt，直译是"提示词"，但在 Vibe Coding 里，你把它理解成你下给 AI 的那段指令、那句话就行。你想让 AI 做什么、做成什么样，全靠这段话告诉它。它是你和 AI 之间唯一的沟通桥梁——AI 再聪明，也只能根据你给的这段文字来理解你的意图，你没说的，它只能靠猜。
打个比方，Prompt 就像你给一个能力超强、但完全不认识你的外包师傅下的需求单。这个师傅手艺顶尖、什么都会做，但他不知道你心里想要什么。你的需求单写得越清楚，他做出来的东西就越接近你要的；你要是只甩一句"随便给我做个东西"，那他做出来的，大概率不是你想要的那个。
这里有个新手最容易栽的认知误区：以为 AI 能"读懂我的心思"。它不能。它不知道你的审美偏好、不知道你这个东西要给谁用、不知道你嫌弃什么样的风格。所有这些它"不知道"的东西，如果对结果重要，你就得在 Prompt 里说出来。Vibe Coding 的功力，很大程度上就体现在"你能不能把脑子里那个模糊的想法，翻译成 AI 能准确接收的指令"。
2. 先看一个扎心的对比
光说概念没感觉，直接上案例。同样是让 AI"做一个个人主页"，我们用两种截然不同的 Prompt，看看结果差多少。
先看第一种，很多新手张口就来的写法：
模糊的写法：
帮我做个人主页网页AI 收到这句话，会怎么做？它只知道你要"个人主页"和"网页"两个关键词，剩下的全靠猜。它不知道你是谁、做什么的、想放哪些内容、喜欢什么风格，于是只能给你憋出一个最"安全"、最不会出错、也最平庸的版本——一个白底黑字、连样式都懒得加的骨架页面：
是不是有点惨不忍睹？没有配色、没有排版、没有重点，活像上世纪的网页。但这不能怪 AI——你给的信息太少了，它能交付这个，已经算尽职了。
现在换第二种写法，把需求一次性说清楚：
精确的写法：
帮我做一个个人主页网页，要求如下：
【角色】你是一名资深前端工程师，擅长做现代、精致的网页。
【内容】页面包含三个部分：
1. 顶部：头像、姓名"林晓"、一句话简介"前端开发工程师·热爱把想法变成产品"
2. 关于我：一段自我介绍
3. 项目展示：用卡片列出 4 个项目，每个有标题和简介；下面再列出技术标签
4. 联系方式：邮箱、GitHub、微信
【风格】现代简约，主色用深蓝到亮蓝的渐变，卡片式布局，带圆角和柔和阴影。
【技术】用纯 HTML + CSS 实现，单个文件，要响应式、手机上也能正常显示。同样的 AI、同样的工具，这次它交出来的是这样的：
渐变顶栏、头像、卡片式的项目展示、配色统一的技术标签、清爽的联系方式区——完全是可以直接拿出去用的水准。
两张图摆在一起，冲击力是实打实的。AI 没变、工具没变，变的只是你那段话。 这就是 Prompt 的威力，也是为什么我说它是 Vibe Coding 里最该练的能力。新手和高手用同一个工具，产出能差出十万八千里，秘密往往就藏在这段话里。
3. 好 Prompt 的四要素
那么，第二条 Prompt 凭什么比第一条强这么多？拆开看你会发现，它不是靠"写得长"，而是补齐了四样关键信息。我把它总结成好 Prompt 的四要素：角色、上下文、任务、约束。
下面一个个说清楚，每个要素到底在解决什么问题。
3.1 角色
角色，就是先告诉 AI"你是谁"，让它进入某个专业身份。 比如"你是一名资深前端工程师""你是一位有十年经验的文案"。这一句看似废话，作用却很大：它会让 AI 调动起对应领域的"专业模式"，输出的质量和专业度明显更高。
同样让它写一段产品介绍，开头加一句"你是一名顶尖的广告文案"，和什么都不说，写出来的味道完全不同。给 AI 安一个合适的身份，相当于帮它把"这件事该用什么水准来做"先定了调。这是花一句话就能换来明显提升的技巧，很划算。
3.2 上下文
上下文，就是交代清楚相关的背景信息——这个东西是给谁用的、用在什么场景、已经有了什么、要解决什么问题。 AI 不了解你的处境，这些背景你不说，它就只能按最普遍的情况来猜。
比如同样做一个网页，"给我个人求职用的"和"给公司做活动落地页用的"，做出来该是两个样子。再比如让 AI 改代码，你把"这个项目用的是 Vue 框架"这个背景告诉它，它就不会给你写出一段 React 的代码来。上下文给得越足，AI 的产出就越贴合你的真实场景，而不是一个放之四海而皆"平庸"的通用版本。
3.3 任务
任务，就是这条 Prompt 最核心的部分——你到底要 AI 做什么。 四要素里别的都可以省，唯独这个不能含糊。任务要说得明确、具体，最好能让人一读就知道"做完长什么样"。
"帮我做个东西"不是任务，"帮我做一个个人主页，包含自我介绍、项目展示、联系方式三个部分"才是任务。前者 AI 无从下手，后者目标清清楚楚。如果任务比较大、比较复杂，还可以像前面精确版那样，把它拆成几条列出来，AI 照着一条条做，命中率更高（怎么拆任务，下一篇会专门讲）。
3.4 约束
约束，就是给 AI 划定边界和规格——有哪些要求必须满足、有哪些坑不能踩、用什么技术、什么风格、什么限制。 这是把结果从"大致对"逼到"正是我要的"的关键一步。
前面精确版里那些"用纯 HTML+CSS、单文件、响应式、深蓝色渐变、卡片式布局"，全是约束。正是这些约束，把 AI 从"随便给你做个网页"框定到了"按我的规格做出这个网页"。约束给得越清楚，AI 自由发挥（也就是瞎猜）的空间就越小，结果自然越可控。新手常常忽略约束，结果就是 AI 做是做出来了，但技术选型不对、风格不喜欢、还少了关键限制，来回返工。
把这四样凑齐，你的 Prompt 就从"碰运气"变成了"有把握"。当然不是每条 Prompt 都得四样俱全——简单任务有个清晰的"任务"就够了；但越是重要、越是复杂的需求，四要素补得越全，结果越省心。
4. 一个可以直接套用的模板
道理讲完，给你一个能直接抄的模板。以后写重要的 Prompt 时，对着它把四个空填上，基本就不会跑偏：
【角色】你是一名{某个领域的专家，如：资深前端工程师}。
【背景】{交代这个东西给谁用、用在什么场景、已有什么基础}。
【任务】请帮我{要做的具体事情，复杂的话拆成 1.2.3. 几条}。
【要求】
1. {技术或形式要求，如：用纯 HTML+CSS 实现}
2. {风格要求，如：现代简约，主色深蓝}
3. {其他限制，如：要响应式、单文件}不用死记格式，记住它背后的逻辑就行：先给身份（角色），再交代背景（上下文），然后说清要做什么（任务），最后定好规格（约束）。 哪怕你不用这个模板的格式，只要在心里过一遍"这四样我交代清楚了没有"，你的 Prompt 质量就会甩开大多数人。
要提醒一句：模板是拐杖，不是镣铐。日常聊一句"帮我把这个按钮改成蓝色"这种小事，完全没必要套模板，直接说就行。模板是用在"一开口就要让 AI 做对一个完整东西"的场景，比如从零生成一个页面、一个脚本、一个功能。什么时候该详细、什么时候可以随意，用多了你自然有感觉。
5. 别想着一条 Prompt 定终身
最后泼一点很重要的"冷水"，免得你产生误解。讲了这么多"把 Prompt 写好"，并不是说你要憋一条完美无缺的 Prompt 一次到位——那既不现实，也没必要。
Vibe Coding 的常态是迭代：你先用一条还不错的 Prompt 让 AI 做出个初版，看到效果后再针对不满意的地方继续提要求，"配色太深了换浅一点""项目卡片改成三列""加个返回顶部的按钮"……一轮轮地调。所以这一篇教你的"把需求说清楚"，目的是让你的起点更高——第一版就八九不离十，而不是从一坨乱麻开始改。起点越高，后面要迭代的次数就越少，整个过程越省心。
换句话说，好 Prompt 不是为了"一句话搞定一切"，而是为了让你和 AI 的每一轮对话都更高效。把这章的四要素练熟，你会发现自己跟 AI 的沟通顺畅了一个量级。
6. 小结
这一篇的核心就一句话：在 Vibe Coding 里，决定你产出上限的，往往不是 AI 有多强，而是你能不能把需求说清楚。 同一个 AI，模糊指令给你一个白底黑字的骨架，精确指令却能给你一个能直接用的作品——中间隔着的，就是你有没有把角色、上下文、任务、约束这四样交代到位。
这是一项越练越顺的硬功夫，也是 Vibe Coding 里最划算的投资：它不挑工具、不会过时，今天练熟了，用 Claude Code、Cursor、Codex 哪个都通用。从下一篇起，我们会接着深入，去聊怎么把一个模糊的想法，一步步拆解、打磨成一条能直接执行的精确 Prompt。
关注秀才公众号：IT杨秀才，回复：面试
