Code Animation Prompts

# Code Animation Prompts

一个包含 341 种风格提示词的资料库，用来制作用代码生成的动画，另附一个给 Claude Code 和 Codex 用的技能，负责挑选风格并规划镜头。适合制作短视频和片头的创作者。

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

## 简介

它是什么：Code Animation Prompts 收集了 341 种视觉风格，写成提示词，供编程助手用代码做成动画。它附带 196 张参考静帧、一个离线风格挑选器，以及一个给 Claude Code 和 Codex 用的技能。你选一种水墨、剪纸、霓虹或漫画之类的画风，助手就把它做成动画。

适合谁：它适合想用一句创意做出有风格的动画，并且已经在使用编程助手的创作者、老师和设计师。

```table
行业 | 谁在用 | 怎么用 | 例子
短视频和内容 | 创作者 | 按编号挑一种风格，让助手做一段短动画 | 创作者要一段 12 秒的剪纸风格新年片头，画幅 16:9
教育 | 老师 | 用白板或手绘风格制作讲解视频 | 老师为小朋友要一段 30 秒讲“为什么下雨”的视频，竖屏 9:16
科技营销 | 市场人员 | 用霓虹、像素或东方赛博的画风做产品片头 | 团队为产品片头选了霓虹雨夜风格
设计和电影 | 设计师 | 浏览电影感和杂志式的参考来确定画风 | 设计师翻看奥斯卡系列，找一个电影画风参考
```

如果你想不借助编程助手、只靠聊天就得到成片，可以跳过它，因为助手需要在本地编写并渲染动画。

用在哪里：
- Claude Code 和 Codex，通过可安装的技能
- Chrome 或 Edge，用于离线风格挑选器
- 终端，用于检索脚本和渲染工具
- Playwright、Chromium 和 FFmpeg，只在把 HTML 导出为 MP4 时才需要

```table
用例 | 谁用 | 能得到什么
浏览风格 | 所有人 | 一个可以搜索、筛选、放大图片并导出已选风格清单的挑选器
规划动画 | 创作者 | 由助手根据你挑的风格规划好的镜头
查找风格 | 开发者 | 按编号、关键词或系列检索，不必把整个资料库载入上下文
导出视频 | 创作者 | 由 HTML 页面逐帧渲染出的 MP4，可选择混入已有音频
```

如何设置：手动安装需要 Git 和 Python。一键导入需要一个能操作本地文件并使用终端的编程助手。

- Git 和 Python 3.10 或更新版本
- Claude Code 或 Codex
- 只有导出视频时才需要 Playwright、Chromium 和 FFmpeg

1. 用 Git 克隆这个仓库。
2. 在仓库根目录里，为你的助手运行安装脚本，或者两个都装。
3. 让助手在已安装的文件夹里搜索一个风格，检查它是否能用。

```bash
python scripts/install_skill.py --target codex
python scripts/install_skill.py --target claude
python scripts/install_skill.py --target both
```

这个脚本只复制文件，不会额外下载任何东西。如果已经有同名的技能，它会停下来并保留原有内容。一键导入是一段现成的请求，你把它粘贴给 Claude Code 或 Codex，助手就会替你下载并安装这个技能。

如何使用：描述你要的动画并指明一种风格。Codex 和 Claude Code 接受下面这样的写法。

```text
使用 $code-animation-prompts，用 B3 粒子聚形做一段 12 秒横屏动画。
/code-animation-prompts 用 Z5 剪纸做一段 12 秒的新年片头，16:9。
```

想自己查找风格，就在已安装的技能文件夹里运行下面这些。

```text
scripts/styles.py search 水墨
scripts/styles.py show B3
```

要导出视频，先安装渲染器的依赖，再在起步页面上运行它。

```bash
python -m pip install playwright
python -m playwright install chromium
ffmpeg -version
python skills/code-animation-prompts/scripts/render_video.py skills/code-animation-prompts/assets/starter/index.html --output output/demo.mp4 --duration 12 --fps 30 --width 1920 --height 1080
```

```table
工具 | 作用
风格资料库 | 341 份 Markdown 提示词，附带静帧、参考实现和原始示例
离线风格挑选器 | 一个 HTML 页面，可以搜索、按类别筛选、放大图片并导出已选风格
智能体技能 | 让 Claude Code 或 Codex 按需读取风格、规划镜头并制作动画
检索脚本 | 按编号、关键词或系列查找风格
渲染工具 | 把提供时间接口的 HTML 页面逐帧导出为 MP4
```

示例：你让 Codex 用 B3 粒子聚形风格做一段 12 秒的横屏动画，主题是把想法变成现实，分三个阶段。你设定 1920 乘 1080、30 fps，深色背景配暖金色粒子，带中文字幕，无声。你会得到可编辑的 HTML、关键帧预览和 MP4，或者一条说明缺少渲染依赖的提示。

新手与专家：这是一份给 AI 编程助手看的视觉风格目录。你通过看图挑一种风格，告诉助手主题、时长和画面形状，它就写出把这个想法动起来的代码。第一件可以试的小事，是在 Chrome 或 Edge 里打开离线挑选器，勾选几种风格。

每种风格都是一份带编号的 Markdown 提示词，轻量的检索脚本能按编号、关键词或系列找到风格，所以整个资料库不必都放进助手的上下文。渲染器要求页面提供 window.renderAt(t)，并在设置了 ?export=1 时停掉实时循环。代价是要花功夫。原始示例要先适配，而静帧展示的是视觉方向，不是最终的动画。

```flow
在挑选器里或用检索挑一种风格
告诉助手主题、时长和画面尺寸
它写出可编辑的 HTML 动画
渲染器一帧一帧地截取画面
FFmpeg 把它们合成 MP4
```

注意事项：
- LICENSE.md 列出了每个部分的来源以及可以怎样使用。
- 341 种风格里有 196 种带参考静帧，其余 145 种只有文字。
- B6 示例是独立的，不计入这 341 种风格。
- 查找风格不需要 API Key 或付费图像服务，助手本身的费用取决于它所在的平台。
- 一键导入需要助手能访问本地文件和终端，所以普通的网页聊天无法替你安装。
- 渲染器不是通用的屏幕录制工具，只能用于提供时间接口的页面。

```chart
Title: 各系列的风格数量，最大的八个
奥斯卡电影画风 (O): 98 种
Lemo-Opuscar (L): 59 种
动态风格 (M): 40 种
卡通画风 (K): 38 种
代码视频 (X): 31 种
代码样片 (A 到 G): 26 种
中国风 (Z): 15 种
mg-styles-15 (V): 15 种
```

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

- 星标：676
- 复刻：168
- 关注：3
- 未关闭的议题和拉取请求：0
- 语言：HTML
- 许可证：见仓库
- 话题：agent-skills, animation, claude-code, codex, creative-coding, prompts, video-generation

## 链接

- 代码：https://github.com/XiaoyeCodes/code-animation-prompts
- 发布版本：https://github.com/XiaoyeCodes/code-animation-prompts/releases
- 议题：https://github.com/XiaoyeCodes/code-animation-prompts/issues
- 星标历史：https://www.star-history.com/#XiaoyeCodes/code-animation-prompts&Date

## 获取代码

```
git clone https://github.com/XiaoyeCodes/code-animation-prompts.git
```

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

README.md  7 KB