Code Animation Prompts

从一句创意，到一段有风格的代码动画。

341 种风格提示词 · 193 张参考静帧 · 10 个系列 · Claude Code & Codex Skill

浏览全部风格 · 一键导入 · 手动安装 · 原始示例 · 来源与许可

先看风格

粒子、霓虹、水墨、剪纸、漫画、电影感……把喜欢的画面交给 AI，再用代码把它动起来。

以上图片来自素材包自带的参考静帧，编号与提示词一一对应。193 种有图，148 种为文字参考；静帧展示视觉方向，实际动画取决于内容、实现和渲染结果。

它包含什么

一键导入：Claude Code / Codex

复制下面整段，粘贴给 Claude Code 或 Codex：

请将 https://github.com/XiaoyeCodes/code-animation-prompts 安装为当前编程助手可用的 skill。

1. 将仓库下载到合适的本地目录；若已有同名目录，先检查内容，不覆盖已有改动。
2. 阅读 README.md、docs/INSTALL.md 和 skills/code-animation-prompts/SKILL.md。
3. 根据当前助手选择安装目标：Codex 使用 ~/.agents/skills/code-animation-prompts，
   Claude Code 使用 ~/.claude/skills/code-animation-prompts。
   在仓库根目录运行 python scripts/install_skill.py --target codex 或 --target claude。
   如果当前助手无法确定，只向我确认目标；不要擅自安装到两个位置。
4. 安装时保留完整 skill 文件夹，包括 assets/library 中全部提示词、静帧、HTML、
   示例视频和许可文件。若目标已存在，保留现有目录并报告，不自动删除或覆盖。
5. 执行已安装目录中的 scripts/styles.py search 水墨，确认可查到风格；
   再执行 scripts/styles.py show B3，确认能读取完整提示词。
6. 告诉我实际安装路径、如何调用，以及是否需要新开会话。
   最后给我一句可以直接使用的“12 秒粒子聚形动画”请求示例。

本次只安装风格 skill，不自动安装视频渲染依赖、不修改其他助手配置。

也可打开 独立版导入提示词 复制。这里的“一键导入”指把整段请求交给编程助手执行；普通网页聊天如果没有本地文件权限，无法代你安装。

需要 Git 和 Python 3.10+。在终端执行：

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

# 安装给 Codex
python scripts/install_skill.py --target codex

# 或安装给 Claude Code
python scripts/install_skill.py --target claude

# 两者都安装
python scripts/install_skill.py --target both

安装脚本仅复制文件，不下载额外依赖。已有同名技能时会停止，保留现有内容。项目级安装、没有 Python 时的复制方式见 安装说明。

装好以后，直接这样说

Codex：

使用 $code-animation-prompts，用 B3 粒子聚形做一段 12 秒横屏动画。
主题是“把想法变成现实”，依次呈现灵感、构建、完成三个阶段。
1920×1080，30 fps，深色背景配暖金色粒子，带中文字幕，无声。
请交付可编辑 HTML、关键帧预览和 MP4；若缺少渲染依赖，请明确说明。

Claude Code：

/code-animation-prompts 用 Z5 剪纸做一段 12 秒的新年片头，16:9。
文字是“新的一年，万事可期”，红纸、米色宣纸、层叠阴影。
先做可编辑 HTML 和关键帧，声音先不加；环境具备依赖时导出 MP4。

还没选好风格：

用 code-animation-prompts 帮我做一条讲“为什么下雨”的 30 秒科普短片。
面向小学生，竖屏 9:16，中文大字幕，想要手绘和温暖的感觉。
先给我 3 个有编号的候选风格，说明怎么动，再推荐一个。

技能提供风格参考与制作流程，视频仍需由编程助手编写并在本地渲染。只查风格不需要 API Key 或付费图像服务；助手本身的使用费用由相应平台决定。

用眼睛挑，比描述更快

下载完整仓库后，双击打开：

skills/code-animation-prompts/assets/library/风格挑选.html

在 Chrome／Edge 中可离线浏览。搜索关键词或编号 → 勾选风格 → 打开「已选清单」→ 复制给助手，再补充主题、时长、画幅和声音需求。

请保留它与 风格提示词/ 的相对位置。GitHub 文件页面展示的是 HTML 源码，下载后在浏览器打开才能使用挑选器。

从原始示例看看动画

上图从素材包内 B6 示例视频节选，无声预览。原始文件名中的模型标注来自素材包，不代表本仓库另行进行过模型对比测试。

B6 是独立示例，不计入 341 个风格条目。 原始 3 个 MP4、3 个示例 HTML 与过程截图均随仓库保留。

341 种风格怎么分

→ 打开完整风格索引，每个条目均可点击

导出你自己的视频

查找风格、阅读提示词和使用挑选器，不需要渲染依赖。只有使用随附 HTML → MP4 工具时，需要 Playwright + Chromium + FFmpeg。

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

ffmpeg -version 是检查命令；如未安装，参见 FFmpeg 官方下载。渲染器要求页面提供 window.renderAt(t) 并在 ?export=1 时关闭实时循环；原始示例需要先适配这个接口，不能直接当成通用网页录屏器。具体见 渲染接口与音频说明。

仓库结构

code-animation-prompts/
├── README.md
├── LICENSE.md                       # 各部分的来源与使用约定
├── prompts/one-click-import.md       # 复制给 Claude Code / Codex 的导入请求
├── docs/
│   ├── INSTALL.md                   # 安装位置、项目安装、更新方式
│   ├── STYLES.md                    # 341 个可点击条目
│   ├── images/                      # 封面、风格墙、真实项目截图、动图
│   └── source-manifest.json         # 原始 555 个文件的 SHA-256 清单
├── scripts/                         # 安装、索引生成、预览图生成、校验
└── skills/code-animation-prompts/
    ├── SKILL.md                     # 技能入口
    ├── agents/openai.yaml           # Codex 展示信息
    ├── references/                  # 风格索引、渲染与来源说明
    ├── scripts/                     # 检索与视频导出
    └── assets/
        ├── starter/index.html       # 新增的确定性动画接口示例
        └── library/                 # 完整原始「代码动画」文件夹
            ├── 风格挑选.html
            ├── 风格提示词/
            ├── 示例/
            ├── 第三方许可/
            ├── _统计.json
            ├── 说明.md
            └── 许可与来源.md

致谢与免费分享约定

感谢原素材整理者——哔哩哔哩 俯仰观照 的资源分享。

同时感谢 LemoLab（Lemo-Opuscar）、Vincentwei1021（mg-styles-15）、Bae-ChangHyun（code-video）。XiaoyeCodes 在原素材基础上增加技能封装、工具脚本和项目文档；原始素材与许可完整保留。

免费使用，免费分享；请勿把这个合集包装成付费课程、付费 skills 或其他收费内容出售。 第三方内容继续适用其各自许可，详见 来源与许可。本仓库没有把所有素材重新声明为 MIT。

选一种风格，写下你的故事，让代码动起来。

如果这个项目对你有帮助，欢迎 Star，也欢迎分享你的代码动画作品。