README

15 种 MG 动态设计风格

15 种 MG 动态设计风格，每种一支 10 秒成片，全部由 Claude Opus 5.5 写代码做出来。
Fifteen styles, one 10-second film each, all made by Claude Opus 5.5 writing code.

每支片都附风格说明、完整提示词和全部源码。
Every film comes with its style notes, its full prompt and its complete source.



▶ 在线观看全部 15 支（带声音）· Watch online

English | 简体中文

!films !length !made with  



 English readers: see README.md for the full English guide.
 中文用户：往下看就是完整的中文说明。

 这是什么

15 支 10 秒的动态设计短片，每支一种风格，从逐帧手绘到 9:16 竖屏综艺花字。每一支都是 Claude Opus 5.5 按提示词写代码做出来的：画面、动画、配乐和音效都由代码生成。这个仓库把这些全部公开：可以看成片、读这支片怎么做的，也可以复制提示词，拿去做你自己的片子。

- 不用生图、生视频模型：画面就是代码，用的是 SVG、Canvas、WebGL 和 Three.js，3D 那支用 Blender。少数几支用了 CC0 或公有领域的照片。
- 声音也是代码：每支片的 audio.py 合成自己的配乐和音效，15 支配乐一共用到 103 个真实录制的乐器采样。
- 全部公开：15 种风格都有成片、风格说明、完整提示词和全部源码。

 一支片怎么做出来



每支片都是一个网页，给它一个时间点，它就画出那一帧（window.renderAt(t)）。渲染脚本用无头 Chrome 逐帧截图，再用 ffmpeg 把画面和音轨合在一起。只有 3D 那支例外：画面由 Blender 渲染，网页只负责叠上文字和颗粒。每支片都经过两轮评审和修改，AI 评委的终评在 7.57 到 8.21 分之间（满分 10 分）。

 15 种风格

点成片可以在网页上带声音观看。



01 · 逐帧手绘 / 线条沸腾手作 HAND MADE提示词 · 源码
02 · 等轴 2.5DISOPOLIS「让城市自己生长」提示词 · 源码
03 · 扁平矢量动画popwise「One Dot」提示词 · 源码


04 · 线条动画ATELIER LINEA「一笔画」提示词 · 源码
05 · 3D 渲染系soft.「柔软着陆」 · C4D/Blender 质感提示词 · 源码
06 · 形变动画morphe.「一形万象」提示词 · 源码


07 · 粗描边贴纸人科普 MG一部手机里，藏着多少种元素？提示词 · 源码
08 · 赛博朋克 HUD / FUI隼眼-9 · 目标锁定提示词 · 源码
09 · 拼贴剪贴NOGGIN 脑洞季刊提示词 · 源码


10 · 弥散渐变 / 玻璃拟态Aurora「思考，自有光」提示词 · 源码
11 · 几何构成 / 包豪斯二十拍构成 KONSTRUKTION提示词 · 源码
12 · 复古 80s Synthwave / VHSNEON DRIVE「霓虹夜驰 1986」提示词 · 源码


13 · 像素风PIXEL QUEST 像素冒险提示词 · 源码
14 · 液态流动drop.「万物始于一滴」提示词 · 源码
15 · 综艺花字喵呜日记 EP.07 · 9:16 竖屏提示词 · 源码



在网页上，每种风格一节：成片、风格说明、这支片怎么做的；下面点一下就能展开完整提示词和全部源码。页面可以在中英文之间切换。



 用提示词做一支

1. 在一个空文件夹里打开能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要 Node、Chrome 和 ffmpeg，3D 那种建议路线要用 Blender。
2. 打开 prompts/ 里任意一份，把「提示词」那段整段发给它。
3. 想换成自己的内容：每份提示词里只有 Creative seed 是具体故事，把里面的故事、品牌名、文案、配色换成你的；也可以把 Output 改成竖屏 1080×1920 或改时长。Signature features 那段别删，它决定这种风格能不能被一眼认出来。
4. 想做得更好：成片出来后，另开一个 AI 用 rubric.md 评审，把评审意见贴回去改一轮。原片就是「制作 → 评审 → 修改」改了两轮。
5. 写一种新风格：照 template.md 填四段（输出规格、技术路线、创意种子、风格特征），其余通用部分照抄。

想省事的话，可以让 AI 直接用这个仓库里的 harness/render.mjs 渲染、用 lib/audio 做配乐，不用从零搭。

 跑源码

| 需要 | 用来 | 怎么装 |
|---|---|---|
| Node.js 22.12 或更新 | 渲染脚本和片子用到的 npm 包 | nodejs.org，然后 npm install |
| Google Chrome | 无头逐帧截图 | macOS 默认位置会自动找到；其他系统用 MG_CHROME= 指定 |
| ffmpeg | 合成画面和音轨 | brew install ffmpeg 或 sudo apt install ffmpeg |
| Python 3.11 或更新 | 配乐脚本（audio.py）和生成素材的脚本 | pip install -r requirements.txt |
| Blender | 只有 3D 那支要用 | demos/04-3d-render/README.md |
| 字体 | 让字形和成片一致 | 不在仓库里，清单见 assets/fonts/README.md |

bash
 在仓库根目录
npm install
pip install -r requirements.txt
python3 demos/01-flat-vector/audio.py           合成配乐 → demos/01-flat-vector/out/audio.wav
node harness/render.mjs demos/01-flat-vector    逐帧渲染 → demos/01-flat-vector/out/video.mp4
python3 -m http.server 8000                     预览：http://localhost:8000/harness/preview.html?demo=01-flat-vector


- 页面要从仓库根目录起服务，片子里的路径（/assets/...、/node_modules/...）都相对根目录。
- 3D 那支的画面是 Blender 渲染的序列帧，步骤见 demos/04-3d-render/READ

Top issues