上一篇【第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?page1size20 // 有分页了但没考虑排序、过滤、错误处理 ✅ 好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-Thought2.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): PromiseResultUser { 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 ✅ 自动使用了相同的返回封装ResultT ✅ 代码风格完全一致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) - 中间件requestValidationzod校验输入 - 日志记录注册请求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?statusactive 从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标签和键盘导航支持总结Prompt质量 代码质量在Vibe Coding中你的描述能力决定了AI的输出上限。差的Prompt产生差的代码这是铁律。四要素框架是写Prompt的基础目标要什么、约束怎么做、格式长什么样、示例参考谁缺一不可。三大技巧按场景选用标准化任务用Zero-Shot需要特定风格用Few-Shot复杂任务用Chain-of-Thought先推理再编码。五种常见错误请避开信息不足、技术栈模糊、一次性要太多、忽略错误处理、不给上下文——每个都会让AI的输出质量断崖式下降。Prompt是可以迭代的第一版不求完美通过渐进式精准逐步调整比一口气写完完美Prompt的速度更快。上一篇【第03篇】Vibe Coding的核心技术原理——LLM如何听懂你的意图下一篇【第05篇】Context Engineering——让AI真正理解你的项目