我用 AI 写代码踩过的 6 个坑，每个都有对应的 Prompt 解法

AI时代，想必大家和我一样把 AI 编程工具用成了日常标配。

Cursor 负责写新功能，Copilot 负责补全，Claude 负责解释老代码。整套流程跑起来效率确实高——但也踩了不少坑。

有些坑让我白白多花了两三个小时，有些坑在 Code Review 上被同事指出来，还有一次差点把测试环境的接口地址提交到了 main 分支。

后来我意识到，这些坑大多数都不是 AI 的问题，是我没有把上下文交代清楚。

把这些坑和对应的解法整理出来，希望能帮你少走一点弯路。

坑一：生成的组件和项目规范完全两套风格

场景还原： 接到一个需求，要做一个带搜索的商品列表页。我直接在 Cursor 里输入「帮我写一个商品列表组件，Vue 3 + TypeScript」，结果出来的代码用了 Options API，而我们项目全部是 Composition API；命名用的是 camelCase，但我们项目约定是 PascalCase；还自作主张引入了 lodash，但项目里根本没装这个包。

返工花了将近一个小时。

根本原因： 我的 Prompt 没有提供任何项目上下文，AI 只能靠「猜」。

解法 Prompt：

帮我开发一个前端组件，要求如下：

组件功能：带搜索过滤的商品列表，支持分页

技术栈：
- Vue 3 + Composition API（<script setup> 语法）
- TypeScript
- Element Plus（已安装，直接用）
- 不要引入项目之外的额外依赖

代码规范：
- 组件名 PascalCase
- 变量/函数 camelCase
- 接口类型统一用 interface 定义，放在文件顶部
- 注释用中文

样式：
- 使用项目已有的 SCSS 变量（不要内联样式）
- 响应式，移动端优先

返回完整可运行代码，并说明文件放置路径。

核心改变： 把「你们项目不用的东西」明确排除掉，比「只说要用什么」效果更好。

坑二：报错丢进去，AI 给的修复方案根本跑不通

场景还原： Vue 3 项目里遇到一个 Maximum recursive updates exceeded 报错，把报错截图发给 AI，它给了我三种「可能的原因」，让我自己去排查。逐个试了一遍，最后花了40分钟才找到真正的问题——一个 watch 在监听对象的同时又在修改这个对象，触发了循环更新。

如果当时把完整的组件代码一起发过去，AI 直接就能定位。

根本原因： 只给报错信息，没给出问题的代码上下文，AI 只能泛泛分析。

解法 Prompt：

我遇到了一个 Vue 3 报错，请帮我定位根本原因并给出修复代码。

报错信息（完整）：
[粘贴完整报错，包括堆栈信息]

出现报错的组件代码：
[粘贴整个组件，或相关代码片段]

项目背景：
- Vue 3.4 + TypeScript
- 使用 Pinia 管理状态
- 报错在点击「提交」按钮时触发

请：
1. 指出报错的具体位置（第几行，哪段逻辑）
2. 解释为什么会出现这个问题
3. 给出修复后的完整代码
4. 告诉我以后怎么避免

关键习惯： 报错信息、相关代码、触发条件，三样缺一不可。少了任何一样，AI 就得靠猜。

坑三：老代码重构完，逻辑变了但没人告诉我

场景还原： 有一段三年前写的老代码，处理订单状态流转的，逻辑很绕。我让 AI 帮我重构，它把代码整理得很干净，我也觉得好多了，直接提交了。

结果测试发现「待支付」状态下的一个边界条件处理逻辑被改掉了——原来有一段「如果超时时间小于5分钟则直接取消」的判断，重构后被合并进了通用逻辑，5分钟的阈值消失了。

根本原因： 我没有告诉 AI「哪些逻辑是不能动的」。

解法 Prompt：

帮我重构以下代码，但有严格限制：

[粘贴原始代码]

重构目标：
1. 提高可读性，减少嵌套层级
2. 消除重复的条件判断
3. 用更清晰的函数命名替代注释

硬性约束（不得修改）：
- 所有业务逻辑的输出结果必须与原代码完全一致
- 不改变函数的入参和返回值结构
- 不删除任何边界条件的判断（哪怕看起来多余）

完成后请：
1. 提供重构后的完整代码
2. 列出你修改了哪些地方、原因是什么
3. 标出你认为「可能有风险」的改动点，让我人工复核

新增的「硬性约束」和「风险标注」， 是这个模板最有价值的两条。前者防止 AI 擅自改逻辑，后者让 AI 主动暴露它不确定的地方。

坑四：生成的样式在 Chrome 好看，Safari 一塌糊涂

场景还原： 让 AI 生成了一个管理后台的数据卡片样式，用了 gap、aspect-ratio、backdrop-filter 这几个属性。在 Chrome 上效果很好，结果产品经理用 Mac Safari 打开，布局完全乱了。

事后查了一下，backdrop-filter 在 Safari 上需要加 -webkit- 前缀，gap 在旧版 Safari flexbox 里有兼容性问题。

根本原因： 没有告诉 AI 目标兼容范围，它默认按最新标准写了。

解法 Prompt：

帮我生成管理后台数据卡片的 UI 样式。

设计要求：
- 毛玻璃卡片效果，带阴影
- 支持暗色模式切换
- 4列栅格，在平板端变为2列

兼容性要求（重要）：
- Chrome 90+
- Safari 14+（必须加 -webkit- 前缀）
- 不使用 iOS Safari 支持有问题的 CSS 属性
- 不依赖 IE

技术要求：
- 使用 SCSS，抽取颜色和间距为变量
- 不使用内联样式
- 关键属性加注释，说明为什么这样写

输出：完整 HTML 结构 + SCSS 样式文件

坑五：接口封装生成了，但没有错误处理

场景还原： 让 AI 根据后端给的接口文档生成 Axios 封装，代码结构很整洁，类型定义也全。但上线后发现，接口超时的情况下页面直接白屏——因为 AI 生成的代码只处理了「正常返回」的情况，没有写超时重试和错误边界。

根本原因： 我的 Prompt 只说了「正常流程」，没有说「异常流程」。

解法 Prompt：

根据以下接口文档，生成生产级别的 Axios 接口封装。

接口文档：
[粘贴接口文档]

技术栈：Axios + TypeScript

必须包含：
1. 请求/响应拦截器（统一处理 token、错误码）
2. 超时配置（默认10秒，支持单接口覆盖）
3. 超时或网络错误时的自动重试（最多3次，指数退避）
4. 统一的错误提示逻辑（业务错误 vs 网络错误分开处理）
5. 完整 TypeScript 类型定义（请求参数 + 响应数据）
6. Mock 数据示例（方便本地开发）

额外要求：
- 所有错误场景都要有处理，不允许静默失败
- 加注释说明每段逻辑的作用

输出：完整可运行代码 + 使用示例

坑六：生成的测试用例只测了「正常路径」

场景还原： 让 AI 帮我给一个表单校验函数写 Vitest 单测。它生成了十来个用例，看起来覆盖很全，但全是「正常输入 → 正常输出」的测试。没有测空值、超长字符串、特殊字符、并发提交这类边界情况。

后来真的有用户在手机号输入框里粘进去一段带空格的号码，校验没过滤掉，接口报了500。

根本原因： 没有明确要求覆盖边界用例。

解法 Prompt：

为以下代码生成 Vitest 单元测试：

[粘贴要测试的函数/模块]

测试要求：
1. 正常路径：覆盖所有预期的正常输入
2. 边界值：空值、null、undefined、超长字符串、最小/最大值
3. 异常输入：特殊字符、格式错误、非法类型
4. 并发场景：如果涉及异步操作，测试并发调用行为
5. 副作用验证：如果函数有副作用（修改状态、调用接口），要验证副作用是否正确触发

技术栈：Vitest + Vue Test Utils（如果涉及组件）

每个测试用例加注释，说明测的是什么场景、预期是什么。
输出覆盖率目标：核心逻辑分支覆盖率 ≥ 90%。

一个通用的 Prompt 框架

把上面 6 个坑的经验提炼一下，好用的 Prompt 通常包含这几层：

[角色定义]
你是一名前端工程师。

[任务描述]
帮我完成以下任务：具体说清楚要做什么，业务场景是什么

[技术约束]
技术栈：Vue 3 / React + TypeScript + TailwindCSS
兼容性要求：Chrome 90+ / Safari 14+
不使用：[列出你不想用的东西]

[质量要求]
- 返回完整可运行代码
- 覆盖异常情况，不允许静默失败
- 加中文注释，说明关键逻辑
- 给出可能的优化建议

[硬性限制]（重构/修改场景必填）
- 不改变函数签名
- 不删除边界条件判断
- 输出结果必须与原逻辑一致

最重要的习惯： 不只说「你要什么」，也要说「你不要什么」。排除项越明确，AI 脑补空间越小。

写在最后

这 6 个坑，本质上都是同一个问题：把 AI 当成了能读心术的同事，而不是刚加入的实习生。

实习生第一天，你会给他所有上下文、说清楚规范、交代边界情况。对 AI 也应该这样。

Prompt 写清楚，你会发现 AI 工具从「不稳定的惊喜」变成「可预期的生产力」。

你用 AI 写代码踩过什么印象最深的坑？ 不用是大事故——哪怕是「它帮我删了一段我以为没用、其实很关键的代码」这种，评论区说说。 有共鸣的故事我下期文章里直接引用（注明来源），顺便整理成「AI 编程防坑手册」。 👀

关注「前端达人」，持续分享前端实战经验。