这是一个什么项目

  LexiMethod Academy 是我最近用 vibe coding 完成的一个个人项目：一个"授人以渔"的英语方法教学网站，覆盖发音、音标拼写、自然拼读、词根词缀和记忆方法五条线。它不是又一个背词表工具，核心目标写在首页顶部——教方法，而不是堆词表。

  具体的验收标准很朴素：学完之后，你看到生词能读出来，听到发音能拼出来，拆开词根能猜出意思，再用科学的复习与输出，把被动词汇变成主动词汇。全站 8 门方法课程、每门 8 步，从自然拼读到元认知训练排成一条学习路径。

首页学习地图：8 个方法模块一条路径走通

  技术形态上，它是一个纯前端、零后端、零 CDN 的站点：不加载任何外部字体与网络资源，全部使用系统字体栈，断网也能用；学习进度、复习排期、个人设置全部存在浏览器本地的 localStorage 里，刷新不丢。

开发理念：vibe coding 的几条原则

  这个项目从头到尾由我用自然语言驱动 AI 完成，属于典型的 vibe coding 实践。但" vibe “不等于"随口说说”，为了让产出不沦为 AI slop，我给自己定了几条硬约束。

  第一，先锁验收，再写代码。 项目里所有功能都必须先有可执行的验收标准，再允许改动。这套约束落在仓库的四个脚本上：

  • scripts/checkData.mjs —— 数据层断言：48 个音标 id 唯一、例句含目标词、11 种题型每种至少 8 道且答案自洽、8 门课 × 8 步动画类型全部被支持；
  • scripts/acceptance.mjs —— puppeteer 驱动的深度 UI 验收：13 条路由零 console.error、首页 3 秒内可交互、旗舰课 8 步走通、拖拽题可判对、刷新保留进度、375px 视口无横向滚动；
  • scripts/smoke.mjs —— 冒烟测试，快速确认全路由可访问、核心流程可走完；
  • scripts/size.mjs —— 首屏体积门禁，首屏 JS+CSS（gzip）必须小于 200KB。

  第二，内容数据化。 所有教学内容——8 门课的六段结构、48 个音标的口型舌位、11 种题型的题库、词根词缀、遗忘曲线排期——全部是 src/data/ 下的 TypeScript 数据文件，而不是散落在组件里的硬编码。改一门课的内容不需要动任何 UI 代码，数据检查器会立刻告诉你有没有把结构改坏。这是我认为最适合 AI 协作的架构：人和 AI 都只改数据，渲染层保持稳定。

  第三，最小切片 + 逐轮清理。 不追求一次生成完整应用，而是先跑通一个可验收的切片，再按"死代码 → 重复 → 命名与错误处理 → 测试加固"四轮清理，每轮结束都复跑全套验收。项目里 .omx/plans/ 下留着当时的验收与修复计划文档，可以看到这套流程的原始痕迹。

vibe coding 的关键不是让 AI 写多少行代码，而是你能不能把"什么叫做对了"描述成机器可执行的判据。

技术重点速览

  技术栈并不新奇，但在约束下有几个值得一提的取舍：

  • React 18 + TypeScript + Vite + Tailwind，路由全部懒加载，构建时按 vendor / motion 手动分包，配合体积门禁控制首屏；
  • zustand + persist 三个 store（进度、复习、设置），把 XP、连续天数、活跃热力图、错题本、SRS 卡片全部落到 localStorage；
  • 间隔重复排期：复习按 1 / 3 / 7 / 14 / 30 天五档调度，答对升档、答错降回第 0 档，页面上是一个可视化的到期队列；
  • 零音频文件的语音方案：例词朗读用 Web Speech API（英式/美式、常速/慢速），交互音效用 Web Audio API 现场合成振荡器波形，不引入任何音频资源；
  • 动效可降级：framer-motion + GSAP 负责入场与课程动画，但动画档位分 full / light / off 三档，自动跟随系统的 prefers-reduced-motion，并写入 <html data-motion> 让 CSS 同步降级，无障碍不是事后补的。

旗舰课分步动画：规则讲解与音节切块演示

音标实验室：48 个音标的发音教学与口型动画

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

学生能从中学到什么

  如果你也在做类似的课程项目或毕业设计，这个项目能给你三层可迁移的经验。

  方法论层面：课程的固定六段结构（原理讲解 → 分步动画演示 → 互动练习 → 实战分析 → 常见误区 → 掌握标准）本身就是一套通用的教学设计模板，换成数据结构课程、操作系统课程同样适用。而间隔重复、主动回忆、元认知复盘这些学习科学原理，是拿来就能用的个人学习系统。

  工程层面：数据驱动的内容架构、状态持久化、性能体积门禁、响应式与无障碍降级、自动化验收——这些都是真实项目里每天要处理的问题。你会明白"能跑"和"可验收"之间隔着多少东西。

  协作层面：当开发由自然语言驱动时，最值钱的能力变成了把意图写清楚、把验收写成代码。AI 可以替你写实现，但"什么叫做对了"必须由你定义；定义得越具体，产出越不像 slop。

授人以渔的下一句，是让学习者自己能造出新的鱼竿。

  如果你也在做类似的个人项目，欢迎交流指正——尤其是"验收标准怎么写才能既约束 AI、又不限制创造力"这个问题，我还在持续摸索。