AI 编程工具（如 Cursor、Trae、Catpaw）已成为开发者的“标配武器”，但同样的工具，有人用它效率翻倍，有人却陷入“改代码比写代码还累”的困境。核心差距不在于工具本身，而在于是否掌握“人机协作”的底层逻辑——让 AI 精准理解需求、按规范输出代码，同时规避潜在风险。
本文结合实战经验，整理了 10 个可直接落地的 AI 编程技巧，补充详细的场景示例、反模式规避、工具配置细节，帮你从“被动修改 AI 代码”升级为“主动驾驭 AI 协作”，真正释放创造力。
一、结构化沟通：让 AI 一次读懂你的需求
AI 无法像人类同事一样“猜需求”，模糊的描述只会导致反复返工。结构化沟通的核心是“明确目的+清晰约束”，让 AI 无需追问即可输出符合预期的代码。
1. 核心公式：目的 + 约束（精简版）
无需复杂模板，用“核心需求+边界条件”的结构传递信息，示例：
- ❌ 错误示范：“写一个商品组件”（无约束，AI 可能随意选择技术栈、目录）；
- ✅ 正确示范：“实现电商商品多选组件，支持全选/取消全选、显示商品名称/价格/库存，使用 Vue 3 + Element Plus 开发，文件放在 src/components/GoodsSelect 目录，需兼容移动端”。
2. 进阶方法论：适配复杂需求
对于大型功能，可采用社区热门的结构化框架（如 Spec、6A），核心要素包括：
- 背景：为什么需要这个功能（如“解决用户批量下单时的商品选择效率问题”）；
- 功能点：分点列出核心能力（避免遗漏）；
- 技术约束：技术栈、依赖库、接口规范、性能要求；
- 输出要求：文件路径、代码风格、测试覆盖范围。
3. 技巧延伸
- 用“示例”替代“描述”：如需要特定格式的返回数据，直接给出示例 JSON，AI 会自动对齐格式；
- 明确“不要什么”：如“不要使用 Vuex，用 Pinia 管理状态”“禁止硬编码接口地址”。
二、精准控制上下文：避免 AI “胡说八道”
AI 生成代码出错，很多时候是上下文干扰导致的。精准控制上下文，能让 AI 聚焦当前任务，减少无效输出。
1. 三大上下文控制技巧
- 精准投喂代码片段：修改现有功能时，不要让 AI 猜测代码位置，直接复制待修改的文件、函数或代码块，标注“修改范围”（如“仅修改下面代码中的防抖逻辑，保持其他逻辑不变”）；
- 单一窗口单一任务：为每个独立功能模块创建专属对话窗口（如“商品组件-多选功能”“登录页-短信验证”），避免一个窗口处理多个不相干任务，导致 AI 记忆混淆；
- 隔离工程环境：AI 编辑器中只打开当前开发的工程，关闭其他项目窗口，减少跨项目上下文干扰。
2. 上下文传递示例
上下文：以下是 src/components/Login/SmsVerify.vue 中的倒计时函数：
function startCountdown() {
let seconds = 60;
const timer = setInterval(() => {
seconds--;
if (seconds <= 0) {
clearInterval(timer);
}
}, 1000);
}
需求：修改这个倒计时函数，添加暂停功能，支持手动重置倒计时，且倒计时期间按钮禁用。三、小步迭代 + 版本控制：稳扎稳打不返工
AI 生成代码的“一次性合格率”不高，盲目让 AI 实现完整功能，容易导致代码越改越乱，甚至前功尽弃。小步迭代+Git 管理，是规避风险的关键。
1. 核心流程：拆分任务 → 逐个实现 → 及时保存
以“短信验证弹窗”功能为例（含短信发送、60s 倒计时、错误提示、手机号加密）：
- 第一步：实现基础 UI 结构（输入框、按钮、倒计时显示），Git 提交（备注：feat: 短信验证弹窗 UI）；
- 第二步：实现手机号格式校验与加密逻辑，Git 提交（备注：feat: 手机号校验与加密）；
- 第三步：实现 60s 倒计时与重试功能，Git 提交（备注：feat: 倒计时功能）；
- 第四步：集成短信发送接口与错误提示，Git 提交（备注：feat: 短信发送与错误处理）。
2. 版本控制关键要点
- 每完成一个独立功能点就提交 Git，便于回滚（AI 后续修改崩了可快速恢复）；
- 提交信息明确，标注功能模块与进度；
- 重要节点创建分支（如 feature/sms-verify），避免主分支代码混乱。
3. 反模式规避
- ❌ 一次性让 AI 实现完整功能，不保存中间版本；
- ❌ 频繁修改已提交的代码，不做分支管理；
- ✅ 养成“实现-测试-提交”的闭环，即使 AI 后续输出不佳，也不会丢失已有成果。
四、设计 Rules 架构：让 AI 按规范输出
AI 生成的代码常出现“风格混乱、结构杂乱”的问题，根源是缺乏统一约束。通过 Rules 架构，提前定义编码规范，让 AI 从一开始就“按规矩办事”。
1. Rules 架构分层设计（前端示例）
按“通用规则→领域规则→文件规则”分层，放在项目根目录的 /docs/rules 文件夹，便于 AI 读取：
/docs/rules
├── common-rules.md # 通用规则：技术栈、代码风格、目录结构
├── domain-rules.md # 领域规则：业务逻辑规范、接口请求规范
├── ts-rules.md # TS 文件规则：类型定义、函数命名、注释要求
├── vue-rules.md # Vue 文件规则：组件拆分、生命周期使用、样式规范
└── css-rules.md # CSS 规则：命名规范、响应式要求、样式隔离2. 核心规则示例（common-rules.md）
# 通用编码规则
## 技术栈约束
- 框架：Vue 3 + TypeScript 5.0
- 状态管理：Pinia（禁止使用 Vuex）
- UI 库：Element Plus 2.0+
- 接口请求：Axios（使用项目封装的 request 函数）
## 目录结构规范
- 组件：src/components/[组件名]/index.vue（公共组件）、src/views/[页面名]/components（页面私有组件）
- 工具函数：src/utils/[功能模块].ts
- 类型定义：src/types/[模块名].ts
- 常量：src/constants/[模块名].ts
## 代码风格
- 命名：组件采用 PascalCase，函数/变量采用 camelCase，常量采用 UPPER_SNAKE_CASE
- 注释：公共组件/函数必须添加 JSDoc 注释，说明参数、返回值、使用场景
- 格式：使用 Prettier 格式化，单引号，无分号3. 工具配置：让规则自动生效
- 在 Cursor 等 AI 编辑器中，将 Rules 文档路径添加到“全局上下文”，AI 会自动遵循；
- 每次新建功能时，在 prompt 中引用规则（如“按项目 /docs/rules/vue-rules.md 规范，实现商品列表组件”）。
五、错误排查：让 AI 成为你的“调试助手”
遇到报错时，无需自己逐行排查，AI 能快速定位问题并给出解决方案，关键是“提供完整的错误上下文”。
1. 不同场景的报错处理技巧
（1）终端/编译器报错（如 Node.js、TS 报错）
- 操作：复制完整的错误日志（含错误信息、行号、文件路径），粘贴给 AI；
- 示例 prompt：“以下是编译 TS 时的错误日志，请修改代码并说明原因：\n
error\nTS2322: 类型“string”不能赋值给类型“number”\n File: src/components/Goods.tsx:15:20\n
（2）浏览器控制台报错（如 React/Vue 运行时错误）
- 操作：复制错误信息、调用栈，配合相关代码片段；
- 关键：标注“报错场景”（如“点击提交按钮时触发”“数据加载完成后报错”）。
（3）UI 与设计稿偏差
- 操作：同时上传设计稿截图和页面实际截图，标注偏差区域；
- 示例 prompt：“左图是设计稿，右图是当前页面截图，商品卡片的间距（应为 16px）、字体大小（标题 18px）与设计稿不一致，请调整代码，保持其他样式不变”。
2. 技巧延伸
- 提供“预期行为”与“实际行为”：帮助 AI 快速定位差异（如“预期点击按钮后倒计时开始，实际点击无反应”）；
- 排除无关信息：只保留与报错相关的代码片段，避免信息过载。
六、代码审查（Code Review）：守住质量最后一关
AI 生成的代码可能“功能能用，但暗藏隐患”（如乱改通用工具函数、代码冗余、性能问题）。每完成一个功能点，必须进行 Code Review，避免“屎山代码”累积。
1. 审查重点（AI 代码高频问题）
- 功能影响：是否修改了无关代码（如实现商品组件时，改动了全局工具函数）；
- 代码结构：是否遵循 Rules 架构，业务逻辑、通用方法、常量是否分离；
- 性能问题：是否存在重复渲染、无效请求、未优化的循环（如列表渲染未加 key）；
- 安全性：是否有 XSS 风险（如直接插入 HTML）、接口请求未做参数校验；
- 可维护性：命名是否清晰、注释是否完整、逻辑是否冗余。
2. 审查流程
- 自动审查：用 ESLint、Prettier 检查代码风格，用 SonarQube 检测潜在问题；
- 人工审查：重点关注 AI 可能忽略的架构设计、业务逻辑合理性；
- AI 辅助审查：让 AI 按规则审查自身代码（prompt：“按项目 /docs/rules/common-rules.md 规范，审查以下代码，指出不符合规范的地方并修改”）。
七、分工明确：脏活累活交给 AI，你专注核心
AI 擅长重复性、标准化工作，开发者应聚焦“创造性”任务，实现人机优势互补。
1. 交给 AI 的工作（高效解放双手）
- 通用工具函数：数据格式化（如日期、金额处理）、数组/对象操作（如去重、排序）、接口请求封装；
- 代码重构：提取重复逻辑、拆分过大文件、转换语法（如 Vue 2 转 Vue 3）；
- 工程化任务：生成单元测试、接口文档、组件注释、README 说明；
- 格式转换：JSON 转 TypeScript 类型、SQL 转 ORM 语句、Markdown 转 HTML。
2. 开发者专注的工作（AI 无法替代）
- 架构设计：功能模块拆分、技术选型、状态管理方案；
- 业务逻辑：核心流程设计、边界条件处理、异常场景覆盖；
- 性能优化：关键路径优化、大数据量处理、用户体验打磨；
- 创新功能：差异化特性设计、复杂交互实现。
3. 实战示例（代码重构）
让 AI 拆分冗余代码：
prompt：以下代码中，将“格式化商品价格”“计算商品总价”的方法抽离到 src/utils/goods.ts，将商品类型定义抽离到 src/types/goods.ts，保持组件逻辑不变：
[粘贴 src/components/GoodsList.vue 中的代码]八、结构先行：避免代码“一锅炖”
AI 默认会将业务逻辑、UI、常量、通用方法写在同一个文件中，后期维护成本极高。“结构先行”能从源头规避这个问题。
1. 三种实现思路
- 提前约定：在 prompt 中明确文件拆分规则（如“实现用户登录功能，登录逻辑写在 src/views/Login/useLogin.ts，UI 组件写在 src/views/Login/index.vue，接口请求写在 src/api/user.ts”）；
- 配置全局规则：在 AI 编辑器中设置默认拆分规则（如“所有 TypeScript 类型定义必须放在 src/types 目录”）；
- 及时拆分：AI 生成代码后，立即让其按结构拆分（如“将当前文件中的常量提取到 src/constants/login.ts，通用方法提取到 src/utils/login.ts”）。
2. 反模式规避
- ❌ 让 AI 一次性生成完整页面，不做结构拆分；
- ❌ 累积多个功能后再统一拆分，增加重构成本；
- ✅ 从一开始就明确文件结构，让 AI 按规范输出。
九、技术方案探讨：让 AI 成为你的“智囊团”
遇到复杂问题（如技术选型、架构设计）时，可让 AI 提供多维度思路，再结合自身经验决策，避免“闭门造车”。
1. 适用场景
- 新技术调研（如“Vue 3 中 Composition API 与 Options API 如何选择，结合我们的项目场景”）；
- 复杂功能实现（如“设计一个支持断点续传的文件上传组件，给出技术方案和核心代码”）；
- 性能优化（如“如何优化长列表渲染，当前列表有 1000+ 条数据，存在卡顿”）。
2. 沟通技巧
- 提供项目背景：让 AI 给出适配场景的方案（如“我们的项目是移动端电商 App，用户网络环境可能较差”）；
- 要求多方案对比：让 AI 列出优缺点，便于决策（如“给出 2 种文件上传方案，对比各自的兼容性、实现复杂度、性能”）；
- 逐步深入：先讨论方案框架，再细化代码实现，避免 AI 输出过于笼统。
十、工具优化：用最新模型，发挥最大效能
AI 模型和工具的迭代速度极快，使用旧模型或未优化的工具，会直接影响编程体验。
1. 模型选择
- 代码生成优先选择 Claude 最新版、GPT-4o、Qwen3-Coder-Plus，这些模型在语法准确性、代码结构、业务理解上表现更优；
- 避免使用过时模型（如 ChatGPT-4 早期版本），其代码生成能力已显著落后。
2. 工具配置
- 关闭 AI 编辑器的“自动分配模型”功能（如 Cursor 的 Auto 模式），手动选择最优模型；
- 定期更新 AI 工具（如 Cursor、Trae），新版本会优化提示词工程、上下文理解能力；
- 配置自定义快捷键（如一键将代码交给 AI 重构、一键添加错误日志到对话）。
3. 技巧延伸
- 清理工具缓存：避免旧上下文干扰新任务；
- 同步工具配置：将 Rules 架构、常用 prompt 保存到工具预设，提高复用效率。
十一、认知迭代：AI 时代，开发者的核心竞争力
AI 降低了编程门槛，但也拉高了“优秀开发者”的标准。真正无法被替代的，是 AI 不具备的核心能力：
1. 三大核心能力
- 需求拆解与表达能力：将模糊的业务需求转化为 AI 可理解的结构化指令；
- 代码质量把控能力：快速识别 AI 代码的隐患，进行优化和重构；
- 业务理解与架构设计能力：结合业务场景设计合理的系统架构，而非局限于单个功能实现。
2. 心态转变
- 从“自己写代码”转变为“指导 AI 写代码”：核心是“决策”而非“编码”；
- 从“害怕 AI 替代”转变为“利用 AI 升级”：AI 是工具，开发者的价值在于创造力和判断力。
总结：AI 编程的核心逻辑
AI 编程的本质是“人机协作”，高效的关键在于“明确规则、精准沟通、质量把控”。通过本文的 10 个技巧，你可以让 AI 成为“可靠的执行者”，自己则聚焦“核心的决策者”，真正从重复劳动中解放，专注于更有价值的创新工作。
记住：AI 是提升效率的工具，而非替代开发者的对手。掌握人机协作的底层逻辑，才能在 AI 时代保持核心竞争力。
除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接
文章评论