这是一个面向 MG 动态设计与 AI 辅助创作的示例库，包含 15 种不同风格的 10 秒 Motion Design 短片。每个短片都提供成片、风格说明、完整提示词和全部源码，展示了如何让 Claude Opus 5.5 通过代码生成画面、动画、音乐和音效。项目不是传统的视频生成或图片生成，而是使用 SVG、Canvas、WebGL、Three.js、Blender、Python 音频合成、Headless Chrome 和 ffmpeg 组合出可复现的动画视频。对中文开发者而言，它既是 AI 视频创作提示词范例库，也是可学习的代码化动画制作流水线。
适用领域
AI 辅助创作 / Motion Design / MG 动画 / 创意编程 / 前端动画 / Canvas / SVG / WebGL / Three.js / Python 音频合成 / 视频自动渲染 / AIGC 工作流 / 设计工程化
配置难度
中高级。观看和学习成片很简单，但完整跑通渲染流程需要熟悉 Node.js、Python、ffmpeg、Chrome Headless、前端动画资源路径和基本命令行操作；如果要深度改造或新增风格，还需要 Canvas/SVG/WebGL/Three.js、动画设计和提示词工程经验。
商业价值
未知
01
技术亮点
- 提供 15 种完整 MG 动态设计风格，每种都有 10 秒成片、提示词和源码
- 中英文说明友好，README 中明确提供中文文档入口，适合中文开发者学习
- 不是黑盒视频生成，而是代码生成画面，具备可复现、可调试、可二次开发的优势
- 覆盖 SVG、Canvas、WebGL、Three.js、Blender、Python 音频合成等多种技术路线
- 每个短片都可通过 window.renderAt(t) 绘制任意时间点帧，便于自动化逐帧渲染
- 提供统一渲染工具 harness/render.mjs，可将网页动画渲染为 MP4
- 音效和音乐也通过 audio.py 合成，展示了完整的视听一体化代码生成思路
- 提示词结构清晰，包含 output spec、technical route、creative seed、signature features，可作为提示词工程模板
- 包含 rubric.md 评审方式，展示了 AI 生成、AI 评审、再修订的迭代流程
- MIT 许可证，便于学习、改造和集成
02
目标用户
- 希望用 AI 生成动画代码的前端开发者
- MG 动画设计师和动效设计师
- AIGC 创作者
- 品牌短片、广告短片、社媒短视频制作人员
- 学习 Canvas、SVG、WebGL、Three.js 动画的开发者
- 想研究提示词工程在视觉创作中应用的用户
- 希望搭建自动化视频渲染流水线的工程师
- 设计院校学生或创意编程学习者
03
配置要求
- Node.js 22.12 或更高版本
- Python 3.11 或更高版本
- Google Chrome，用于 Headless 模式捕获画面帧
- ffmpeg，用于合成视频和音频
- Blender，仅 3D Render 风格需要
- 项目所需字体不包含在仓库中，需要根据 assets/fonts/README.md 自行安装
- 如果 Chrome 不在默认位置，需要配置环境变量 MG_CHROME 指向 Chrome 可执行文件路径
- 运行本地预览时需要从仓库根目录启动 HTTP 服务，因为部分资源路径依赖 /assets 和 /node_modules
- 渲染视频会占用一定 CPU、内存和磁盘空间，长时间批量渲染建议使用性能较好的机器
04
适用场景
- 参考 15 种风格的提示词，快速生成自己的 MG 动画短片
- 学习如何用代码实现 Flat Vector、Line Art、Cyberpunk HUD、Pixel Art、Synthwave、Liquid Motion 等视觉风格
- 复用项目中的渲染脚本，将网页动画逐帧导出为 MP4
- 研究 AI 如何根据单个完整 Prompt 编写动画、音效和渲染流程
- 作为品牌广告、产品介绍、活动宣传、社媒短视频的创意模板
- 学习如何把 Canvas、SVG、WebGL、Three.js 与 ffmpeg 结合成视频生产管线
- 为中文团队建立 AI 动画生成工作流参考
- 分析不同动态设计风格的构图、节奏、字体、色彩和动画特征
05
部署与配置
- 克隆仓库：git clone https://github.com/Vincentwei1021/mg-styles-15.git
- 进入目录：cd mg-styles-15
- 安装 Node.js 依赖，要求 Node.js 22.12 或更高版本：npm install
- 安装 Python 依赖，要求 Python 3.11 或更高版本：pip install -r requirements.txt
- 安装 ffmpeg：macOS 可使用 brew install ffmpeg，Ubuntu/Debian 可使用 sudo apt install ffmpeg
- 安装 Google Chrome，用于 Headless Chrome 逐帧截图；如果不在默认路径，需要设置 MG_CHROME 环境变量
- 生成某个短片的音频，例如：python3 demos/01-flat-vector/audio.py
- 渲染某个短片视频，例如：node harness/render.mjs demos/01-flat-vector
- 启动本地预览服务器：python3 -m http.server 8000
- 在浏览器打开预览地址：http://localhost:8000/harness/preview.html?demo=01-flat-vector
- 如需渲染 3D 风格短片，还需要安装 Blender，并参考 demos/04-3d-render/README.md
06
风险与注意事项
- 项目依赖较多，包括 Node、Python、Chrome、ffmpeg、部分风格还需要 Blender，新手配置成本较高
- 字体文件未随仓库分发，缺失字体可能导致视觉效果与原片不一致
- 代码主要用于演示和学习，不一定适合直接作为生产级视频生成平台使用
- AI 生成代码的风格和结构可能不完全统一，后续维护需要一定前端和图形编程经验
- 渲染性能取决于机器配置，逐帧导出视频可能耗时较长
- 部分影片使用 CC0 或公版照片，二次商用时仍建议复核素材来源和授权
- 提示词中提到 Claude Opus 5.5，但并不代表其他模型能稳定复现同等质量
- 3D 风格额外依赖 Blender 流程，复杂度明显高于普通网页动画
- 如果要改成商业品牌项目，需要重新设计文案、配色、素材、音频和版权合规
2026-10-08
第28名
新收录 · github_search
