示意封面由本站生成，真实效果请查看源仓库示例。

如何使用

1
复制安装提示
登录后点击右侧黑色按钮，一键复制。
2
粘贴给你的 agent
在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。
3
用一句话调用
像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/motion-graphics 帮我做：短动效：动态文字、数字滚动、logo 片头、字幕条

示例对话，仅演示调用方式，不代表实际产出。

你会得到

按类别选择动效配方
节奏与缓动设计说明
HyperFrames 渲染

适合

短动效：动态文字、数字滚动、logo 片头、字幕条

不适合

带旁白或多场景的视频（用通用视频流程）

你需要

Node.js 和 FFmpeg
HyperFrames CLI（npx hyperframes）
可选 GEMINI_API_KEY 用于生图

许可证: Apache-2.0
作者: @heygen-com
来源: heygen-com/hyperframes/skills/motion-graphics · ★ 57,418

支持:Claude CodeCodexCursorGemini CLIOpenCode

上游描述

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart.…

其他安装方式

更喜欢自己动手？下面的命令和上方按钮效果相同。

安装提示词（粘贴给你的 Agent）

Read https://skilloop.dev/skills/motion-graphics/install.md and follow the instructions to install the skill.

一行命令安装 · Claude Code

npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/motion-graphics -g -a claude-code

一行命令安装 · Codex / Cursor

npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/motion-graphics -g -a codex

手动安装（git） · Claude Code

git clone --depth 1 https://github.com/heygen-com/hyperframes.git /tmp/hyperframes
mkdir -p ~/.claude/skills && cp -r /tmp/hyperframes/skills/motion-graphics ~/.claude/skills/motion-graphics

作品版权归原作者所有，依其许可证分发；本站仅做链接与介绍。