纯浏览器端生成手绘风短片，无需Blender或视频生成模型

方案简介

hand-drawn-canvas-animation 是 tools 仓库 skills 目录下的一个独立 Agent 技能，用 JavaScript 和 Canvas 2D 制作带精心设计姿态与富有表现力笔触的短片。它覆盖铅笔、墨水、risograph、丝网印刷等风格，以及手绘与真实照片互动的画面，还包括沙动画与投影纸片。技能通过一个故事把多种材料串联起来，包含一场移动的风暴与从书中展开的翅膀。技能自带可编辑示例、原创声音、MP4 渲染器和浏览器回归检查，完全不需要 Blender 或视频生成模型，全部在浏览器环境中完成。适合希望在纯前端技术栈内制作手绘风格动画、或为 Agent 配置独立动画技能的开发者。

亮点与能力

• JavaScript + Canvas 2D 实现手绘动画短片
• 覆盖铅笔、墨水、risograph、丝网印刷风格
• 支持手绘与真实照片互动、沙动画、投影纸片
• 通过一个故事串联多种材料（含移动风暴、书中展开的翅膀）
• 可编辑示例与原创声音
• 内置 MP4 渲染器与浏览器回归检查
• 无需 Blender 或视频生成模型

组成与分工

• Canvas 2D：绘制姿态与笔触的渲染核心
• JavaScript：动画逻辑与故事编排的实现语言
• MP4 渲染器：将动画输出为 MP4 成片
• 浏览器回归检查：保障动画效果的可复现性
• 可编辑示例与原创声音：随技能分发的素材与音频

实施步骤

1. 安装技能

把技能目录复制到 Agent 的技能目录即可：

bash
cp -r skills/hand-drawn-canvas-animation ~/.agents/skills/

2. 使用

技能自带可编辑示例，可在浏览器中修改并借助浏览器回归检查验证效果，最后用内置 MP4 渲染器导出成片。

优缺点

• ✓ 无需Blender或视频模型
• ✓ 含可编辑示例与音轨

出处

本方案挖掘自开源项目 alesha-pro/tools，方案内容与实施命令均来自其 README 原文。