AI 是一名飞快的泥瓦匠:几秒就砌好一面墙。但它到处留下瓦砾——没人调用的死代码,同一段逻辑复制到五个地方,像撒盐一样撒下的 `any`,让 GPU 出汗的动画。你的应用外表看着漂亮;内部却在生锈。这份资源给你一个 7 阶段协议,把你的 AI agent 变成一名外科医生:它进入代码,清除死的,合并重复,修正动画,调优 React 性能,驱逐 `any`,安抚 GPU——然后走出来,没有碰用户看到的一个像素。规则是神圣的:零视觉改动,零行为改动。只清理内部。我会告诉你什么时候需要它、为什么 AI 会弄脏、什么习惯能防止它腐烂,以及一个你交给它、让它一阶段一阶段动刀的主 prompt。
一开始一切都像魔法。你对 AI 说"加一个个人资料页",它就出现了。"再来个导出按钮",它也出现了。你走得很快,非常快。但总有一个时刻——几乎都在第三周到第十周之间——某种东西变了。要一个小功能不再是瞬间完成。AI 变慢了,搞混了,动到了不该动的地方。在你根本没碰过的地方冒出 bug。应用能跑,但改动它变得沉重,就像鞋里进了泥在走路。
那就是那个时刻。没发生什么戏剧性的事:没有任何看得见的东西坏掉。发生的事是看不见的,它叫做技术债。AI 构建得快,而像所有构建得快的人一样,留下了瓦砾:没人再用却还在那里的代码,同一段逻辑被复制到五个文件里,让所有警报都失灵的 any 类型,随随便便搭起来的动画。这些在屏幕上都看不到。而这一切都让未来的每一次改动更加艰难。
这里有个重要且诚实的点:AI 并不写烂代码。它写的是能跑的代码。问题在于它优化的是"现在能跑",而不是"三个月后好维护"。而这两件事往相反的方向拉扯。所以哪怕每一小块都没问题,加在一起还是会变脏。以下是它留下的四类瓦砾,以及它为什么会留下它们:
any。这样它就关掉了 TypeScript 用来提醒你错误的所有警报。代码能编译……然后在生产环境里爆炸。外科医生不会打开后随便乱翻:他遵循一套流程,按顺序,一步一步来。代码手术也一样。一共七个阶段,而且顺序很重要:先清除死代码(这样才不用去清理你本来要删的代码),然后合并重复,然后加固动画,然后 React 性能,然后类型,然后安抚 GPU,最后出一份健康报告。下面是每一个阶段。
第一件事是把所有不再呼吸的东西从手术台上搬走。这是最划算的阶段,因为它为其余所有阶段清理出地盘:去优化一个你打算删掉的函数毫无意义。
return 之后的代码、再也没人触发的 if。地盘清理干净后,现在你要找重复的东西。这行的规则很简单:如果某样东西出现三次或以上,它就不再是巧合,而成了一个模式,值得有一个唯一的落脚地。
helper),让两处都调用它。一条规则,一个落脚地。48、同一个 URL、同一个颜色)→ 把它们集中到有名字的常量里。改一次,处处都改。custom hook)里,把逻辑封装一次。动画是 AI 最爱即兴发挥、也最容易留下细微毛病的地方——那些不会崩坏、却让应用感觉"廉价"的东西:闪烁、跳动、启动不了的过渡。以下是手术要核对的具体规则(适用于 React 的动画库,比如 Motion / Framer Motion,这是生态里的标准):
rgba(0,0,0,0)。当你把 transparent 这个词和一个颜色做插值时,过渡在中途可能出现难看的闪烁;rgba(0,0,0,0) 插值得干净。borderColor。简写属性插值不干净。background 做动画是有问题的;只给发生变化的那个具体属性做动画。AnimatePresence)—— 如果一个动画列表里的元素没有稳定且唯一的 key,退出动画就会崩坏、元素会跳动。key 必须是一个真实的 id,绝不能是数组的索引。这里手术要找 React 没必要重复做的活儿。每一次不必要的重渲染都是一点点卡顿;加起来,就让应用感觉沉重。要检查四件具体的事:
useCallback 和 useMemo。不:memo 化本身也有代价(内存、复杂度)。手术只在有真实且可衡量收益的地方 memo 化——一个传给很多子组件的 handler、一个真正昂贵的计算。过度优化是它自己的一种脏。TypeScript 是你代码的警报系统:它在错误抵达用户之前提醒你。但它只有在你让它看到类型时才管用。每一个 any 都是有人关掉的一个警报。这个阶段把它们重新打开。
any 关掉所有检查。如果你真的不知道类型,用 unknown,它逼你在使用前先做校验(安全),而不是 any,它什么都不逼(危险)。as 都是编译器停止检查的一个点。要一个一个审:它是真的,还是一个补丁?any。这是几乎没人知道的阶段,也是在普通设备上最明显的一个。某些视觉特效美得很,但绘制起来贵得惊人:如果你滥用它们,显卡就会饱和,应用就一顿一顿的。手术要找三个经典的罪魁祸首:
@keyframes 的 CSS 动画里。用 JavaScript 在每一帧给锥形渐变做动画贵得离谱;用 keyframes 浏览器会帮它优化。backdrop-blur,那个很流行的磨砂玻璃效果)逼着 GPU 看清元素背后的所有东西并实时把它糊掉。单独一个大的,没事。二十个小的重复着,就像要求显卡每一帧把屏幕糊二十次。就是在那里,你用户的笔记本开始吹风扇。每台手术都以一份报告结束。没有报告你就不知道动了什么,也没法确信没有附带损伤。最后一个阶段,是让 agent 用你的语言给你交一份清晰的总结,列出它做的一切:
any、修正了多少个动画,等等。最常见的错误是把手术当成一件一切都乱成一团后才做一次的事。不是的。AI 代码持续变脏,因为每一次构建会话都留下新的瓦砾。手术不是急诊手术:它是你每六个月做一次、好让你永远不用做根管治疗的洗牙。
这里是关键的一块:一个 prompt,把你的代码 agent 变成一名外科医生,按顺序把这 7 个阶段应用到一个文件或模块上——不动任何视觉的东西。填好 [方括号],粘贴进去,让它动刀。动手前一个建议:先在 GitHub 做一次 commit(你的安全网),并把它对准一个模块,而不是整个项目。
扮演一名精于调试的代码外科医生。你要给这个文件/模块动刀:[文件或文件夹路径,例:src/components/Dashboard/]。技术栈是:[例:React + TypeScript + Motion/Framer Motion + Tailwind]。 神圣且不可违背的规则:零视觉改动、零行为改动。应用在前后必须看起来和表现得一模一样。你只清理和加固内部。在"多清一点"和"保住行为"之间有任何犹豫时,永远是保住行为赢。如果你不确定某样东西是否被使用,就不要删它;把它标出来问我。 按顺序应用这 7 个阶段。不完成上一个就不要进入下一个。在每个阶段结束时,用一行告诉我你发现了什么、改了什么。 阶段 1 —— 死代码:清除孤儿文件(没人 import 的)、没有消费者的 export、未使用的变量/函数/import,以及无法到达的代码分支。删除任何可疑的东西之前,把它列给我并等我确认。 阶段 2 —— 重复:找重复的逻辑(→ 抽到一个 helper)、重复的魔法数字/文本(→ 有名字的常量)、重复三次以上的 JSX(→ 带 props 的子组件),以及重复的 useState+handler 模式(→ custom hook)。不要合并那些只是看起来像、却因不同原因而改变的东西。 阶段 3 —— 动画规则:修正 transparent→rgba(0,0,0,0),清除重复的 transition,不要给简写 border 做动画(用 borderColor),动画里把 background→backgroundColor,并确保带 AnimatePresence 的列表里 key 稳定且唯一(绝不用索引)。 阶段 4 —— React 性能:把作为 props 传下去的 handler 包进 useCallback,用 useMemo memo 化昂贵的计算,修正 useEffect 的依赖数组(不多不少),并给每个 .map 加稳定的 key。不要以防万一去 memo:只在有真实收益的地方做。 阶段 5 —— TypeScript:把每个 any 换成真实类型或换成 unknown;审查每个 'as 类型' 强制转换(它是真的还是一个补丁?);把只在自己文件里用的 export 内部化;并给所有组件的 props 加类型。 阶段 6 —— GPU 崩溃:把做动画的锥形渐变挪到 CSS @keyframes;如果有很多 repeat:Infinity 同时跑就合并它们;并在重复很多次的小元素上把 backdrop-blur 换成纯色/半透明背景。 阶段 7 —— 健康报告:结束时,交给我一份报告,包含:按阶段计数、清除的总行数、明确确认你没改动任何视觉或行为,以及一份你决定不动的东西及原因的清单。 一阶段一阶段地做,给我看每一个阶段的 diff,如果有什么会危及神圣规则,就停下来在继续前问我。
一台手术不是在你缝合时结束:它是在你确认病人无恙时结束。那条神圣规则(零行为改动)必须去验证,而不只是相信它。有两张自动的安全网能在几秒内替你确认,而且你的 agent 可以跑它们,你完全不用编程。
# 1) 类型检查:零错误 = 手术没破坏契约 npx tsc --noEmit # 2) 测试:如果之前通过、之后也照样通过, # 行为就被保住了 npm test
git diff 看一看它的 diff(改动)。阅读规则:你看到的几乎所有东西都该是红色的行(被删的)或位置移动,而不是新逻辑。如果冒出用户能看到的、被改动的文本字符串,不同的默认值,或者新的条件,那里就有一处可能的伤口——在接受前问问 AI 为什么。为了不把事情搞复杂:手术的大部分由你的代码 agent 自己在聊天里完成。你的活儿是指挥和批准。分工如下。
any 和搭得糟的动画——你只需给它主 prompt。tsc 和测试,确认它没破坏任何东西。Join 4,200+ builders. No credit card. Build your first app with AI in minutes.