claude-animation-skills

# claude-animation-skills

通过六个 Claude Code 技能，用一句提示词在你自己的电脑上渲染 Reels 短动画，适合没有素材的创作者。

由 artemnovitckii 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：这个项目是六个 Claude Code 技能，用来在没有任何素材的情况下做短视频动画，适合 Reels。你输入一条斜杠命令和一句想法，Claude 会写出规格，在你的电脑上渲染视频，并标出 Instagram 的安全区供你检查。

适合谁：它适合发布 Reels、手头又没有素材的创作者和小品牌。Claude 负责写规格并运行渲染，你只需要写提示词。

```table
行业 | 谁在用 | 怎么用 | 例子
社交媒体 | Reels 创作者 | 做一条会自己画出来、数字不断上涨的折线图 | 9 个月内从 0 涨到 100K 粉丝
旅行与健身 | 教练和本地向导 | 在 3D 地图上画出路线，并倒数到达时间 | 从家到健身房，2.8 km
科技与硬件 | 评测者和产品营销人员 | 在屏幕上把手机一层层拆开，并给每个部件加标签 | 我的手机，每个部件都有标签
教育 | 讲解类频道 | 把一个问题做成带字幕和旁白的卡通短片 | 为什么海盗要戴眼罩？
```

如果你要剪辑真实素材，或者用的是 Windows，可以跳过它。

用在哪里：所有操作都从 Claude Code 开始，每个技能就是一条斜杠命令。

- Claude Code：每个技能都会变成一条命令，比如 /graph 或 /map-route
- Claude Code 插件：同样的技能也打包成了插件，命令带有命名空间，比如 /animation-skills:graph
- 你的电脑：装有 ffmpeg、Node.js 和 Python 的 macOS 或 Linux 负责渲染
- Instagram Reels：视频是竖屏的，联系表会标出安全区

```table
使用场景 | 适合谁 | 他们能得到什么
粉丝增长图 | 创作者 | 一条自己画出来的线，加上一个不断上涨的大数字
路线短片 | 本地向导 | 一条 3D 地图路线，带落点图钉、倒数到达时间和目的地卡片
手机拆解 | 科技评测者 | 一个 3D 爆炸视图，每个部件都有引线和标签
卡通讲解 | 讲解类频道 | 一条 3D 或火柴人短片，字幕与你的旁白对齐
```

如何设置：你需要一台 Mac 或 Linux 电脑，并先装好几个工具。

- macOS 或 Linux
- Node.js 18+、Python 3.9+ 和 ffmpeg
- Claude Code，用来运行这些技能
- 约 1 GB 的语音模型，只下载一次，仅 /stick-figure 和 /zach-d-films 需要

1. 如果还没有 ffmpeg 和 Node.js，先装上它们。
2. 把这个项目的 GitHub 仓库克隆到你主目录下名为 claude-animation-skills 的文件夹里。
3. 在那个文件夹里运行安装脚本。它会把每个技能链接到你的 Claude Code 技能文件夹，并完成一次性设置。
4. 如果要用 /stick-figure 和 /zach-d-films，带上语音选项再运行一次安装脚本。
5. 以后要更新，拉取最新文件，再运行一次安装脚本。

需要的话，先安装工具：

```bash
brew install ffmpeg node
```

在项目文件夹里运行安装脚本：

```bash
cd ~/claude-animation-skills && ./install.sh
```

为两个引擎技能加上语音模型：

```bash
./install.sh --voice
```

以后用这一行更新：

```bash
git pull && ./install.sh
```

或者在 Claude Code 里添加插件：

```text
/plugin marketplace add artemnovitckii/claude-animation-skills
/plugin install animation-skills@claude-animation-skills
```

如何使用：在任意文件夹里打开 Claude Code，输入斜杠命令，后面跟上你的想法。

```text
/graph 0 to 100K followers in 9 months: 1.2K, 2.1K, 3.4K, 5K, 9K, 24K, 51K, 78K, 100K
/map-route home to the gym, 2.8 km, 9 minutes
/stick-figure why did pirates wear eye patches?
```

四个快速技能用一个小的 JSON 规格来工作。Claude 写出它，运行技能的构建脚本，你会得到一个 1080x1920、30 fps 的 MP4，外加一张联系表。3D 的大约需要 1.5 分钟。

/stick-figure 和 /zach-d-films 做的是完整的短片。Claude 会复制一个示例项目，和你一起起草脚本，把每条字幕与旁白对齐，再渲染出来。

```table
工具 | 作用
/zach-d-films | 做一条 3D 卡通“如果”讲解短片，带慢动作撞击和与你的旁白对齐的字幕
/stick-figure | 做一条火柴人讲解短片，带快速转场和简短字幕，外加用代码做出的音乐和音效
/minimalistic-graphics | 画黑白线条图，一个白点沿着细线台阶向上跳
/map-route | 画一条 3D 地图路线，带落点图钉、倒数到达时间和目的地卡片
/breakdown | 把一部 3D 手机一层层拆开，并给每个部件加标签
/graph | 画一条简洁的折线图，一个大数字不断上涨
```

示例：你输入“/graph followers going from 0 to 100K in 9 months”，再加上一组数字，每个点一个。Claude 会写出规格并运行构建。你会得到一个竖屏 MP4，一条线自己画出来，一个大数字一路涨到 100K，外加一张联系表。

新手与专家：如果你是新手，就从 /graph 开始。给它一句简短的想法和几个数字。2D 技能大约 10 秒就能渲染完，所以很适合第一次尝试。

在底层，每个快速技能都会用 JSON 规格填充一个 HTML 模板。模板用 GSAP 做 2D 动效，用 three.js 做 3D，再由一个 Python 构建脚本调用 HyperFrames 渲染成 MP4。两个引擎技能自带 canvas 或 three.js 代码、语音和时间对齐工具，以及一个可以照着改的完整示例。代价是时间，因为每个都需要一次完整的工作时段，而不是一条命令。

```flow
你在 Claude Code 里输入斜杠命令
Claude 写出 JSON 规格
build.py 填充 HTML 模板
HyperFrames 渲染 MP4
联系表标出安全区
```

注意事项：

- 平台：需要 macOS 或 Linux，以及 Node.js 18+、Python 3.9+ 和 ffmpeg
- 无需 API 密钥：两个引擎技能用的免费语音和字词时间对齐都在你的电脑上运行
- 安装时获取：three.js、GSAP、Playwright 和语音模型是下载的，不随项目附带
- 插件路线：有这条路线，但 git clone 才是端到端测试过的那条
- 耗时：两个引擎技能需要一次完整的工作时段，而快速技能几秒到几分钟就能完成
- 许可证：MIT

## GitHub 上的数据（2026年11月6日）

- 星标：417
- 复刻：53
- 未关闭的议题和拉取请求：2
- 语言：JavaScript
- 许可证：见仓库
- 话题：animation, claude-code, claude-skills, hyperframes, reels, threejs

## 链接

- 代码：https://github.com/artemnovitckii/claude-animation-skills
- 网站：https://novitckii.com/resources/animation-skills/
- 发布版本：https://github.com/artemnovitckii/claude-animation-skills/releases
- 议题：https://github.com/artemnovitckii/claude-animation-skills/issues
- 星标历史：https://www.star-history.com/#artemnovitckii/claude-animation-skills&Date

## 获取代码

```
git clone https://github.com/artemnovitckii/claude-animation-skills.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  7 KB