跬步 On Coding

Lexideck 背单词小应用：AI 时代的 Vibe Coding 实践

Jun 30 2026

我平时习惯通过 RSS 订阅 Hacker News，后来随着 Twitter 上线了默认翻译功能，我对直接阅读第一手英文资讯的需求越发强烈。然而现实很骨感：词汇量实在太低。因为现在机器翻译过于方便，我一般都是直接依赖浏览器翻译来看文章；有时候也会强迫自己不用全篇翻译，而是借助划词翻译来硬啃。

硬啃倒是能啃下来，但问题在于：读完了，生词该不认识还是不认识，英语水平并没有实质性的提升。

我觉得关键的痛点在于，我没有把这些在真实阅读场景中遇到的生词记录下来，也没有去反复背诵。所以我一直有个执念：做一个记录生词的工具。在划词翻译发现生词时，顺手把它记录下来，然后可以在手机上同步，随时随地利用碎片时间背单词。一旦这个“阅读发现 -> 记录 -> 间隔重复背诵”的数据飞轮转起来，我相信我的英语水平肯定会逐步提升。

不过，因为我自己一直是个偏后端的程序员，没怎么写过前端和 UI，这个计划就一直停留在脑海里，没有真正落地。

直到这半年，我深度体验了 Vibe Coding 的开发模式后，我突然顿悟了：在现在的 AI 时代，我其实根本就不需要会写前端和 UI。我只需要把需求描述清楚，让 Coding Agent 一点点帮我把代码“糊”出来就好了。

所以，我决定重启这个计划，目标是实现这样一个闭环模式：

  1. 浏览器插件：用于阅读时的划词翻译，并一键添加生词。
  2. 服务端：接收生词并存储，同时可以通过 LLM 生成更多的词汇释义、例句和记忆法。
  3. 手机客户端：同步服务端数据，利用间隔重复算法背诵生词。

1. 划词与词典：站在巨人的肩膀上

在一番调研后，我发现了一个专门做查词的浏览器插件 Yomitan。它非常强大，支持导入自定义字典，并且可以通过 AnkiConnect 协议，把查到的生词直接写入到 Anki 中。

Anki 确实是背单词的终极方案，但它毕竟是个有些古老的软件了，而且要在各个设备间丝滑同步并不算简单。不过 Yomitan 的 AnkiConnect 协议给了我灵感：我完全可以自己写一个兼容 AnkiConnect 协议的服务端，来替代 Anki 接收 Yomitan 的单词。

在寻找 Yomitan 的英汉字典时，我遇到了一点波折。网上我只找到了《牛津高阶英汉双解词典第10版(OALD 10) Yomitan 适配版》。但在实际使用中我发现，高阶字典其实不适合用来背单词——它的释义太细，例句太多，看一眼卡片密密麻麻，认知负担极重。

幸好，在那个分享帖子里，作者给出了将 mdx 字典转换为 Yomitan 格式的思路。于是我找来了《牛津低阶》、《牛津中阶》和《牛津袖珍》的双解词典，让 Coding Agent 参照别人的转换脚本，生成了这些字典的 Yomitan 版本。经过对比，我发现《牛津中阶英汉双解词典》的内容粒度最适合我现在的词汇量和背诵节奏。

(注：由于词典版权原因，这里我就不直接放分享地址了，如果有技术交流需要的同学可以给我发邮件。)

2. 服务端：轻车熟路的 Serverless 架构

搞定了输入端，接下来就是服务端了。

为了零成本且高可用，技术栈我毫不犹豫地选择了可以免费搭建的 Cloudflare Workers，数据库使用 Cloudflare D1。

说干就干。我直接套用了我之前总结定义的 Go 开发流 Prompt（参考这里），稍微调整后丢给 LLM。很快，一个运行在 Cloudflare Workers 上、完全兼容 AnkiConnect 核心接口的后端 API 服务就跑起来了。

3. 客户端：让 AI 帮我做设计与前端

数据存下来了，接下来是怎么背。

我最初在 Apple Store 上找了一些背单词 App，发现它们对导入自定义生词（尤其是带有上下文例句的生词）的支持都不太好。那我是不是要自己开发一个 iOS App？考虑到我没有苹果开发者账号，也没有备案域名，这条路显然太重了。

最终我决定：直接用 PWA (Progressive Web App) 的形式提供这个背单词的应用。

既然要提供类似 Anki 的硬核背单词体验，那就必须用上最先进的算法。我直接接入了 FSRS v5 算法来处理重复练习和刻意练习的调度。很快，一个 Demo 级别的 PWA 就写好了。

但是，Demo 实在太丑了。这时候 Vibe Coding 的威力显现了：

我在 Twitter 上看到了一个很棒的项目 awesome-design-md。我直接让 AI 结合这个库，帮我推荐一个适合背单词 App 的 DESIGN.md。

  • 第一版，AI 推荐了 Spotify 的卡片式风格。改完一看，纯黑的主题在白天背单词看着很难受。
  • 于是我让 AI 继续帮我换一个浅色的设计，它又推荐了 Lovable 风格。
  • 这一版出来后，非常清爽现代。我又指挥 AI 一点点调试了 PC 端和 iPhone 端的响应式体验。

最终，就有了现在这一版体验相当不错的 Lexideck (GitHub: zhu327/lexideck)。

4. 扩展视野：终端里的碎片时间

应用跑通后，发生了一件很有意思的事。

我在逛 Twitter 的时候，看到有人推荐了 fishword 这个项目。它的理念很绝：在使用 Pi 等 Coding Agent 写代码时，Agent 经常需要好几分钟去输出 Token。这个等待的过程极其无聊，大多数人（包括我）会切出去看网页，等切回来时往往 Agent 已经执行完很久，或者中途中断了。而 fishword 在这个等待的间隙，通过 TUI 浮窗让你背单词！

这是一个极其神奇且切中痛点的想法。不过 fishword 内置的是标准词库，我既然有了 Lexideck，完全可以自己写一个 Pi extension 对接我自己的生词本。

再一次“说干就干”，很快 pi-extension-lexideck 就出炉了。

Image

至此，我的背单词“数据飞轮”彻底闭环了：

  1. 输入：看英文文章时，用 Yomitan 浏览器插件划词翻译，一键记录生词。
  2. 移动端复习：通勤或摸鱼时，打开 iPhone 上的 PWA 背单词。
  3. PC端复习：在用 Pi 辅助写代码等待输出时，终端里弹出生词顺手复习。

5. 解决问题与妥协

当然，开发过程中也有没解决的问题。后来我在 Apple Store 发现了一个叫“面包 Anki”的 App，支持导入 Anki 的 .apkg 数据包。为了能用上它的原生体验，我在 Lexideck 服务端增加了生词导出为 .apkg 文件的功能。

不过很遗憾，导出的文件在“面包 Anki”里无法正常导入。排查了一阵还没找到确切原因，考虑到现有的 PWA 和 TUI 已经能满足我 90% 的需求，这个 bug 我就暂时搁置了。在个人项目中，懂得适时妥协也是推进项目的一种策略。

总结：Vibe Coding 时代的程序员

回顾开发 Lexideck 的这短短几天，我最大的感慨是：我依然不懂 TypeScript，依然不会手写精美的 CSS，但我能通过 Vibe Coding 的流程，把一个全栈应用又快又好地“糊”出来。

在这个低成本 Coding 的时代，只要你有清晰的想法，能拆解梳理出自己的需求（业务逻辑、架构设计、数据流向），结合 DESIGN.md 这样的规范约束，就尽管放手去 Coding 吧。

另外分享一个经验：在这次开发中，我大量使用了国产模型做过程 Coding，速度快且便宜。但在完成某个模块后，我通常会把代码丢给 GPT-5.5 重新 Review 一下。事实证明，GPT-5.5 总是能精准地挑出一些边界条件处理不当、或者架构耦合度高的毛病。通过不同模型之间的交叉 Review 来保证代码质量，是当下极其高效的工作流。

工具已经就绪，接下来，就看我自己能不能坚持把生词背下去了，哈哈。