Magic English Buddy 🧙♂️✨
January 7, 2026 · View on GitHub
离线优先的儿童英语学习伙伴
项目愿景
我们相信
每个孩子都值得拥有优质的英语启蒙资源。
我们要解决的问题
| 挑战 | 我们的方案 |
|---|---|
| 兴趣难以持续 | 游戏化设计 + Buddy 养成，让学习像冒险一样有趣 |
| 教育资源分布不均 | 离线优先 + 轻量化，一次安装随处可用 |
| 反馈机制缺失 | 二维码同步 + 可视化报告，家长老师轻松掌握进度 |
核心理念
将传统的英语阅读器（Utility）转型为具有情感连接的英语伙伴（Companion）。通过魔法世界的沉浸体验，激发孩子的学习兴趣，让每一次打开都充满期待。
设计原则
- 离线优先：核心学习链路（读、查、练、存）完全离线可用
- 轻量普适：支持低端设备，让更多孩子能够使用
- 兴趣驱动：游戏化机制替代枯燥训练，培养自主学习习惯
- 开放共享：内容与引擎分离，便于社区贡献和本地化
核心功能
🗺️ 魔法地图 - 七级分级体系
基于 i+1 理论，内容划分为 L1~L7 阶梯式路径：
| 等级 | 称号 | 教学重点 | 视觉主题 |
|---|---|---|---|
| L1 | 见习魔法师 | 名词、字母、基础词汇 | 萌芽之森 🌱 |
| L2 | 咒语研习者 | 动词、祈使句、简单主谓宾 | 回声山谷 🏔️ |
| L3 | 元素使者 | 形容词、复合句 | 闪耀之海 🌊 |
| L4 | 守护者 | 50-100 词短故事、时态变化 | 云端之城 ☁️ |
| L5 | 传奇贤者 | 寓言故事、文化背景 | 永恒星空 ⭐ |
| L6 | 跨时空旅行者 | 过去完成时、条件从句 | 时光回廊 ⚙️ |
| L7 | 创世之主 | 虚拟语气、批判性思维 | 创世之核 💎 |
迷雾机制：地图初始被乌云覆盖，通过 Quiz 解锁下一关，区域净化后地图从黑白变为彩色。
📖 魔法镜阅读器
沉浸式英语输入体验：
- Follow-the-Light：TTS 朗读时当前单词高亮，点击任意单词触发发音
- 影子跟读：Echo 模式下机器读一句、孩子读一句，支持双声轨回放对比
- 魔法查词：长按单词弹出释义，基础名词显示 Emoji 图示，内置 5000 词离线词典
🐣 Buddy 养成系统
建立情感连接，通过"所有权"和"损失厌恶"留住孩子：
| 形态 | 对应等级 | 名称 | 特征 |
|---|---|---|---|
| I | L1 | 语言之卵 | 半透明蛋，带字母暗纹，点击会晃动 |
| II | L2-L3 | 萌芽幼兽 | 小猫/小龙形象，跟随单词跳动 |
| III | L4-L5 | 守护精灵 | 佩戴魔法饰品，会说离线英语问候 |
| IV | L6-L7 | 博学贤者 | 拟人化形象，漂浮书卷 |
魔力值获取：阅读故事 +10、Quiz 全对 +20、复习旧词 +2
⚔️ 魔法挑战 Quiz
利用"提取练习"原理，将短期记忆转化为长期能力：
| 层级 | 适用等级 | 题型 |
|---|---|---|
| 基础层 | L1-L2 | 听音辨图、单词拼装（字母拖拽） |
| 进阶层 | L3-L4 | 碎纸机还原（句子排序）、魔法填空 |
| 高阶层 | L5-L7 | 逻辑拼图（段落排序）、关键词口述 |
卡牌图鉴：连续 3 次答对的生词转化为魔法卡牌，分白/绿/紫/金四个稀有度。
📜 守护者卷轴
打破数字孤岛，引入外部反馈：
- 二维码同步：将进度压缩为 JSON 生成二维码，老师扫描即可离线收集全班数据
- 魔法报告：用家长能懂的语言展示数据（"已解锁咒语"=词汇量）
- 物理证书：支持导出带 Buddy 形象和孩子名字的 PDF 证书，供线下打印
技术栈
| 类别 | 技术 |
|---|---|
| 框架 | React 19 + TypeScript + Vite 6 |
| 状态 | Zustand + XState |
| 存储 | Dexie.js (IndexedDB) |
| 动画 | Framer Motion + Lottie |
| PWA | vite-plugin-pwa + Workbox |
| UI | CSS Modules + CSS Variables |
快速开始
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建生产版本
pnpm build
# 预览生产版本
pnpm preview
访问 http://localhost:3000/magic-english-buddy/
项目结构
src/
├── components/ # 组件库
│ ├── common/ # 通用组件 (Button, Modal, Loading...)
│ ├── buddy/ # Buddy 养成组件
│ ├── map/ # 地图组件
│ ├── reader/ # 阅读器组件
│ ├── quiz/ # Quiz 练习组件
│ └── onboarding/ # 引导组件
├── pages/ # 页面
├── services/ # 服务层 (TTS, 字典, 二维码...)
├── stores/ # Zustand 状态
├── db/ # Dexie 数据库
├── data/ # 故事/地图/词典数据
└── styles/ # 全局样式
许可证
见 LICENSE
Made with ❤️ for educational equity