1. Demo 简介
是什么： 一个基于 Web 的 AI 古籍交互阅读平台，首期聚焦《山海经》，让用户通过 AI 技术真正"读进去"古籍。不是四个独立工具的拼凑，而是一个阅读→探索→感悟→对话完整闭环的古籍体验平台。
面向谁： 中学生/大学生（文言文学习刚需）、传统文化爱好者、语文教师及文化机构。
首页：
四大核心功能 + 联动体系：
① 智能双语阅读 —— 《山海经》5篇章80+句原文逐句对照白话翻译，点击任意难字弹出注释弹窗（拼音+释义），可请求 AI 深度解读和重新翻译。读到描述异兽的段落，可直接跳转异兽图鉴查看水墨插画；读到不懂的句子，一键跳转「问问古人」让孔子帮你解读。
② AI 异兽图鉴 —— 20只山海经神话异兽，每只配有 AI 生成的国风水墨插画。卡片式图鉴浏览，按兽/禽/鱼/蛇分类筛选，点击查看详情可请求 AI 重新解读。支持收藏功能——集齐全部20只解锁「图鉴大师」成就。从详情页可跳转到原文出处阅读。
③ 诗境漫游 —— 12首经典古诗的全屏沉浸式滚动体验。每行诗句占一屏，配以 AI 生成的水墨场景图 + 意境渐变背景 + CSS 粒子效果（花瓣/雪花/雨滴/落叶/星光/萤火虫）。读完一首诗，可直接跳转和诗人（或相关古人）对话聊聊这首诗的感悟。
④ 古今对话 —— 与 AI 扮演的9位历史人物（孔子、李白、苏轼、屈原、庄子、王阳明、曹操、李清照、诸葛亮）实时对话，AI 流式回复，每位古人都有独特的说话风格和性格特点。对话记录自动保存，下次进入可继续上次的话题。
⑤ 探索进度系统 —— 首页显示你的整体探索进度（已读篇章、已收藏异兽、已漫游诗篇、已对话古人），四大功能不是孤立的，而是构成一个完整的古籍探索旅程。
2. Demo 创作思路
灵感来源： 作为一名前端工程师，我发现身边很多人"知道"《山海经》但没人"读过"原文。市面上的古籍阅读工具本质都是"电子字典"——查完即走，毫无沉浸感。我想做一个让人真正"想读下去"的古籍平台。
想解决的问题：
- 读不懂：文言文像外语，逐字查字典太痛苦 → 智能双语阅读，AI 逐句翻译 + 难字即时注释
- 没画面：九尾狐到底长什么样？想象不出古文描述的场景 → AI 异兽图鉴，20只神兽水墨插画
- 没兴趣：干巴巴的文字翻译，感受不到古文之美 → 诗境漫游，沉浸式视觉体验 + 粒子特效
- 读完就忘：看完翻译没有思考 → 古今对话，和古人聊你读到的内容，加深理解
为什么做这个方向： 古籍是中华文明的根基，但正面临"断代式遗忘"。AI 大模型 + 前端交互技术，恰好能把古籍阅读从"查字典式被动学习"升级为"探索式主动体验"。四大功能通过跳转联动串联成阅读→探索→感悟→对话的完整闭环——这不是四个工具的堆砌，而是一个有机的古籍体验旅程。
3. Demo 体验地址
在线体验：https://scroll.kyriewen.cn
备用地址：https://ancient-scroll-three.vercel.app
GitHub 开源：GitHub - zbw-zbw/ancient-scroll: 古籍换新 - AI驱动的古籍交互阅读平台 · GitHub
建议体验路径： 首页 → 智能双语阅读（读一段南山经，点击"䧿"字试试注释弹窗，注意底部的「查看异兽图鉴」按钮）→ AI 异兽图鉴（找到九尾狐，收藏它，试试集齐20只解锁成就）→ 诗境漫游（体验《江雪》的飘雪效果，读完后点「和古人聊聊这首诗」）→ 古今对话（和李白聊聊"将进酒"）
4. TRAE 实践过程
本项目 100% 使用 TRAE Work 完成开发，从项目初始化到四大功能页全部通过 TRAE Work 的 AI 对话生成。以下是关键开发步骤：
第1轮：项目初始化 + 首页落地页
用 TRAE Work 一次性生成了完整的 Next.js 项目骨架，包括：
- 中国传统美学设计系统（墨色/宣纸/朱砂红配色、Ma Shan Zheng 书法字体、宣纸纹理背景）
- 首页6个 section（Hero笔画动画 + 痛点展示 + 用户画像 + 方案概览 + 四功能预览 + 数据面板）
- 全局导航栏 + 响应式适配
Session ID：CN.2531516585353379:8c2ae1b34b2f099b51a89aaf58a63b74_6a3a4abcd78d43898a8d1fc0.6a3a4abfb61c7bec437e767e.6a3a4abcd78d43898a8d1fc1:TRAE Work CN.1.0.0.1780.49889266-d765-4bf9-92b4-b55d2fdb3d0c.no_ppe.T(2026/6/23 17:14:36)
第2轮：古今对话功能
让 TRAE Work 实现了完整的 AI 对话功能：
- DeepSeek API 集成（Edge Runtime 流式响应）
- 5位历史人物数据（含角色扮演 System Prompt）
- 人物选择界面 → 聊天界面的平滑切换
- 流式输出 + 闪烁光标 + 推荐问题
Session ID：CN.2531516585353379:9e3a0c3410b72ae6d849fc6d424720f9_6a3a4abcd78d43898a8d1fc0.6a3a782db61c7bec437e7a0a.6a3a782c522ffb4edb5bfbe1:TRAE Work CN.1.0.0.1780.49889266-d765-4bf9-92b4-b55d2fdb3d0c.no_ppe.T(2026/6/23 20:28:59)
第3轮：智能双语阅读
TRAE Work 生成了山海经5篇章的完整数据（约20句原文+译文+难字注音），以及：
- 左侧篇章选择栏 + 右侧逐句对照阅读
- 难字朱砂红高亮 → 点击弹出注释弹窗（Portal 定位）
- AI 重新翻译 + AI 深度解读两个 API 路由
Session ID：CN.2531516585353379:326d2a2e1d0d5017a4a8e07a6b01d51a_6a3a4abcd78d43898a8d1fc0.6a3a88d7b61c7bec437e7ce9.6a3a88d78158042a7f79f2a1:TRAE Work CN.1.0.0.1780.49889266-d765-4bf9-92b4-b55d2fdb3d0c.no_ppe.T(2026/6/23 21:36:09)
第4轮：AI 异兽图鉴
一轮对话生成了20只山海经异兽的完整数据（每只独立渐变配色），以及卡片网格、详情模态框、分类筛选、localStorage 收藏功能。
Session ID：CN.2531516585353379:7bb9d2e2cc61a2f7b6f41197b834d36b_6a3a4abcd78d43898a8d1fc0.6a3b42be8e5fd47b592ae27c.6a3b42bd522ffb4edb5c0d38:TRAE Work CN.1.0.0.1780.49889266-d765-4bf9-92b4-b55d2fdb3d0c.no_ppe.T(2026/6/24 10:47:56)
第5轮：诗境漫游
最具挑战的一轮——全屏 scroll-snap 沉浸式滚动、6首古诗逐行数据、6种 CSS 粒子效果（花瓣/雪花/雨滴/落叶/星光/萤火虫），全部一次生成。
Session ID：CN.2531516585353379:b8c4815aa13c519331205c47cc9dcfd3_6a3a4abcd78d43898a8d1fc0.6a3b49428e5fd47b592ae2cd.6a3b49428480dcf41269ed3b:TRAE Work CN.1.0.0.1780.49889266-d765-4bf9-92b4-b55d2fdb3d0c.no_ppe.T(2026/6/24 11:14:02)
第6-9轮：细节打磨 + 部署
经过几轮的问题修复，例如：诗境漫游页面状态切换、SEO metadata、移动端键盘遮挡等细节问题，最后部署到 Vercel，配置自定义域名。
技术栈： Next.js 14 + TypeScript + Tailwind CSS v4 + DeepSeek API，部署于 Vercel
报名帖链接： 【社会服务赛道】古籍焕新 —— AI驱动的古籍交互阅读平台，让千年文字"活"起来
开发心得： 整个项目从创意到可体验 Demo，不到 10 轮对话就搞定了。最让我震惊的是诗境漫游的 6 种 CSS 粒子效果，竟然一次就生成了完整且流畅的实现，没有任何 debugger 的过程，TRAE 真的在重新定义"从 0 到 1"的开发速度！！！