我花了3天用AI编程工具开发了一个通过美剧原声练习英语口语的网站，群友评价非常惊艳！

今天抽时间来复盘一下这个跟着美剧原声学习英语口语网站的开发经过，只说AI编程中的要点，不是非技术复盘，不用害怕，小白也能看懂。
先看一下线上效果：

网址： https://learn-language.yueshu365.cn/

我以前有段时间想学好英语口语，听了好多个专门的课程，比如：

赖世雄老师的英语学习方法论
许岑的英语学习方法论
许岑英语课-看电影学英语

这些课程我看完后虽然口语能力并没有提升很多，但是它让我对学习英语（包括口语）的方法论有了更深的领悟，拿口语来说，就是要练，多对话，多说，要想发出更地道的美音、伦敦腔，那就是要把他们真实表达时的发音学会。（比如，连音对他们来说只是那样子说更方便、嘴唇运动更自然，但是对于非英语母语的人来说是没办法一开始就自然起来的，就是要靠练习，习惯他们那种自然的发音）。

所以后面我就在网络上找了一些美剧中的台词视频进行练习，练习的过程中发现了了一些不方便的地方（痛点）：视频/音频中的台词是一句接着一句的，播完一句就来下一句了，跟读时间是死的，有些人可能会觉得跟读时间太长或太短，但是都没办法调整，只能靠自己手动去点击暂停按键，自己跟读几遍后再点击播放按钮，很麻烦。

口语学习大概持续一个多月，后面应为工作比较忙，就没有再练习了，但是这个痛点我自己是深有感触。

这一次之所以能想起来，也是因为参加破局俱乐部的AI编程行动营，破局还组织了一个黑客松比赛，让大家把自己的想法通过AI编程工具开发出来。我想了好几个点子，不过都因为种种原因被我给pass了。

最后我想起自己之前学习口语经历中的一些痛点。既然要参加黑客松比赛，我就想，能不能利用AI编程快速做出一个工具来解决这个跟读不便的问题呢？这个工具的核心逻辑其实很清晰：让用户能够自由控制每一句台词的播放和跟读间隔。想到这里，我觉得这个想法完全可行，于是就把我自己学习过程中的痛点发给AI，跟他聊了下，看看可以怎么优化这个学习过程。

我没有直接就让AI给我解决方案，因为这种直接让他想，我自己也没有办法判断他的方案到底好不好。于是我就先让AI帮我提供了一些当前网上已有的英语口语学习类网站：

我根据它提供的网站去尝试了几个，心里大概有谱了。它们功能虽然丰富，但是专门针对影视台词跟读且提供灵活暂停/播放控制的工具几乎没有。要么是功能过于复杂，要么就是交互不够直接。这让我更加确信，一个极简、专注、可自定义跟读节奏的练习工具是有其独特价值的。
于是，我跟Deepseek聊了几个来回，让他帮我把需求的核心内容给整理出来了。

最后把上面整理出来的需求文档，我保存成markdown文件，让claude帮我开发了一个纯静态的HTML代码的原型。
原型长这样：

上面这个原型里面的模块其实就是最终成品那样了，后面只是改了一些主题和细节内容，大的核心功能在这个原型里面已经确定好了。

上面就是说的内容，其实也就是我在这篇文章《【AI编程干货】一篇被Claude官方周限制逼出来的干货；Token成为硬通货后，我的Claude Code精算准则》中讲的理清需求这一节内容的一次实操。利用AI帮我们从一个最初的想法，变成一个需求文档，再根据需求文档生成了一个产品原型。

原型确定后，接下来就是真正的代码实现了。这里我做了一个重要的技术决策：采用前后端分离的架构。简单来说，就是把网站的数据处理（后端）和页面展示（前端）分开开发。这样做的好处是逻辑清晰，而且以后想开发App，可以直接复用后端的逻辑。基于这个决定，我的开发路线图就很明确了：先让AI帮我构建稳固的后端（数据库和接口），再基于这些接口去开发前端页面。所以，我首先把需求文档和原型发给了Claude，让它优先完成数据库设计和接口开发。
后端接口开发完毕，我让大模型帮我根据后端代码中定义的接口，帮我生成一个接口文档，生成为Curl命令，让我既可以用来做接口测试，又可以在后续用来生成前端代码。
接口的curl文档如下：

在有了后端接口文档和需求文档、以及原型之后，我就可以通过这些材料来开发前端功能了
在提供提示词的同时，把上面三个文件都提供给大模型，让他帮我开发完前端的所有功能：
部分提示词截图：

就这样，在AI编程工具的帮助下，网站很快具备核心功能，前后端的接口对接也完成了。但是在真正开始使用时，我才发现细节上的问题非常多，比如：

添加句子时，我明明添加成功了，但是添加按钮没变化，导致我分不清我是不是已经添加了。
页面不是视频移动端，导致在手机上打开页面变的非常乱。
页面下方的mini播放器展示不是，随机播放和顺序播放按钮可以合并为一个按钮。
随机播放实现方式不正确，完全真随机，导致总是会重复播放同一句话。
......

这些看似微小的交互问题、体验问题，会极大地影响使用的流畅感。于是，我开始了漫长的“捉虫”之旅。
我改完整个网站后，我AI编程群的一个群友体验后跟我说网站的质量很高，没什么bug，问我有什么诀窍。
然后我就把我一整天发给AI改bug的提示词发给他，里面都是我每次使用完，发现问题后让AI进行修改的提示词。
整个网站开发+上线一共3天时间（另外还有一两天在整理音频资源和文本数据），但是打磨这些细节就花了整整一天。没其他诀窍，要想提升产品质量还是要靠死磕。
AI编程带给我们的有开发效率的提升，在开发需求提示词写明白的情况下也可以很大程度上减少bug，但是细节上还是要自己花时间自己把关、体验和优化。
修复bug的提示词截图（部分）：

经过这些主要步骤，最终呈现出来的就是现在线上访问到的这个效果了。（开头视频或直接进入下面网址进行体验）
线上的网址： https://learn-language.yueshu365.cn/
最终也有群友体验后跟我说“效果非常惊艳！”，哈哈，被这位群友鼓励到了，作为一个开发者，做出了一个对别人有价值、被人认可，这是最大荣幸！

用正确的方法用好AI编程工具，效率会提升非常多！缩短了想法到实现之间的距离，极大的降低了我们的试错成本。
Dropbox当年因为开发成本极大、时间花费可能非常多，他们一开始并没有去开发产品，而是做了一个概念产品，用视频去展示他们要做的产品的功能，然后吸引到了很大一波目标用户。
但是现在在AI编程工具的加持下，我们完全可以用做视频的时间去完成一个产品的MVP开发，直接用这个MVP产品去吸引用户，让用户不再需要等待，就能直接体验到产品价值。
真是一个令人激动的时代！

福利

我这些天把我之前开发的提示词网站的开发全过程都整理了出来，形成了一篇非常详细的手册内容，目前已经有 2 万多字的内容，涵盖了环境搭建、开发、Claudeo code 使用、所有功能的提示词、上线部署一整套工具的内容。加我微信：ithulianwang 就能免费获取手册的全部内容，还有技术交流群等你来，AI技术资料每日分享。
这个英语口语网址的开发手册我还在整理中，整理完也会在这个手册和我AI编程群里公布，欢迎大家关注呀！
手册地址： Nano Banana 提示词网站从开发到上线全流程保姆级教程