Motion Graphics Skill Pack：13 个用代码做发布级动效的 Skill Skill 技能

技能简介

Motion Graphics Skill Pack（动态图形技能包）是一套由 13 个 Claude Code / Codex 技能组成的创作工具箱，用来制作"发布会级别"的动态图形视频——不需要 After Effects，也不需要视频生成器：Claude Code 把动画写成代码，逐帧绘制并渲染成 MP4，每一帧都是代码。作者 Charlie Hills 用它做产品发布片、动画图表和 Reel，这套技能就是他实际使用的工作流，并把"被拒稿后总结出来的规则"一并写了进去。整套技能按使用顺序排列，从品牌设定开始，到导出 Reel 结束。

核心能力

• 13 个技能覆盖完整流程：品牌设定（brand-intake）、需求规划（motion-brief-writer）、发布片（launch-video、apple-launch-film）、解说片（vox-explainer、animated-chart、milestone-reveal、motion-effects）、三维开场（title-sequence-3d）、模型对比（model-showdown）、推广物料（newsletter-promo、loop-cover、reel-export）。
• 品牌一致性体系：brand-intake 一次运行生成 brand.md（你是谁、卖什么、有哪些素材）与 MOTION.md（配色、字体、节奏与运动规则），其余所有技能先读这两个文件，确保产出"在品牌上"。
• 零后期软件依赖：动画以 HTML + 代码表达，Claude Code 逐帧渲染；配合开源 HyperFrames 可导出 MP4。
• 数据不被篡改：animated-chart 保证"你给的每个数值都原样保留"，适合做对外可信的数据可视化。
• 丰富的预置效果与模板：motion-effects 提供 16 种高级效果（品牌化的 8 秒循环），title-sequence-3d 生成 8~15 秒 3D 开场，milestone-reveal 用夜空星点汇聚成你的真实数字。
• 平台适配导出：reel-export 把任意视频导出为干净的 1080×1920 Reel / TikTok，loop-cover 把通讯封面做成无缝循环 GIF。

安装配置

• 一键安装（约 30 秒）：

npx skills add charlie947/motion-graphics-skills

随后打开 Claude Code，用 /model 选择 Opus 5.5，先运行 brand-intake。

• 手动复制到 Claude Code：下载或克隆仓库，把 skills/ 下 13 个目录复制到 ~/.claude/skills/（所有项目）或项目的 .claude/skills/（单个项目）；仓库提供的循环脚本会保留你已有的同名技能目录。
• Claude Desktop：把单个技能目录打包成 .skill（例如 zip -r brand-intake.skill brand-intake），在 Customise → Skills 中上传；建议从 brand-intake 开始再逐个添加。
• Codex：克隆到项目根目录后，把 skills/ 下的目录复制到 .agents/skills//，新开任务时确认从 .agents/skills//SKILL.md 加载。
• 导出 MP4：先加一次免费开源的 HyperFrames（npx skills add heygen-com/hyperframes）；若没有任何导出工具，作者也提供了 Mac 与 Windows 的导出套件把 HTML 转成 MP4。

使用步骤

1. 先运行 brand-intake：告诉它"帮我为动效设定品牌，这是我喜欢的五个画面/帧"，它会生成 brand.md 与 MOTION.md，并在 CLAUDE.md 里加一条规则，让 Claude 每次动效前先读这两个文件。
2. 快速试片：在 Claude Code 里直接说"做一支 15 秒的动态图形视频，尽情发挥"，然后用自然语言改：放慢第二幕、替换成我的文案、换成我的品牌色、改成 1080×1350 适配 LinkedIn。
3. 明确任务时说触发句让对应的技能自动加载，例如"给我的新课程做一支发布视频"（launch-video）、"做一个 Apple 主题演讲风格的发布"（apple-launch-film）、"给这条数据做动画"（animated-chart）、"庆祝 1 万订阅"（milestone-reveal）。
4. 需要正式交付时，先让 motion-brief-writer 把粗略想法写成精确的构建 brief，再交给对应的制作技能。
5. 完成后用 reel-export 导出为 Reel / TikTok，或用 loop-cover / newsletter-promo 生成推广物料。
6. 像给设计师提意见一样给修改意见（"这里再慢一点""文案换成这一句"），迭代到满意后导出 MP4。

适用场景

• 产品与课程发布：快速产出 20~45 秒的发布片，不请外包、不用剪辑软件。
• 数据内容可视化：把季度图表、增长数字做成循环动画，保证数值准确。
• 社媒短片批量生产：为 newsletter、Reel、TikTok 生成带品牌的多条素材。
• 里程碑与增长播报：把订阅数、粉丝数等真实数字做成有仪式感的揭晓动画。
• 视频开场与片头：用 3D 开场提升完播率与滚动停留。
• AI 模型/工具对比内容：用 model-showdown 把同一 brief 下三个 AI 的结果叠进一支视频。

适用人群

• 独立创作者、内容营销人员、newsletter 运营者。
• 需要高频产出品牌一致物料的产品市场与增长团队。
• 不想学 After Effects、但想让内容"看起来像大厂做的"的开发者与设计师。
• 使用 Claude Code / Codex 作为主要创作环境、希望把动效纳入代码工作流的团队。

工作原理

这套技能不调用任何视频生成模型，而是把"动画"还原为可编程的图形：HTML 表达画面，p5.js 等前端技术驱动时间轴，Claude Code 逐帧绘制每一帧，最后交给 HyperFrames 或 ffmpeg 编码成 MP4。技能之间的关系由 brand.md 与 MOTION.md 两个文件维系——先做品牌摄入，后续每个技能都从这两个文件读取配色、字体、时间与运动规则，从而保证风格统一。每个 SKILL.md 里写明了触发语句、需要的输入，以及作者在真实拒稿中总结出的规则。

官方链接

• GitHub 仓库：https://github.com/charlie947/motion-graphics-skills
• 作者 newsletter（MarTech AI，约 7.1 万读者）：https://charliehills.substack.com
• 依赖的开源渲染工具 HyperFrames：https://github.com/heygen-com/hyperframes