motion-graphics-skills 教程：用一套 Claude Code 技能做发布级运动图形（2026）

推荐链接（推广）：数字严选大约 12 分钟AI 视频Opus 5.5 做视频Claude Code 视频motion-graphics-skillsHyperFrames运动图形

阅读说明

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

一句话结论

charlie947/motion-graphics-skillsopen in new window 是一套 Claude Code 技能，用来做发布片、讲解、图表、片头和竖屏导出。画面由代码逐帧画出，不经过 After Effects，也不经过视频生成模型。

适合已经能打开 Claude Code，并愿意先做一份品牌档再出片的人。README 写明在 Claude Code 里选 Opus 5.5，并先跑 brand-intake。同一份 README 也写了 Codex 和 Claude Desktop 的安装方法。

仓库信息

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

仓库星数最近推送（北京时间）许可创建时间
charlie947/motion-graphics-skillsopen in new window3742026-10-11MITopen in new window2026-09-26

仓库描述是 “13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator.” README 的许可说明是 MIT，并写 Use these however you like。

技能数量在材料里不一致：仓库描述写 13 个；README 徽章和开篇写 15 skills；「The skills」一节的标题写 Fourteen skills，下面的表有 15 行。查阅日 skills/ 目录下有 15 个文件夹，名称和表里的技能一致。下一节按这张表列出。

它能做什么样的视频

README 开篇写的成片类型是发布片、动画图表和短片。页内示例有一支 20 秒的发布片，以及一支 12 秒的里程碑循环。技能表里的时长和形态如下。表中 “Say this” 是 README 原文，输进 Claude Code 后由对应技能接住。

阶段技能README 写明你得到什么Say this
Set upbrand-intake写出 brand.md 和 MOTION.md。其他技能先读这两份文件"Set up my brand for motion. Here are five frames I like."
Planmotion-brief-writer把一个粗想法写成带品牌的制作简报"Write me a motion brief for my next milestone post."
Planreference-to-motion拆参考片的运动，从网站或情绪板取外观，再写成逐场的 Claude Motion prompt"Break down this reference and turn it into a Motion prompt."
Planmotion-prompt-writer把品牌和某一个瞬间写成八段 Claude Motion prompt：标准、格式、一条规则、外观、运动、禁止项、自查、场面"Write me a Motion prompt for a button that turns into a tick."
Launchlaunch-video30 到 45 秒的发布片，对象可以是产品、优惠或 cohort"Make a launch video for my new cohort."
Launchapple-launch-filmMac 风格的发布片。菜单栏、刘海和小部件都由代码画"Make it look like an Apple keynote launch."
Explainvox-explainer30 到 60 秒的纪录片式讲解"Make a Vox-style video: why do we dream?"
Explainanimated-chart循环图表。每个数值保持你给的原数"Animate my chart. Here are my numbers."
Explainmilestone-reveal一片夜空里的点收成你的真实数字"Make a milestone video for my follower count."
Explainmotion-effects品牌下的 16 个效果，每个是 8 秒循环"Build the search-to-results effect in my brand."
Opentitle-sequence-3d8 到 15 秒的三维片头"Make a cinematic 3D intro for my next video."
Comparemodel-showdown同一份简报，三个 AI 模型，叠成一支片子"Same prompt, three AIs. Make a model showdown."
Promotenewsletter-promo12 到 20 秒，把人引到某一期"Make a promo for this week’s newsletter."
Promoteloop-cover把封面做成无缝循环的 GIF"Make my newsletter cover a looping GIF."
Promotereel-export把任意片子做成 1080 x 1920 的 Reel 或 TikTok"Make this a reel for Instagram."

reference-to-motion 和 motion-prompt-writer 的产出，README 称为 Claude Motion prompt。README 没有写这个说法和 Anthropic 官方 Claude Motion 功能的对应关系。各技能自己的触发句、要收集的输入，写在该技能的 SKILL.md。

跑过一次 brand-intake 之后，它会写 brand.md（你是谁、卖什么、有哪些素材）和 MOTION.md（颜色、字体、时间和运动规则），并在 CLAUDE.md 里加一条规则，让模型在做任何动画之前先读这两份文件。没有这两份文件时，技能会向你要色值、字体和标志，并且不会把结果称作 on-brand。

README 还列了五份现成提示，每个任务一份：

文件README 写明里面是什么
prompts/start-here.mdopen in new window一行起步提示、用描述来改片的句子，以及当晚可以做的事
prompts/brand-design-system.mdopen in new windowMOTION.md 的提示，以及 CLAUDE.md 里先读文件的那段
prompts/briefs.mdopen in new window“Why do we dream?” 的简报，以及作者给过的设计修改意见
prompts/polish.mdopen in new windowApple 运动检查、真实组件规则，以及一次只改一件事的提示
prompts/effects.mdopen in new window16 条提示，每个效果一条，在你的品牌里从头做

需要准备什么

README 写明 Nothing here needs an API key。只装当前任务要用的东西。

工作流需要缺了会怎样
任何技能要 on-brandbrand-intake 产出的 brand.md 和 MOTION.md技能向你要色值、字体和标志，并且不把结果称作 on-brand
做任何动画Claude Code，模型为 Opus 5.5没有东西用来搭建
导出 MP4HyperFrames，或者 ffmpeg 加 Chrome得到带 window.seek() 的 HTML，导出挂起
loop-cover 的测量ffmpeg 和 Python 3GIF 能做出来，接缝和运动没有测量，技能不会把它叫做完成
reel-export 和 model-showdown 的叠片ffmpeg 和 ffprobe叠好的版面停在 HTML，最终编码和检查挂起
model-showdown通过你自己的账号使用每一个模型只比较够得到的模型，并说明哪些被排除
apple-launch-film 的运动检查apple-design 技能片子能做，运动不会按 Apple 的规则检查
标志和截图你自己的文件技能会问。它不会凭记忆重画标志

导出 MP4 时，README 写再装一次 HyperFrames，并称它 free、open source：

npx skills add heygen-com/hyperframes

apple-launch-film 若要做运动检查，README 给出的可选安装是：

npx skills add emilkowalski/skills --skill apple-design

片子里要出现产品界面时，README 建议使用现成组件，并给出 21st.devopen in new window 作为组件来源。对应的 CLAUDE.md 规则见下一节。

安装与第一次运行

  1. README 的一行安装：
npx skills add charlie947/motion-graphics-skills
  1. 手动拷进 Claude Code 时，用页面上的 Code，再选 Download ZIP，解压；或者克隆：
git clone https://github.com/charlie947/motion-graphics-skills.git

README 这一段写的是把 skills/ 里的 15 个文件夹拷到 ~/.claude/skills/（所有项目）或项目里的 .claude/skills/（只此项目）。下面的循环会留下你已经有的技能文件夹：

mkdir -p ~/.claude/skills
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  destination="$HOME/.claude/skills/$(basename "$skill")"
  if [ -e "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination"
  fi
done
  1. Claude Desktop 一次上传一个技能。在 motion-graphics-skills/skills 里打包，再到 Customise、然后 Skills 里上传。README 写先从 brand-intake 开始：
zip -r brand-intake.skill brand-intake
  1. Codex：先把本仓库克隆到项目里，再在项目根目录执行：
test -d motion-graphics-skills/skills || { printf 'Missing source skills folder\n'; exit 1; }
mkdir -p .agents/skills || exit 1
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  name="$(basename "$skill")"
  destination=".agents/skills/$name"
  if [ -e "$destination" ] || [ -L "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination" || exit 1
  fi
done

然后新开一个 Codex 任务，确认技能从 .agents/skills/<name>/SKILL.md 加载。

  1. 装好后打开 Claude Code，按下一节选择模型，并先跑 brand-intake。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。README 的安装节写明：打开 Claude Code，用 /model 选 Opus 5.5，先跑 brand-intake。

任何技能之前，README 给的一行起步提示是：

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. Go all out.

然后用描述来改：

  • "Slow down the second scene."
  • "Swap the text for mine: [your words]."
  • "Use my brand colours: [hex codes]."
  • "Make it 1080 x 1350 for LinkedIn."

要做具体任务时，用技能表右列的句子。README 的 “Use it” 一节还有这些对应关系：

"Set up my brand" → brand-intake
"Brief this animation" → motion-brief-writer
"Make a launch video for my coaching programme" → launch-video
"Make an Apple-style launch for my app" → apple-launch-film
"Why does every logo look the same now?" → vox-explainer
"Animate my Q3 chart" → animated-chart
"Celebrate 10,000 subscribers" → milestone-reveal
"Build the chart morph with my numbers" → motion-effects
"Make a button that turns into a video player" → motion-effects
"Give me a cinematic opener" → title-sequence-3d
"Same prompt, three AIs" → model-showdown
"Promo for this edition" → newsletter-promo
"Make my cover move" → loop-cover
"Make this a reel" → reel-export

README 收录的一条 vox-explainer 简报原文是：

Why do we dream? And then someone suddenly wakes up, zooms out of the eye, and goes into outer space. There are neural networks of interconnectivity to convey the brain.

README 写它在画任何东西之前先为每条事实找到来源，然后写脚本、加声音并渲染。

可选的 Apple 运动检查，原文是：

Use the apple-design skill to audit this animation. Give me a ranked list of everything that feels off, worst first.

产品界面若要使用现成组件，README 让你把下面这段写进 CLAUDE.md：

Add this rule to CLAUDE.md: whenever I paste a component prompt or third-party component code, treat it as a structural donor only. Keep its engineering. Replace its demo copy with my real copy, and translate every colour, border, shadow, font and timing to MOTION.md.

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

先跑 brand-intake。这里有五张我喜欢的画面。请写成 brand.md 和 MOTION.md，并在 CLAUDE.md 里加上做动画之前先读这两份文件的规则。

用 launch-video 做一支 30 到 45 秒的发布片，对象是〈产品名〉。屏幕上的名字、日期和数字只用我下面这份清单。导出 MP4 之前，检查每个镜头中段的一帧，看文字是否被裁切、是否重叠、事实是否和清单一致。

限制与已知问题

README 写每条技能都遵守这些规则：

  1. 屏幕上的名字、日期和数字来自你批准的清单。
  2. 颜色和字体来自 brand-intake 或你当场给的值。什么都没给，就先问。
  3. 禁用的默认做法：打字机文字、glow、bounce、文字上的渐变、从紫到蓝的背景。
  4. 手绘感的动作用 motion on twos：24 fps 下每个姿势停 2 帧。
  5. 前 3 秒承载钩子。第一帧若是空的，就要剪掉。
  6. 导出前检查每个镜头中段的一帧，看文字裁切、重叠和错误事实。
  7. 标志和截图只用你的文件，不凭记忆重画。

README 用一句话写了一个限度：写实的人脸。代码负责运动、文字和界面；栩栩如生的人仍需要图像模型。

loop-cover 的成品是 GIF，测量接缝需要 ffmpeg 和 Python 3。没有 HyperFrames，也没有 ffmpeg 加 Chrome 时，其他动画停在带 window.seek() 的 HTML。model-showdown 只能比较你账号里够得到的模型。

提交修改前，README 要求运行 bash validate-skills.sh。它检查每条技能的 frontmatter、名字是否和文件夹一致、描述长度，以及技能、参考文件和 prompts/ 里的行文：散文不用 em dash 和分号，不写本机路径。

截至 2026-10-23，仓库没有 open issue。

常见问题

能不能用 Codex 或 Cursor？

README 写明可以在 Claude Code 和 Codex 里用。Codex 的安装是把技能拷进项目的 .agents/skills/。Claude Desktop 是把一个技能文件夹打成 zip，在 Customise 的 Skills 里上传。Cursor README 未写明。

成品是 HTML、MP4 还是 GIF？

取决于技能和本机有没有导出工具。有 HyperFrames，或者有 ffmpeg 加 Chrome 时，可以导出 MP4。缺这些时，得到带 window.seek() 的 HTML，导出挂起。loop-cover 做的是无缝循环 GIF。reel-export 的目标是 1080 x 1920。

商用和许可怎么算？

仓库许可是 MITopen in new window。README 写 Use these however you like。标志和截图要用你自己的文件。model-showdown 使用的是你自己的模型账号。

要不要 API key？中文配音呢？

README 写明 Nothing here needs an API key。model-showdown 需要你自己的账号能打开要比较的模型，够不到的要在结果里说明。中文字幕和中文配音 README 未写明。vox-explainer 的示例写它写了脚本、加了声音并渲染，没有写用哪一种语音或哪一种语言。

相关阅读

参考来源

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