XiaoyeCodes/code-animation-prompts

选用指南

AI 根据 README 整理 · 2026/10/30 00:46:57

使用方式

可通过一键导入安装为Claude Code/Codex Skill，或手动运行安装脚本；也可直接使用离线风格挑选器浏览和筛选风格。

查看 README 依据

| **轻量检索脚本** | 按编号、关键词、系列查找；不必把整个素材库塞进上下文 | | **浏览器渲染工具** | 将提供时间接口的 HTML 逐帧导出为 MP4，可混入已有音频 | | **一键导入提示词** | 复制到有本地文件和终端权限的 Claude Code／Codex，完成下载与安装 | ## 一键导入：Claude Code / Codex **复制下面整段，粘贴给 Claude Code 或 Codex：** ```text 请将 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。

```text /code-animation-prompts 用 Z5 剪纸做一段 12 秒的新年片头，16:9。 文字是“新的一年，万事可期”，红纸、米色宣纸、层叠阴影。 先做可编辑 HTML 和关键帧，声音先不加；环境具备依赖时导出 MP4。 ``` **还没选好风格：** ```text 用 code-animation-prompts 帮我做一条讲“为什么下雨”的 30 秒科普短片。 面向小学生，竖屏 9:16，中文大字幕，想要手绘和温暖的感觉。 先给我 3 个有编号的候选风格，说明怎么动，再推荐一个。 ``` 技能提供风格参考与制作流程，视频仍需由编程助手编写并在本地渲染。只查风格不需要 API Key 或付费图像服务；助手本身的使用费用由相应平台决定。 ## 用眼睛挑，比描述更快  下载完整仓库后，双击打开： ```text skills/code-animation-prompts/assets/library/风格挑选.html ``` 在 Chrome／Edge 中可离线浏览。搜索关键词或编号 → 勾选风格 → 打开「已选清单」→ 复制给助手，再补充主题、时长、画幅和声音需求。

部署要求

手动安装需要Git和Python 3.10+；使用HTML转MP4渲染工具需要Playwright、Chromium和FFmpeg。

查看 README 依据

在仓库根目录运行 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，不自动安装视频渲染依赖、不修改其他助手配置。 ``` 也可打开 [独立版导入提示词](prompts/one-click-import.md) 复制。这里的“一键导入”指把整段请求交给编程助手执行；普通网页聊天如果没有本地文件权限，无法代你安装。 <details> <summary><b>更喜欢自己运行命令？</b></summary> 需要 Git 和 Python 3.10+。在终端执行： ```bash

| R · 照参考学来的 | 7 | 用代码呈现的赛博朋克等视觉参考 | | O · 奥斯卡 98 部 | 98 | 按原素材整理的电影画风参考 | | **合计** | **341** | **193 张静帧 + 148 份文字参考** | → [打开完整风格索引，每个条目均可点击](docs/STYLES.md) ## 导出你自己的视频 查找风格、阅读提示词和使用挑选器，不需要渲染依赖。只有使用随附 HTML → MP4 工具时，需要 **Playwright + Chromium + FFmpeg**。 ```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 ```

已知限制

渲染器要求页面提供window.renderAt(t)接口，原始示例需适配后才能使用，不能直接作为通用网页录屏器。

查看 README 依据

`ffmpeg -version` 是检查命令；如未安装，参见 [FFmpeg 官方下载](https://ffmpeg.org/download.html)。渲染器要求页面提供 `window.renderAt(t)` 并在 `?export=1` 时关闭实时循环；原始示例需要先适配这个接口，不能直接当成通用网页录屏器。具体见 [渲染接口与音频说明](skills/code-animation-prompts/references/rendering.md)。 ## 仓库结构 ```text code-animation-prompts/ ├── README.md ├── LICENSE.md # 各部分的来源与使用约定 ├── prompts/one-click-import.md # 复制给 Claude Code / Codex 的导入请求 ├── docs/ │ ├── INSTALL.md # 安装位置、项目安装、更新方式 │ ├── STYLES.md # 341 个可点击条目 │ ├── images/ # 封面、风格墙、真实项目截图、动图