「学习工作」轻诗阁——轻松学习，便捷分享，最棒的学习诗歌工具

TRAE AI 创造力大赛 【大赛初赛专区】
1

各位道友大家好，我是刚毕业的应届开发者。在校四年我长期深耕 AI 辅助编程开发，本次带来的轻诗阁，是我基于个人真实学习痛点、耗时三个月完整落地的全栈传统文化学习项目。类似于下图：

image_1.png
image_1.png1917×1034 149 KB

Session ID：.80730852164684:3395b5c625d46e57da9dd373260c852c_6a090ecc56db82fd8a120e2f.6a09119a56db82fd8a120ef7.6a09119918574183f1985cd5:Trae CN.T(2026/5/17 08:53:46)直到有一天系统提示我要更新一个trae work，刚开始感觉看不到代码的变化很慌，感觉不好用，回像其他的普通龙虾一样，偷偷做了什么都不说，代码也看不见，但是结果是它真的不一样。我目前已经把整个轻诗阁打造成了一个非常棒的系统了，为了方便给各位演示已打包成zip。

image_2.png
image_2.png1284×964 43.2 KB

Session ID：80730852164684:9e3b34e64f47844af84d470087af2933_6a5698b8e95de42eae862b52.6a572751e95de42eae862d04.6a572751e95de42eae862d02:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 14:23:13)

1. Demo 简介

产品形态：全栈古风诗词学习平台（Web端 + 后端服务 + 数据库）

面向人群：热爱中国传统文化的年轻人、学生群体、诗词爱好者、教育工作者

核心功能：

功能模块 功能说明 技术亮点
每日诗词学习 基于艾宾浩斯遗忘曲线的智能学习系统，每日推荐1-2首诗词，自动生成复习计划 :white_check_mark: 遗忘曲线算法实现
:white_check_mark: 个性化学习路径
:white_check_mark: 学习进度持久化存储
飞花令对战 AI驱动的诗词对战游戏，支持6+关键字（月、花、春、山、水、风），实时诗句匹配验证 :white_check_mark: 模糊匹配算法
:white_check_mark: AI诗句回应逻辑
:white_check_mark: 计分系统与动画反馈
AI识图猜诗 图像意境分析与诗词匹配，上传图片自动识别意境并推荐相关诗词 :white_check_mark: 图片意境关键词提取
:white_check_mark: 诗词语义匹配算法
:white_check_mark: 模拟AI推理过程
诗人百科系统 完整的诗人信息库，展示诗人简介、朝代、代表作品、生平故事 :white_check_mark: 诗人数据结构化
:white_check_mark: 诗词关联查询
:white_check_mark: 首字头像自动生成
智能搜索 支持标题、作者、朝代、内容关键词多维度搜索，实时搜索结果 :white_check_mark: 全文检索算法
:white_check_mark: 搜索结果排序
:white_check_mark: 历史搜索记录
学习日历 可视化学习打卡日历，统计签到天数、学习天数、连续签到 :white_check_mark: 日历数据可视化
:white_check_mark: 学习统计图表
:white_check_mark: 成就徽章系统
个人学习中心 学习进度、文铢积分、装备系统、个人成就一站式管理 :white_check_mark: 用户数据持久化
:white_check_mark: 积分系统
:white_check_mark: 装备解锁机制
社区互动 诗词分享、评论互动、好友交流的社交平台 :white_check_mark: 帖子CRUD
:white_check_mark: 评论系统
:white_check_mark: 用户互动数据
商品集市 虚拟商品交易系统，文铢购买学习道具 :white_check_mark: 商品管理
:white_check_mark: 购物车系统
:white_check_mark: 订单记录
后台管理 完整的管理员后台，管理诗词、用户、商品、社区内容 :white_check_mark: 权限管理
:white_check_mark: 数据统计
:white_check_mark: CRUD操作界面

2. Demo 创作思路

灵感来源：

  • 阿帅派克：看到他游戏打得好还精通诗词，那种"腹有诗书气自华"的气质深深打动了我，激发了我每天背一首诗的愿望。我意识到，诗词学习不应该是枯燥的任务，而应该是一种提升自我修养的乐趣。

  • 英语学习软件：4次英语四级没过的经历让我对英语学习软件的记忆方法印象深刻——每日定量学习、周期性复习、图文注解。我想把这种科学的学习方式应用到古诗词学习中，让背诗变得像记单词一样轻松高效。

想解决的问题：

  • 学习效率低：传统背诗方式缺乏系统性，遗忘率高，学习者难以坚持

  • 内容枯燥：现有平台大多是纯文字展示，缺乏视觉化和互动性

  • 激励不足：缺乏有效的激励机制和学习反馈，难以形成学习习惯

  • 资源分散：诗词、诗人、赏析等资源分散在不同平台，缺乏一站式学习体验

  • 学习方式单一：只有背诵一种方式，缺乏游戏化、可视化等多样化学习手段

为什么做这个方向：

  • 文化传承：中国古诗词是中华优秀传统文化的瑰宝，传承和学习古诗词具有重要意义

  • 市场空白：市面上缺乏专门针对古诗词学习的优质平台，现有网站要么内容枯燥，要么功能单一

  • 科学记忆：结合艾宾浩斯遗忘曲线，提高学习效率和记忆效果

  • 视觉化学习：每首诗配有专属意境背景图（基于诗句关键词和情感分析生成），让诗句意境可视化

  • 游戏化设计：飞花令对战、文铢积分系统、学习成就，让学习变得有趣

技术取舍：

  • 选择 Node.js + Express + SQLite：轻量级、易部署、适合个人项目，数据持久化可靠

  • 选择 纯前端演示版本：方便分享和演示，无需服务器环境，零门槛体验

  • 图片生成策略：从外部服务迁移到本地存储，确保离线可用和加载速度

3. Demo 体验地址

:white_check_mark: Zip 打包文件：qinshidemo.zip

qinshidemo.zip (5.1 MB)

（完整的纯前端演示版本）

运行方式：无需安装服务器，直接在浏览器中打开 index.html 即可体验全部功能

功能覆盖：

  • 80首经典诗词（每首配专属意境背景图）

  • 6个核心页面（首页、诗词详情、搜索、飞花令、AI识图、诗人）

  • 完整的导航系统和交互体验

  • 粒子动画和古韵视觉效果

4. TRAE 实践过程

:memo: 开发流程

阶段 时间 主要工作 技术突破
项目构想 2026年4月 完成项目需求分析和功能设计 确定"轻学"核心理念
小程序版本 2026年5月 使用 TRAE IDE 完成微信小程序版本框架开发 学习系统、签到打卡、社区互动
Web版本重构 2026年6月 使用 TRAE Work 进行Web版本的全面升级 RESTful API设计、数据库架构、AI功能集成
功能扩展 2026年6月-7月 添加飞花令、AI识图、商品集市、后台管理 游戏化系统、图像识别模拟、电商功能、管理后台
界面优化 2026年7月 全面优化界面设计，添加粒子动画和背景装饰 古韵UI设计、粒子系统、响应式布局
Demo打包 2026年7月 创建纯前端演示版本，优化资源打包 纯前端方案、资源压缩、离线可用

:framed_picture: 关键步骤截图（需要你手动截取）

截图1：小程序框架开发阶段

image
image370×787 64.3 KB

小程序版本的代码结构和核心功能实现，learn.js 学习页面的核心逻辑（签到、今日学习、复习计数等），项目的起点，完成了基础学习流程的设计，使用 TRAE IDE 的 Agent 辅助开发

截图2：Web版本全面升级
Session ID：80730852164684:c8f91cfa3b517b8edf50b5190cda5e58_6a487ea1f0065835ef350a59.6a487ea1f0065835ef350a5c.6a487ea1f0065835ef350a5a:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/4 11:31:45)

image
image1290×970 40.2 KB

image
image1916×953 192 KB
展示使用 TRAE Work 进行代码开发的界面，Hero诗词卡片、飞花令游戏、AI识图等功能的实现，从小程序升级到Web端，使用 TRAE Work 的可视化开发模式，效率大幅提升

截图3：后台管理系统

image
image1865×931 115 KB

image
image1283×767 24.8 KB

Session ID：80730852164684:07afc32c1790e942cecd1271d791d9d6_6a487ea1f0065835ef350a59.6a4a1b4949a4b5de3b9949d3.6a4a1b4949a4b5de3b9949d1:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 16:52:25)
管理员后台界面，诗词管理、用户管理、商品管理、社区管理，完整的后台管理功能，支持数据统计和批量操作

5. 报名审核通过的帖子链接

:white_check_mark: https://forum.trae.cn/t/topic/46156

:bullseye: 技术亮点深度解析

:building_construction: 架构设计

Plain Text

┌─────────────────────────────────────────────────────┐
│                    用户界面层                        │
│  HTML5 + CSS3 + JavaScript (23个页面)               │
│  古韵UI设计、响应式布局、粒子动画                     │
├─────────────────────────────────────────────────────┤
│                    业务逻辑层                        │
│  Express.js RESTful API (50+接口)                   │
│  学习系统、签到系统、积分系统、游戏系统               │
├─────────────────────────────────────────────────────┤
│                    数据持久化层                      │
│  SQLite数据库 (6+核心数据表)                        │
│  poems, users, progress, collections, products     │
└─────────────────────────────────────────────────────┘

:brain: 核心算法

算法 应用场景 实现说明
艾宾浩斯遗忘曲线 学习复习计划 根据学习时间自动计算复习时间点，优化记忆效果
模糊匹配算法 飞花令验证 去除标点符号后双向包含匹配，支持用户输入的灵活验证
诗词语义匹配 AI识图猜诗 根据图片意境关键词匹配诗词内容，计算匹配度
全文检索 诗词搜索 多维度关键词匹配（标题、作者、朝代、内容）
随机诗词算法 每日推荐 COUNT + OFFSET 方式优化随机查询性能

:artist_palette: UI/UX 设计

设计特点 实现方式 效果
古韵水墨风格 宣纸质感背景、毛笔书法字体 营造古典文化氛围
粒子动画系统 落梅、星光、落叶三种粒子类型 增强视觉层次感
背景装饰 云朵、竹影、远山分层装饰 提升整体美感
响应式布局 移动端自适应、Tab导航 支持多设备访问
图片匹配 120+首经典诗词精确映射场景prompt 每首诗配专属意境图

:bar_chart: demo中数据规模

数据类型 数量 说明
诗词数据 1029首 完整诗词库，含标题、作者、原文、译文、赏析
飞花令数据 48条 6个关键字，每个关键字8条诗句
诗人数据 多位 李白、杜甫、孟浩然、王维等著名诗人
背景图片 80张 高清意境图，本地存储
页面数量 23个 完整功能覆盖
轻诗阁——复赛升级：从古韵诗词到工程级全栈平台，AI赋能传统文化传承