1+1搞定AI学习古诗的伴学工具

昨天做了一个AI学古诗的伴学工具，发出来后就有老师问起制作方法，咱先看效果我再说制作思路与流程。

这个AI伴学工具用到了DeepSeek写代码功能和豆包的智能体，关键之处是如何把二者结合起来，看下面的详细解读。

有手就能写，直接让DS帮你出一份初稿，测试后根据需求再进行反复修改，初稿用的提示词如下：

二、写代码

这个是重点，先用上面的初始提示词生成一个大致的框架，比如是这样的~~

基本还算满意，后来发现诗人少了点，而且是固定的几个，就想着能不能随意添加诗人，这样的话就可以让学习更灵活。

注：初始提示词只生成了5个诗人，这个是灵活的，如果想多固定几个的话就多在提示词里写几个，我第一次写了5个，然后又添加了5个。

于是，就有了第二版，新增了添加诗人的功能，也就是增加一个按钮，点击后会让手动填写相关信息~~

添加诗人项目，第一次生成时让填写可多内容，我就又让DS修改了一下，只保留上传诗人图片，智能体链接和古诗这三项，用到了自动识别图片文件名就是诗人的名字。所以，你在给诗人图片命名时直接用他本人姓名，目的就是让写代码时自动识别用的。

这一点和我制作的那个“街霸抢答课堂活动”和“圣斗士排位赛”一样，都是自动识别图片名字。

修改好后就是这样的，上传准备好的诗人图片，粘贴准备好的智能体链接，上传准备好的古诗txt文档，确认添加就可以了。

我准备了18位诗人，设置好排版面，比如我设置的是一排8个人，每添加一人就会自动进行排列。

可以参考提示词：

添加的诗人优先排在第一排后面，每排最多8人，如果第一排满了再排第二排。修改好后重新生成一个完整的html代码

但是在我添加诗人时却发现是这样的~~

这明显是不对的，起初是以为DS理解有问题才会自动分排的，于是修改了N多次仍然是这样。

后来我突然想起来可能是因为这个显示人物的卡片大小受限造成的，因为第一次生成时人物这个窗口是带有半透明背景的，我嫌它不好看就把半透明背景也去掉了。

突然间大悟，就直接开始修改人物容器的宽度，果然一下就搞定了。

这下好了，直接就是一排8个人，只管添加就行了。

添加的人多新的问题又来了，两排之间的距离又太近了，当鼠标放在人物上时提示的“点击进入古诗世界”这样的文字受到了影响，于是再给出这样的提示词：

再修改一下代码：1、让显示的人物再大一点，并根据实际情况均衡调整容器宽度，要保证一排能显示8个人物。2、增大两排之间的距离。

当添加的人更多时怎么办？

当然要考虑到能够拖动鼠标进行选择，所以还要再加上一个进度条。

但是又发现加上进度条后超级难看，而且“播放音乐”的按钮位置也变了。

不行，还得再改，这次改进度条和按钮的位置。

直接使用透明的进度条，干脆实现直接滚动鼠标就能完成对所有诗人的浏览，这样子更方便。

提示词就用这个：

再修改一下代码：隐藏进度条，当添加的人物超过16人时只需要滚动鼠标或直接在屏幕上拖动就可以了。

经过这一通修改，整个页面就搞定了，最终效果如下。

三、打造第二页面

这个页面主要是调用豆包智能体通过对话对诗进行讲解的，点击标题可以让智能体生成这首诗的写作背景，点击诗句可以生成这句诗的意思，如果你上传的古诗不带译文，点击下面译文位置可以让智能体生成这首诗的译文。

但是问题又来了，当我点击后会自动复制，但进入左侧的智能体后只是粘贴进了复制的这些文字，并没有发给智能体指令，还得单独手动输入，这个是非常不方便的。

于是，我就让DS帮我自动填写对应的指令，比如这样：

第二页面，当点击诗的一句时自动复制这句诗，自动添加上发给智能体的指令“请解释了一下这句诗的意思”；当点击标题时则是复制整首诗，自动粘贴指令“请告诉我作者写这首诗的写作背景是什么”；当点击译文位置”点击复制整首诗，去智能体获取译文“时，自动粘贴指令”请生成这首诗的译文。