关于我
我是一名前端工程师，大概从去年才开始接触 Vibe Coding 的，算是比较晚了，期间我做了几个自己的项目，包括小程序/浏览器插件/web网站，目前都在线上稳定运行。其中浏览器插件（一键下载页面上所有图片）跑通了支付流程，赚到了第一桶金，目前持续迭代中。
为什么做这个呢？是因为想起当年读书的时候学习文言文的痛苦，压根不理解句意，纯考死记硬背，所以就有了这个 idea，借助 AI 实现了整个想法。
产品简介
是什么
古籍焕新是一个 AI 驱动的古籍交互阅读平台（Web 应用），致力于用人工智能技术让沉睡千年的古籍文字"活"起来——从"查字典式被动学习"变成"探索式主动体验"，让每一个普通人都能感受到古文之美。
面向谁
- 中小学生：通过趣味互动（答题闯关、异兽图鉴、AI对话）激发对传统文化的兴趣
- 古文爱好者：沉浸式阅读山海经原文，逐句AI翻译，配合水墨插画
- 视障/老年用户：多音色语音朗读、听书模式、大字体支持，实现无障碍古籍阅读
- 教育工作者：可用于课堂辅助教学，知识问答功能天然适合课堂互动
核心功能（完整清单）
| 功能模块 | 说明 |
|---|---|
 山海经阅读 |
14篇章267句古文，逐句AI翻译+注释，章节导航 |
 异兽图鉴 |
41只上古异兽，AI水墨插画+原文描述+白话翻译 |
 诗词沉浸 |
27首古诗全屏沉浸阅读，逐句配图，自动朗诵模式 |
 古今对话 |
15位历史人物AI个性化对话（DeepSeek驱动，流式输出） |
 知识问答 |
4种题型40+道题（诗词填空/异兽辨识/名人名句/看图识兽），3种模式 |
 语音朗读 |
多音色TTS，诗词朗诵模式，山海经听书模式，角色对话语音 |
 成就系统 |
10+个成就，激励用户深入探索 |
 每日签到 |
连续签到机制，培养学习习惯 |
 笔记收藏 |
收藏喜欢的诗词和异兽，记录学习笔记 |
 个性设置 |
字号调节、语速控制、音色选择、朗读偏好 |
产品截图
【请截取以下页面的截图，上传到帖子中】
- 首页全貌
- 山海经阅读
- 异兽图鉴
- 古今对话
- 诗词沉浸阅读
- 知识问答
用户路径
首页总览 → 选择功能模块 → 深度体验（阅读/对话/答题） → 成就解锁 → 持续学习
相比初赛 Demo 的升级
初赛时只有山海经阅读 + 异兽图鉴的基础功能，复赛阶段完成了以下重大升级：
- AI水墨插画全覆盖：80+张 AI 生成的水墨风格插画（异兽、人物头像、诗词配图），风格统一
- 古今对话功能：15位历史人物，每位有独特性格、知识领域和对话风格
- 诗词沉浸阅读：27首古诗全屏体验，逐句配场景画，自动朗诵翻页
- 知识问答闯关：4种题型、3种模式，与成就系统联动
- TTS语音增强：多音色、诗词朗诵、山海经听书、对话角色语音
- 全设备适配：响应式布局，iPad/手机/PC 均有良好体验
- 图片性能优化：全站图片压缩 60%，弱网环境体验大幅改善
- PWA离线支持：可添加到主屏幕，离线浏览山海经/异兽/诗词（即将上线）
产品演示视频
【TODO】
产品创作历程
灵感来源
中国有超过 20 万种古籍存世，但绝大多数人一辈子都不会翻开其中任何一本。不是不想读，而是读不懂、没画面、没兴趣。
我想：如果有一个平台，能把古文逐句翻译成白话、把文字描述的异兽画出来、让你和孔子李白面对面聊天、还能通过答题闯关来学习——古籍阅读会不会变成一件有趣的事？
从初赛 Demo 到复赛完整作品
初赛阶段（6月）：用 TRAE Work 搭建基础框架，实现山海经逐句阅读和异兽图鉴的核心功能，验证了"AI+古籍"的可行性。
复赛迭代（7-8月）：经过 20 轮 TRAE Work 迭代，逐步完善：
- 第1-12轮：基础功能搭建（阅读、图鉴、对话、诗词）
- 第13轮：AI水墨插画全覆盖（80+张风格统一的插画）
- 第14-15轮：全设备响应式适配（iPad/手机/PC）
- 第16轮：TTS语音系统增强（多音色+朗诵+听书）
- 第17轮：知识问答闯关模式（4种题型+成就联动）
- 第18轮：性能优化（图片压缩60%、SEO修复、Bug修复）
- 第19轮：PWA离线支持（Service Worker缓存、添加到主屏幕）
- 第20轮：优化&收尾
关键挑战与解决
-
水墨风格一致性：最初用脚本生成的占位图风格杂乱。解决方案：统一使用AI生图模型，编写详细的风格 prompt（中国传统水墨画、宣纸纹理、留白意境），一次性替换42张图片。
-
古今对话的"人设"问题：15位历史人物如何各有性格？解决方案：为每位角色设计专属 system prompt，包含性格特征、知识领域、说话风格、时代背景，让孔子温和说教、李白豪放不羁、武则天霸气果决。
-
弱网体验：AI生成的图片普遍较大（原始总量22MB）。解决方案：批量压缩+尺寸适配（1024px→512px），配合 Next.js Image 组件自动优化和 Service Worker 缓存策略，总量降至 9MB。
TRAE 实践过程
本作品100% 使用 TRAE Work 开发，从项目初始化到每一行代码、每一张AI插画、每一个功能模块，全部通过与 TRAE Work 的对话完成。
开发方式
采用"提示词驱动开发"模式：
- 先规划功能需求和实现方案
- 编写详细的 TRAE Work 提示词（包含技术要求、数据结构、UI设计、验证步骤）
- TRAE Work 执行开发，自动完成代码编写、文件创建、构建验证
- 验收结果，如有问题追加修复提示词
整个复赛阶段共 20 轮 TRAE Work 迭代，每轮一个完整的提示词文档。
关键开发截图
AI水墨插画生成
TTS语音增强
知识问答闯关
关键 Session ID
- Session ID: CN.2531516585353379:a680412c1e0097cf92324f3361146e87_6a3a4abcd78d43898a8d1fc0.6a69bd15f5c326d71dc4d884.6a69bd13c0cc5208bd83b4de:TRAE Work CN.1.0.0.2491.6066565e-395f-4025-9582-6837d1a5faed.no_ppe.T(2026/7/29 16:53:36)（AI水墨插画生成）
- Session ID: CN.2531516585353379:b416f5ad3ce4967249ac284ead77e878_6a3a4abcd78d43898a8d1fc0.6a6c65394597acac5c8c13d0.6a6c65372177a027fe68b010:TRAE Work CN.1.0.0.2491.6066565e-395f-4025-9582-6837d1a5faed.no_ppe.T(2026/7/31 17:20:05)（TTS语音增强）
- Session ID: CN.2531516585353379:348f288fd62c6c54d473da1c49b32d36_6a3a4abcd78d43898a8d1fc0.6a6c713e4597acac5c8c14db.6a6c713c4c4d38f6cfb9135d:TRAE Work CN.1.0.0.2491.6066565e-395f-4025-9582-6837d1a5faed.no_ppe.T(2026/7/31 18:16:22)（知识问答闯关）
技术亮点
- AI 对话引擎：DeepSeek API 驱动15位历史人物个性化对话，流式输出实时响应
- AI 插画系统：80+ 张水墨风格插画，通过精心设计的 prompt 保证全站视觉一致性
- 语音无障碍：Web Speech API 多音色朗读，支持诗词朗诵和连续听书模式
- 离线可用：PWA + Service Worker，缓存静态资源，断网仍可浏览大部分内容
- 性能优化：图片压缩至原始体积40%，Next.js Image 自动适配，9MB覆盖全站80+张高质量插画
社会价值
古籍焕新定位社会服务 + 社会公益赛道，核心社会价值：
- 文化传承普惠：让20万种古籍中的经典内容以现代人能接受的方式重新触达大众
- 教育公平：无需购买昂贵教材或参加培训班，任何有网络的人都能免费学习古籍
- 无障碍包容：多音色朗读+听书模式，让视障用户和老年用户也能"读"古籍
- 激发兴趣：通过AI对话、答题闯关、水墨图鉴等互动形式，降低古籍阅读门槛
未来规划
- 扩充至《山海经》全18篇，覆盖全部异兽
- 增加《诗经》《楚辞》等更多经典古籍
- 课堂互动模式（分组竞答、实时展示），服务教育场景
古籍焕新，让千年文字"活"起来。
