一、摘要
面向需要高效记忆英文单词但厌倦机械重复的学习者，提供一款****零门槛、免安装、打开即用**的可视化词源学习工具。通过**星图式词根探索、词源故事、关系网络、游戏化闯关**等模块，将"单个单词"置于"历史与构词逻辑"中理解，帮助用户建立长期记忆。项目使用 **React + TypeScript + Vite** 技术栈，界面采用**星空主题设计****，所有学习进度保存在浏览器本地。本项目全程使用 **TRAE SOLO** 从零搭建并持续迭代优化。
二、真实场景与需求
2.1 目标人群
-
考研、雅思、托福、GRE 等考试备考者 -
英语专业学生 -
语言爱好者 -
希望提升词汇量的职场人士 -
教育资源相对有限的自学者
2.2 痛点描述
**场景**: 张同学正在备考考研英语，每天背诵 100 个单词，但发现：
-
**遗忘率高** - 死记硬背，一周后只记住 20%
-
**易混淆** - 相似的单词分不清，如 “respect” / “suspect”
-
**枯燥乏味** - 单词书翻到第 50 页就失去了动力
-
**缺乏逻辑** - 不知道单词之间的关系，孤立记忆
**传统方法的局限**:
-
词根词缀书籍：内容枯燥，缺乏可视化，难以形成空间记忆
-
背单词 App：侧重刷题，对词源叙事和词族关系支持弱
-
培训班：费用高，时间不灵活
2.3 现有解决方案的不足
-
**Anki**: 卡片系统完善，但缺少词源内容的结构化呈现 -
**Quizlet**: 侧重记忆卡片，缺乏词根间的关联网络
-
**欧路词典**: 查词工具，没有学习路径设计
-
**墨墨背单词**: 算法优秀，但词源内容薄弱
**一步任务**: 需要一个工具，能让用户****像探索星空一样探索词源**，看到词根、前缀、后缀如何组合成单词，通过**理解逻辑****而非死记硬背来记忆。
三、作品介绍
3.1 核心功能
1. 星图探索 (Atlas)
-
**可视化词根网络**: 以星座/星云形式展示 6 大词族、44 个核心词根
-
**力导向图布局**: 词根、前缀、后缀、衍生词形成关联网络
-
**交互式探索**: 支持拖拽、缩放、双击导航
-
**分类筛选**: 按希腊语、拉丁语等语源分类查看
2. 词源故事 (Story)
-
**叙事化学习**: 每个词根配有历史故事，讲述词根的起源和演变
-
**单词拆解**: 彩色可视化展示 前缀-词根-后缀 结构
-
**发音朗读**: 点击播放单词标准发音
-
**掌握标记**: 标记已学会单词，追踪学习进度
3. 关系网络 (Network)
-
**词根详情页**: 展示某个词根的所有衍生词汇（共 230+ 词汇）
-
**结构拆解**: 清晰展示单词的词源构成
-
**例句展示**: 帮助理解单词在语境中的用法
4. 闯关模式 (Challenge)
-
**游戏化学习**: 通过答题闯关巩固记忆
-
**难度分级**: 从识别到应用的多层次挑战
-
**即时反馈**: 答对答错都有视觉和声音反馈
5. 闪卡复习 (Flashcard)
-
**快速回顾**: 随时查看已学词汇
-
**掌握状态**: 区分已掌握和待复习的单词
6. 智能搜索
-
**双向查询**: 通过单词查词根，或通过词根查单词
-
**即时高亮**: 搜索时实时高亮匹配节点
3.2 技术特点
- 纯前端
- 无需后端服务器，打开浏览器即可使用
- 本地存储
- 学习进度保存在浏览器本地，保护隐私
- 响应式设计
- 适配桌面和移动端
- 性能优化
- Canvas 渲染 + 视口裁剪，支持大规模节点
3.3 数据规模
-
**6 大星云**（主题分类）：希腊星云、拉丁星云等
-
**44 个核心词根**：涵盖 graph/gram、phon、bio 等高频词根
-
**230+ 衍生词汇**：每个词根配有 5-12 个代表词汇
-
**多语种语源**：希腊语、拉丁语、古英语等
四、用 SOLO 实现的过程
4.1 任务拆解
没有一上来就要求 SOLO “帮我做个词源工具”，而是拆解为独立可验证的小任务：
关键 Prompt
1.搭建基础框架
“创建一个 React + Vite 项目，使用星空主题，深色背景配金色点缀”
2.构建数据层
“设计词根、词汇、故事的数据结构，导出为 TypeScript 类型”
3.星图可视化
“用 Canvas 实现力导向图，词根为节点，衍生词环绕分布”
4.词源故事页
“创建词根详情页，展示词根含义、故事、衍生词汇卡片”
5.闯关功能
“实现四选一答题，答对有绿色动画反馈”
6.沉浸感增强
“添加星空背景、星云动画、粒子效果”
4.2 关键 Prompt 示例
**星图布局优化**：
优化 Atlas 页面的节点布局：
1. 同类词根按扇形分布在各自类别中心周围
2. 增加节点间排斥力，减少重叠
3. 缩放较小时隐藏细线，减少视觉混乱
4. 添加多层星云背景，按类别分布在不同位置
**发音功能改进**：
改进 speak() 函数：
1. 优先尝试多种英文语音（Google、Apple、Microsoft）
2. 语音不可用时不报错，播放提示音作为反馈
3. 添加语音支持状态检测函数
**沉浸感增强**：
增强星图的沉浸感：
1. 添加多层动态星空背景（远景、中景、近景）
2. 近景亮星带闪烁和十字光芒
3. 词根节点添加多层外发光效果
4. 已学词根显示金色边框环
4.3 踩过的坑
**坑一：星图布局混乱**
-
**问题**：初期节点随机分布，同类词根分散，连线交叉过多，视觉混乱
-
**解决**：改为按类别在圆环上分布，增加类别间排斥力，优化物理参数
**坑二：发音在某些浏览器失效**
-
**问题**：Safari 和某些 Windows 浏览器语音 API 不可用或延迟加载
-
**解决**：实现语音优先级选择、添加错误处理、准备备选提示音
**坑三：移动端触控冲突**
-
**问题**：星图的拖拽缩放与页面滚动冲突
-
**解决**：添加 touch-action CSS 属性，优化触控事件处理
**坑四：大量节点时性能下降**
-
**问题**：超过 100 个节点时，Canvas 渲染卡顿
-
**解决**：实现视口裁剪（viewport culling），只渲染可见节点
五、成果展示
5.1 项目链接
**在线演示**
https://etymology-atlas-ruby.vercel.app/e
**GitHub 仓库**
https://github.com/Janewale/etymology-atlas
5.2 项目截图
首页 - 星空主题入口
星图探索 - 词根网络可视化
词源故事 - 叙事化学习
闯关模式 - 游戏化巩固
5.3 核心数据
-
**6 大星云**（主题分类）
-
**44 个核心词根**
-
**230+ 衍生词汇**
-
**~3000 行代码**
-
**全部使用 SOLO 完成**
六、验证与下一步
6.1 已完成的验证
-
**功能完整性测试**: 所有核心功能通过手动测试
-
**多浏览器测试**: Chrome、Edge、Safari、Firefox
-
**响应式测试**: 桌面端、平板端、移动端
-
**构建验证**:
`npm run build`成功，无错误 -
**性能测试**: 100+ 节点流畅渲染
6.2 下一步计划
-
**扩充数据**: 增加更多词根和词汇（目标 1000+ 单词）
-
**学习统计**: 添加学习数据图表，展示学习曲线
-
**艾宾浩斯复习**: 实现基于遗忘曲线的智能复习提醒
-
**PWA 支持**: 支持离线访问，可添加到主屏幕
-
**导出功能**: 支持导出学习报告和单词列表
七、科技向善的思考
**教育的本质是点燃火焰，而非填满容器。**
在资源有限的环境下，一位自学的考生可能买不起昂贵的词汇课程，也可能没有时间参加培训班。词源星图希望成为这样一款工具：
-
**零成本**: 完全免费，无付费墙
-
**免安装**: 打开浏览器就能用，无需下载 App
-
**保护隐私**: 学习数据存在本地，不上传云端
-
**理解而非死记**: 通过词源逻辑建立真正的语言能力
**AI 不只是效率工具，更应该成为普惠教育的助力。**
八、使用 SOLO 的体验
**最佳实践**:
-
任务拆得越细越好，一次只做一件事
-
给 SOLO 足够的上下文，说明 “基于现有代码修改什么”
-
CSS 调试需要耐心，多用描述性的语言说明视觉效果
**SOLO 的强大之处**:
-
快速原型：从零到可用原型只需几轮对话
-
持续迭代：随时提出改进意见，即刻看到效果
-
全栈能力：从数据结构到 UI 动效，一站式完成
附：快速体验指南
-
访问上述地址
-
点击 **“Start”** 进入引导页
-
设置每日学习目标（建议 3-5 个词根）
-
进入 **星图探索**，点击感兴趣的词根
-
阅读 **词源故事**，学习单词拆解
-
完成 **闯关模式**，巩固记忆
**如果你也是一名英语学习者，欢迎试用并反馈建议！** 