本文来自微信公众号： 小盖fun ，作者：小盖，原文标题：《分享下我用 AI 生成 HTML 动画的提示词。》
没想到，上周随手用JavaScript和HTML做的AI动画，竟然有这么多同学喜欢。周末两天好多人问我要提示词，所以干脆写篇文章，分享一下我的工作流。
具体作品大家可以往前翻，很容易就能找到。
这里没有用视频和图片生成模型，包括里面的背景音乐、蝴蝶、蜻蜓、花、群山，都是LLM通过代码搞定的。
这也是最近AI Coding领域挺有意思的一个方向，通过LLM编写代码来生成动画。废话不多说，直接分享我的工作流。
其实，最初的提示词非常简单，就这么一段：
制作一部80秒、16:9的动画，使用WebGL2和原生JavaScript，生成单个HTML文件。
不要使用任何第三方库，也不要使用图片、字体或者音频文件。整个动画采用水彩绘本风格，有田园的诗意感。
在这个提示词的基础上，我把自己写的诗发给了模型，让它尽可能还原诗中表达的意境。
接下来，基本上就是耐心地和AI反复沟通了。因为它不可能一次性就做出让我满意的作品。
比如，一开始生成的山峰形状不符合我的预期，那我就让它调整。大家可以仔细看看视频里蝴蝶、蜻蜓的运动轨迹，这些其实都经过了反复编排。
最开始，AI生成的蜻蜓不够逼真，飞行轨迹也是一条直线，看起来特别假。
那我就让它调整，飞行轨迹应该更随机一些，有速度变化，也有转向，这样才符合真实世界里蜻蜓的运动方式。
这里我再分享一个经验。如果你想让某个东西的运动更加真实，最好能够具体描述它的运动规律。
比如，不要只是告诉AI，让蜻蜓飞得自然一点。可以试试这样的提示词：
请重新设计蜻蜓的运动轨迹，让它更加接近真实的飞行状态。不要沿着固定的直线匀速运动，可以加入自然的转向、短暂停顿、加速和减速。
轨迹需要连续、平滑，避免突然跳跃。翅膀的振动和身体的移动也要协调。
同样的道理，如果我们想让风吹过草地，也可以告诉AI，草地应该随着风的方向轻轻摆动，不同位置的草叶存在细微的时间差。
这些细节，都会影响最终的观感。
说实话，这个过程还挺枯燥的，考验我们的耐心，也挺考验一个人的审美。因为这部动画是我自己特别想做的，我希望它能尽可能还原我写的那首诗的意境。
比如，随着太阳慢慢落山，夕阳照在山坡上，整个世界的光线和色彩应该发生什么变化，我脑海中其实有一个大概的构想。我就把自己的想法告诉AI，看看它能不能实现。
哪些地方不满意，再让它继续修改。
来来回回好多次。
可能有些朋友会好奇，为什么LLM能够制作这样的动画？
大家可以想一下，平时我们用AI制作一个网页，已经非常容易了。其实，在网页的基础上，再增加时间这个维度，让画面中的元素随着时间不断变化，本身就可以形成一部动画。
我用到的是WebGL2，它是一套让浏览器能够调用GPU绘制图形的技术，可以绘制非常复杂的2D、3D场景，也能够控制大量元素同时运动。技术上限还是挺高的。
不过，直接让LLM通过代码制作动画，也有一些难点。比如，我想让AI通过代码生成一个非常逼真的小孩子，在草地上奔跑，各种肢体动作都很自然，这就比较难。
所以大家可以看到，我的动画里的人物，基本上都是静止的，而且我特意让他背对着观众。这样只需要画出一个背影，难度就降低了很多，也不会破坏整个动画的意境。
做着做着，我发现自己也没什么新想法了，这时候，我就会让AI停下来，重新梳理整个动画。我大概会这样告诉它：
你先停下来，重新梳理一下整个动画，以及我想表达的意境。从一个导演的视角，完整审查一下这部作品，看看还有哪些地方值得优化，给我一些具体的修改建议。
这个办法还挺有效的。模型会重新审视整个作品，从画面、节奏和故事表达等方面，给出一些具体的建议。然后，我再根据它的建议，继续调整。
整个创作过程其实就是这样。没有什么特别神奇的提示词，更多的是不断尝试，让AI一点点接近自己脑海中想象的画面。
等动画做好之后，我就直接把它部署到了自己的博客上。
说到这里，我还想啰嗦两句。
之前我就跟大家建议过，一定要有自己的域名，有自己的服务器，最好再搭建一个个人网站。这个网站可以放自己写的文章，也可以放自己通过Vibe Coding制作的各种小作品。
反正我特别喜欢Vibe Coding。你说这些东西能给我带来什么收益吗？一毛钱都没有。但它能给我带来非常大的精神满足。
我想起演员黄渤，他就特别喜欢捏泥塑。
这种创作的快乐，其实是相通的。当我把自己脑海中构想的一个东西，一点一点地制作出来，那种成就感真的非常强烈。
这部动画完成之后，我还把对应的诗，用Suno做成了一首歌，上传到了音乐平台。这两天一直在单曲循环。
HTML定稿之后，还需要把它导出为视频。使用了下面的提示词：
请把这个网页动画导出成MP4视频。渲染时，主动控制动画的时间进度，逐帧生成画面，确保不会丢帧。
每生成一帧，就将它保存下来，这样即使渲染中途停止，也能从上次中断的地方继续。音频单独渲染，最后再和视频合成。
以上就是整体的工作流。希望能给大家一点参考。有兴趣的朋友，完全可以试试把自己脑海中的想法做成动画，整个过程还是挺有意思的。
