mg-styles-15 教程：用 15 份风格提示词让 Opus 5.5 写代码做 10 秒动态设计短片（2026）

推荐链接（推广）：数字严选大约 20 分钟AI 视频Opus 5.5 做视频Claude Code 视频mg-styles-15动态设计运动图形

阅读说明

仓库信息查阅日期：2026-10-23；星数、更新时间会变，以仓库页面为准；本文不写价格。

一句话结论

Vincentwei1021/mg-styles-15open in new window 公开 15 支 10 秒动态设计短片，每支一种风格。画面、动画、配乐和音效都是 Claude Opus 5.5 按提示词写代码做出来的，仓库同时放了风格说明、完整提示词和源码。

适合想先看一种 MG 风格，再改故事、品牌名和配色，在本机导出 MP4 的人。README 举的助手是能写代码、能执行命令的工具，例子是 Claude Code。

仓库信息

截至 2026-10-23，星数、最近推送和创建时间取自仓库元数据，日期为北京时间。

仓库星数最近推送（北京时间）许可创建时间
Vincentwei1021/mg-styles-15open in new window1,9332026-10-05MITopen in new window2026-10-02

仓库描述是 “15 motion design styles, each made by Claude Opus 5.5 writing code from one prompt: watch the films, copy the prompts, read the full source.”

README 写明：这个项目自己做的代码、提示词、文档和成片按 MIT 许可open in new window 发布。第三方文件保留各自的许可。乐器采样（VCSL）、HDRI、纸张纹理、片中照片，以及 HUD 那支的地图数据（Natural Earth）是 CC0 或公有领域。site/vendor/highlight.min.js 是 BSD-3-Clause，文本在 site/vendor/highlight.LICENSEopen in new window。demos/04-3d-render/assets/mesh/ 和 demos/08-morph/glyphs.json 里的字形轮廓取自 SIL OFL 字体，仍按 OFL。字体文件不在仓库里，许可另计，清单见 assets/fonts/README.mdopen in new window。关于一节写：若在这些提示词或代码上继续做，欢迎附上仓库链接。

它能做什么样的视频

15 支都是正好 10 秒的动态设计短片。README 写明不用生图、生视频模型。画面是代码：SVG、Canvas、WebGL 和 Three.js；3D 那支用 Blender。少数几支用了 CC0 或公有领域的照片。声音也是代码：每支的 audio.py 合成配乐和音效，15 支配乐一共用到 103 个录制好的乐器采样。

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

展厅可以先看带声音的成片：中文展厅open in new window。页面能在中英文之间切换。每种风格一节：成片、风格是什么、这支片怎么做的；下面可以展开完整提示词和源码浏览。prompts/ 里的用法说明是中文，提示词正文是英文，并带中文风格说明。

页上序号和目录名各用各的编号。做片时打开表里的提示词文件。

页上序号风格片中标题提示词源码
01逐帧手绘 / 线条沸腾手作 HAND MADE05-cel-boil.mdopen in new window05-cel-boilopen in new window
02等轴 2.5DISOPOLIS「让城市自己生长」03-isometric.mdopen in new window03-isometricopen in new window
03扁平矢量动画popwise「One Dot」01-flat-vector.mdopen in new window01-flat-vectoropen in new window
04线条动画ATELIER LINEA「一笔画」02-line-art.mdopen in new window02-line-artopen in new window
053D 渲染系soft.「柔软着陆」04-3d-render.mdopen in new window04-3d-renderopen in new window
06形变动画morphe.「一形万象」08-morph.mdopen in new window08-morphopen in new window
07粗描边贴纸人科普 MG一部手机里，藏着多少种元素？19-paperclip.mdopen in new window19-paperclipopen in new window
08赛博朋克 HUD / FUI隼眼-9 · 目标锁定22-hud.mdopen in new window22-hudopen in new window
09拼贴剪贴NOGGIN 脑洞季刊06-collage.mdopen in new window06-collageopen in new window
10弥散渐变 / 玻璃拟态Aurora「思考，自有光」12-aurora-glass.mdopen in new window12-aurora-glassopen in new window
11几何构成 / 包豪斯二十拍构成 KONSTRUKTION09-bauhaus.mdopen in new window09-bauhausopen in new window
12复古 80s Synthwave / VHSNEON DRIVE「霓虹夜驰 1986」10-synthwave.mdopen in new window10-synthwaveopen in new window
13像素风PIXEL QUEST 像素冒险20-pixel.mdopen in new window20-pixelopen in new window
14液态流动drop.「万物始于一滴」07-liquid.mdopen in new window07-liquidopen in new window
15综艺花字喵呜日记 EP.07 · 9:16 竖屏18-hanazi.mdopen in new window18-hanaziopen in new window

template.md 里的输出规格写成：H.264 MP4、立体声 AAC（48 kHz）、综合响度 −14 LUFS、真峰值 ≤ −1 dBTP、成片文件名 video.mp4、时长正好 10.000 秒。分辨率和帧率写在各份提示词自己的 Output 段。已读的 prompts/01-flat-vector.mdopen in new window 是 1920×1080、30 fps。README 允许把 Output 改成竖屏 1080×1920，或改时长。

videos/ 里是 15 支成片和封面帧。8 支沿用原片码流。另外 7 支原片码率 37–100 Mb/s，为了网页播放重新压成 28 Mb/s 以内的 H.264。

仓库里和做片直接相关的路径：

路径README 写明的内容
index.html、site/展厅页：成片、风格说明、提示词、源码浏览，中英文可切换
prompts/每种风格一份完整提示词，附用法
demos/<名字>/画面代码（index.html 和 JS）、audio.py、时间点 cues.json，以及生成该片素材的脚本
harness/render.mjs无头 Chrome 逐帧截图，再用 ffmpeg 合成视频和音轨
harness/preview.html在浏览器里拖时间轴看任意一帧
lib/audio/合成工具包 mgaudio，加上 103 个乐器采样
assets/共用纹理和 HDRI；字体清单（字体文件不在仓库里）
rubric.md评审用的提示词
template.md写一种新风格时要填的四段

自己部署展示页

  1. Fork 这个仓库，或把全部文件（包括 .nojekyll）推到自己仓库的 main 分支。README 写明最大的单个文件 38 MB，在 GitHub 100 MB 的单文件上限以内，不需要 Git LFS。
  2. 打开 Settings → Pages → Build and deployment，Source 选 Deploy from a branch，分支 main，目录 / (root)。README 写明免费账号只能给公开仓库开 Pages。
  3. 一两分钟后打开 https://<用户名>.github.io/<仓库名>/。页面会自己识别仓库地址。用自定义域名时，在 index.html 的 <meta name="repo"> 里填上仓库地址。

README 写明整个站点约 575 MB，其中视频 420 MB。GitHub Pages 的站点上限是 1 GB，每月流量软上限 100 GB。视频只有点播放才会下载。

需要准备什么

README 的「跑源码」表只列了下面这些。表里没有 API key。

需要用来README 写明的装法
Node.js 22.12 或更新渲染脚本和片子用到的 npm 包Node.js 官网open in new window，然后 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.mdopen in new window，其中写的是 Blender 5.1、Cycles
字体字形和成片一致不在仓库里，清单见 assets/fonts/README.mdopen in new window

harness/render.mjs 开头写明：未设置 MG_CHROME 时，使用的路径是 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome。脚本通过 puppeteer-core 调用这个路径。同一文件在 Linux 上默认一组 ANGLE/Vulkan 参数，可用环境变量 MG_GPU_ARGS 覆盖（空格分隔）。

requirements.txt 写明下面这些版本验证过能跑通。前一组给 demos/*/audio.py 和 lib/audio，后一组给生成素材的脚本（tools/、assets/prep*.py、work/prep*.py、blender/make_letters.py）：

numpy==2.4.6
scipy==1.16.3
soundfile==0.14.0
numba==0.66.0
pedalboard==0.9.25
pyloudnorm==0.2.0
matplotlib==3.9.1
librosa==0.11.0
pillow==12.3.0
fonttools==4.53.1
scikit-image==0.26.0
opencv-python==5.0.0.93
rembg==2.0.78

字体文件要放到 assets/fonts/README.md 表里的路径。中文相关的家族名是 Alibaba PuHuiTi、Alimama ShuHeiTi、Douyin Sans、Fusion Pixel 12、HarmonyOS Sans SC、LXGW Marker Gothic、Long Cang、Noto Sans SC、Noto Serif SC、Resource Han Rounded、ZCOOL KuaiLe。拉丁字体和每个文件的具体路径在同一张表里。另外四支在自己的目录里还有单独的字体文件：

片子放到
03-isometricdemos/03-isometric/assets/fonts/Unbounded-800-static.ttf
07-liquiddemos/07-liquid/assets/Fraunces-Liquid-72-900-Soft.ttf
08-morphdemos/08-morph/assets/fonts/Outfit-SemiBold.ttf
10-synthwavedemos/10-synthwave/assets/fonts/MrDafoe-Regular.ttf

缺字体时，浏览器改用系统字体，画面里的字形会和成片不一样。

安装与第一次运行

下面的命令都在仓库根目录执行。片子里的 /assets/... 和 /node_modules/... 相对根目录，预览服务也要从根目录起。

  1. 安装上一节的 Node.js、Google Chrome、ffmpeg 和 Python。ffmpeg 用 README 写的其中一条：
brew install ffmpeg

sudo apt install ffmpeg

非 macOS 在渲染前设置 MG_CHROME。3D 那支另备 Blender，见下一步之后的专节。

  1. 在仓库根目录执行 README.zh-CN.md 里的这一段。英文 README 的命令相同，注释是英文。
# 在仓库根目录
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

  1. 配乐写到 demos/01-flat-vector/out/audio.wav，成片写到 demos/01-flat-vector/out/video.mp4。预览地址是 http://localhost:8000/harness/preview.html?demo=01-flat-vector。把 demo= 后面的名字换成其他 demos/ 目录名，可以拖时间轴看那一支。

  2. 只重做 3D 那支的画面时，按 demos/04-3d-render/README.mdopen in new window：画面由 Blender（5.1，Cycles）渲染成序列帧，index.html 再把帧、文字和颗粒合成。在 demos/04-3d-render 目录里依次运行：

python3 blender/make_letters.py                          # 字形 → 充气字母网格 assets/mesh/*.ply（已附带）
python3 blender/sim.py                                   # 全部运动 → work/anim.npz，碰撞时间 → out/events.json（已附带）
blender -b --factory-startup -P blender/scene.py         # 搭场景 → work/scene.blend
blender -b work/scene.blend -P blender/render.py -- --range 0:239   # 240 帧 → out/frames/（macOS 用 Metal；NVIDIA 设 MG_DEVICE=OPTIX）
python3 audio.py                                         # 配乐 → out/audio.wav
cd ../.. && node harness/render.mjs demos/04-3d-render   # 合成 → out/video.mp4

注释写明网格和运动数据已附带。NVIDIA 上渲染序列帧时设置 MG_DEVICE=OPTIX。最后一条会回到仓库根目录再调用渲染脚本。

harness/render.mjs 文件头还写了这些参数。注释里的示例目录是 demos/05-cel。当前 demos/ 列表里对应的名字是 demos/05-cel-boil。README 给出的例子是 demos/01-flat-vector。

node harness/render.mjs demos/05-cel                       # full render → demos/05-cel/out/video.mp4
node harness/render.mjs demos/05-cel --stills 0.5,2,4.25   # PNG stills → demos/05-cel/out/stills/
options: --out path.mp4 --audio path.wav --mb 4 --shutter 0.5 --workers 1 --from 0 --to 10 --scale 0.5 --noaudio --query k=v
         --crf 14 --w 1920 --h 1080 --fps 30 --duration 10 --scale 1
         --page other.html  --tmap map.json (re-time into a reel slot, see loadTmap)  --mkv out.mkv (lossless ffv1 output, no x264/audio)
         --links track.json  (reel v5 link elements: if the page defines window.linkAt(t) → [{id, type, x, y, r, ...}] in
                              1920×1080 frame px, record it per output frame at the frame-centre source time; with
                              --stills it is written to out/stills/links.json)

文件头还写明：演示页要在把 window.__ready 设为 true 之前提供 window.renderAt。window.DEMO = { width, height, fps, duration } 可选，用来覆盖命令行默认值。不由 renderAt 驱动的 CSS 动画和 WAAPI 也会被 seek 到同一时间。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。

README 没有单独的斜杠命令。做一支新片的步骤是：

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

想省事时，让助手直接用这个仓库的 harness/render.mjs 渲染、用 lib/audio 做配乐，不用从零搭。

template.md 给出的四段是：

# Style
<中文风格名 English style name>

# Output (fixed)
- <宽>×<高>, <帧率> fps, exactly 10.000 s, H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS integrated,
  true peak ≤ −1 dBTP. Final file: video.mp4.

# Suggested technical route
<用什么做最合适：SVG/Canvas/WebGL/Three.js/Blender……以及关键实现手段。>
(You may choose a better route if it clearly raises quality; say why.)

# Creative seed
<「一句话片名」+ 这种风格最经典又最惊艳的读法：
 - 0–X s 发生什么（钩子 → 升级 → 高潮 → 结尾画面），
 - 配色（3–6 个具体色值），字体气质，
 - Sound: 音乐风格 + 关键音效。>

You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the
result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.

# Signature features and key techniques (the result is judged against these)
<这种风格的来源和用途（一两句）>
视觉特征 <逗号分隔的标志特征>
关键技法 <可执行的技法，越具体越好：曲线参数、帧数、层结构……每条一行>

同一份模板还写了三条写法：Signature features 要可检验；Creative seed 按秒写出钩子、升级、高潮和结尾；品牌名和文案用虚构的，避免商标问题。

rubric.md 里的两段可以直接贴。第一段给另一个会话做评审，第二段回到制作会话：

You are a senior motion-design jury member (think: Motionographer editor, Buck/ManvsMachine creative director, a 抖音/B站
top design-account lead for the Chinese styles). You did NOT make this film. Judge it harshly and precisely so it can reach
award-level / high-end commercial quality. Kindness is useless here; specificity is everything.

The film: <path to video.mp4>. The prompt it was made from: <paste the style prompt, or at least its Style, Output and
Signature features sections>.

1. Look at the film properly: extract a contact sheet (a frame every 0.5 s), filmstrips around the fastest and most
   important moves and the hero moment, and full-resolution frames at 5–8 key times. Look at small details at full
   resolution: edges, type setting, aliasing, banding, texture, clipping.
2. Check the spec: exactly 10.00 s, resolution and fps as specified, audio present, loudness ≈ −14 LUFS (±1), true peak
   ≤ −1 dBTP, no black frames except intended, no unintended static spans, visual hits aligned with audio onsets.
3. Score 1–10 on each dimension (5 = competent student work; 6 = decent template level; 7 = solid professional; 8 = high-end
   agency work; 9 = award shortlist; 10 = best in the world). Most first renders deserve 5–7. Do not inflate.
   - style_fidelity: instantly recognisable canonical form; every signature feature and technique present and correct
   - concept_wow: a clear idea, a hook in the first 0.5 s, an unmistakable hero moment, a satisfying end frame
   - motion_craft: easing, spacing, overlap, anticipation and follow-through, arcs, transitions, motion blur; no dead or
     jittery motion
   - design_typography: composition, hierarchy, grid, type setting (CJK too), palette, negative space
   - finish_texture: lighting, texture, grain, glow and detail appropriate to the style; no banding, aliasing or artifacts
   - sound_sync: musicality, genre-correctness, sound design, sync to picture, mix and master
   - technical: spec compliance, fonts loaded, no glitches, clipping or popping
4. Give 5–10 fixes ordered by impact on the final impression. Each: timecode(s), what is wrong (observable), why it matters,
   and a concrete how-to (technique and numbers: easing curve, frame counts, px, colours, font, layout change). Prefer a few
   big upgrades over many nitpicks. At least one fix must raise the wow factor, not just polish.
5. Flag as critical: anything that reads as generic or AI-template, unnatural Chinese copy, fallback fonts or tofu, and any
   spec failure.
Return: the score table, the critical issues, and the fix list.

An independent jury reviewed your film. Here is the full review:
<paste the review>

Raise the film to award level (target ≥ 9 in every dimension):
- First keep a copy of the current video and source as version N.
- Implement every critical issue and every high-impact fix. You may substitute a better solution for a listed fix if you are
  confident; say why. Go beyond the list where you see a bigger upgrade, especially for the wow factor. Do not regress
  anything the jury listed as a strength.
- Re-render at full resolution, re-check the spec and look at the frames until the fixes have truly landed.
- Report which fixes you applied or skipped, and why.

示例提示词（按 README 写明的用法改写，不是仓库原文）

换掉扁平矢量那支的故事，并改成竖屏。空目录里做，渲染和配乐沿用仓库里已有的脚本：

在这个空目录里做一支新片。规格使用 mg-styles-15 仓库 prompts/01-flat-vector.md 里「提示词」整段。只改 Creative seed：虚构品牌「折纸市集」，故事是一张纸折成店招再摊开，配色换成一组具体色值。不要删 Signature features。把 Output 改成竖屏 1080×1920，时长保持正好 10.000 秒。画面是网页，用 window.renderAt(t) 按时间画帧。渲染直接调用该仓库的 harness/render.mjs，配乐用该仓库的 lib/audio。成片文件名 video.mp4。素材只用 CC0、公有领域、OFL 或允许商用的授权。

对仓库里已经渲染过的扁平矢量成片做一轮独立评审：

这是独立评审，不要接着改片。请使用仓库 rubric.md 里「第一步：评审」的整段提示词。成片路径：demos/01-flat-vector/out/video.mp4。风格规格粘贴 prompts/01-flat-vector.md 的 Style、Output 和 Signature features。

评审写完后，回到制作会话，把 rubric.md 第二段整段贴进去，再按 README 的渲染命令重跑 python3 demos/01-flat-vector/audio.py 和 node harness/render.mjs demos/01-flat-vector。

限制与已知问题

  • 字体文件不在仓库里。授权各不相同，中文字体也很大。缺字体时字形和成片不一致。要本地复现字形，按 assets/fonts/README.md 把文件放到指定路径。
  • 同一份提示词每次做出来的片子都不一样。原片每支都经过多轮迭代，一次运行通常达不到原片的完成度。
  • 配乐脚本在同一环境下重跑，结果每次相同。用 requirements.txt 里的版本重跑时，有 4 支和成片音轨一致（误差在最低有效位以内），其余 11 支有局部差异。README 写原因可能是数值库版本的变化。
  • 3D 那支的画面不走「网页画出每一帧」这条路，要按 demos/04-3d-render/README.md 用 Blender 出序列帧。
  • videos/ 里有 7 支不是原片码流，而是压到 28 Mb/s 以内的 H.264。原片码率是 37–100 Mb/s。
  • harness/render.mjs 文件头的示例路径 demos/05-cel 对不上仓库里的目录名。demos/ 里实际是 05-cel-boil 以及其他 README 表里的名字。
  • 做自己的片子时，字体、图片等素材只用允许商用的授权（CC0、OFL 等）。提示词里已经这样要求。已读的 prompts/01-flat-vector.md 还要求在 CREDITS.md 记录每项素材的来源和许可，并且不要用真实商标。
  • 截至 2026-10-23，仓库有 2 个 open issue。

常见问题

成品是 HTML 还是 MP4？怎么预览？

先是网页：window.renderAt(t) 按时间画帧。node harness/render.mjs <演示目录> 用无头 Chrome 截帧，ffmpeg 合成该目录下的 out/video.mp4。template.md 把成片写成 H.264、立体声 AAC。从仓库根目录运行 python3 -m http.server 8000 后，在浏览器打开 http://localhost:8000/harness/preview.html?demo=01-flat-vector，把 demo= 换成别的目录名即可拖着看。videos/ 里另外放了已经导出的 15 支成片。

能不能商用？

项目自己做的代码、提示词、文档和成片是 MIT。第三方采样、HDRI、纸张纹理、照片和 Natural Earth 地图数据是 CC0 或公有领域；site/vendor/highlight.min.js 是 BSD-3-Clause；两处字形轮廓仍是 SIL OFL。字体文件不在仓库里，各自有许可。做新片时，README 要求素材本身允许商用（CC0、OFL 等）。

要不要 API key？

README 未写明需要 API key。本地跑源码用的是 Node.js 22.12 或更新、本机 Google Chrome、ffmpeg，以及 Python 3.11 或更新和 requirements.txt。3D 那支另要 Blender。

有没有中文字幕和中文配音？

template.md 写明 Rules 等通用部分在各风格之间相同。已读的 prompts/01-flat-vector.md 在 Rules 里要求画面文字正确、自然，使用地道的中文和正确的中文标点。配乐和音效由 audio.py 合成，用的是乐器采样。README 未写明语音合成或中文旁白。第 15 种是综艺花字，片例「喵呜日记 EP.07」为 9:16 竖屏，文字在画面上。缺字体时会落到系统字体。

相关阅读

参考来源

上次编辑于:
贡献者: Masoooon
小苔藓 AI 指南 · 数字严选内容站
Copyright © 2026 数字严选