Project Retrospect · 2026

给对象的纪念日礼物:用 AI 做了一个情侣词典

一个周末、一个想法、一套独属于我们的语言体系。

🕰️ 一天做完 💰 ¥210 成本 🌐 cm-dictionary.site

起源:建立独属于我们的语言体系

昨夜,和对象在玩 Suki 这个游戏,最后它首页里弹出了一个问题:

"假如今天是你们第一次遇见,你会怎样做自我介绍?"

于是,本来贴得很紧的两个人,开始坐得离彼此有点距离。我们穿越回几百天前,那个第一次见面的一天。开始慢慢试探地询问——从做什么工作,到是哪里人,五一打算怎么安排。

我发现,当我们变成陌生人以后,用的词汇都好普通和生疏。瞬间开始珍惜,这几百天的相处中,我们一起创建的特有词汇——

于是,vibe-coding 做了一个词典 👉 cm-dictionary.site

创造的过程总是特别快乐,更何况这是为我们一起创造的每一个可爱的词安一个家,纪念一下只有我俩听得懂的悄悄话。

如果有朋友也想做一个属于自己的词典,我可以出个模板!

"世界上有多少人,就有多少种语言。" —— 《爱情怎么翻译》

⚙️ 技术架构

技术栈(刻意保持极简)

层级 选择 为什么
前端 原生 HTML + CSS + JS 轻量、零构建、永不失效
数据 data.js 单文件 改词就像改文档一样简单
音频 自己录的 m4a 最真的声音
部署 Vercel + 腾讯云 DNS 免费托管 + 自定义域名
AI 协作 Claude Code + 自定义 Skills /add-word 一条命令录入

项目结构

dictionary/
├── index.html           # 首页(按词性分类)
├── word.html            # 详情页(拼音+释义+双语造句)
├── data.js              # 所有词条数据
├── audio/               # 自己录的拼音音频
├── .claude/skills/
│   ├── add-word/        # 自动化新增词条
│   └── categorize-words/# 词性分类逻辑
└── favicon.svg          # 自己画的"典"字印章

关键决策

为什么不用数据库?
这是"我们"的词典,不是给别人用的 SaaS。改词的成本要比上线一个新功能还低。
为什么要有麻瓜释义?
一般的麻瓜会这么理解这个词,让外人也能看懂,避免把悄悄话变成孤岛。
为什么自己录音?
拼音是共同发明的,所以读音也该是我们的。

🤝 人和 AI 是如何配合的

Human

创意方向、产品判断
("这个声音不对"、"国学印章要再靠紧一点")

Claude

实现(写 skills、调 CSS、生成双语翻译)

这种 "我说要什么感觉,你去实现" 的模式,在 1 天内产出了一个完整的沉浸式体验。

最意外的是,Opus 4.7 真的聪明,懂我这些词语想表达的抽象含义。本以为这些不常见释义的英文需要自己来,没想到 Opus 能懂我 —— 比如 "焦焦" 是《头脑特工队》里的 Anxiety,它第一次就翻译对了语感。

💰 成本

项目 费用
Claude Code tokens(全部代码生成) ~¥200
域名(腾讯云) ¥10
总计 ~¥210

⏱️ 实现时间

周六早上躺在床上想到的,下午直接开干,晚上就做完了。

💡 给想要 vibe-coding 的你

  1. 用最好的模型,好模型一遍就过 省时省力,Opus 4.7 是我心中的白月光。⚠️ 一定注意模型不要切错了!不然很容易边骂模型蠢边流泪,然后发现根本不是自己想要的模型,上下文还快超限制了 😭
  2. 有灵感就直接动手 Vibe-coding 能快速试错,想法在做的过程中不断涌现
  3. 兴趣是第一驱动力 只有真的喜欢,才会想着迭代,不断做好。上周末做了一个雪宝组装的项目,也实现了 MVP,但因为兴趣不大就没继续迭代。而这个项目,我一口气做完,不断纠正手机显示的错误、优化首页展示、制作 skills 优化流程 —— 都是因为自己想做好。一直到我自己看着词典上有意思的表达,自己把自己逗笑了,就觉得很值得。第一次体会到,问题很有活人感、还带一点讽刺意味的作品是真的很搞笑 —— 之前都是看别人的作品比如 SBTI 和青椒模拟器,现在体会到创作这样的作品也很好玩
  4. 分享!分享!分享! 做完之后分享出去,有时候比项目本身更有价值。你现在看到的这个网页,就是分享的一部分 ✨
  5. 程序员们都太伟大了 因为 vibe-coding 了一整天,过程中是很开心很有动力的。但是写完以后,再点开 VS Code 竟有些"反胃" 🤢。于是更加感谢对象愿意下了班还教我 GitHub 怎么用 🧎‍♀️ 程序员们都太伟大了。
  6. 关于 FOMO 以前对 skill 我不以为然。4 月初"蒸馏同事"爆火以后,我开始觉得自己落伍,"怎么还没学会用 skills!!",觉得 skills 好高大上、好 🐂🍺、有种拯救世界的感觉。但自己在这个项目里也可以随手做一个 skills,最后复盘的时候还用了别人的 skills。我不想说之前的焦虑是不好的 —— 它推动我去进步,但也不要放大这种焦虑,而是真的去使用这个工具,最后大概率你会发现"好用但不过如此"或者"🌶︎🐔" 🤪🤪
  7. 部署的最后一公里 做完词典,从实现的角度讲,我发自内心觉得这是一个很简单的项目 —— 不过就是和 Claude 聊天 + 找一个参考网站告诉它怎么改,这事基本就成了。但部署网站、买域名这两步出乎意料地比我想的要复杂(也许是因为第一次干)。"Vibe-coding 一小时,部署一整天" —— 从自己能用到大家能用,这里的最后一公里,我觉得还是有很大空间。
  8. 多看多用 skills 就有点像平时多储备武器、多练武功,上战场能快速用上,不会书到用时方恨少。
  9. 审美积累 推荐之前 Focus Flight 的开发者推荐的Dribbble和Mobbin,找到一个参考网站能让思路清晰和加速很多

后记

给对象看了这个网站,他看每一个词的时候都捧腹大笑,也算是给他的一个纪念日礼物了 🤓🤓

我俩还会持续维护这个网站的,更新我俩创造的神奇词汇!!

Happy anniversary!! 🎉