告别逐帧渲染：当大模型用代码直接“写”出动态视频与手绘动画
提到 AI 生成视频，大多数人的第一反应是基于扩散模型（Diffusion）的像素级渲染——输入一段提示词，等待几分钟，然后祈祷生成的画面里人物手指数量正常、文字没有扭曲成乱码。在影视特效或实景空镜领域，像素生成确实惊艳；但在动态图形设计（Motion Graphics, MG）、技术科普动画以及叙事型绘本视频中，设计师和创作者真正需要的是精准的排版、丝滑的缓动曲线（Easing）、清晰的矢量线条，以及随时可微调的分镜结构。
近期在 GitHub 上走红的两个开源项目——mg-styles-15 与 hand-drawn-storybook-animation-skill——展示了一条截然不同的技术路线：可编程动态视频（Programmable Motion Video）。它们不再让大模型去“猜”每一帧的像素，而是通过封装完善的 Agent Skill 与提示词工程，让大模型直接编写前端与图形代码，在浏览器中实时渲染出达到商用和叙事水准的完整动画。
这些 Skill 除了 Opus 5.5 ，其他模型也可以使用，不过效果将因模型而产生差异，可以用于对比不同模型的能力。
一、 为什么“代码生成视频”正在成为新范式？
在传统的动画制作流程中，哪怕是一个 10 秒的片头或几分钟的科普绘本，也需要经历写脚本、画分镜、矢量绘图、AE 关键帧绑定、配音对齐和合成剪辑。而用传统文生视频大模型来做这类内容，往往会遇到三大痛点：
- 文字与排版失控：无法精准渲染中英文标题、数据图表或 UI 界面。
- 黑盒不可编辑：如果客户或自己觉得第 3 秒的某个元素颜色不对、节奏慢了半拍，只能重新抽卡，无法像改代码一样精准微调。
- 音画脱节：生成的画面没有底层时间轴逻辑，配乐、音效与动效卡点全靠后期手动硬凑。
而 LLM + Agent Skill（技能包） 的思路，则是将专业动画师的审美规范、物理运动规律、分镜逻辑和音频合成 API 封装成标准化的上下文规则。大模型化身全栈动画工程师，直接调用 Canvas、SVG、WebGL 以及 Web Audio API，把“想法”编译成可交互、可录制、可二次修改的动态视频。
二、 两大标杆开源项目深度解析
这两个项目恰好代表了代码生成视频的两个核心方向：一个是追求极致视觉风格与商用质感的 MG 动态设计，另一个则是打通叙事、分镜与音画同步的全流程绘本动画 Skill。
| 维度 | mg-styles-15 | hand-drawn-storybook-animation-skill |
|---|---|---|
| 核心定位 | 达到商用水准的 15 种 MG 动态设计风格库与提示词基准 | 全流程手绘水彩绘本动画 Claude Skill 制作工作流 |
| 视觉呈现 | 涵盖扁平矢量、等轴 2.5D、3D 渲染、赛博朋克 HUD 等 15 种风格 | 笔触级动态手绘、水彩晕染、真实纸张翻页与电影级运镜 |
| 音频方案 | 纯代码程序化生成配乐（BGM）与动作同步音效（SFX） | 自动生成配乐 + 接入 TTS（如豆包语音）实现逐句旁白对齐 |
| 核心价值 | 提供开箱即用的高审美 Prompt 模板与纯代码音画生成参考 | 零绘画与剪辑基础，将文本故事一键转化为数分钟的叙事动画 |
1. mg-styles-15：15 种商用水准 MG 风格的“提示词与源码字典”
15 种 MG 动态设计风格，每种一支 10 秒成片，全部由 Claude Opus 5.5 写代码做出来。
Vincentwei1021/mg-styles-15 是一个极具视觉冲击力的展示与开源库（配套在线预览站：vincentwei1021.github.io/mg-styles-15）。作者盘点了 15 种达到准商用水准的 MG 动画风格，每支 10 秒的成片完完全全由 AI 根据一段提示词编写代码生成。
视频预览地址：https://vincentwei1021.github.io/mg-styles-15/
更硬核的是，这些片子不仅画面与动画由代码驱动，连背景配乐和卡点音效（SFX）也全部由代码合成，没有任何外部素材拼接。项目完整公开了每种风格的成片预览、风格设计说明、完整 Prompt 以及全部源码：
- 多元视觉美学全覆盖：项目中包含逐帧手绘（Frame-by-Frame）、等轴 2.5D（Isometric 2.5D）、扁平矢量（Flat Vector）、线条动画（Line Art）、3D 渲染（3D Render）、形变动画（Shape Morph）、贴纸风科普（Sticker Explainer）以及赛博朋克 HUD（Cyberpunk HUD）等 15 种截然不同的动态视觉语言。
- 提示词即生产力：以往我们让大模型写动画代码，出来的往往是生硬的
linear位移和单调的色块。mg-styles-15的核心贡献在于，它展示了如何用精准的设计语言（色彩系统、运动节奏、图层叠加关系、物理回弹约束）去编写 Prompt。你可以直接复制项目中的提示词模板，替换自己的主题文案，立刻复刻出同等质感的宣传片头或产品演示动画。
2. hand-drawn-storybook-animation-skill：在浏览器里“现场作画”的叙事动画工作流
如果说 mg-styles-15 解决了“10 秒高燃视觉怎么写”的问题，那么 lhlGitHub/hand-drawn-storybook-animation-skill 则解决了一个更宏大的命题：如何让一个不会画画、不会剪辑的普通创作者，把一篇故事或科普长文变成一部长达数分钟、有声有色的完整动画片？
这是一个专为 Claude Code 等智能体环境打造的开源 Skill。当你把它挂载到你的大模型工作流中时，AI 不再只是吐出一段静态代码，而是接管了从编剧、原画、分镜导演到后期录音合成的完整管线：
- 真正的“动”——笔触级实时绘制：它不是把一张静态图做简单的平移缩放（Ken Burns 效应），而是在浏览器里一笔一笔把画面实时画出来。结合水彩上色渲染，观众能看到线条生长、色彩浮现的真实手绘过程。
- 电影级分镜与物理翻页：Skill 内部定义了严谨的镜头调度逻辑（推拉摇移、局部特写）以及逼真的拟物翻页效果，转场就像在翻阅一本真正放在桌上的实体水彩绘本。
- 配音配乐一条龙合成：动画的灵魂在于声音。该 Skill 支持自动生成契合故事氛围的背景音乐，并集成了自然流畅的语音合成（如豆包 TTS 旁白）。系统会自动根据每一句台词的时长计算动画节拍，做到旁白念到哪里、画笔就画到哪里，实现严丝合缝的音画同步。
- 极简的集成方式：对于习惯使用 Claude Code 的开发者或创作者，只需将仓库克隆下来，把技能目录复制到本地的
.claude/skills/目录下即可一键激活。输入一段故事构想，剩下的分镜拆解、代码编写、音频对齐全部由 Agent 自动闭环。
三、 解剖底层逻辑：一个优秀的“动态视频 Skill”是如何工作的？
把这两个项目放在一起看，我们会发现“大模型制作动态视频 Skill”背后有一套非常清晰的工程架构。如果你也想基于这些项目定制自己的视频生成 Skill，核心在于抓准以下四个层面：
1. 视觉与动效的原语抽象（Motion Primitives）
大模型直接写底层图形代码容易陷入细节泥潭。优秀的动画 Skill 会在指令或脚手架中规范好动效原语——比如强制规定使用特定的三次贝塞尔曲线（Cubic Bezier）而非默认线性过渡；定义好 SVG stroke-dashoffset 的路径生长计算公式；或者预设好噪点纹理滤镜（SVG Filter）来模拟纸张颗粒感与手绘抖动。
2. 时间轴与状态机驱动（Timeline & State Machine）
视频本质上是时间的艺术。在 hand-drawn-storybook-animation-skill 这类长视频技能中，核心架构往往围绕一个主时间轴（Master Timeline）展开。Skill 会指导大模型先将文本拆解为结构化的分镜脚本（Scene JSON），每个 Scene 包含台词、预计时长、镜头运动参数和绘制元素序列，再由前端渲染引擎按状态机顺序驱动播放。
3. 程序化音频合成（Procedural Audio & TTS Alignment）
为什么这两个项目都能摆脱外部剪辑软件？秘密在于将音频也纳入了代码控制：
- 音效与配乐：利用浏览器的
Web Audio API（或 Tone.js 等合成器库），大模型可以通过调节振荡器（Oscillator）、包络（ADSR）和滤波器，用纯代码写出转场嗖嗖声、按键音甚至环境极简旋律。 - 语音驱动时间轴：通过脚本调用 TTS 接口生成音频文件后，先读取音频的精确毫秒数，再反推当前分镜内 SVG 笔触绘制的持续时间（Duration），从而在代码层面彻底消灭“音画不同步”的顽疾。
4. 确定性录制与导出（Deterministic Rendering）
当浏览器里的画面和声音都准备就绪后，配合无头浏览器（如 Playwright / Puppeteer）或画布捕获工具，即可将实时运行的网页捕获并编码输出为高帧率的 MP4 视频文件，直接用于社交媒体发布。
四、 结语：知识传播与个人表达的“动画时代”
过去，把一个复杂的知识点、一段睡前童话或一个产品创意做成动画，是一支专业团队忙活好几周的专利；因此，绝大多数好内容最终只能停留在枯燥的文字里。
mg-styles-15 和 hand-drawn-storybook-animation-skill 的出现向我们证明了：当大模型的能力被结构化的 Skill 驯服后，代码就成了最强大的画笔和摄影机。 mg-styles-15 为我们提供了商业级动态设计的提示词美学标准，而 hand-drawn-storybook-animation-skill 则跑通了从文本到叙事成片的自动化工业管线。
无论你是想为自己的独立产品制作一段抓人眼球的 Promo 短片，还是想把深奥的技术博客转化为通俗易懂的手绘科普视频，都不妨把这两个仓库 Clone 下来，亲手体验一下用 Prompt 和 Skill “编译”出一部动画电影的乐趣。
相关链接：
- mg-styles-15 仓库：https://github.com/Vincentwei1021/mg-styles-15
- hand-drawn-storybook-animation-skill 仓库：https://github.com/lhlGitHub/hand-drawn-storybook-animation-skill
评论