前阵子在小红书上刷到一个帖子：有人用Claude Opus 5.5，一种风格一段提示词，做出了15支10秒的MG动画短片。
点进去才发现，这15支片子没有一张AI生成图，也没有一段AI生成视频——整个画面全部由代码绘制。
SVG、Canvas、WebGL、Three.js，3D那支用了Blender。配乐和音效也是用Python从103种乐器样本中合成的。提示词、源码、渲染脚本、音频合成脚本、评审标准——所有内容全部开源在GitHub上。
项目10月2日发布，不到三周斩获3200+ Star。仓库名Vincentwei1021/mg-styles-15，MIT协议，可商用。
项目到底是什么
15种MG（Motion Graphics）动态设计风格，每种一支10秒成片，全部由Claude Opus 5.5写代码实现。每支片子附带风格说明、完整提示词和全部源码。
每一支片子的本质是一个网页——window.renderAt(t)可以渲染任意时刻的画面，Headless Chrome逐帧截图，ffmpeg合成视频。音频由Python代码合成，与视频精确同步。
15种动画风格
| 编号 | 风格 | 作品名 | 一句话说明 |
|---|---|---|---|
| 01 | Frame-by-Frame / Line Boil | HAND MADE | 逐帧手绘动画，线条抖动的"手作感" |
| 02 | Isometric 2.5D | ISOPOLIS — Let the City Grow | 等距视角城市，一块块从地上拼出来 |
| 03 | Flat Vector | popwise — One Dot | 扁平矢量风，一个小点变出整个世界 |
| 04 | Line Art | ATELIER LINEA — One Line | 纯线条勾勒，一笔画到底 |
| 05 | 3D Render | soft. — Soft Landing | C4D/Blender质感的3D落地动画 |
| 06 | Shape Morph | morphe. — One Shape, Every Story | 一个形状，千变万化 |
| 07 | Sticker Explainer | How Many Elements Hide in a Phone? | 贴纸风拆解，大画布平移 |
| 08 | Cyberpunk HUD / FUI | KESTREL-9 · Target Acquired | 赛博朋克瞄准界面 |
| 09 | Collage / Cut-out | NOGGIN Quarterly | 拼贴剪贴，白边、报纸纹理 |
| 10 | Aurora & Glassmorphism | Aurora — Think in Light | 极光+玻璃拟态 |
| 11 | Geometric Bauhaus | KONSTRUKTION · 20 Beats | 几何包豪斯，20拍节奏 |
| 12 | 80s Synthwave / VHS | NEON DRIVE — Midnight 1986 | 复古霓虹，VHS故障感 |
| 13 | Pixel Art | PIXEL QUEST | 像素风冒险 |
| 14 | Liquid Motion | drop. — It All Starts with a Drop | 流体动画，一切始于一滴水 |
| 15 | Variety Captions | Miaowu Diary EP.07 | 综艺花字风，9:16竖屏 |
苏米注：逐帧手绘的线条抖法和80年代VHS的扫描线质感，AI一次写对两种都很难，这个项目一口气扛下了15种完全不同的视觉语言。
技术流程
作者将整个制作流水线完整开源：
- 写提示词：每种风格一段提示词，包含Output（输出规格）、Technical Route（技术路线）、Creative Seed（创意种子）、Signature Features（招牌特征）四个板块。
- Claude写代码：产出完整项目——画面网页（index.html + *.js）、音频脚本（audio.py）、时间轴（cues.json）。
- 渲染：Headless Chrome逐帧截图300帧（10秒×30fps）。3D那支由Blender渲染帧序列，网页负责加花字和颗粒感。
- 合成：ffmpeg将300帧与audio.py合成的wav拼接，压缩为精确10秒的MP4。
- 两轮评审：用独立的AI（非写代码的那个）按7个维度打分，任何一项低于7.5分则打回修改。
提示词的秘密
开头——把标准拉到最高
"You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film. The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality." 只写"做得好看点"，AI默认对标剪映模板。把标准提到"获奖入围、高端商用"，它才会往上够。
中间——创意种子+招牌特征：创意种子（Creative Seed）指定故事、配色、关键画面，这是唯一需要改的部分。招牌特征（Signature Features）是风格"一眼认出"的关键元素，一个字都不要删。
结尾——技术约束：指定技术栈（SVG/Canvas/WebGL）、输出分辨率（1920×1080或1080×1920）、节奏要求。
快速上手
# 克隆仓库
git clone https://github.com/Vincentwei1021/mg-styles-15.git
cd mg-styles-15
# 安装依赖
npm install
pip install -r requirements.txt
# 1. 生成音频
python3 demos/01-flat-vector/audio.py
# 输出 → demos/01-flat-vector/out/audio.wav
# 2. 渲染视频
node harness/render.mjs demos/01-flat-vector
# 输出 → demos/01-flat-vector/out/video.mp4
# 3. 本地预览（可选）
python3 -m http.server 8000
# 浏览器打开 http://localhost:8000/harness/preview.html?demo=01-flat-vector项目局限
- 模型绑定：重度依赖Claude Opus 5.5，换模型跑同一段提示词效果不同。
- 字体缺失：仓库不含字体文件（版权问题），需自行下载，否则用系统字体替代质感差。
- 音频确定性：15条音频脚本中仅4条可完全复现，其余11条因数值库更新有细微差异。
- 3D门槛高：Blender那支需要额外安装Blender及配套渲染脚本，比纯代码路线复杂一个量级。
写在最后
以前做一支10秒MG动画，需要After Effects、C4D、Figma、PS、Audition，一人至少要一周。现在一段提示词，让Claude Opus 5.5写一晚上代码，就能出一支可商用的片子。
15种风格，每一种都有提示词、有源码、有评审流程——这是一个完整的方法论，不是一段演示代码。
