前言

  用 AI 写代码，最烦的地方在于交出来的东西当场能跑，过一周再让它改，改完你不敢确定坏没坏。功能越堆越多，最后变成一堆谁也不敢动的代码。英文社区给这种成品起了个名字，AI slop。

  LexiMethod Academy 就是这么个背景下做的个人项目，一个教英语方法的网站，vibe coding 为主，我出想法，AI 写实现。这篇讲两件事，网站本身长什么样，以及我用什么办法管住 AI。

网站长什么样

先上效果，首页是一张学习地图，八个方法模块排成一条路径

首页学习地图，8 个方法模块排成一条路径

  全站 8 门课，每门 8 步。第一步都是方法登场，讲这门课要解决什么毛病，最后一步永远是掌握标准，把"学会"量化成几条当场能检验的动作，中间走原理、规则、动手练习、实战演练。方法列表页介绍课程时用的是另一种说法，把内容分成六段（原理讲解、分步动画、互动练习、实战分析、常见误区、掌握标准）。八步是课程的实际步数，六段是步骤在教学上的分工，两种说法指向同一批内容。

  学会的标准首页写得很直白，看到生词能读出来，听到发音能拼出来，没背过的词拆开来也能猜个大概。

课程页的分步动画，规则讲解与音节切块

  技术形态上，它是个纯静态站，没有账号、没有数据库、不请求任何第三方服务，字体用系统自带的。进度、复习排期、设置全部落在浏览器 localStorage。好处是省掉服务器和注册登录，代价也明摆着，换台电脑或者换个浏览器，以前的记录带不过去。

四份脚本管住 AI

  vibe coding 最大的风险是质量失控，我的解法就一句话，把验收写在代码前面。项目收尾阶段写过一份计划，工作流定成先锁行为、再清理、逐类修复、最后过质量门禁，文档还躺在 .omx/plans/ 里。天天起作用的是下面这四份脚本

脚本 检查什么 卡线
checkData.mjs 数据层断言，打包进 node 跑 48 个音标 id 不重复，11 种题型每种 ≥8 道且答案自洽，例句必须含目标词
acceptance.mjs puppeteer 开真浏览器全流程 13 条路由零控制台报错，首页 3 秒可交互，旗舰课 8 步点得通，375px 无横向滚动
smoke.mjs 核心流程快跑 几秒钟确认没跑偏
size.mjs 首屏体积 JS + CSS gzip 后 ≤200KB 
node scripts/checkData.mjs    # 数据层
node scripts/smoke.mjs        # 核心流程
node scripts/acceptance.mjs   # 真浏览器全流程
node scripts/size.mjs         # 首屏体积

  AI 每改一轮，这四份跟着跑一轮，红了打回去改，绿了才往下走。我也有看 diff 的时候，可几百行改动摆在面前，逐行读完我未必敢确定没改坏，机器跑出来的红绿不含糊。

  第二件管用的事是内容数据化。src/data/ 下面四千六百多行，8 门课每一步讲什么、48 个音标的口型舌位怎么描述、词根词缀表、题库全在里面。改一门课不用碰组件，改完跑一遍数据检查，结构错了立刻知道。给 AI 划定改动范围这一招最见效，它在数据文件里折腾，界面那层不受波及。

音标实验室，48 个音标与口型动画

  第三件是分轮清理。一口气生成整个应用我没这把握，计划里把清理拆成四轮，先删死代码，再合并重复，然后过命名和错误处理，最后补测试，每轮结束重跑全套验收，没清出毛病才进下一轮。这套流程在计划里叫 ai-slop-cleaner，名字冲着什么去的，一看便知。

几处被约束逼出来的取舍

  React 18、TypeScript、Vite、Tailwind 都是常规选型，值得说的是几处被约束逼出来的做法

  • 200KB 红线逼出路由懒加载，构建时把 react 系公共依赖和动画库拆成独立 chunk，首屏只拉当页用的
  • 状态用 zustand，进度、复习、设置三个 store，persist 中间件直接写 localStorage，关掉浏览器再打开，XP 和连续天数原样都在
  • 复习按 1、3、7、14、30 天五档排期，答对升一档，答错退回第 0 档，到期卡片汇在复习中心，统计页另有近 8 周活跃热力图

统计页的完成度、正确率与活跃热力图

  • 例词朗读走 Web Speech API，英美、常慢速可切，按钮音效用 Web Audio 现场合成振荡器波形，整站一个音频文件都没有
  • 动画用 framer-motion 和 GSAP，档位分 full / light / off 三档，跟随系统 prefers-reduced-motion，档位写进 html 的 data-motion，CSS 那边跟着降级，系统开了"减少动态效果"的人进来，拿到的就是一个几乎不动的界面

总结

这篇讲了 vibe coding 项目的两个问题，网站怎么做出来的，以及质量怎么管。课程结构上八步和六段是同一批内容的两种说法；质量靠四份脚本立在代码前面，数据断言、真浏览器流程、快跑、体积红线，绿了才走下一步；内容全放 src/data，AI 的改动圈死在数据文件里。验收写多细才算够，我还没摸准，写细了怕框住自己，写粗了又回到凭感觉的老路。