延续「氛围感 Blog」，我做了一个沉浸式插图风的「语文课」网页 Demo，及一些思考

[artshooter]

之前为了发「氛围感 Blog 」的介绍，我用几个中学课文作为素材去做了对应的网页。 做的过程中，我发现那些经典的中学课文中，无一不包含着质朴、强烈的情感。 无论用什么媒介去重塑，它们都蕴含着打动人心的力量。

于是我开始怀旧起来，打算尝试做一个系列。

目前先做了一个 Demo 。包含一个三篇经典文章+首页场景动画

体验链接： https://chinese-class.ashooter.com/ （首页加载图较多，可能有点慢）

做这个 Demo 过程中的感受与思考：

1. 插图都是由 AI 生成的。生成过程中，我遇到一个格式问题：生成出来的基本都是有背景色的 png 图，但我想要透明底的 webp 。
   于是我用 Claude Code 提炼了一个很具体的流程：把图从 png 转成 webp ，同时帮我去除背景色。
   然后我就反应过来，其实这种很小、很垂直的工具，我们以前都会去找那种工具站，但以后可能都不需要了。用 AI 很擅长用代码去快速解决一批具体的问题。

2. 做文章封面图的时候，基本我都写了很长很长的 Prompt 。这个过程中，我发现有些场景/动作我能想象出来，但完全写不出来 Prompt 。
   写 Prompt 这个过程，有点像白描手法的写作练习，你要把脑海里的画面，用文字一点点摹出来。但很多时候，我发现我居然找不到一个准确的词，来形容这个动作。
   比如说《背影》那张图，父亲爬向月台的时候，我脑子里是有画面的：左脚撑着，右脚爬上去了一半，整个人匍匐着，姿态是很狼狈的。重点就在这个“狼狈感”上，它的精髓到底在哪？你怎么用文字把它描述出来？
   有两点 个人总结：1.还是得多看书； 2.我具体的执行方式，就是反复和 AI 来回沟通。和 AI 多聊几轮，先把自己混乱的想象告诉他，让他生成 prompt ，然后再去来回调 prompt ，你们一起来慢慢逼近你心里真正想要的那个画面。

3. （这一点是对 AI 文生图功能的畅想）：
   我在做翻页动画的时候，先做了第一张“书页一角翘起来”的图，然后我想去做连续的好几帧，但发现很难做出来。然后我就在想，或许在今年或者明年，新的文生图模型能让我们对一张图直接进行“逻辑上的修改”。
   有点类似把一张平面图当成一个三维模型来用。如果图里是一本书，我可以选中其中一页，然后选中、拖动它，让这一页翻过去；如果图里是一个人，我可以直接把他的手举起来。相当于把一张静态图片，变成一个 AI 可以理解和操作的模型。

还是一个尝试中的 Demo ，欢迎大家反馈～

[artshooter]

效果预览：

[LASockpuppet]

感觉可以加一个深情并茂的朗读

[artshooter]

@LASockpuppet 有道理。我开始只想着以后可以加 bgm 。

加朗读 想想还不错，后面拿我自己声音克隆一个😂。

[bojue]

@artshooter #3 你要卖语音包，你自己的免费

[liuliuliuliu]

这个感受和思考的分享就很细致了，非常赞

[zoyua]

真不错

[Link99]

所以这个翻页效果是怎么做的 好流畅

[Heanes]

真不错，学习了

[kamilic]

@Link99 看了下代码，就是平平无奇的动画帧播放 😂

[artshooter]

@Link99 帧播放。

重点在于用文生图做出顺畅的前后帧。

1. 扣提示词
2. 对图片做标柱 ，加以引导
3. 大量抽卡

[artshooter]

翻页动画还有一种思路，可以直接文生视频。
然后抽出视频的帧。

[Nem0]

主页图片也是 AI 做的吗，好像回到了小时候

[artshooter]

@Nem0 是的。图片资源都是 AI 做的。