VibeCoding English — 英语学习助手 PRD & 设计文档
面向中国程序员的 Vibe Coding 英语学习 VS Code 插件
一、产品概述
1.1 问题定义
中国程序员在 Vibe Coding（AI 辅助编程）过程中，大模型的思考链（Chain of Thought）、工具调用日志、代码注释等内容大量使用英文。英语水平一般的程序员在遇到生词时，需要频繁切换到翻译工具，打断编码心流，效率低下且难以持续学习记忆。
1.2 产品定位
一款集成在 VS Code 中的轻量级英语学习插件，让用户在编码过程中无感查词、上下文理解、积累记忆，最终在编码中自然提升英语能力。
1.3 核心价值
| 痛点 |
解决方案 |
| 生词打断编码心流 |
选中即翻译，0 切换成本 |
| 脱离上下文理解不准确 |
LLM 结合上下文语境精准释义 |
| 学完就忘、下次还查 |
本地单词本 + LLM Agent 主动复习 |
二、用户故事
| ID |
用户故事 |
优先级 |
| US-01 |
作为程序员，我想选中生词后按快捷键，立即看到中英释义 |
P0 |
| US-02 |
作为程序员，我想右键选中单词，在弹出的菜单中快速翻译 |
P0 |
| US-03 |
作为程序员，我想看到结合当前句子/段落的语境释义 |
P1 |
| US-04 |
作为程序员，我想把生词一键加入单词本 |
P0 |
| US-05 |
作为程序员，我想在工具栏查看已收藏的全部生词 |
P1 |
| US-06 |
作为程序员，遇到已收藏的单词时，自动提示之前学过 |
P1 |
| US-07 |
作为程序员，我想让 AI 学习助手帮我回顾生词的使用场景 |
P2 |
| US-08 |
作为程序员，我想配置快捷键和翻译服务偏好 |
P2 |
三、功能需求
3.1 翻译功能
F-01 基础词典翻译（P0）
- 触发方式：选中单词 → 快捷键
Ctrl+Shift+T / 右键菜单 "翻译选中单词"
- 展示方式：VS Code 通知栏（Notification）或悬浮提示窗（Hover）
- 数据来源：技术词库 + 内置离线词典 + 在线词典 API（优先级：技术词库 > 本地缓存 > 离线词典 > 在线 API）
- 展示内容：音标、词性、中文释义、例句
┌──────────────────────────────────────────┐
│ 🔤 accomplish │
│ /əˈkɑːmplɪʃ/ v. │
│ 释义：完成，实现，达到 │
│ 例句：We have accomplished a great deal. │
│ 我们已经取得了很大成就。 │
│ │
│ [📖 加入单词本] [📋 复制] [❌ 关闭] │
└──────────────────────────────────────────┘
F-02 上下文智能释义（P1）
- 触发方式：选中单词 → 快捷键
Ctrl+Shift+G / 右键菜单 "上下文翻译"
- 核心逻辑：
- 获取单词所在行的前后 N 行（默认前后各 3 行）作为上下文
- 调用 LLM（如 GPT-4o-mini）进行语境分析
- 返回：语境中文翻译 + 单词在该语境下的精确含义 + 技术领域的专业释义（如适用）
┌──────────────────────────────────────────┐
│ 🔤 resolve (上下文翻译) │
│ │
│ 原文: The function will resolve the │
│ promise after 3 seconds. │
│ │
│ 语境翻译: 该函数将在 3 秒后解决 Promise。 │
│ 技术释义: resolve — 使 Promise 进入 │
│ 已完成状态并返回值 │
│ 通用释义: 解决、决心、解析 │
│ │
│ [📖 加入单词本] [🤖 AI详细讲解] [❌] │
└──────────────────────────────────────────┘
3.2 单词本功能
F-03 单词收藏管理（P0）
- 存储结构：本地 JSON 文件（
~/.vibecoding-english/wordbook.json）
- 存储字段：
{
"word": "accomplish",
"addedAt": "2026-05-25T15:30:00+08:00",
"phonetic": "/əˈkɑːmplɪʃ/",
"meaning": "完成，实现",
"context": "We have accomplished a great deal.",
"contextTranslation": "我们已经取得了很大成就。",
"source": "claude-code", // 来源：claude-code / opencode / manual
"reviewCount": 0,
"lastReviewedAt": null,
"tags": ["general"]
}
F-04 单词本面板（P1）
- 位置：VS Code 侧边栏或底部 Panel（Webview）
- 功能：
- 按时间/字母排序
- 关键词搜索
- 点击查看详情
- 删除/编辑单词
- 导出为 Anki/CSV
F-05 已学单词自动提示（P1）
- 当用户选中一个已在单词本中的单词时，翻译结果中提示"📌 已收藏 · 上次查阅：2026-05-20"
- 右侧状态栏显示当前文件中的已学单词数量
3.3 AI 学习助手（P2 高级功能）
F-06 LLM Agent 学习助手
- 形态：VS Code Chat Participant（或独立 Webview Panel）
- 能力：
- 查询某个收藏单词的所有出现场景（在哪天、哪个项目、什么上下文）
- 生成包含该单词的技术例句帮助记忆
- 每日/每周推送单词复习提醒
- 根据学习进度自动安排间隔复习（类 Anki 算法）
- 对话式交互：用户可向 Agent 提问单词用法
用户: 帮我回顾一下 "delegate" 这个单词
Agent: 📚 "delegate"
你在以下 3 个场景中遇到过：
1. [2026-05-20] OpenCode 工具调用日志
上下文: "You can delegate this task to the code-explorer agent."
含义: 委托、授权
2. [2026-05-18] TypeScript 代码
上下文: "...using event delegation pattern..."
含义: 事件委托（设计模式）
...
四、系统架构
4.1 架构图
┌─────────────────────────────────────────────────────────┐
│ VS Code Extension │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌───────────────┐ │
│ │ Selection │ │ Context │ │ Wordbook │ │
│ │ Handler │ │ Menu │ │ Panel │ │
│ │ (快捷键监听) │ │ (右键菜单) │ │ (Webview) │ │
│ └──────┬───────┘ └──────┬───────┘ └───────┬───────┘ │
│ │ │ │ │
│ ┌──────┴─────────────────┴───────────────────┴───────┐ │
│ │ Core Service │ │
│ │ ┌──────────┐ ┌───────────┐ ┌──────────────────┐ │ │
│ │ │Translate │ │ Wordbook │ │ LLM Agent │ │ │
│ │ │ Service │ │ Service │ │ Service │ │ │
│ │ └────┬─────┘ └─────┬─────┘ └────────┬─────────┘ │ │
│ └───────┼─────────────┼────────────────┼────────────┘ │
│ │ │ │ │
└──────────┼─────────────┼────────────────┼───────────────┘
│ │ │
┌──────┴──────┐ ┌───┴────────┐ ┌────┴─────────┐
│ Dictionary │ │ Local │ │ LLM API │
│ API / │ │ JSON DB │ │ (OpenAI / │
│ Offline DB │ │ │ │ Claude) │
└─────────────┘ └────────────┘ └──────────────┘
4.2 技术栈
| 层级 |
技术选型 |
说明 |
| Extension 框架 |
VS Code Extension API |
TypeScript |
| UI（单词本面板） |
Webview + React / Svelte |
轻量框架 |
| UI（通知） |
VS Code TreeView / Notifications |
原生组件 |
| 离线词典 |
freedict 数据 / 自建 SQLite |
基础词汇覆盖 |
| 在线词典 |
Youdao API / Bing Dict API |
补充释义 |
| LLM 服务 |
OpenAI API (gpt-4o-mini) |
成本低、效果好 |
| 本地存储 |
VS Code globalState / JSON 文件 |
无需额外依赖 |
| 缓存 |
vscode.workspace.fs |
文件系统缓存 |
4.3 模块设计
src/
├── extension.ts # 入口：注册命令、快捷键、菜单
├── services/
│ ├── translate/
│ │ ├── index.ts # 翻译调度器
│ │ ├── offline-dict.ts # 离线词典查询
│ │ ├── online-dict.ts # 在线词典 API
│ │ ├── llm-translate.ts # LLM 上下文翻译
│ │ └── cache.ts # 翻译结果缓存
│ ├── wordbook/
│ │ ├── index.ts # 单词本服务
│ │ ├── storage.ts # JSON 文件读写
│ │ └── review.ts # 间隔复习算法
│ ├── llm/
│ │ ├── agent.ts # LLM Agent 核心
│ │ └── prompts.ts # Prompt 模板
│ └── config.ts # 配置管理
├── ui/
│ ├── hover-provider.ts # Hover 翻译展示
│ ├── quick-pick.ts # 快速选择展示
│ ├── wordbook-webview/ # 单词本 Webview
│ │ ├── index.html
│ │ ├── App.tsx
│ │ └── styles.css
│ └── status-bar.ts # 状态栏显示
├── commands/
│ ├── translate.ts # 翻译命令
│ ├── add-to-wordbook.ts # 加入单词本
│ └── open-wordbook.ts # 打开单词本
├── providers/
│ └── completion.ts # 已学单词自动提示
└── tests/
└── ...
五、交互流程
5.1 基础翻译流程
用户选中英文单词
│
├── 按 Ctrl+Shift+T ──────────────┐
│ ▼
│ ┌──────────────┐
│ │ 检查本地缓存 │
│ └──────┬───────┘
│ 命中 │ 未命中
│ ┌───────┘ └───────┐
│ ▼ ▼
│ ┌──────────┐ ┌──────────┐
│ │ 返回缓存 │ │ 离线词典 │
│ │ 翻译结果 │ │ 查询 │
│ └──────────┘ └────┬─────┘
│ 命中 │ 未命中
│ ┌───────┘ └───────┐
│ ▼ ▼
│ ┌──────────┐ ┌──────────┐
│ │ 展示结果 │ │ 在线API │
│ └──────────┘ │ 查询 │
│ └────┬─────┘
│ ▼
└── 或 右键菜单选择"翻译" ────────────────────→ ┌──────────────┐
│ 展示翻译结果 │
│ (通知栏/弹窗) │
└──────┬───────┘
│
用户点击 [📖 加入单词本]
│
▼
┌──────────────┐
│ 写入单词本 │
│ 显示反馈提示 │
└──────────────┘
5.2 上下文翻译流程
用户选中英文单词 → 按 Ctrl+Shift+G
│
▼
获取上下文文本（前后 N 行）
│
▼
构建 Prompt 发送给 LLM ────────→ LLM 返回：
│ - 语境句子翻译
│ - 单词在该语境下的精确含义
│ - 技术领域专业释义
│ - 词根词缀分析
▼
┌──────────────────┐
│ 结构化展示翻译结果 │
│ [📖 加入单词本] │────→ 加入单词本时同时保存上下文
│ [🤖 AI详细讲解] │────→ 打开 AI Agent 对话面板
└──────────────────┘
六、数据设计
6.1 单词本数据结构
interface WordEntry {
id: string; // UUID
word: string; // 原词
phonetic: string; // 音标
meanings: Meaning[]; // 释义列表
contexts: ContextEntry[]; // 出现场景记录
tags: string[]; // 标签：技术领域分类
reviewSchedule: ReviewSchedule; // 复习计划
createdAt: string; // ISO 8601
updatedAt: string;
}
interface Meaning {
partOfSpeech: string; // 词性
definition: string; // 释义
examples: string[]; // 例句
isTechnical: boolean; // 是否技术相关释义
}
interface ContextEntry {
source: 'claude-code' | 'opencode' | 'cursor' | 'gpt' | 'manual';
sentence: string; // 完整句子
paragraph: string; // 段落上下文（可选）
translation: string; // 翻译
projectName: string; // 项目名
filename: string; // 文件名
capturedAt: string; // 发现时间
}
interface ReviewSchedule {
interval: number; // 当前间隔（天）
ease: number; // 容易度因子 (SM-2 算法)
nextReviewAt: string; // 下次复习时间
reviewCount: number; // 已复习次数
}
6.2 配置数据结构
{
"vibecoding-english.enableOfflineDict": true,
"vibecoding-english.onlineDictProvider": "youdao",
"vibecoding-english.llmProvider": "openai",
"vibecoding-english.llmApiKey": "",
"vibecoding-english.llmModel": "gpt-4o-mini",
"vibecoding-english.contextLines": 3,
"vibecoding-english.shortcuts.translate": "ctrl+shift+t",
"vibecoding-english.shortcuts.contextTranslate": "ctrl+shift+g",
"vibecoding-english.shortcuts.addToWordbook": "ctrl+shift+w",
"vibecoding-english.autoDetectReview": true,
"vibecoding-english.reviewReminderInterval": "daily"
}
七、LLM Prompt 设计
7.1 上下文翻译 Prompt
You are a tech-savvy English tutor for Chinese developers.
Given a word and its surrounding context (from code/logs/AI output),
provide a structured, developer-friendly translation.
WORD: {word}
CONTEXT:
{context}
Return JSON:
{
"contextTranslation": "整个上下文的中文翻译",
"wordMeaning": "该单词在此语境下的精确中文含义",
"technicalMeaning": "如该单词有编程/技术领域的特定含义，请解释（否则为null）",
"generalMeaning": "该单词的通用中文含义",
"etymology": "简要词根词缀分析（可选）",
"similarWords": ["相关词汇1", "相关词汇2"],
"exampleInCode": "一个包含该单词的代码示例（如适用，否则为null）"
}
7.2 AI Agent 每日复习 Prompt
You are a friendly English learning assistant helping a Chinese programmer
review vocabulary learned during coding sessions.
Today's review words: [{word1}, {word2}, ...]
For each word, generate a short review card:
1. Word + phonetic
2. The exact context/sentence where the user first encountered the word (from their wordbook)
3. A new, memorable technical sentence using the word
4. Quick memory tip in Chinese
Keep it concise and encouraging.
八、开发计划
Phase 0: 架构奠基（预计 2 天）
| 任务 |
内容 |
| 1 |
搭建 VS Code Extension 脚手架 |
| 2 |
搭建 Monorepo 项目结构（core + adapters） |
| 3 |
定义 Core Library 接口（IStorage, ITranslateEngine, IEventBus） |
| 4 |
实现分层架构：Core（平台无关）/ Adapter（平台特定）分离 |
Phase 1: MVP（预计 5 天）
| 任务 |
内容 |
| 1 |
实现文本选中监听 + 快捷键注册 |
| 2 |
集成离线词典 + 技术词库（基础 5000+ 通用词 + 150 P0 技术词汇） |
| 3 |
以 Notification 形式展示翻译结果 |
| 4 |
实现单词本 JSON 文件存储 |
| 5 |
实现右键菜单 "加入单词本" |
| 6 |
实现单词本简单查看面板（TreeView） |
Phase 2: 进阶功能（预计 5 天）
| 任务 |
内容 |
| 1 |
集成在线词典 API（有道/Bing） |
| 2 |
LLM 上下文翻译功能 |
| 3 |
单词本 Webview 面板（搜索、排序、删除） |
| 4 |
Hover 形式的翻译展示 |
| 5 |
已学单词自动标记提示 |
| 6 |
配置页面（快捷键、API Key 等） |
Phase 3: AI Agent（预计 7 天）
| 任务 |
内容 |
| 1 |
LLM Agent 对话面板（Chat Participant） |
| 2 |
场景回顾功能 |
| 3 |
SM-2 间隔复习算法 |
| 4 |
每日/每周复习提醒 |
| 5 |
导出 Anki/CSV |
| 6 |
数据统计面板（学习天数、单词量等） |
Phase 4: 打磨与发布（预计 3 天）
| 任务 |
内容 |
| 1 |
性能优化（激活时间 < 200ms，翻译 < 100ms 缓存命中） |
| 2 |
国际化（中/英双语） |
| 3 |
Cursor / Windsurf 兼容性验证 |
| 4 |
生成 .vsix + Marketplace 上架 |
九、非功能需求
| 需求 |
说明 |
| 响应速度 |
基础翻译 < 500ms，LLM 翻译 < 3s |
| 离线可用 |
基础词典完全离线可用 |
| 隐私安全 |
单词本数据完全本地存储，不上传服务器 |
| 内存占用 |
插件空闲内存 < 50MB |
| 兼容性 |
支持 VS Code 1.80+ / Cursor / Windsurf |
| API 成本 |
LLM 翻译使用 gpt-4o-mini，单次约 $0.0002 |
十、技术可行性验证
| 能力 |
VS Code API |
可行性 |
| 监听选中文本 |
vscode.window.onDidChangeTextEditorSelection |
✅ |
| 注册快捷键 |
vscode.commands.registerCommand |
✅ |
| 右键菜单 |
editor/context + when 条件 |
✅ |
| 通知栏展示 |
vscode.window.showInformationMessage |
✅ |
| Hover 展示 |
vscode.languages.registerHoverProvider |
✅ |
| Webview 面板 |
vscode.window.createWebviewPanel |
✅ |
| 侧边栏 |
vscode.window.registerTreeDataProvider |
✅ |
| Chat Participant |
vscode.chat.createChatParticipant (VS Code 1.86+) |
✅ |
| 本地文件读写 |
vscode.workspace.fs |
✅ |
| 状态栏 |
vscode.window.createStatusBarItem |
✅ |
结论：VS Code Extension 可以完整实现所有需求，无需额外的 IDE 集成开发。
十一、项目结构
vibecoding-english/
├── .vscode/
│ ├── launch.json
│ └── tasks.json
├── src/
│ ├── extension.ts
│ ├── services/
│ │ ├── translate/
│ │ ├── wordbook/
│ │ └── llm/
│ ├── ui/
│ │ ├── hover-provider.ts
│ │ ├── wordbook-webview/
│ │ └── status-bar.ts
│ ├── commands/
│ └── providers/
├── dict/
│ └── ecdict.sqlite # 离线词典数据
├── package.json
├── tsconfig.json
├── .eslintrc.json
└── README.md
附录 A：竞品分析
| 工具 |
优势 |
劣势 |
| Google 翻译插件 |
知名度高 |
翻译不准，R18 限制，不支持编程语境 |
| 沙拉查词 |
多词典聚合 |
浏览器插件，不支持 VS Code |
| Code Spell Checker |
拼写检查 |
不提供中文翻译，无单词本 |
| 本产品 |
编程语境 + 单词本 + AI Agent |
新项目，需要迭代 |
附录 B：快捷键设计
| 快捷键 |
功能 |
Ctrl+Shift+T |
基础翻译选中单词 |
Ctrl+Shift+G |
上下文 AI 翻译 |
Ctrl+Shift+W |
加入单词本 |
Ctrl+Shift+B |
打开单词本面板 |
下一步行动: 确认需求后，可以开始 Phase 1 的 VS Code 扩展脚手架搭建和核心翻译功能开发。
十二、配套详细文档
核心设计文档
Vibe Coding + Harmness Engineering 基础设施