Communitygithub.com

GPT手绘动画技能

使用内置的 p5.js/p5.brush 引擎、无头 Chrome 和 FFmpeg 创建手绘水彩与墨水卡通视频、短动画、音乐视频、歌词视频和循环动画。适用此手绘视觉风格或显式 gpt-hand-drawing-skill 请求;普通视频编辑和 Remotion 项目应使用各自的工作流程。

GPT手绘动画技能 是什么?

这个技能是为 Codex 等 AI 代理设计的,用于生成具有手绘水彩和墨水风格的动画项目。它完全在本地运行,无需依赖任何云端 API 或付费服务,仅需 p5.brush 引擎在 Chrome 中逐帧渲染,并通过 FFmpeg 编码为 MP4 视频。该技能提供了一个完整的项目框架,包括模板初始化、场景编排、基于时间的帧渲染和性能测量,特别适合制作音乐视频、歌词视频和循环动画。它强制要求每一帧都是时间的纯函数,避免累积模拟,确保渲染的可复现性和稳定性。该技能还内置了 'Clawd' 角色,但用户可以选择自己的角色和风格。开发者需要遵循提供的 ANIMATION_GUIDE.md 和示例故事板来规划项目,并使用提供的脚本来生成检查图像和最终视频。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/chao69782/gpt-hand-drawing-skill/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

用于 Codex 的 GPT 手绘动画技能

创建一个可工作的动画项目以及所需的 MP4 或循环。帧是时间的确定性函数,由 Chrome 中的 p5.brush 绘制,并由 FFmpeg 编码。无需 Claude 运行时、付费 API 或图像生成模型。Clawd 是一个可选的内置角色;请遵循用户选择的演员阵容和风格。

启动项目

从加载的 SKILL.md 位置解析此技能的目录。不要硬编码 Claude 目录。运行:

python "<skill-dir>/scripts/new_project.py" "<project-dir>"

这个跨平台初始化器会复制 template/,断开演示连接,使用 npm ci 安装锁定的依赖项,并报告工具。仅在演示或引擎检查时使用 --keep-demo,仅在搭建框架时使用 --skip-install,或者在 Node 可用但 npm 不在 PATH 上时使用 --npm-cli /path/to/npm-cli.js。NPM_CLI_JS 是等效的环境变量覆盖。它不会覆盖非空项目。

在设计之前,完整阅读生成的 ANIMATION_GUIDE.md。使用可用的图像查看器(例如通过执行工具中的 view_image)检查 docs/emotions.jpg 和 docs/views.jpg。该指南包含引擎和角色 API。对于音乐视频或长度超过约 20 秒的视频,请阅读 references/music-video.md。有关运行时问题、平台命令和渲染器限制,请阅读 references/codex-runtime.md。

计划与构建

使用用户已有的选择。仅询问确实影响工作的缺失信息;不要重复已回答的问题。对于音乐视频,收集音频和计时源。歌词视频需要提供的带有 LRC 或等效时间戳的歌词;不要发明缺失的歌词。纯乐器音乐视频不需要 LRC。当创意方向缺失时,可以提出一个可选问题来涵盖故事、情绪、重复出现的图像以及要避免的内容。如果用户委托方向,请提出并执行一个连贯的诠释。

使用以下命令测量音乐:

python "<skill-dir>/scripts/beat_grid.py" song.mp3 --from=0 --to=30 --lrc=song.lrc

(需要 NumPy 和 FFmpeg)。将速度视为带有半速/倍速歧义的估计;提供的音频和时间戳定义了时间。LRC 通常对行进行计时,因此卡拉 OK 的逐字符填充是近似值,除非提供了逐词计时。不要声称强制对齐。

编写 STORYBOARD.md:包含故事梗概、世界与调色板弧线、视觉主题、情感弧线,以及带有时间范围、动作、观众解读和转场的镜头。在有用时分享方向以供审核;如果用户要求您继续,请继续。完整的工作示例见 examples/xiaozhen/STORYBOARD.md,其场景文件与其并列。

在 src/config.js 中设置 duration、bpm、offset 和可选的 audio。将场景实现为 src/scenes/ 中的 IIFE,使用 shots([[t0, fn], ...]) 注册,并将其脚本包含在 studio.html 中。首先阻断可读的姿势。在镜头间使用共同的演员阵容、调色板和重复出现的主题。

渲染与检查

从项目目录中,在需要时渲染选定的帧、短运动条和细节:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/poses.jpg
node render.mjs --strip=2.1:2.6 --out=out/check/motion.jpg
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg

打开生成的图像。检查每个镜头的事件和阅读时间、面部、道具接触、角色大小、转场和调色板。检查关键动作和接缝周围的运动。修复观察到的问题,然后再次检查受影响的帧。联系表可验证姿势和连续性;检查短的编码预览以了解重要的运动时序。不要仅从源代码就声称完成了视觉审查。

使用测量的毫秒/帧和帧数来估算最终成本。此桌面环境是本地的:创建视频的请求通常会授权本地渲染。尊重显式的本地/云选择;不要添加强制性的位置批准步骤,也不要在未经授权的情况下使用付费/云服务。如果工作实际上是远程的且渲染位置很重要,请在全渲染之前澄清。如果用户仅请求源代码或本地命令,请保留可运行的项目和预览。

node render.mjs --clip --out=out/video.mp4
node render.mjs --frames --workers=4
node render.mjs --encode --audio=assets/song.mp3 --out=out/video.mp4

在帧渲染和编码中使用相同的 --fps。帧文件是可恢复的,但必须在重新渲染之前删除已更改时间范围的缓存帧。--encode 从零开始消费帧;较晚开始的局部范围需要其自己的 FFmpeg 起始编号和匹配的音频修剪(请参阅运行时参考)。

使用 ffprobe 验证编码的时长、分辨率、fps 和音频,并检查结果。返回视频和项目路径、测量的性能以及任何实际限制。将 node_modules、帧缓存和临时文件排除在可移植源代码归档之外。

视觉与引擎不变性

  • 使用 paint() 和 inkLine() 绘制;使用 glow() 进行叠加光效。平面的 2D 绘制关键视图、柔和的调色板、沸腾的墨水。这些是样式默认值;显式的用户要求优先。
  • 避免不必要的文本;支持歌词卡拉 OK 和请求的字母。在 timeline.js 之后加载 src/karaoke.js,填充 LY,并在其底部条带之上保持动作。验证实际字体和中文字形。
  • 每个镜头都需要一个事件、原因后跟反应,以及可读的保持意义。通过 emotions() 动画面部,通过 feel() 动画空闲状态。使转场适合故事,并在适当时将结尾与开头连接起来。
  • 每个帧都是 t 的纯函数:没有累积模拟、未播种的 Math.random() 或对渲染顺序的依赖。使用 hash() 进行稳定变化,每个独立元素使用 boilSeed(key)。
  • 将辅助函数保持在场景 IIFE 中,以避免 p5 全局名称冲突。防范退化的几何图形和 NaN。使用前景帧遮罩门/窗内容;在特写变焦时减少轮廓线粗。
  • 性能取决于画笔填充和描边。在放大之前测量几个代表性帧;当 GPU 内存紧张时,减少过多的几何图形和工作线程数。--soft-gl 是一个缓慢的备选方案,不是默认优化。
  • 除非用户明确要求代理,否则按顺序实现章节。并行渲染工作线程是渲染器的一个功能,不需要子代理。

源代码和许可证:references/upstream.md。在重新分发引擎或技能时,保留附带的两个 MIT 声明。

相关技能