# Vibe Coding 指南 > 与 AI 协作的现代编程范式 --- ## 目录 - [什么是 Vibe Coding？](#什么是-vibe-coding) - [核心理念](#核心理念) - [完美提示词的六大要素](#完美提示词的六大要素) - [高级技巧](#高级技巧) - [三种工作模式](#三种工作模式) - [常见陷阱与避坑指南](#常见陷阱与避坑指南) - [黄金公式](#黄金公式) - [进阶心法](#进阶心法) - [实战案例](#实战案例) - [性能与成本优化](#性能与成本优化) - [附录](#附录) --- ## 什么是 Vibe Coding？ **Vibe Coding** 是一种全新的编程范式，它改变了我们与代码交互的方式。 ### 传统编程 vs Vibe Coding | 维度 | 传统编程 | Vibe Coding | | ------------ | ------------------ | --------------------- | | **工作方式** | 手写每一行代码 | 描述意图，AI 生成代码 | | **关注点** | 如何实现（How） | 要实现什么（What） | | **开发流程** | 编码 → 调试 → 优化 | 描述 → 审查 → 迭代 | | **技能要求** | 精通语法和 API | 清晰表达 + 代码审查 | | **效率提升** | 线性增长 | 指数级增长 | ### 核心价值 **Vibe Coding 不是让 AI 替你写代码，而是让 AI 成为你的编程伙伴**： - **你负责**：架构设计、业务逻辑、质量把控 - **AI 负责**：代码生成、重复劳动、方案探索 - **共同完成**：快速迭代、持续优化、创造价值 --- ## 核心理念 ### 1. Think in Outcomes, Not Implementation **关注结果，而非实现细节** ``` ❌ 传统思维： "帮我写一个 for 循环，遍历 users 数组，判断 status === 'active'，然后 push 到新数组，最后 map 提取 name 和 email" ✅ Vibe Coding 思维： "从 users 中筛选出所有活跃用户，返回他们的姓名和邮箱" ``` **为什么这样更好？** - AI 可能使用更优雅的 `filter` + `map` 组合 - AI 可能考虑到性能优化（如使用 `reduce` 一次遍历） - AI 可能添加类型安全和错误处理 ### 2. Iterate, Don't Perfect **快速迭代，而非追求一次完美** ``` 第1轮：实现基础功能（能用） "实现用户登录功能，支持手机号+验证码" 第2轮：优化用户体验（好用） "添加验证码倒计时、输入框自动聚焦、错误提示" 第3轮：性能优化（快用） "优化登录接口调用，添加请求缓存和防抖" 第4轮：完善细节（爱用） "添加登录动画、记住登录状态、支持生物识别" ``` ### 3. Context is King **上下文决定代码质量** AI 需要了解你的"世界观"： - **技术栈**：Vue 3 + TypeScript + Pinia - **项目结构**：页面、组件、API、Store 的组织方式 - **编码规范**：命名规则、代码风格、注释要求 - **业务逻辑**：用户角色、权限系统、业务流程 **提供上下文的方式**： - 使用 `@文件名` 引用相关文件 - 在 `.cursorrules` 中定义项目规范 - 在提示词中说明技术约束 - 提供参考示例或类似功能 --- ## 完美提示词的六大要素 ### 1. 明确的目标 (What) **说清楚要做什么** ``` ✅ 好的目标： "实现用户登录功能，支持手机号+验证码和账号+密码两种方式" ❌ 模糊的目标： "做个登录" ``` ### 2. 清晰的上下文 (Where & Why) **说明在哪里做，为什么做** ``` ✅ 好的上下文： "在 @src/pages/login/index.vue 中实现，因为现有的登录只支持账号密码，产品要求增加验证码登录方式以提升用户体验" ❌ 缺少上下文： "加个验证码登录" ``` ### 3. 技术约束 (How) **说明使用什么技术，如何实现** ``` ✅ 好的技术约束： "使用 Vue 3 Composition API + TypeScript，调用 POST /api/v1/auth/login 接口，验证码倒计时 60 秒，使用 uni.request 发送请求" ❌ 缺少技术约束： "用 Vue 做" ``` ### 4. 边界条件 (Constraints) **说明不能做什么，有什么限制** ``` ✅ 好的边界条件： "不要修改现有的账号密码登录逻辑，验证码输入框只允许数字，发送验证码前要校验手机号格式（11位数字），同一手机号 60 秒内只能发送一次验证码" ❌ 没有边界条件：（任何约束都没有提） ``` ### 5. 预期结果 (Success Criteria) **说明完成后应该是什么样子** ``` ✅ 好的预期结果： "完成后应该能够： 1. 输入手机号，点击发送验证码 2. 60秒倒计时，期间按钮禁用显示剩余秒数 3. 输入6位数字验证码 4. 点击登录按钮，显示加载状态 5. 登录成功后保存 token 并跳转到首页 6. 登录失败显示错误提示" ❌ 没有验收标准：（不知道怎么算完成） ``` ### 6. 示例或参考 (Examples) **提供参考实现或设计稿** ``` ✅ 好的参考： "参考 @src/pages/login/password.vue 的样式和布局，验证码输入框类似支付宝的 6 位数字输入（每位一个框），整体风格保持与现有登录页一致" ❌ 没有参考：（AI 只能猜测你想要什么样式） ``` --- ## 高级技巧 ### 技巧 1：分层提示（Layer Prompting） **不要一次性要求所有细节，而是分层递进** #### 第1层：架构层 ``` "设计一个用户认证系统，包含以下功能： - 登录（手机号+验证码、账号+密码） - 注册（手机号+验证码） - 找回密码 - 修改密码请给出整体架构设计和文件组织结构" ``` #### 第2层：功能层 ``` "先实现登录功能，支持手机号+验证码和账号+密码两种方式，包括： - 登录页面 UI - 表单验证 - API 调用 - Token 存储 - 路由跳转" ``` #### 第3层：实现层 ``` "实现手机号+验证码登录，具体包括： 1. 手机号输入框（带格式校验） 2. 发送验证码按钮（带倒计时） 3. 验证码输入框（6位数字） 4. 登录按钮（带加载状态） 5. 错误提示" ``` #### 第4层：细节层 ``` "优化验证码输入体验： - 自动聚焦到第一个输入框 - 输入一位后自动跳到下一位 - 支持粘贴6位验证码自动填充 - 输入完成后自动触发登录 - 支持删除时自动回到上一位" ``` ### 技巧 2：对话式调试（Conversational Debugging） **把 AI 当作结对编程的伙伴** ``` 你："这个登录功能有问题，点击按钮没反应" AI："让我检查一下... 发现 handleLogin 方法没有绑定到按钮的 @click 事件" 你："修复后还是不行，控制台报错 'token is undefined'" AI："看起来 API 返回的数据结构不对，让我检查 @src/api/auth.ts... 发现接口返回的是 data.access_token，但代码中用的是 data.token" 你："对，后端改了字段名，同步更新一下类型定义和 mock 数据" AI："已更新 @src/types/auth.ts 中的 ILoginResponse 接口，同时更新了 @src/mock/data/auth.ts 中的 mock 数据" ``` ### 技巧 3：模板化常见任务（Template Prompts） **为重复性任务创建提示词模板** #### 模板 1：创建 CRUD 页面 ``` 创建 [资源名称] 的 CRUD 页面：文件结构： - 列表页：@src/pages/[资源]/list.vue - 详情页：@src/pages/[资源]/detail.vue - 编辑页：@src/pages/[资源]/edit.vue - API：@src/api/[资源].ts - 类型：@src/types/[资源].ts - Store：@src/stores/use[资源]Store.ts 列表页功能： - 搜索栏（[字段1]、[字段2]） - 数据表格（[列1]、[列2]、操作列） - 分页组件 - 新增按钮详情页功能： - 展示所有字段 - 编辑按钮 - 删除按钮编辑页功能： - 表单（所有可编辑字段） - 表单验证 - 保存按钮 - 取消按钮使用项目规范，参考 @src/pages/user 的实现 ``` #### 模板 2：创建业务组件 ``` 创建 [组件名称] 组件：文件位置：@src/components/[组件名称]/index.vue Props： - [prop1] (类型): 描述 - [prop2] (类型): 描述 Emits： - [event1]: 描述 - [event2]: 描述功能： 1. [功能1描述] 2. [功能2描述] 样式要求： - [样式要求1] - [样式要求2] 参考：@src/components/[类似组件] ``` #### 模板 3：API 接口对接 ``` 对接 [接口名称] 接口：接口信息： - 路径：[METHOD] /api/v1/[path] - 描述：[接口功能描述] 请求参数： - [param1] (类型, 必填/可选): 描述 - [param2] (类型, 必填/可选): 描述返回数据： - [field1] (类型): 描述 - [field2] (类型): 描述需要： 1. 在 @src/api/[模块].ts 中添加接口方法 2. 在 @src/types/[模块].ts 中定义类型 3. 在 @src/mock/handlers.ts 中添加 mock 4. 在 [调用位置] 中调用接口 ``` ### 技巧 4：增量式重构（Incremental Refactoring） **不要一次性重构整个文件，而是逐步优化** ``` 第1步："提取 @src/pages/user/list.vue 中的搜索逻辑到 useSearch composable" ↓ 第2步："将表格配置抽离到 @src/pages/user/config/tableConfig.ts" ↓ 第3步："优化分页逻辑，使用 @src/composables/base/usePagination.ts" ↓ 第4步："添加列表数据缓存，避免重复请求" ↓ 第5步："添加骨架屏加载状态" ``` ### 技巧 5：约束驱动开发（Constraint-Driven Development） **通过约束引导 AI 生成更好的代码** ``` 实现用户列表功能，严格遵守以下约束：代码质量约束： 1. 单个函数不超过 50 行 2. 单个文件不超过 300 行 3. 所有异步操作必须有错误处理 4. 使用 TypeScript 严格模式，不允许 any 5. 所有函数必须有 JSDoc 注释架构约束： 1. 组件拆分：搜索栏、表格、分页各自独立 2. 逻辑抽离：使用 composable 管理状态 3. 类型定义：所有接口和数据结构必须定义类型 4. 错误处理：使用统一的 errorHandler 性能约束： 1. 支持 10000 条数据的虚拟滚动 2. 搜索防抖 300ms 3. 图片懒加载 4. 列表数据缓存 5 分钟可访问性约束： 1. 支持键盘导航（Tab、Enter、Esc） 2. 支持屏幕阅读器 3. 颜色对比度符合 WCAG 2.1 AA 标准 ``` ### 技巧 6：元提示（Meta Prompting） **让 AI 帮你写提示词** ``` "我想实现一个复杂的数据可视化功能，但不知道如何描述清楚，请帮我生成一个完整的提示词，包含所有必要的信息和约束条件。需求概述： - 展示用户增长趋势图（折线图） - 支持按日/周/月切换 - 支持数据导出 - 需要响应式设计请生成一个结构化的提示词" ``` 或者： ``` "根据我的需求，生成一个分步骤的实现计划：需求：实现一个支持多人协作的在线白板技术栈：Vue 3 + TypeScript + WebSocket + Canvas 请给出： 1. 整体架构设计 2. 详细的实现步骤 3. 每一步的具体提示词 4. 需要注意的技术难点" ``` --- ## 三种工作模式 ### 模式 1：探索模式（Exploration Mode） **适用场景**：不确定如何实现，需要探索方案 ``` "我想实现一个拖拽排序的功能，但不确定用什么库比较好，项目是 Vue 3 + TypeScript + uni-app，需要支持移动端触摸拖拽，请给我几个方案对比，包括： 1. 推荐的库（开源、维护活跃、支持 TypeScript） 2. 各方案的优缺点 3. 性能对比 4. 集成难度 5. 你的推荐和理由" ``` **AI 的回应方式**： - 提供多个方案对比 - 分析每个方案的适用场景 - 给出具体的推荐和理由 ### 模式 2：执行模式（Execution Mode） **适用场景**：明确知道要做什么，快速实现 ``` "在 @src/components/DragList.vue 中使用 Sortable.js 实现拖拽排序： 1. 安装依赖： - sortablejs - @types/sortablejs 2. 创建 @src/composables/useDraggable.ts 封装拖拽逻辑 3. 功能要求： - 支持拖拽排序 - 拖拽时显示占位符 - 拖拽结束触发 @change 事件，返回新的排序 - 支持禁用拖拽（通过 disabled prop） 4. 样式要求： - 拖拽中的元素半透明 - 占位符显示虚线边框 - 拖拽手柄显示拖拽图标参考 @src/components/SortableTable.vue 的实现" ``` **AI 的回应方式**： - 直接生成代码 - 按步骤实现功能 - 提供必要的说明 ### 模式 3：优化模式（Optimization Mode） **适用场景**：功能已实现，需要优化 ``` "优化 @src/components/DragList.vue 的性能和用户体验：性能优化： 1. 分析当前性能瓶颈（使用 Vue DevTools） 2. 优化拖拽时的重渲染问题（使用 v-memo） 3. 添加虚拟滚动支持大列表（1000+ 项） 4. 优化事件监听（使用事件委托）体验优化： 1. 优化移动端触摸体验（增大触摸区域） 2. 添加拖拽动画（使用 FLIP 技术） 3. 添加触觉反馈（移动端震动） 4. 改进无障碍支持（键盘操作）监控： 1. 添加性能监控埋点 2. 记录拖拽操作日志 3. 监控错误和异常" ``` **AI 的回应方式**： - 分析现有代码 - 指出优化点 - 提供优化方案 - 实施优化 --- ## 常见陷阱与避坑指南 ### 陷阱 1：过度依赖 AI **问题表现**： - 完全不看 AI 生成的代码，直接复制粘贴 - 不理解代码逻辑，出问题无法调试 - 代码风格不统一，不符合项目规范 **正确做法**： ``` ✅ 审查每一行代码 ✅ 理解核心逻辑 ✅ 验证类型定义 ✅ 检查错误处理 ✅ 确保符合项目规范 ✅ 运行测试验证功能 ``` ### 陷阱 2：提示词过于模糊 **问题表现**： ``` ❌ "优化一下性能" ❌ "改好看一点" ❌ "修复一下 bug" ``` **正确做法**： ``` ✅ "优化列表渲染性能，目标：1000条数据渲染时间从 500ms 降到 100ms 以内" ✅ "按照 Figma 设计稿调整样式，主要是：间距、颜色、圆角、阴影" ✅ "修复登录按钮点击无反应的问题，控制台报错：'Cannot read property token of undefined'" ``` ### 陷阱 3：忽略上下文 **问题表现**： - 每次都从零开始描述 - 不引用相关文件 - AI 不了解项目结构 **正确做法**： ``` ✅ 使用 @文件名引用相关文件 ✅ 说明项目技术栈和规范 ✅ 提供参考实现 ✅ 说明业务背景 ``` ### 陷阱 4：一次性要求太多 **问题表现**： ``` ❌ "实现整个电商系统，包括：商品管理、订单管理、用户管理、支付系统、物流系统、营销系统、数据分析、客服系统..." ``` **正确做法**： ``` ✅ 第1步："先实现商品列表页，包括搜索、筛选、分页" ✅ 第2步："实现商品详情页，包括图片轮播、规格选择、加入购物车" ✅ 第3步："实现购物车功能，包括商品列表、数量修改、结算" ✅ ...逐步推进 ``` ### 陷阱 5：不验证结果 **问题表现**： - AI 说完成了就完成了 - 不运行代码测试 - 不检查类型错误 - 不测试边界情况 **正确做法**： ``` ✅ 运行代码，测试功能 ✅ 检查 TypeScript 类型错误 ✅ 测试边界情况（空数据、错误数据、极端数据） ✅ 检查性能（大数据量、慢网络） ✅ 测试兼容性（不同浏览器、不同设备） ``` ### 陷阱 6：忽视代码质量 **问题表现**： - 只关注功能实现，不关注代码质量 - 代码重复、结构混乱 - 没有注释、类型定义不完整 **正确做法**： ``` ✅ 要求 AI 遵守代码规范 ✅ 要求添加注释和类型定义 ✅ 要求代码模块化、可复用 ✅ 要求添加错误处理 ✅ 定期重构优化 ``` --- ## 黄金公式 ### 完美提示词 = 7 个要素 ``` [角色设定] + [任务目标] + [上下文] + [技术栈] + [约束条件] + [预期结果] + [参考示例] ``` ### 实战示例 ``` 你是一个 Vue 3 + TypeScript 专家（角色设定），帮我在 @src/pages/product/list.vue 中实现商品列表功能（任务目标），这是一个电商小程序项目，需要展示商品列表并支持筛选，商品数据来自后端 API，用户可以通过分类、价格、销量等条件筛选商品（上下文），使用 Vue 3 Composition API + TypeScript + Pinia + uni-app，调用 GET /api/v1/products 接口获取商品列表（技术栈），要求： 1. 不修改现有的 TabBar 组件和路由配置 2. 支持下拉刷新和上拉加载更多 3. 筛选条件包括：分类、价格区间、销量排序 4. 单个组件不超过 300 行，复杂逻辑抽离到 composable 5. 所有类型必须明确定义，不使用 any 6. 图片使用懒加载 7. 列表数据缓存 5 分钟（约束条件）完成后应该能够： 1. 进入页面自动加载第一页数据（20条） 2. 下拉刷新重置列表并重新加载 3. 滚动到底部自动加载下一页 4. 点击筛选按钮打开筛选面板 5. 选择筛选条件后列表自动更新 6. 点击商品卡片跳转到详情页 7. 显示加载状态和空状态（预期结果）参考 @src/pages/order/list.vue 的列表实现方式和 @src/components/FilterPanel.vue 的筛选面板样式（参考示例） ``` ### 简化版（日常使用）对于简单任务，可以使用简化版： ``` 在 @src/components/ProductCard.vue 中实现商品卡片组件： - Props: product (IProduct 类型) - 显示：商品图片、名称、价格、销量 - 点击跳转到商品详情页 - 样式参考 @src/components/OrderCard.vue ``` --- ## 进阶心法 ### 心法 1：Think Like a Product Manager **不要只想"怎么实现"，要想"为什么实现"、"用户会怎么用"** ``` 不只是："实现搜索功能" 而是： "实现搜索功能，因为用户需要快速找到商品，支持： - 模糊搜索（匹配商品名称、描述、标签） - 搜索历史（最多保存 10 条，支持删除） - 热门搜索推荐（显示 TOP 10 热搜词） - 搜索结果高亮关键词 - 无结果时推荐相关商品 - 搜索防抖（300ms） - 支持语音搜索（调用微信语音识别 API）" ``` ### 心法 2：Embrace Iteration **第一版不需要完美，快速出原型，然后迭代优化** ``` V1: 基础功能（能用） - 实现核心功能 - 基本的 UI - 简单的错误处理 V2: 优化体验（好用） - 优化交互流程 - 改进视觉设计 - 添加加载状态 - 完善错误提示 V3: 性能优化（快用） - 优化渲染性能 - 添加缓存机制 - 图片懒加载 - 请求防抖节流 V4: 完善细节（爱用） - 添加动画效果 - 优化无障碍支持 - 完善边界情况 - 添加埋点统计 ``` ### 心法 3：Build a Knowledge Base **把常用的提示词、代码模板、最佳实践整理成文档** 建议创建以下文档： ``` docs/ ├── prompts/ │ ├── component-templates.md # 组件开发模板 │ ├── api-integration.md # API 对接模板 │ ├── page-templates.md # 页面开发模板 │ └── refactoring-checklist.md # 重构检查清单 ├── standards/ │ ├── code-style.md # 代码风格规范 │ ├── naming-conventions.md # 命名规范 │ ├── typescript-guide.md # TypeScript 使用指南 │ └── performance-checklist.md # 性能优化清单 └── best-practices/ ├── vue3-patterns.md # Vue 3 最佳实践 ├── error-handling.md # 错误处理最佳实践 ├── state-management.md # 状态管理最佳实践 └── testing-guide.md # 测试指南 ``` ### 心法 4：Teach the AI Your Style **通过 `.cursorrules` 或项目规范文件，让 AI 了解你的编码风格** ```typescript // .cursorrules 示例 # 项目规范 ## 技术栈 - Vue 3 + TypeScript + Pinia + uni-app - 使用 Composition API + ``` #### 4. 智能使用不同的 AI 模型 **根据任务选择模型** | 任务类型 | 推荐模型 | 原因 | | -------------------- | ---------------------- | ------------------ | | 简单重复任务 | GPT-3.5 / Claude Haiku | 更快更便宜 | | 代码格式化、简单重构 | GPT-3.5 | 成本低，速度快 | | 复杂架构设计 | GPT-4 / Claude Sonnet | 理解力强，质量高 | | 代码审查 | Claude Sonnet | 注重细节，准确度高 | | 算法优化 | GPT-4 Turbo | 推理能力强 | **Cursor 快捷键优化** ``` Cmd/Ctrl + K - 快速编辑（适合小改动，token 消耗少） Cmd/Ctrl + L - 聊天模式（适合复杂问题） Cmd/Ctrl + I - 内联编辑（最省 token） ``` #### 5. 代码复用和组件化 **建立组件库** ```typescript // 优先使用现有组件，减少重复生成 components/ ├── Base/ // 基础组件（高复用） │ ├── BaseButton.vue │ ├── BaseInput.vue │ └── BaseEmpty.vue ├── Business/ // 业务组件（中复用） │ ├── RegionPicker/ │ └── SkuPopup/ └── [Page]/ // 页面组件（低复用） ``` **使用 Composables 复用逻辑** ```typescript // composables/useOrder.ts export function useOrder() { // 订单相关逻辑 const orders = ref([]) const loading = ref(false) const fetchOrders = async () => { // ... } return { orders, loading, fetchOrders } } // 在多个页面中复用，而不是重复生成 import { useOrder } from '@/composables' ``` #### 6. 增量式开发 **先骨架后细节** ``` 第一步：生成页面结构和路由（快速搭建） "创建订单列表页面的基础结构" 第二步：实现核心功能（能用） "实现订单列表的数据加载和展示" 第三步：添加交互（好用） "添加搜索、筛选、排序功能" 第四步：优化体验（爱用） "添加加载状态、空状态、错误处理" 第五步：性能优化（快用） "优化列表渲染性能，添加虚拟滚动" ``` **使用 TODO 标记** ```typescript // ✅ 让 AI 只实现关键部分 const handleSubmit = async () => { // TODO: 添加表单验证 // TODO: 调用 API // TODO: 处理错误 // TODO: 成功后跳转 } // 然后分别让 AI 实现每个 TODO // 每次只消耗少量 token ``` #### 7. 利用缓存和记忆 **使用 Cursor 的记忆功能** ``` 让 AI 记住： - 项目特定的约定和规范 - 常用的代码模式 - 你的偏好设置 - 团队的命名规则这样每次对话不需要重复说明 ``` **本地代码搜索优先** ``` 工作流程： 1. ✅ 先用 Cmd/Ctrl + P 搜索现有代码 2. ✅ 再用 Cmd/Ctrl + Shift + F 全局搜索 3. ✅ 查看项目文档和注释 4. ❌ 最后才问 AI（如果找不到）这样可以节省 50-70% 的 AI 调用 ``` #### 8. 成本对比与选择 **主流 AI 模型成本对比（2026年1月）** | 模型 | 输入成本 | 输出成本 | 适用场景 | | ------------- | ------------------ | ------------------ | ------------------ | | GPT-4 Turbo | $0.01/1K tokens | $0.03/1K tokens | 复杂架构、算法设计 | | Claude Sonnet | $0.003/1K tokens | $0.015/1K tokens | 代码审查、重构 | | GPT-3.5 Turbo | $0.0005/1K tokens | $0.0015/1K tokens | 简单任务、格式化 | | Claude Haiku | $0.00025/1K tokens | $0.00125/1K tokens | 重复性任务 | **节省成本的策略** ``` 1. 简单问题用便宜模型 - 代码格式化 → GPT-3.5 - 简单重构 → Claude Haiku - 类型定义 → GPT-3.5 2. 复杂问题用高级模型 - 架构设计 → GPT-4 Turbo - 性能优化 → Claude Sonnet - 算法实现 → GPT-4 3. 批量处理 - 一次性处理多个相关任务 - 减少对话轮次 - 提高 token 利用率 4. 使用本地工具 - ESLint（代码检查） - Prettier（代码格式化） - TypeScript（类型检查） - 不需要 AI 的不用 AI ``` #### 9. 其他 AI 编码工具对比 **GitHub Copilot** - **优势**：实时补全，速度快，IDE 集成好 - **适用**：日常编码、快速补全、代码片段 - **成本**：$10/月（固定费用） - **推荐场景**：作为基础工具，处理 80% 的日常编码 **Codeium** - **优势**：免费，支持多种 IDE，功能全面 - **适用**：预算有限的开发者、学习阶段 - **成本**：免费（个人版） - **推荐场景**：个人项目、学习练习 **Tabnine** - **优势**：可本地部署，隐私性好，企业级 - **适用**：企业级项目、隐私敏感项目 - **成本**：$12-39/月 - **推荐场景**：企业项目、对代码隐私有要求 **Cursor** - **优势**：深度集成，上下文理解好，多模型支持 - **适用**：复杂项目、架构设计、代码重构 - **成本**：$20/月（Pro） - **推荐场景**：专业开发、复杂业务逻辑 **推荐组合方案** ``` 方案 1：性价比最高 - 日常编码：GitHub Copilot（$10/月） - 复杂问题：Cursor + Claude Sonnet（$20/月） - 总成本：$30/月方案 2：预算有限 - 日常编码：Codeium（免费） - 复杂问题：Claude API 直接调用（按需付费） - 总成本：<$10/月方案 3：专业开发 - 日常编码：GitHub Copilot（$10/月） - 架构设计：Cursor + GPT-4（$20/月） - 代码审查：Claude Sonnet API（按需） - 总成本：$30-40/月方案 4：团队协作 - 统一使用 Cursor Team（$40/月/人） - 配置团队规则和知识库 - 共享最佳实践和提示词模板 ``` #### 10. 实战优化示例 **优化前（低效方式）** ``` 对话轮次：15 轮 Token 消耗：约 50,000 tokens 时间：45 分钟成本：约 $0.75 问题： - 每次都重新描述需求 - 没有引用相关文件 - 一次性要求太多功能 - 频繁修改和调整 ``` **优化后（高效方式）** ``` 对话轮次：5 轮 Token 消耗：约 15,000 tokens 时间：15 分钟成本：约 $0.23 改进： - 使用 @文件名精确引用 - 分步骤实现，每步明确 - 利用项目规则，减少重复说明 - 使用模板和参考实现 ``` **节省效果** ``` Token 节省：70% 时间节省：67% 成本节省：69% 质量提升：代码更规范，bug 更少 ``` #### 11. 最佳实践清单 **开始编码前** - [ ] 明确任务目标和范围 - [ ] 准备好相关文件引用 - [ ] 检查是否有类似实现可参考 - [ ] 确认技术栈和约束条件 - [ ] 选择合适的 AI 模型 **编码过程中** - [ ] 只添加必要文件到上下文 - [ ] 使用 `@文件名` 精确引用 - [ ] 问题描述清晰具体 - [ ] 分步骤实现，逐步验证 - [ ] 及时清理长对话 **代码生成后** - [ ] 审查每一行代码 - [ ] 验证类型定义 - [ ] 测试功能和边界情况 - [ ] 检查性能和安全性 - [ ] 确保符合项目规范 **持续优化** - [ ] 总结有效的提示词模板 - [ ] 建立项目知识库 - [ ] 记录常见问题和解决方案 - [ ] 定期回顾和优化工作流 - [ ] 与团队分享最佳实践 ### 性能优化总结通过以上策略，你可以： - **降低 50-70% 的 Token 消耗** - **提升 2-3 倍的开发效率** - **减少 60-80% 的成本** - **提高代码质量和一致性** 记住：**最好的优化不是少用 AI，而是更智能地使用 AI**。 --- ## 附录 ### 常用提示词模板库 #### 1. 功能实现类 ``` 在 @[文件路径] 中实现 [功能名称]：功能描述： - [功能点1] - [功能点2] 技术要求： - [技术要求1] - [技术要求2] 约束条件： - [约束1] - [约束2] 参考：@[参考文件] ``` #### 2. Bug 修复类 ``` 修复 @[文件路径] 中的问题：问题描述： - 现象：[问题表现] - 预期：[期望结果] - 错误信息：[错误日志] 复现步骤： 1. [步骤1] 2. [步骤2] 环境信息： - [浏览器/设备/版本] ``` #### 3. 性能优化类 ``` 优化 @[文件路径] 的性能：当前问题： - [性能问题1] - [性能问题2] 优化目标： - [具体指标] 优化方向： - [方向1] - [方向2] ``` #### 4. 代码重构类 ``` 重构 @[文件路径]：重构目标： - [目标1] - [目标2] 重构方案： - [方案描述] 要求： - 保持功能不变 - 添加必要的注释 - 提高代码可读性 ``` **Keep Vibing, Keep Coding! 🚀**