GPT88 / API Docs
ব্লগে ফিরে যান

三个代码视频 Skill 怎么选：角色动画、动态设计与产品宣传片

AI视频2026-10-2714 মিনিট পড়ুনAI视频代码视频ClaudeAnimationBasemg-styles-15video-shotcraftClaude CodeCodex

本文根据 雪踏乌云的原始 X 帖子整理。原帖发布于 2026 年 10 月 26 日，作者从二十多款代码视频 Skill 中筛出三个项目。本文同时核对了 ClaudeAnimationBase、mg-styles-15 和 video-shotcraft 当前公开 README；仓库内容、依赖、模型适配和授权可能继续变化，实际使用以项目当前文件为准。

三个代码视频项目的原帖视频预览

先看结论：三个项目不是同一种工具

这三个仓库都能让编码 Agent 参与视频制作，但入口不同：

项目更像什么最适合的第一条片子
ClaudeAnimationBase角色动画起步包一个有固定角色、情绪和动作的短故事
mg-styles-15动态设计风格实验室一条 10 秒左右、需要明确视觉风格的片段
video-shotcraft产品宣传片镜头库与 Skill用真实产品页面做一条可剪辑的宣传片

如果你想研究角色表情和手绘笔触，先看 ClaudeAnimationBase；如果想比较 15 种动态图形路线，先看 mg-styles-15；如果手里已经有产品页面、截图和品牌素材，直接看 video-shotcraft。

1. ClaudeAnimationBase：从一个角色开始做动画

ClaudeAnimationBase 是一个基于 p5.js 和 p5.brush 的角色动画 starter kit。仓库提供一个可修改的 Clawd 角色、情绪和视角素材、动画指南、场景目录以及逐帧渲染脚本。

它的重点不是“生成一段视频”，而是让 Agent 按照动画规则写出一个可控的场景。README 建议先让 Agent 阅读 ANIMATION_GUIDE.md，再提出一个明确的小任务，例如让角色花十几秒完成一个简单动作。项目的流程大致是：

角色与情绪
  → 分镜和镜头
  → p5.js / p5.brush 场景
  → Headless Chrome 逐帧渲染
  → ffmpeg 输出 MP4

它适合什么

  • 角色表情、视线、帽子、动作和小剧情；
  • 想把一个固定角色反复做成系列内容；
  • 想学习“动画规则 + 代码场景 + 逐帧渲染”的完整链路；
  • 想让 Agent 先做分镜，再按镜头逐步实现。

需要注意什么

仓库当前 README 列出 Node.js、Google Chrome 和 ffmpeg 等依赖。p5.brush 的水彩填充比较吃渲染性能，没有独立 GPU 时，帧渲染可能变慢；README 也提供了避免水彩填充或使用软件 WebGL 的降级方向。

因此它更适合短片和角色实验，不适合一开始就拿来做几分钟、几十个场景的长视频。先让 Agent 生成一个 5 到 10 秒的小片段，检查角色是否连贯、镜头是否有变化、渲染时间是否可接受。

2. mg-styles-15：一次比较十五种动态设计风格

mg-styles-15 把动态设计拆成 15 个独立的 10 秒影片。每个风格都有说明、完整提示词、源代码和可观看的成片，项目还公开了音频合成、渲染和二轮审片的流程。

它的价值是“可对照”。你可以在同一个项目里比较线条动画、等距 2.5D、扁平矢量、3D、拼贴、像素、液体动效、HUD 和竖屏字幕等路线，而不是只看到一个无法解释的成片。

它适合什么

  • 给品牌或产品找视觉方向；
  • 学习同一条代码渲染管线如何承载不同风格；
  • 从现成 prompt 和 demo 中挑一条路线改成自己的主题；
  • 做风格评审，而不是立刻追求一支长片。

README 的核心流程可以概括为：网页按时间绘制画面，Headless Chrome 捕获每一帧，audio.py 合成音乐和音效，最后由 ffmpeg 合成 MP4；3D 风格另有 Blender 渲染路径。项目还说明成片会经过制作、审查和修改循环。

它的边界

15 个风格并不等于 15 个一键模板。完整运行需要 Node.js、Chrome、ffmpeg、Python 和部分场景的额外依赖；3D 路线还需要 Blender。字体、第三方样本和音乐素材也可能有单独的授权要求。

使用它最稳妥的方法，是先复制一个风格的 prompt，只替换其中的创意主题、品牌名称和文案，保持输出比例、镜头节奏和签名特征不变。跑通后再改变技术路线，否则很难判断问题来自创意、依赖还是渲染器。

3. video-shotcraft：从真实产品页面做宣传片

video-shotcraft 的定位更靠近产品视频工作流。README 的入口是让 Claude Code 或 Codex 根据真实产品页面制作宣传片：先捕获页面，再从镜头库挑选配方，生成分镜，用 Remotion 动画化，按节拍剪辑，加声音设计，检查每一帧，最后输出 MP4。

它明确强调自己不是视频生成器。画面来自你的页面截图、文案和代码，结果更清晰，也更适合继续编辑。仓库当前 README 介绍了 124 张卡片、150 个镜头，并提供 Gallery、Showcase、Motion Workbench 和剪映草稿导出等工作流入口。

它适合什么

  • SaaS、AI 工具、网页产品和移动应用宣传片；
  • 产品发布、功能更新和落地页视频；
  • 需要保留真实 UI，而不是用泛化的 AI 场景代替产品；
  • 希望最后拿到可继续剪辑的镜头和时间线。

它的关键限制

它依赖真实页面和可用素材。页面如果没有准备好，镜头库不会自动替你补齐产品信息；截图、文案、品牌字体、声音和画幅仍然需要人工确认。README 还列出 Node.js、Chrome、ffmpeg、Python、字体和部分场景的 Blender 等依赖。

因此它更适合“产品已经存在，只差一条可编辑宣传片”的场景。不要把它当成输入一句产品描述就能自动完成全部策划、素材和验收的工具。

三个项目的选择流程

可以按下面的决策树快速选择：

你要做什么？
├─ 固定角色、表情和动作的小故事
│  └─ ClaudeAnimationBase
├─ 比较视觉风格、做动效实验或风格样片
│  └─ mg-styles-15
└─ 展示真实产品页面、功能和品牌
   └─ video-shotcraft

如果项目同时包含角色和产品，也不要一开始就把三个仓库全部装上。先确定主目标，再把其他项目当作参考：可以从 ClaudeAnimationBase 学角色动作，从 mg-styles-15 学视觉语言，再用 video-shotcraft 的镜头组织产品信息，但运行依赖和授权要分开核对。

第一次试做：用一条短片验证整条链路

第一步：把交付物写清楚

先给 Agent 四个约束：

主题：要讲什么
时长：例如 8 秒、10 秒或 30 秒
画幅：16:9、1:1 或 9:16
验收：必须出现哪些画面，不能出现哪些错误

对于产品片，再补充真实页面地址、需要展示的功能和品牌素材。对于角色动画，再补充角色外形、动作、情绪和镜头节奏。

第二步：只选一个基底

不要先安装所有依赖。选择一个仓库后，先读 README、许可证和项目指南，确认 Node、Python、Chrome、ffmpeg、Blender、字体和浏览器路径等前置条件。

第三步：先渲染最短版本

把时长压到 5 到 10 秒，先验证：

  • Agent 是否能读懂项目规则；
  • 浏览器是否能逐帧渲染；
  • 画面是否稳定，没有空白、跳帧或溢出；
  • 声音和画面是否同步；
  • 完整渲染需要多少时间和模型调用。

第四步：让第二个 Agent 做审片

让另一个模型或独立会话按固定清单检查：画面是否在每个镜头发生变化，文字是否清晰，角色是否越界，产品 UI 是否被错误改写，音频是否有爆音，输出视频是否能正常播放。把审片结果变成具体修改项，不要只接受“看起来不错”。

代码、提示词、影片和素材要分开看许可

三个项目的代码许可和作品素材边界并不完全相同：

  • ClaudeAnimationBase 的 README 主要提供代码、指南和示例资产，改编前应继续查看仓库的 LICENSE 和具体资产说明。
  • mg-styles-15 的 README 标注代码、提示词、文档和项目影片采用 MIT，同时提醒第三方样本、字体和其他文件遵循各自许可。
  • video-shotcraft 的 README 标注项目采用 Apache-2.0，但产品截图、客户页面、字体、音乐和导出的成片仍可能有单独权利人。

不要把“仓库开源”理解成“里面所有图片、歌曲、字体和视频都可以自由商用”。发布前逐项检查代码、提示词、原始素材、音频和最终成片的授权范围，并保留作者和仓库链接。

成本和模型选择：先验证，再扩大规模

代码视频的成本不只在渲染机，还包括模型调用、上下文长度、反复审片、浏览器逐帧运行、音频合成和人工修改。一个看似简单的 10 秒片段，也可能经历多次生成与审查。

可以先通过 GPT88 统一大模型接口 验证不同模型在分镜、代码实现、审片和文案环节的分工，再决定哪些步骤交给本地 Skill 执行。统一接口适合减少切换模型和管理 API 的成本，但实际可用模型、线路、权限、价格和输出质量应以当前控制台与真实任务为准。

建议记录一张最小成本表：

项目记录什么
模型调用模型、轮数、输入输出 token 或调用费用
本地渲染每帧耗时、总时长、CPU/GPU/内存占用
返工空白帧、动作错误、字幕错误、音频修改次数
资产字体、样本、音乐、截图和素材授权
交付是否需要源码、可编辑时间线、MP4 或多种画幅

最终建议

这三个项目可以看成三种不同的学习入口：

  1. 想学角色动画：从 ClaudeAnimationBase 的一个角色和一个动作开始。
  2. 想找视觉风格：从 mg-styles-15 选一个 10 秒 demo，替换创意主题后重做。
  3. 想做产品宣传：从 video-shotcraft 的真实页面和镜头卡片开始。

真正值得复用的不是某个“万能 prompt”，而是项目背后的分工：把创意、分镜、代码、渲染、声音和审片拆成可验证的阶段。先用一条短片跑通，再扩大时长、镜头数量和自动化程度，通常比一次安装三个仓库更快得到可靠结果。

来源

原帖中的 Star 数、作者体验和效果评价属于发布时的观察；本文没有把它们扩展为统一基准测试，也没有声称三个项目在所有模型、系统和素材条件下都能达到相同效果。