提示词（Prompt）工程
提示词（Prompt） 是你和 AI 之间的唯一沟通渠道，同样的需求，不同的 Prompt，产出质量可以差 10 倍。
好提示词（Prompt） 的五要素：
| 要素 | 核心问题 | 如果缺失会怎样 |
|---|---|---|
| 目标 | 要做什么？ | AI 猜你的意图，可能偏离方向 |
| 约束 | 有什么限制？ | AI 用你不熟悉的技术栈，代码无法集成 |
| 输入 | 接收什么数据？ | AI 假设输入格式，实际运行时出错 |
| 输出 | 产生什么结果？ | AI 给了代码但没给使用方式，不知道怎么跑 |
| 验收标准 | 怎么算合格？ | AI 做完了但你不知道算不算做完 |
要素一：目标——说清楚要做什么
不好的写法
帮我写一个表单
问题：什么表单？登录？注册？搜索？有多少字段？
好的写法
帮我写一个用户注册表单，包含以下字段： 用户名、邮箱、密码、确认密码
更好的写法
帮我写一个用户注册表单，包含以下字段： - 用户名（文本框，3-20 个字符） - 邮箱（文本框，需验证格式） - 密码（密码框，至少 6 位，包含数字和字母） - 确认密码（密码框，需与密码一致）
关键技巧：把"做什么"拆成具体的组成部分。AI 对具体事物的理解远好于模糊概念。
要素二：约束——圈定边界
约束告诉 AI 什么不能做和必须用什么。没有约束，AI 会自由发挥，导致代码无法集成到你的项目中。
常见的约束类型
技术栈约束： - 使用 React 18 + TypeScript - 不引入第三方 UI 库（自己写 CSS） - 使用 Vite 作为构建工具 代码风格约束： - 使用函数组件和 Hooks，不用 Class 组件 - 每个文件不超过 150 行 - 所有 props 都要有 TypeScript 类型定义 输出约束： - 所有代码放在一个文件里 - 给出完整的 import 语句 - 关键逻辑加上注释
约束写得越多，AI 的产出越可控。但不要一次写太多——先写 3-5 条核心约束，根据结果再补充。
要素三：输入——定义数据格式
告诉 AI 输入数据长什么样，它能写出更准确的代码。
不好的写法
写一个函数处理用户数据
好的写法
写一个函数 formatUser(user)，接收一个用户对象：
{
name: string, // 用户名，例如 "张三"
age: number, // 年龄，例如 25
email: string, // 邮箱，例如 "zhangsan@example.com"
createdAt: string // 注册时间，ISO 格式，例如 "2026-06-28T10:00:00Z"
}
返回格式化的用户信息字符串。
关键技巧：给每个字段附上示例值。AI 对示例的理解远好于抽象的类型描述。
要素四：输出——指定结果形态
告诉 AI 你期望的输出形式——是代码？是解释？是修改建议？
常见输出形态
| 输出形态 | 适用场景 | Prompt 示例 |
|---|---|---|
| 完整代码 | 新功能、新文件 | 给我完整的代码，包含所有 import |
| 代码修改 | 改现有代码 | 只输出修改的部分，用 diff 格式 |
| 解释说明 | 理解代码 | 逐行解释这段代码在做什么 |
| 方案建议 | 架构决策 | 给出两种实现方案，对比优缺点 |
| 错误排查 | 调试 | 分析这个报错的原因，给出修复步骤 |
要素五：验收标准——定义完成
验收标准是最容易被忽略的要素，但它决定了你是否能判断任务完成。
好的验收标准示例
验收标准： - 用户名少于 3 个字符时，显示红色提示"用户名至少 3 个字符" - 密码少于 6 位时，显示红色提示"密码至少 6 位" - 两次密码不一致时，显示红色提示"两次密码不一致" - 所有字段为空时点击提交，每个字段下方显示对应的错误提示 - 所有字段正确填写后点击提交，控制台打印表单数据，不发送请求
关键技巧：验收标准要具体到"输入什么，看到什么"，用"当...时，应该..."的句式。
Prompt 模板
以下是本课程后续使用的 Prompt 模板，你可以直接套用：
## 目标 [一句话描述要做什么] ## 约束 - [技术栈限制] - [代码风格要求] - [输出格式要求] ## 输入 [输入数据的结构和示例] ## 输出 [期望的输出形式] ## 验收标准 - [具体可验证的标准 1] - [具体可验证的标准 2] - [具体可验证的标准 3]
常见 Prompt 错误及修正
| 错误 | 问题 | 修正 |
|---|---|---|
| 帮我做一个商城 | 太模糊，AI 不知道从哪开始 | 帮我做商城的商品列表页，显示商品图片、名称、价格，每行 3 个商品 |
| 用最好的方式实现 | AI 不知道你心中的"最好"是什么 | 用 React.memo 和 useCallback 优化渲染性能 |
| 这个代码有问题，帮我修 | 没说是哪里有问题 | 点击删除按钮后，列表没更新，控制台报错 "id is undefined"，帮我修 |
| 加一个功能 | 没说是加到哪个文件、什么位置 | 在 src/components/Header.tsx 的导航栏右侧，加一个用户头像下拉菜单 |
实战：同一个需求，三种 Prompt 对比
需求：做一个今日待办列表。
版本 A：一句话 Prompt
帮我做一个待办列表
AI 产出：可能是一个简单的 HTML 页面，可能用了 React，可能用了 Vue，你不知道会得到什么。
版本 B：加了约束的 Prompt
帮我做一个待办列表，用 HTML + CSS + 原生 JavaScript， 可以添加和删除任务。
AI 产出：一个可用的待办列表，但样式可能很简陋，可能没有处理空输入。
版本 C：完整的五要素 Prompt
## 目标 做一个"今日待办"列表组件。 ## 约束 - 使用 HTML + CSS + 原生 JavaScript，单文件 - 不使用任何第三方库 - 移动端友好的响应式布局 ## 输入 - 用户在输入框中输入待办事项文字 - 用户点击"添加"按钮或按 Enter 键 ## 输出 - 一个完整的 HTML 文件，可以直接在浏览器打开 - 输入框在顶部，已添加的待办事项在下方列表显示 - 每个待办事项右侧有删除按钮 - 底部显示"共 X 项，已完成 Y 项" ## 验收标准 - 输入空内容点击添加时，显示提示"请输入待办事项" - 添加成功后，输入框清空 - 点击待办事项文字，切换完成/未完成状态（加删除线） - 点击删除按钮，该项消失 - 统计数据实时更新 - 刷新页面后数据保留（使用 localStorage）
AI 产出：一个功能完整、有数据持久化、有统计、有错误处理的待办列表。
对比三个版本的产出，你会直观地感受到：Prompt 的质量上限，就是 AI 产出的质量上限。
迭代式开发实战
Vibe Coding 的核心工作流不是一次给 Prompt，一次得到完美代码，而是给 Prompt → 验证 → 反馈 → 再验证的循环。
迭代式开发的五个阶段
实战项目：做一个「编程术语词典」
这个项目要做一个可搜索的编程术语词典，包含术语名称、解释和分类。
跟着下面的五轮迭代，每一轮都实际操作一遍。
第一轮：让它能跑
Prompt：
做一个编程术语词典网页，要求： - 使用 HTML + CSS + 原生 JavaScript，单文件 - 显示一个术语列表，每条术语包含名称和简短解释 - 预置 10 个常见编程术语（HTML、CSS、JavaScript、API、变量、函数、循环、数组、对象、Git） - 顶部有一个搜索框，输入关键词可以过滤术语 - 深色背景，卡片式布局
把 AI 生成的代码保存为 dict.html，在浏览器中打开。
-
验证：页面能打开吗？10 个术语都显示了吗？搜索框能过滤吗？
-
反馈：如果搜索不工作，把具体现象描述给 AI。
第一轮的目标不是完美，而是能跑。一个能跑但不完美的版本，比一个想象中完美但还没写的版本好 100 倍。
第二轮：让它能用
Prompt：
在上一轮的代码基础上，做以下改进： 1. 每个术语卡片加上分类标签（如"前端"、"JavaScript"、"通用"等） 2. 搜索时同时匹配术语名称和分类标签 3. 搜索结果为空时，显示"没有找到相关术语"而不是空白 4. 添加一个"随机学习"按钮，点击后随机展示一个术语 5. 术语列表按字母顺序排列
验证：分类标签显示了吗？搜索能匹配分类吗？空结果有提示吗？随机按钮有效吗？
反馈：逐项检查，把不满足的项告诉 AI。
第三轮：修掉 Bug
这一轮你要主动找 Bug。
测试以下场景：
搜索框输入特殊字符（如 <、>、/）。
搜索框输入空格（前后空格）。
快速连续点击随机按钮。
搜索框输入大写字母（原始数据可能是小写）。
把所有术语删光（如果支持删除功能的话）。
每发现一个 Bug，用结构化方式描述给 AI：
当我在搜索框中输入大写 "HTML" 时，没有匹配到任何结果。 预期：不区分大小写，输入 "html" 和 "HTML" 都能匹配到。 实际：只有输入小写 "html" 才能匹配。 请修复这个大小写敏感的问题。
第四轮：打磨细节
Prompt：
在上一轮代码基础上，优化以下细节： 1. 搜索时添加防抖（输入停止 300ms 后再搜索，避免频繁过滤） 2. 卡片 hover 时有一个微小的上浮动画 3. 搜索结果高亮匹配的关键词（用黄色背景标记） 4. 添加一个"已学 X 个"的计数器，点击术语卡片上的"已学"按钮 +1 5. 已学过的术语显示一个勾的标记 6. 用 localStorage 保存已学记录
验证：动画流畅吗？高亮正确吗？已学记录刷新后还在吗？
第五轮：加测试和文档
Prompt：
在上一轮代码基础上： 1. 在代码顶部用注释写出功能说明和用法 2. 为搜索过滤函数写注释，说明它的输入、输出和逻辑 3. 如果代码中有复杂的逻辑，拆分成更小的函数，每个函数只做一件事 4. 在文件中添加数据来源说明（术语数据来自哪里）
迭代过程中的关键习惯
每次只改一件事
如果 AI 一次改了很多东西但你只想改一个，说清楚：
只修改搜索框的大小写问题，不要改动其他任何代码。
每轮迭代后立即运行验证
不要攒着几个修改一起验证——每改一轮就跑一次，确保没有引入新问题。
保留每一轮的版本
用 Git 提交每一轮的结果：
git add dict.html && git commit -m "第一轮：基本功能能跑" git add dict.html && git commit -m "第二轮：添加分类和随机功能" git add dict.html && git commit -m "第三轮：修复大小写和特殊字符 bug" git add dict.html && git commit -m "第四轮：添加动画和已学记录" git add dict.html && git commit -m "第五轮：添加注释和文档"
这样你可以随时回到任意一个版本，也可以对比每轮的改动。
Git 是 Vibe Coding 的安全网。当你让 AI 做大幅修改时，先 commit 当前版本，改坏了就回退。