告别逐帧渲染：当大模型用代码直接“写”出动态视频与手绘动画
提到 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-styles-15 (Vincentwei1021) |
hand-drawn-storybook-animation-skill (lhlGitHub) |
lemo-opuscar (lemomo-ai) |
|---|---|---|---|
| 核心定位 | 商用水准的 15 种 MG 动态设计风格库与提示词基准 | 全流程手绘水彩绘本动画 Claude Skill 制作工作流 | 纯代码驱动的本地微电影制片厂 Skill（含 43+ 核心风格与 OPUSCAR 98 画廊） |
| 视觉呈现 | 扁平矢量、等轴 2.5D、3D 渲染、赛博朋克 HUD 等 15 种风格 | 笔触级动态手绘、水彩晕染、真实纸张翻页与电影运镜 | 涵盖油画厚涂、水彩、东亚传统美学等数十种 2D/3D 艺术电影风格 |
| 音频与混音 | 纯代码程序化生成配乐（BGM）与动作同步音效（SFX） | 自动生成配乐 + 接入 TTS（如豆包语音）实现逐句旁白对齐 | 完整的声音指导体系：支持语音旁白、原创配乐与多轨混音（Mixing） |
| 工程架构 | 单文件/纯前端源码 + 结构化高审美 Prompt 模板 | 浏览器实时笔触绘制 + 分镜脚本驱动 | 三层工业级架构：DIRECTOR.md（导演）+ TECHNIQUE.md（工程）+ STYLE.md（美术） |
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 自动闭环。
3. lemo-opuscar：把大模型变成你的“私人微电影制片厂”
如果既想要 mg-styles-15 丰富的风格库，又想要 storybook-skill 的完整叙事与成片管线，那么 lemomo-ai/lemo-opuscar 就是将这两者推向极致的集大成者。
lemo-opuscar 是一个专为 Claude Code、Codex CLI 等编程智能体打造的开源微电影制作 Skill。它在完全不使用任何视频生成大模型的前提下，仅凭代码就构建了 43+ 种可直接复用的电影风格库（更包含扩展的 OPUSCAR 98 全景风格画廊）。“选一个风格，带上你自己的故事，让你的编程 Agent 来当导演”是它的核心设计哲学：
- 三层解耦的“制片厂”架构：为什么
lemo-opuscar拍出来的代码短片没有“PPT 感”，反而充满电影质感？因为它让 Agent 在动手写代码前，先阅读三份核心指导手册：DIRECTOR.md（导演手册）：指导 Agent 如何讲故事、把控声音与画面节奏、设计摄影机运动（Camera）、调度角色表演（Performance）以及进行自我质量检查。TECHNIQUE.md（技术工程手册）：解决底层构建问题，涵盖逐帧渲染（Frame-by-frame rendering）、人声合成、配乐生成与多轨混音（Mixing），最终通过 Node.js、Python 与 FFmpeg 直接在本地输出 1920×1080、24fps 的标准电影级视频文件。styles/<style>/STYLE.md（美术与听觉设定集）：定义特定风格的视觉笔触与听觉氛围（涵盖油画厚涂 Impasto Oil Painting、手绘水彩、东亚传统美学等 2D/3D 风格），实现“视觉风格高度固定，故事内容完全自由”。
- 交互式导演工作流（Storyboard First）：你只需用自然语言下达指令（例如：“用水彩风格拍一部 45 秒关于我家咖啡庄园的短片，温暖的女声旁白”）。Agent 会在开拍前主动向你确认一次细节与素材偏好，并询问是否需要先看分镜（Storyboard）。如果你选择“是”，它会先用真实的目标风格渲染出关键帧分镜供你审阅，确认无误后再自动耗时 30–60 分钟完成整部成片的逐帧渲染与混音合成。
- 一键插件化安装：支持直接通过 Claude 插件市场安装（
claude plugin marketplace add lemomo-ai/lemo-opuscar），也可以直接将plugin/skills/lemo-opuscar/复制到其他编程 Agent 的技能目录中即插即用。
视频风格预览： https://lemomo-ai.github.io/lemo-opuscar/
三、 解剖底层逻辑：一个优秀的“动态视频 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
评论