《AI辅助前端开发-10：避坑与进阶篇》

你是在“用AI”，还是在“用好AI”？

本系列的目标，是让你从🟢走到🟡。而这一篇，是帮你从🟡走向🔴的路标。

1.避坑篇：AI开发最常见的10个大坑

以下是过去一年里，我和团队踩过的、看别人踩过的坑。每一个坑都有人付出过代价。

坑1️⃣：过度依赖AI，丧失独立编码能力

现象：

写代码前必须问AI，哪怕是最简单的if-else也要AI写了才放心。脱离了AI，连一个数组去重都写不出来。

• 记住：AI是拐杖，不是双腿。有一天拐杖没了，你要能自己走。

坑2️⃣：AI说啥信啥，从不验证

现象：

AI给出的代码看都不看就直接用，结果线上出了严重Bug，比如删除了不该删除的数据。

解决方案：

• AI写的任何代码，必须经过人工审查和运行验证

• 尤其是操作数据的逻辑（增删改），一定要走一遍完整流程

坑3️⃣：提示词模糊，AI猜来猜去

现象：

“帮我做个页面。” AI给了代码，你又说“不是这样”。来回10轮还在原地打转。

解决方案：

• 回到第3篇，复习“角色 + 任务 + 约束条件”公式

坑4️⃣：让AI处理敏感数据

现象：

直接把包含真实手机号、身份证号、支付密钥的代码复制给AI（尤其是Claude Code云端版）。

解决方案：

• 永远不要在AI对话中粘贴真实敏感数据

• 用占位符替代：'138****0000'、'your-api-key'

• 如果必须用真实数据测试，使用企业私有化部署的AI版本

• 记住：安全是红线，踩一次就完了。

坑5️⃣：AI幻觉 —— 编造不存在的API

现象：

AI用了一个你没见过的API，你查了官方文档，根本不存在。AI自己编的。

解决方案：

• 让AI写代码时，指定具体版本号：如“使用 Element Plus 2.8.0”

• 遇到不确定的API，反问AI：“这个API在哪个版本引入的？官方文档链接给我。”

坑6️⃣：不写测试，全靠“肉眼验证”

现象：

AI写完代码，你肉眼看了看觉得没问题，直接提交了。

解决方案：

• 让AI生成单元测试（第9篇），跑通后再上线

• 至少保证核心业务逻辑有测试覆盖

坑7️⃣：AI写太多注释，代码变“噪音”

现象：

AI生成的代码里每一行都有注释，代码篇幅增加了50%，可读性反而下降了。

解决方案：

• 在提示词中明确：“不要逐行注释，只在关键逻辑处加注释”

• 保留JSDoc/TSDoc（函数级别的文档注释），删除行内废话注释

坑8️⃣：AI无脑引入新依赖

现象：

AI为了实现一个简单的功能（比如日期格式化），引入了一个10MB的第三方库。

解决方案：

• 在提示词中明确：“不要引入新的第三方依赖”

• 如果需要，先问AI：“实现这个功能，需要引入新库吗？有没有原生替代方案？”

坑9️⃣：不思考，直接复制AI代码

现象：

AI给什么就复制什么，连变量名、函数名都不改。

解决方案：

• 复制前先理解逻辑，然后按照项目风格重命名

• 至少保证变量名、函数名有明确含义

坑🔟：放弃学习，等着AI替你进步

现象：

“反正是AI写代码，我不用学新技术了。”

解决方案：

• 把AI当作“加速器”，不是“替代品”

• 用AI帮你学新技术：让AI解释新概念、对比新老方案

2. 进阶篇：从“会用”到“用好”的五步法

进阶1：建立个人提示词库

把你常用的“高效提示词”收集起来，分类归档。

示例：

项目初始化类

• “用Vue3+Vite+TS+Element Plus生成完整项目配置，严格模式，包含路径别名、代理、打包优化。”

代码审查类

• “从类型安全、性能、安全、规范、边界五个维度审查代码，输出问题清单+修复方案。”

需求拆解类

• “这是一句话需求：[需求]。请作为产品经理提出至少20个问题，覆盖业务规则、数据字段、交互、边界、权限。”

Bug修复类

• “报错信息：[粘贴]。相关代码：[粘贴]。预期行为：[描述]。请分析根因并给出修复方案。”

以后每次遇到好用的提示词，就加进你的“武器库”。积累10条、50条、100条，你就是“提示词高手”。

进阶2：建立“AI协作SOP”（标准作业流程）

把你个人的AI协作流程固化下来，形成可复用的SOP。

示例SOP：

1. 需求分析 → 用“需求拆解提示词” → AI输出功能列表 2. 技术方案 → 用“技术选型提示词” → AI输出方案文档 3. 代码生成 → 用“结构化提示词” → AI生成代码 4. 代码审查 → 用“审查提示词” → AI输出审查报告 5. 修复验收 → 按报告修改 → 人工确认 6. 提交上线 → 跑通测试 → 提交代码

有了SOP，你每次写代码都像流水线一样高效。而且可以分享给团队，一起提效。

进阶3：用AI教自己学新技术

遇到新技术栈（比如要学Next.js、Svelte），不要从头看文档，让AI带你快速入门：

“我是一个有3年Vue经验的前端开发，现在要学React。

请帮我：

1. 对比Vue和React的核心差异（数据流、组件写法、状态管理）

2. 用我最熟悉的Vue概念来类比React概念

3. 给出一个“从Vue到React”的学习路径

4. 生成一个用React写的Todo List示例，加上注释解释每段代码在Vue里对应什么”

这样的学习效率，比看一个月文档快10倍。

进阶5：教别人用AI（利他也是利己）

最好的学习方式就是教别人。

• 教同事使用AI，你的理解会更深

• 写文章、做分享，你能收到反馈、发现自己的盲区

• 组建团队里的“AI学习小组”，大家一起进步

💡 你现在正在做的——看这系列文章、完成每篇作业——就是在“学中做、做中学”。继续走下去，你会越来越强。

3. 本系列回顾

我们用10篇文章，从0到1走完了AI辅助前端开发的完整路径：

🎉 恭喜你完成本系列全部10篇内容！

从今天开始，你不再是一个“写代码的人”，你是一个“用AI写代码的工程师”。

如果有一天，你带新人、做分享、写文章，请把这份经验传递下去。

我们江湖再见。🚀