15 种风格，做自己的品牌动画 mg-styles-15

选一种风格，讲自己的品牌故事

想做一条品牌动画，先不用决定用哪种特效。看看扁平图形、手绘线条、像素或拼贴，哪一种更适合你希望观众记住的内容。这个仓库收集了 15 支由 Claude Opus 5.5 编写代码制作的 10 秒短片，每支都有完整提示词和源码，可以从喜欢的画风出发，设计自己的故事和镜头。

先看上方两支样片。第一支扁平动画用简洁图形与鲜明配色组织画面；第二支手绘动画保留线条轻微抖动的感觉。同样是短片，前者显得简洁利落，后者更有手绘的亲切感。也可以在作者的展示页比较全部风格，带声音播放，留意动作与音效的配合。

下面从扁平风格开始，制作一个虚构待办工具“拾光”的品牌短片：把零散任务整理成清单，让用户知道接下来先做什么。重点是让动画表现产品的作用，而不只是把样片结尾换成自己的 Logo。

找到提示词，准备自己的内容

这是案例与提示词仓库，没有可安装的 SKILL.md。你可以在能写代码、执行命令的 AI 编程工具中打开空文件夹，再把扁平风格提示词里的完整提示词块发给它。作者使用 Claude Opus 5.5 制作样片，自己的版本通常也需要反复调整。

先看提示词中的三个部分：Creative seed 是具体故事，Signature features 是画风特征，Output 是时长、画幅等输出要求。先保留风格特征，把故事换成自己的，再决定画幅。不要删完原提示词，只留下“做得高级一点”。

本例使用品牌名称“拾光”和文案“理清今天，从一件事开始”，用任务卡片整理成清单的动画表现产品用途。如果换成自己的产品，补上已确认的功能和素材路径。产品界面、数字和功能应以你提供的资料为准。

先让 AI 给出关键画面

将完整提示词发给 AI 后，补充下面的需求。以下对话示例由本站编写，尚未实际生成视频验证，不是作者原始提示词。

按刚才的扁平风格提示词，制作虚构待办工具“拾光”的 10 秒品牌动画。
保留 Signature features 中的风格特征，重写 Creative seed：
散乱的任务卡片出现 → 卡片整理成清单 → 一项任务被点亮 → 品牌名称收尾。
主文案：理清今天，从一件事开始。
画幅 1920×1080，30fps；用简洁图形表达，使用示意界面，不冒充已有产品截图。
请先给出镜头安排和开始、中段、结尾的关键画面，确认后再制作整片。

看预览时，先判断观众能否看出“任务从杂乱到有序”的变化。清单只是装饰，还是确实由前面的卡片组成？结尾品牌出现时，观众是否已经理解产品帮了什么忙？如果每张图都好看但连不起来，先改镜头安排，不急着增加粒子或转场。

制作首版，检查动作与声音

关键画面确认后，让 AI 编写动画代码、添加声音并渲染首版。作者的主要流程是网页在指定时间绘制画面，Chrome 逐帧截图，FFmpeg 将画面和音轨合成视频。3D 案例另需 Blender。

按确认的关键画面制作首版。
任务卡片整理时，让位置变化清楚可见，避免所有元素同时抢注意力。
音效对应卡片归位与任务点亮，背景音乐不要盖过这些音效。
先完整播放，检查文字是否来得及读完、动作衔接和结尾停顿，再交付 MP4 与可修改源码。

声音是这些案例的一部分，不必把它当成最后随便加的背景音乐。卡片归位时音效是否同步响起，要播放才能判断。作者原片也经过两轮评审与修改；同一提示词每次生成的作品会不同，通常需要多次修改，才能接近样片的完成度。

可以在新的 AI 对话中使用仓库的 rubric.md 评审首版，再将具体修改意见发回制作视频的对话。比起“再精致一点”，“中段三张卡片同时移动，看不清整理顺序”更容易指导下一次修改。

只改一处，看看它影响了什么

如果品牌名停留太短，可以先这样要求：

只调整结尾：让品牌名称完整显示后留出更长的阅读时间。
保留已确认的配色、画风和中段整理过程，总时长仍为 10 秒。
相应压缩开头的等待，调整结尾音效位置，不要直接把音轨截断。
先给我修改后的结尾预览，再重新合成整片。

这次改的是节奏，因此声音也要同步调整。如果要从扁平换成手绘，就应回到对应的风格提示词，重新确认线条、形状和运动方式，而不是只给画面加纸纹。

换成自己的产品

将下面的占位内容填好，连同所选风格的完整提示词发给 AI：

品牌与产品：[名称，给谁用]
希望观众记住：[一个核心用途或感受]
画面变化：[起始状态 → 产品带来的变化 → 结束状态]
保留的风格：[所选提示词及关键风格特征]
已有素材：[Logo、界面、文案、字体和文件路径]
输出：[时长、画幅、字幕与声音要求]
不能改动：[品牌名称、功能事实、数字、配色等]
先确认关键画面，再制作首版；保留可修改源码和素材来源。

比如换成订阅管理产品，可以让散落的订阅卡片聚合成一张月度清单；换成咖啡品牌，则可以按磨豆、萃取、端杯的顺序安排镜头。先想清楚要展示的过程，再挑适合的风格。

需要修改源码时，再准备本地环境

如果希望直接运行作者案例，在终端获取仓库并准备 Node.js 22.12+、Python 3.11+、Google Chrome 和 FFmpeg：

git clone https://github.com/Vincentwei1021/mg-styles-15.git
cd mg-styles-15
npm install
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python3 demos/01-flat-vector/audio.py
node harness/render.mjs demos/01-flat-vector

以上命令依据 README 与源码核对，本次收录未实际安装依赖或运行上游渲染。如果 Chrome 不在渲染器默认查找的 macOS 路径下，需要先设置 MG_CHROME 为实际浏览器可执行文件路径，例如 Linux 常见的 /usr/bin/google-chrome；先确认本机路径，不要照抄不存在的地址。

音轨写入 demos/01-flat-vector/out/audio.wav，成片写入同目录的 video.mp4。渲染器调用网页的 window.renderAt(t) 绘制指定时间的画面。预览时，从仓库根目录运行 python3 -m http.server 8000，打开本地预览页，这样 /assets/ 等资源路径才正确。

字体文件没有随仓库分发，按 assets/fonts/README.md 补齐；否则会回退到系统字体，字形和排版可能改变。3D 案例按其独立说明安装 Blender。项目代码、提示词和自制影片采用 MIT 许可，第三方字体、素材仍保留各自许可。