上一篇【第03篇】Vibe Coding的核心技术原理——LLM如何听懂你的意图
下一篇【第05篇】Context Engineering——让AI真正理解你的项目

---

摘要

如果说Vibe Coding是一辆赛车，那Prompt Engineering就是方向盘。同样的AI模型，有人用三句话搞定一个功能模块，有人来回拉扯十轮还在修Bug——差距在哪？在Prompt的质量。

本文不讲空洞的"写好Prompt很重要"，而是给你一套可操作的方法论：Prompt四要素框架、Zero-Shot/Few-Shot/Chain-of-Thought的实战差异、前端/后端/全栈场景的Prompt模板库，以及最常见的5种Prompt错误和修正方案。读完这篇，你对AI说的每一句话都会更值钱。

---

一、为什么Prompt是Vibe Coding的第一性技能？

1.1 同一个任务，不同的Prompt，天差地别的结果

【Prompt质量的对比实验】

任务：创建一个REST API接口，支持分页查询用户列表

❌ 烂Prompt（三个字）：
"做用户列表"

→ AI生成：
app.get('/users', (req, res) => {
  res.json(users)  // 返回所有用户，无分页，无过滤，无语无伦次
})

⚠️ 普通Prompt：
"创建一个用户列表接口，支持分页查询"

→ AI生成：
GET /api/users?page=1&size=20
// 有分页了，但没考虑排序、过滤、错误处理

✅ 好Prompt：
"创建用户查询接口：
- RESTful GET /api/users
- 支持分页：page(默认1)、pageSize(默认20，最大100)
- 支持排序：sortBy(createdAt/username)，sortOrder(asc/desc)
- 支持过滤：status(active/inactive)、role(admin/user)
- 返回格式：{ code, data: { items, total, page, pageSize }, message }
- 错误处理：参数校验失败返回400，服务异常返回500
- 使用TypeScript + Express + Prisma"

→ AI生成：完整、健壮、可直接上线的接口代码

1.2 Prompt质量的"四要素"框架

【Prompt四要素框架】

一个好的Prompt = 目标 + 约束 + 格式 + 示例

┌─────────────────────────────────────────────┐
│ 要素1：目标（要什么）                          │
│ 清晰描述你想要什么功能或结果                     │
│ "创建一个用户登录接口" ← 太模糊                │
│ "创建用户名+密码登录，返回JWT token" ← 清晰    │
├─────────────────────────────────────────────┤
│ 要素2：约束（怎么做）                          │
│ 技术栈、代码风格、边界条件、性能要求              │
│ "用TypeScript，错误统一用throw，别用any"        │
├─────────────────────────────────────────────┤
│ 要素3：格式（长什么样）                         │
│ 输入输出格式、响应结构、命名规范                  │
│ "返回 { code: 0, data: { token, user } }"    │
├─────────────────────────────────────────────┤
│ 要素4：示例（参考谁）                           │
│ 已有代码的风格参考、类似功能的实现                │
│ "参考 authService.ts 的风格来写"               │
└─────────────────────────────────────────────┘

---

二、三大Prompt技巧：Zero-Shot、Few-Shot、Chain-of-Thought

2.1 Zero-Shot——裸提需求

Zero-Shot就是不提供任何示例，直接提需求。这是Vibe Coding中最常用的方式，适合标准化的开发任务。

【Zero-Shot Prompt示例】

你：用React写一个带搜索功能的下拉选择器组件

AI：[直接生成组件代码]

适用场景：
✅ CRUD接口开发
✅ 标准UI组件
✅ 配置文件生成
✅ 单元测试

不适用场景：
❌ 复杂的业务逻辑
❌ 需要特定代码风格的场景
❌ 具有多种正确实现方式的模糊任务

2.2 Few-Shot——给AI看"标准答案"

当你需要特定的代码风格或实现方式时，给AI一两个示例能大幅提升输出质量。

【Few-Shot Prompt示例】

你：
"参考以下代码风格，写一个updateUser函数：

// 示例：createUser函数的风格
async function createUser(input: CreateUserInput): Promise<Result<User>> {
  logger.info('[UserService] 创建用户', { username: input.username });
  
  const existing = await this.userRepo.findByUsername(input.username);
  if (existing) {
    throw new BusinessError('USER_EXISTS', '用户名已存在');
  }
  
  const hashedPassword = await bcrypt.hash(input.password, 10);
  const user = await this.userRepo.create({
    ...input,
    password: hashedPassword,
    createdAt: new Date(),
  });
  
  logger.info('[UserService] 用户创建成功', { userId: user.id });
  return Result.success(user);
}

现在请用相同的风格写updateUser函数"

AI输出质量：
✅ 自动使用了相同的日志风格
✅ 自动使用了相同的错误处理模式（BusinessError）
✅ 自动使用了相同的返回封装（Result<T>）
✅ 代码风格完全一致

2.3 Chain-of-Thought——让AI"先说思路再写代码"

对于复杂的开发任务，让AI先展示思路、再写代码，质量能提升一个档次。

【Chain-of-Thought Prompt示例】

你：
"我需要实现一个购物车功能，请按以下步骤思考并实现：

1. 先分析需求：
   - 购物车需要支持哪些操作？
   - 数据应该存在哪里（前端缓存/后端/Redis）？
   - 并发场景（多Tab同时操作）怎么处理？

2. 再设计架构：
   - 用什么数据结构？
   - REST API怎么设计？
   - 前端状态管理方案？

3. 最后写代码：
   - 按上述分析结果，实现完整功能"

AI的CoT推理过程：
"首先分析需求……购物车需要增删改查、数量变更、
总价计算、优惠券应用。考虑到未登录用户也能加购物车，
数据应该前端临时存储+后端持久化双写……

其次设计架构……后端用Redis存储临时购物车，
用户登录后合并到数据库。API设计为RESTful风格……

现在开始写代码……"

→ 生成的结果经过充分推理，逻辑完整、边界清晰

【三大技巧选择决策树】

你的任务是否标准/常见？
    ├─ 是 → Zero-Shot（直接提需求）
    └─ 否 →
        你的代码风格是否特殊？
            ├─ 是 → Few-Shot（给示例）
            └─ 否 →
                任务是否复杂/多步骤？
                    ├─ 是 → Chain-of-Thought（先说再写）
                    └─ 否 → Zero-Shot

---

三、按场景分类的Prompt模板库

3.1 前端开发Prompt模板

【前端组件生成模板】

创造一个【组件名称】组件，要求：
- 功能：【具体功能描述】
- Props：{ prop1: type, prop2: type, ... }
- 状态管理：【useState / useReducer / Zustand】
- 样式：【Tailwind CSS / CSS Modules / styled-components】
- 交互：【点击/悬停/拖拽等行为】
- 无障碍：【键盘导航、ARIA标签】
- 响应式：【移动端/桌面端适配要求】

例：
"创造一个DataTable组件，要求：
- 功能：展示表格数据，支持排序、筛选、分页、行选择
- Props：{ columns: Column[], data: T[], pageSize?: number, onRowClick?: (row) => void }
- 状态管理：useState（当前页、排序字段、筛选条件）
- 样式：Tailwind CSS，白色背景，圆角边框
- 交互：点击表头排序、搜索框实时筛选、底部页码翻页
- 无障碍：表头可Tab导航，排序按钮有aria-label
- 响应式：移动端卡片式布局"

3.2 后端开发Prompt模板

【后端API接口生成模板】

创建【接口名称】接口：
- 方法：【GET/POST/PUT/DELETE】
- 路径：【/api/v1/users】
- 技术栈：【Express + TypeScript + Prisma】
- 请求参数：【query/body/path参数的详细说明】
- 返回格式：{ code: number, data: T, message: string }
- 业务逻辑：【详细的数据处理逻辑】
- 错误处理：【各异常情况的处理方式】
- 中间件：【auth / validation / rateLimit】
- 日志：【关键操作的日志记录点】

例：
"创建用户注册接口：
- 方法：POST /api/v1/auth/register
- 技术栈：Express + TypeScript + Prisma + PostgreSQL
- 请求体：{ username: string, email: string, password: string }
- 返回格式：{ code: 0, data: { user: {...}, token: 'jwt...' }, message: '注册成功' }
- 业务逻辑：检查用户名/邮箱唯一性 → bcrypt加密密码 → 创建用户 → 生成JWT
- 错误处理：用户名已存在(409)、邮箱已注册(409)、参数校验失败(400)
- 中间件：requestValidation（zod校验输入）
- 日志：记录注册请求IP、注册结果、耗时"

3.3 代码重构Prompt模板

【代码重构模板】

重构以下代码，目标：
- 提升可读性：【拆分大函数 / 提取常量 / 优化命名】
- 提升性能：【减少不必要的计算 / 缓存 / 懒加载】
- 改进架构：【抽取公共逻辑 / 减少耦合 / 单一职责】
- 添加类型：【补全TypeScript类型 / 替换any】
- 不改变：【保持外部接口不变 / 保持原有功能行为】

原始代码：
【粘贴代码】

---

四、5个最常见的Prompt错误与修正

错误1：信息不足

❌ "帮我写个登录功能"
   → AI不清楚：什么方式登录？返回什么？用什么技术？

✅ "创建用户名+密码的登录接口：
   POST /api/auth/login
   接收 { username, password }
   验证密码（bcrypt比较）
   返回 { token: JWT, user: { id, username, avatar } }
   JWT有效期7天，包含 userId 和 role"

错误2：技术栈不明确

❌ "写个数据导出的功能"
   → AI可能用Python、Java、Node.js……什么框架？什么库？

✅ "用Node.js + Express写一个CSV导出接口：
   GET /api/users/export?status=active
   从MySQL查询数据（使用已有的sequelize User模型）
   用csv-writer库生成CSV并返回下载"

错误3：一次性要求太多

❌ "帮我开发一个电商系统，包括用户模块、商品模块、
   订单模块、支付模块、物流模块"
   → AI乱套：上下文不够，逻辑混乱，各种遗漏

✅ 分步进行：
   第1步："先设计电商系统的数据库ER图"
   第2步："根据ER图，创建User模块的Model和Migration"
   第3步："创建User模块的CRUD接口"
   ……逐步推进

错误4：忽略错误处理

❌ "创建一个文件上传接口"
   → AI可能只生成正常流程的代码，不处理错误情况

✅ "创建文件上传接口：
   - 支持的格式：jpg、png、pdf，最大10MB
   - 文件名自动生成UUID，保留原始扩展名
   - 上传到阿里云OSS
   - 校验失败返回400 + 具体原因
   - OSS上传失败重试3次，失败返回500
   - 上传成功返回文件URL和文件信息"

错误5：不给上下文

❌ 在新对话中直接说："加一个导出功能"
   → AI不知道项目结构、技术栈、现有代码风格

✅ "在现有的用户管理模块中添加CSV导出功能。
   参考 UserController.ts 和 UserService.ts 的代码风格。
   使用项目已有的 csv-export-utils.ts 工具函数。"

---

五、Prompt的迭代优化策略

5.1 "渐进式精准"法

【Prompt迭代优化循环】

第1轮（宽泛描述）
"创建一个用户管理页面"
         ↓
    AI生成 → 基本框架对，但缺细节
         ↓
第2轮（补充细节）
"加上搜索和分页，每页20条"
         ↓
    AI生成 → 功能完善了，但样式不对
         ↓
第3轮（纠正偏差）
"用项目的主题色，参考 Dashboard.tsx 的布局"
         ↓
    AI生成 → 基本符合预期
         ↓
第4轮（收尾打磨）
"给表格加上加载状态和空数据提示，错误时显示重试按钮"
         ↓
    ✅ 完成

5.2 常见修正指令速查

【Prompt修正速查表】

当AI生成的代码出现以下问题时，用对应指令修正：

问题                      修正指令
─────────────────────────────────────────────
代码太长、不够精简          "精简代码，去掉不必要的注释和空行"
缺少类型定义                "补全TypeScript类型，替换所有any"
没有错误处理                "给所有async函数加上try-catch"
命名不规范                  "用驼峰命名，变量名要完整有意义"
没有测试                    "给这个模块写单元测试，覆盖率>80%"
样式不符合预期              "参考[文件路径]的样式风格"
性能不够好                  "优化性能，减少不必要的渲染"
缺少可访问性                "添加ARIA标签和键盘导航支持"

---

总结

1. Prompt质量 = 代码质量：在Vibe Coding中，你的描述能力决定了AI的输出上限。差的Prompt产生差的代码，这是铁律。
2. 四要素框架是写Prompt的基础：目标（要什么）、约束（怎么做）、格式（长什么样）、示例（参考谁），缺一不可。
3. 三大技巧按场景选用：标准化任务用Zero-Shot，需要特定风格用Few-Shot，复杂任务用Chain-of-Thought先推理再编码。
4. 五种常见错误请避开：信息不足、技术栈模糊、一次性要太多、忽略错误处理、不给上下文——每个都会让AI的输出质量断崖式下降。
5. Prompt是可以迭代的：第一版不求完美，通过"渐进式精准"逐步调整，比一口气写完完美Prompt的速度更快。

---

上一篇【第03篇】Vibe Coding的核心技术原理——LLM如何听懂你的意图
下一篇【第05篇】Context Engineering——让AI真正理解你的项目

---