AI 写代码的常见坑，以及我怎么验

AI 生成的代码经常「看起来对」——build 绿、页面也能开——但细用起来是坏的。下面四类是我这几个月踩过最多的坑，以及我现在的验法。

第一类：幻觉 API 和不存在的文件

表现： AI 调用了一个项目里根本没有的函数；import 了不存在的路径；gulp 插件用法是旧版语法。

真实例子： 让 AI 加 watch 任务，它写了监听 src/css/**/*.scss，而这个项目实际用的是 .less。文件存在时「偶尔能触发」，新增 less 子目录时却不重建。

我怎么验：

• 对 AI 提到的每个 API / 路径，用搜索确认仓库里真有
• 改构建后故意改一个被监听文件，看 dev 是否自动更新
• 不盲目信「文档说这样写」——以本仓库 gulpfile 为准

第二类：全局样式污染

表现： 子页面样式修好，首页坏了；或者所有 main 都不能滚动。

真实例子： 首页 layout.less 里 main { height: 100vh; overflow: hidden } 是给双屏切换用的。博客文章页的 <main class="post"> 也吃到这条规则，内容超出视口却无法滚动——build 完全通过，只有用户滚轮没反应才发现。

我怎么验：

• 改 CSS 后同时打开首页和子页面回归
• 对全局选择器（body、main、a）保持警惕，优先用 body.subpage 等作用域
• 让 AI 改样式时 @ 现有 global less，并写明「不能影响首页」

第三类：路径层级算错

表现： 列表页链接正常，详情页导航 404；CSS 引用路径在深层目录下失效。

真实例子： 顶栏 nav 写死 ../blog/。在 blog/index.html 正确，在 blog/posts/hello-world.html 会解析成 blog/blog/。修复方式是用各页声明的 base 变量拼接 href。

我怎么验：

• 不只测列表页，必须点进最深一层页面点导航
• 检查 dist 里不同深度 html 的 link href 实际字符串
• 静态站点一律画路径树：dist/blog/posts/x.html → 回根目录要 ../../

第四类：交互语义理解反了

表现： AI 实现的功能「技术上存在」，但不是用户要的行为。

真实例子： 我说「左侧分类导航快速定位文章」，AI 做成按分类分段的锚点滚动 + IntersectionObserver 高亮。我要的其实是点击分类过滤列表，只有「全部」显示所有文章。需求里加上「过滤不是滚动」后才改对。

我怎么验：

• 用动词精确定义：过滤 / 跳转 / 展开 / 排序，不用模糊词「定位」
• 给一个反例：「不要 anchor 滚动」
• 验收时按用户操作顺序点一遍，而不是只看 DOM 结构

第五类：内容「像真的」但不是我的

表现： AI 编造邮箱、GitHub 用户名、不存在的依赖版本；文案过于空泛。

我怎么处理：

• 联系方式、账号、仓库名——永远自己指定，不让 AI 猜
• 技术文章让它结合仓库真实文件写，并抽查是否提到实际存在的 task 名
• 扩写后通读一遍，删掉「正确的废话」

我的验证清单（可复制）

1. npm run build exit 0
2. 最深路径页面导航、返回链、样式表加载正确
3. 首页核心交互回归（enter 切换、卡片链接、蛇/流体按预期）
4. 移动端宽度 + 滚动
5. git diff 只包含任务相关文件
6. 无新依赖、无密钥进仓库

AI 写代码不是免测。恰恰相反——它让你更需要系统性验收，因为错误更隐蔽、更像对的。

build 通过是最低标准，不是完成标准。

把上面几类坑当成检查类别，比死记某次 bug 更有用。下一篇出错时，先归类，再套对策，少反复交学费。