面向 Claude Code 等编码智能体的动效设计工具包,内含 Remotion 视频流程、画面自检循环与 Python 音效引擎。
Vincentwei1021/mg-styles-15
15 支 10 秒 MG 动态设计短片,每种风格均由 Claude 编写代码生成,并公开提示词与完整源码。
- Star
- 1,417
- Fork
- 208
- 未关闭 Issue
- 2
- 最近提交
- 16天前
这是什么?
本项目收录了 15 支各 10 秒的 MG 动态设计短片,每种风格一支,涵盖逐帧手绘、等距 2.5D、像素艺术、合成波、9:16 综艺字幕剪辑等。每支片子都由 Claude Opus 5.5 根据一条提示词编写代码完成,包括画面、动画、配乐和音效。画面基于 SVG、Canvas、WebGL、Three.js 实现,3D 短片则使用 Blender 渲染,不依赖生成式图像或视频模型。
每种风格都附有成片、风格说明、`prompts/` 目录中的完整提示词,以及全部源码,包括画面代码、生成配乐的 audio.py 脚本和时间轴文件。仓库还提供基于 Node 的渲染器:它在无头 Chrome 中逐帧截图,再用 ffmpeg 将画面与音频合成为 MP4;预览页面则可在浏览器中逐帧拖动查看任意一支片子。
适合希望借助 AI 助手复现这些风格的开发者。提示词可替换成自己的故事与品牌后直接使用,仓库中还附带了评审清单和用于编写新风格提示词的模板。
核心功能
- 0115 支风格各异的短片,每支 10 秒。
- 02每种风格均附带提示词、风格说明和完整源码。
- 03画面以代码实现(SVG、Canvas、WebGL、Three.js、Blender),不使用图像或视频生成模型。
- 04配乐与音效由 audio.py 脚本合成,并使用录制的乐器采样。
- 05基于无头 Chrome 与 ffmpeg 的渲染器,输出逐帧精确的 MP4。
- 06提供浏览器预览页面,可逐帧查看任意短片。
适用场景
- 学习某种 MG 动态风格在代码中是如何实现的。
- 以现成提示词为起点,制作自己的动画短片。
- 研究基于无头 Chrome 与 ffmpeg 的确定性视频渲染流程。
- 探索 AI 助手如何同时编写短片的画面与音频代码。
快速上手
- 1
在仓库根目录安装 Node 依赖(需要 Node.js 22.12 或更高版本)
npm install - 2
安装用于配乐和素材脚本的 Python 依赖(需要 Python 3.11 或更高版本)
pip install -r requirements.txt - 3
为一支影片合成配乐
python3 demos/01-flat-vector/audio.py - 4
将该影片的每一帧渲染为 MP4(需要 Google Chrome 和 ffmpeg)
node harness/render.mjs demos/01-flat-vector
使用前须知
- 渲染需要本机已安装 Google Chrome 和 ffmpeg。
- 3D 影片还需要 Blender,且字体文件不在仓库中。
- 这是 15 支影片及其源码的展示项目,并非可直接复用的库。
标签
常见问题
- mg-styles-15 是什么?
- 15 支 10 秒 MG 动态设计短片,每种风格均由 Claude 编写代码生成,并公开提示词与完整源码。 本项目收录了 15 支各 10 秒的 MG 动态设计短片,每种风格一支,涵盖逐帧手绘、等距 2.5D、像素艺术、合成波、9:16 综艺字幕剪辑等。每支片子都由 Claude Opus 5.5 根据一条提示词编写代码完成,包括画面、动画、配乐和音效。画面基于 SVG、Canvas、WebGL、Three.js 实现,3D 短片则使用 Blender 渲染,不依赖生成式图像或视频模型。
- mg-styles-15 可以免费使用吗?用的什么许可证?
- mg-styles-15 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- mg-styles-15 还在维护吗?
- 活跃维护中。mg-styles-15 最近一次提交是在 2026年10月5日。
- mg-styles-15 适合用来做什么?
- 学习某种 MG 动态风格在代码中是如何实现的。 以现成提示词为起点,制作自己的动画短片。 研究基于无头 Chrome 与 ffmpeg 的确定性视频渲染流程。 探索 AI 助手如何同时编写短片的画面与音频代码。
- mg-styles-15 怎么安装和运行?
- 在仓库根目录安装 Node 依赖(需要 Node.js 22.12 或更高版本): npm install 安装用于配乐和素材脚本的 Python 依赖(需要 Python 3.11 或更高版本): pip install -r requirements.txt 为一支影片合成配乐: python3 demos/01-flat-vector/audio.py 将该影片的每一帧渲染为 MP4(需要 Google Chrome 和 ffmpeg): node harness/render.mjs demos/01-flat-vector
- 在哪里获取 mg-styles-15?
- 源代码和安装说明在 GitHub 上:https://github.com/Vincentwei1021/mg-styles-15
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
一组 Claude Code 技能,通过代码逐帧生成画面与配乐来制作视频,每个技能对应一种视觉风格。
一组 Agent Skills,帮助 Claude Code、Codex、Cursor 等 AI 编程助手按最佳实践开发 Remotion 视频项目。
一套供编程 agent 使用的技能,用代码把艺术风格和解说视频语法做成会动的动画。
用 Claude 借助 p5.js 和 p5.brush 制作手绘卡通动画的入门工具包。
一套 Claude Code 技能包,用代码生成动态图形和发布视频,无需 After Effects。