参赛赛道：社会服务 / 社会公益
作品形态：AI 古籍交互阅读 Web 应用
演示视频：抖音 - 古籍焕新产品演示
创作者：张宝文（个人参赛）
1. 关于我
大家好，我是张宝文，今年 26 岁，是一名前端开发工程师，喜欢用技术把想法快速变成现实。这次希望借助 AI 的力量，让沉睡千年的古籍重新走进大众视野。
这次是个人参赛，从产品设计到全部代码，100% 通过 TRAE Work 完成。
初赛晋级作品：【社会服务】古籍焕新 – AI驱动的古籍交互阅读平台
2. 产品简介（复赛版）
为什么要做古籍焕新？
中国有超过 20 万种古籍存世，但绝大多数人一辈子都不会翻开其中任何一本。
不是不想读，而是读不懂、没画面、没兴趣。
我在想：如果有一个平台，能把古文逐句翻译成白话、把文字描述的异兽画出来、让你和孔子李白面对面聊天、还能通过答题闯关来检验学习——古籍阅读会不会变成一件有趣的事？
于是有了古籍焕新——一个用 AI 让千年文字"活"起来的交互阅读平台。
是什么
古籍焕新是一个 AI 驱动的古籍交互阅读平台（Web 应用），将传统的"查字典式被动学习"变成"探索式主动体验"。目前以《山海经》为核心内容，涵盖阅读、图鉴、对话、诗词、问答五大模块，全部功能免费开放。
面向谁
| 用户群体 | 使用场景 |
|---|---|
| 中小学生 | 通过趣味互动（答题闯关、异兽图鉴、AI 对话）激发对传统文化的兴趣 |
| 古文爱好者 | 沉浸式阅读山海经原文，逐句 AI 翻译，配合水墨插画深度品读 |
| 视障 / 老年用户 | 多音色语音朗读、听书模式、大字体支持，无障碍古籍阅读 |
| 教育工作者 | 课堂辅助教学，知识问答功能天然适合课堂互动 |
核心功能一览
| 功能模块 | 说明 | 规模 |
|---|---|---|
| 双语阅读 | 山海经古文逐句 AI 翻译 + 字词注释，章节导航，支持语音朗读 | 18 篇章，267 句原文 |
| 异兽图鉴 | 上古异兽百科，AI 水墨插画 + 原文描述 + 白话翻译 + AI 解读 | 97 只异兽，5 大分类 |
| 诗境漫游 | 古诗全屏沉浸阅读，逐句赏析，自动朗诵翻页 | 24 首经典诗词，7 大主题 |
| 古今对话 | 与历史人物 AI 个性化对话，DeepSeek 驱动，流式输出 | 15 位人物，横跨春秋至明代 |
| 知识问答 | 诗词填空 / 异兽辨识 / 名人名句 / 看图识兽，3 种闯关模式 | 4 种题型，75+ 道题 |
| 语音朗读 | 火山引擎 TTS 多音色，诗词朗诵模式，山海经听书，角色对话语音 | 6 种音色可选 |
| 成就系统 | 多维度成就徽章，激励用户深入探索 | 10+ 个成就 |
| 每日签到 | 连续签到机制，培养学习习惯 | -- |
| 笔记收藏 | 收藏诗词和异兽，记录学习心得，支持导出 Markdown | -- |
| 学习面板 | 个人学习数据可视化（已读篇章、已集异兽、答题正确率等） | 6 项数据指标 |
| 个性设置 | 字号调节、语速控制、音色选择、默认译文显示 | -- |
用户路径
首页总览 → 选择功能模块 → 深度体验（阅读 / 对话 / 答题）→ 成就解锁 → 数据沉淀 → 持续学习
相比初赛的升级
初赛时只有山海经阅读 + 异兽图鉴的基础功能，复赛阶段经过 20+ 轮 TRAE Work 迭代，完成了以下重大升级：
| 升级项 | 说明 |
|---|---|
| AI 水墨插画全覆盖 | 80+ 张 AI 生成的水墨风格插画（异兽、人物头像、诗词配图），统一视觉风格 |
| 古今对话 | 新增 15 位历史人物，每位有独特性格、知识领域和对话风格 |
| 诗境漫游 | 新增 24 首古诗全屏沉浸体验，逐句配场景画，自动朗诵翻页 |
| 知识问答闯关 | 新增 4 种题型、3 种模式，与成就系统联动 |
| TTS 语音系统 | 从浏览器原生 TTS 升级为火山引擎多音色 TTS，支持诗词朗诵和听书模式 |
| 学习数据面板 | 新增个人学习数据可视化，答题历史可回顾 |
| 全设备适配 | 响应式布局重构，iPad / 手机 / PC 均有良好体验 |
| 图片性能优化 | 全站图片压缩 60%（22MB → 9MB），弱网体验大幅改善 |
| PWA 离线支持 | 可添加到主屏幕，离线浏览山海经 / 异兽 / 诗词 |
| SEO 优化 | 全站子页面独立 metadata + OG 分享预览图 |
3. 产品截图
-
首页全貌
-
山海经阅读
-
异兽图鉴
-
古今对话
-
诗词沉浸阅读
-
知识问答
4. 创作历程
从想法到产品
起点：一个前端工程师的文言文噩梦。高中时被《山海经》的奇幻世界吸引，却被文言文挡在门外。工作后偶然接触到 TRAE Work，发现它能让不懂后端、不懂 AI 的前端开发者也能搭建一个完整的 AI 应用——于是决定试试，看能不能做出"我当年想要的那个古籍学习工具"。
初赛阶段：先用 TRAE Work 搭建了最小可用版本——山海经双语阅读 + 异兽图鉴。验证了 AI 翻译古文的可行性，也发现了纯文本阅读的局限：用户读完就走，没有留存。
复赛阶段（20+ 轮迭代）：围绕"让用户留下来"这个目标，逐步叠加互动功能：
- 先加古今对话，让用户和历史人物聊天——这个功能上线后，平均对话轮次达到 8 轮，说明用户确实愿意互动
- 再加诗境漫游，把古诗做成全屏沉浸式体验，配上 TTS 朗诵——视觉效果直接拉满
- 然后是知识问答，把学到的内容变成闯关题目，与成就系统联动——给用户一个"刷下去"的理由
- 最后是大量的体验打磨：水墨插画统一风格、全设备响应式适配、图片性能优化、PWA 离线支持
最大的挑战
水墨风格一致性：最初 AI 生成的插画风格杂乱（有写实的、有卡通的、有油画的）。花了一整轮迭代统一 prompt 模板（中国传统水墨画、宣纸纹理、留白意境），批量重新生成 42 张图片，才实现全站视觉统一。
15 位历史人物的"人设"：每位角色需要专属的 system prompt，包含性格特征、知识领域、说话风格、时代背景——孔子温和说教、李白豪放不羁、武则天霸气果决。这些 prompt 也全部由 TRAE Work 协助完成。
弱网环境优化：AI 生成的图片原始总量 22MB。通过批量压缩 + 尺寸适配（1024px → 512px），配合 Next.js Image 自动优化和 Service Worker 缓存，总量降至 9MB，弱网加载速度提升 60%。
5. TRAE 实践过程
本作品 100% 使用 TRAE Work 开发，从项目初始化到每一行代码、每一张 AI 插画、每一个功能模块，全部通过与 TRAE Work 的对话完成。
开发模式：提示词驱动开发
整个复赛阶段采用"提示词驱动开发"模式——我不写代码，只写提示词。每轮迭代对应一份完整的 TRAE Work 提示词文档：
- 规划功能需求和实现方案
- 编写 TRAE Work 提示词（包含思路、设计约束、验收标准）
- TRAE Work 执行开发，自动完成代码编写和构建验证
- 验收结果，如有问题追加修复提示词
迭代历程
| 阶段 | 轮次 | 内容 |
|---|---|---|
| 基础搭建 | 第 1-12 轮 | 阅读、图鉴、对话、诗词核心功能逐步落地 |
| 视觉升级 | 第 13 轮 | AI 水墨插画全覆盖（80+ 张风格统一的插画） |
| 设备适配 | 第 14-15 轮 | 全设备响应式适配（iPad / 手机 / PC） |
| 语音增强 | 第 16 轮 | 火山引擎 TTS 多音色接入 |
| 问答闯关 | 第 17 轮 | 知识问答 4 种题型 + 成就联动 |
| 性能优化 | 第 18-19 轮 | 图片压缩、SEO、PWA 离线支持 |
| 体验打磨 | 第 20+ 轮 | 按钮尺寸、Tab 统一、Footer 重构、全局一致性优化 |
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)（知识问答闯关）
6. 技术方案分享
| 层级 | 技术选型 |
|---|---|
| 框架 | Next.js 16 + React 19 + TypeScript |
| 样式 | Tailwind CSS v4，自定义古籍主题色系（宣纸色、朱砂色、墨色） |
| AI 对话 | DeepSeek API（deepseek-chat），流式输出，15 套角色 system prompt |
| AI 翻译 / 注释 | DeepSeek API，非流式，独立 prompt 策略 |
| 语音合成 | 火山引擎 TTS V1 API，6 种 BV 系列音色 |
| 部署 | Vercel（香港节点），CDN 全球分发，自动 CI/CD |
| 离线 | Service Worker + 分层缓存策略（AI 接口 network-only，静态资源 stale-while-revalidate） |
| 数据存储 | 客户端 localStorage，零后端依赖，隐私优先 |
架构亮点：
- 零后端：所有用户数据存储在浏览器 localStorage，不收集任何个人信息，隐私优先
- 分层缓存：AI 接口走 network-only（保证回答新鲜度），静态资源走 stale-while-revalidate（保证加载速度）
- PWA 离线：核心古籍内容（山海经原文、异兽数据、诗词数据）支持离线浏览，无网络也能学习
7. 社会价值
古籍焕新定位社会服务 + 社会公益赛道，核心社会价值：
| 维度 | 说明 |
|---|---|
| 文化传承普惠 | 让 20 万种古籍中的经典内容以现代人能接受的方式重新触达大众，降低古籍阅读的知识门槛 |
| 教育公平 | 无需购买教材或参加培训班，任何有网络的人都能免费学习古籍，缩小城乡教育资源差距 |
| 无障碍包容 | 多音色朗读 + 听书模式 + 大字体，让视障用户和老年用户也能"读"古籍，实现数字包容 |
| 降低门槛 | AI 对话、答题闯关、水墨图鉴等互动形式，把"读古文"变成"玩古文"，吸引年轻一代关注传统文化 |
| 公益属性 | 全部功能永久免费开放，不设付费墙，不采集用户隐私数据 |
8. 未来规划
| 方向 | 计划 |
|---|---|
| 内容扩展 | 增加《诗经》《楚辞》《论语》等更多经典古籍，构建更完整的古籍知识图谱 |
| 教育场景 | 课堂互动模式（分组竞答、实时排行榜），服务中小学语文教学 |
| 社区共建 | 用户可以分享笔记、对话记录和答题成绩，形成学习社区 |
| 多语言 | 支持英文界面和翻译，让海外用户也能了解中国古籍文化 |
古籍焕新，让千年文字"活"起来。
