你的网页为什么加着加着就改崩了

先看她最后做出来的东西

一个网页，你把播客的链接粘进去，它自己去抓音频、压缩、转成文字、再编排成一本能翻的杂志。

跑起来是这样的，分阶段走，每一步的状态都显示着：

你注意看这两张的区别在哪：它有输入框、有真实的数据源、有一步步的进度。这已经不是一个「页面」了，是一个你可以发给朋友、让他自己去用的东西。

她一开始做的不是这个

上个月她做过一个把播客变成电子杂志的功能，还拿到了官方推荐、上过周榜。但那个东西本质上只是一个单页的 HTML。

后来她想把它扩充成一个完整的产品，能识别播客链接、能语音转录，问题一下子就复杂起来。

她当时的做法，估计你也很熟：继续和 AI 对话，这里加一个功能，那里修一个 bug。结果就是代码越来越复杂，却还是没能准确实现她想要的东西。

这个坑有个名字

英文里管它叫 spaghetti code，意大利面条式代码。

意思很形象：一个项目不断加功能、打补丁，最后代码像一盘意大利面一样缠在一起，你伸手去动其中一根，别的全跟着乱。改完这个，另一个又出错。

这也是为什么很多人做出来的网页，最后只能停在「页面」这个层次：它能展示信息，却很难作为一个真正的产品被交付出去。

做过工作台的同学，读到这儿应该有点感觉了。

绕开它的办法：把顺序换掉

她重做这件事的时候，做法变了。

变在哪？AI 上手干的第一件事不是写页面，是先去把环境摸清楚。

你看它先说的是什么：Node 能不能用、外网的播客源能不能连上、有没有音频压缩工具、转写的钥匙配没配。没有的东西怎么办，它当场给了降级方案，比如没有压缩工具就不压，没配转写钥匙就先走演示模式。

摸完底才开始拆活：RSS 抓取模块、转写模块、杂志生成模块、把这些串起来的管道模块、还有主服务。一件一件来。

把两种做法摆在一起，差别就很清楚了：

以前是：一句话生成一个 HTML，然后不停往上打补丁。

现在是：先看清楚手上能用什么，再拆成几块，每块只负责一件事，最后才动手写。

这个差别不在于你用什么工具，在于你让 AI 先干什么。

卡最久的那一步，她是怎么过的

她说整件事里卡最久的是音频。这一段的做法我觉得最值得学。

她没有一上来就让 AI 把整套音频功能写完，而是先拿一个最小的问题去验证：能不能从订阅源里把封面和标题抓出来。抓出来了，这条路才算走得通，然后才继续往下做。

转写那一环也是同一个思路，做成了两档：你配了转写的钥匙就走真实转写，没配就走演示模式。

每一步都先验证能不能成，再去实现。这一条听起来朴素，但它恰恰是「改着改着就崩了」的反面：你每往前一步都是踩实的，而不是堆上去的。