用AI写前端动效，我被MiniMax和智谱清言坑了两次

入职新公司第三周，mentor让我给运营后台的数据看板加数字滚动、卡片渐入等动效。我原本只懂点基础CSS动画，便想试试用MiniMax和智谱清言生成代码，结果接连翻车。

MiniMax翻车现场

我要求实现“翻牌器式数字滚动”，MiniMax给出了基于transform: translateY()和transition的代码。初看结构清晰，但实际运行中，数字从9到0时会反向滚回，导致组件抽搐。更糟的是，它引用了两年前的动画库版本，与项目不兼容，我不得不手动修改十余行代码。

智谱清言也不省心

接着我用智谱清言生成卡片错落入场动画。它用IntersectionObserver监听元素，方案看似专业，注释也齐全。但致命bug是：快速滚动时，观察器回调重复触发，动画叠加造成卡片疯狂闪烁。同事戏称这“赛博朋克”效果让我哭笑不得。

核心教训

折腾两天后，我总结了关键心得：

1. AI代码不可直接上生产。哪怕代码看着完美，也必须在本地严格测试边界情况。
2. 你必须比AI更懂目标。AI只是省去打字时间，不能替代你思考动画逻辑。
3. 国产AI在代码生成上仍有差距，尤其在处理复杂上下文时，不过免费工具不能苛求太多。
4. 重视动效性能。后台多图表场景下，我最终加入了prefers-reduced-motion媒体查询，尊重用户系统设置。

结尾

项目已上线，mentor评价“还不错”。这次经历让我明白，用AI写代码必须多留个心眼——毕竟debug的时间，有时比手写还长。