用 Gemini 打造一款背单词 App：Vibe Coding 实践笔记用 Gemini 的 Vibe Coding

用 Gemini 打造一款背单词 App：Vibe Coding 实践笔记

最近，Gemini 新版上线，其强大的代码生成与多模态能力让我突发奇想：能不能直接用它帮我做一个背单词应用？正好四六级临近，做个“悦己”工具也挺实用。于是，我尝试用 Vibe Coding 的方式，把想法变成产品原型。

什么是 Vibe Coding？

Vibe Coding 不是传统意义上的敲代码，而是一种以自然语言驱动开发流程的新范式。你只需清晰表达需求（Prompt），AI 就能帮你完成从产品设计、UI 稿、前后端代码到测试的全流程。它强调：

一个人搞定一个项目
需求先行，分步执行
风格明确，拒绝模糊

这背后依赖的是像 Gemini 这样支持超长上下文（单次百万 tokens）、具备商用级前端能力的大模型。

我的完整 Prompt

为了让 Gemini 精准理解并生成符合预期的应用，我撰写了以下结构化 Prompt：

构建一款具备以下能力的 AI 字典：

用户进入后，先选择自己的母语和目标语言（两者都提供全球最常用的10种语言）。
用户可以输入任意文字，包括单词、短句和整句。

结果页将展示：
- 用母语写出的自然语言解释
- 两个例句，并分别附上对应的母语翻译
- 一段轻松、有趣、像朋友聊天一样的用法说明，内容涵盖文化语境、使用场景、语气、相关词（同义词或外形相似但常被混淆的词）及它们的差别。必须避免教科书式表达，直接进入主题、语言要非常简洁。
- 一张由 AI 生成的图片能直观呈现该概念。
- 同时提供一个聊天功能，用户可以随时就这个词提出问题，AI 会在对话中继续解释。
- 每个单词或短语都配有目标语言的发音按钮；
- 所有例句也都需要具备朗读功能。
- 语言要自然、没有延迟。

用户可以将任意结果页保存到“笔记本”，方便日后复习。
在笔记本中，还提供一个“编故事”功能：AI 会把单词本里的单词或短语串联成一个小故事，帮助记忆和理解。

另有一个“学习模式”：AI 会根据笔记本词汇自动生成闪卡。
- 闪卡正面展示目标语言词语及相应概念图；
- 背面展示该词的母语定义以及例句。
- 点击卡片可触发翻面动画。

整体风格应明亮、有趣、有活力、视觉上吸睛，并以移动端体验为优先。