Story to Handdrawn Video 手绘故事动画

项目简介

Story to Handdrawn Video 是一个把中文故事文案或有序图片转成 3:4 竖屏手绘日记漫画动画的 Agent Skill。它用自然语言驱动，完成分镜规划、插画生成、素材处理和 Remotion 渲染，最终输出可后期配音的静音 MP4 画面轨道。

默认由 Agent 的生图工具同时绘制插画和手写中文字，再制作「文字 → 黑白画稿 → 彩色插画」的逐层揭示动画；也可以保留整页，使用右下角卷页的翻书效果。

核心能力

327 项风格资产

• 297 条画风配方 + 30 种主题配色，覆盖 11 类画材
• 默认展示 30 种常用精选，可按画材、类型、名称或编号筛选
• 提供在线风格库与离线 references/style-library.html，无需启动服务即可浏览

参考图生成与私有风格

Agent 解析参考图的线条、造型、配色、材质和手写字特征，用同一套视觉语言生成新分镜。满意的风格可命名收藏到项目 .story-video/styles/，后续按名字或 custom:<id> 复用，不会进入公共目录。

两种动画方式

快速开始

环境需要 Node.js 20+、Python 3.10+、FFmpeg（含 ffprobe）、npm 以及 Chrome 或 Remotion 支持的浏览器。生成新图还需要 Agent 可调用的生图工具。

先安装渲染器：

git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm ci
npm run check

再按所用 Agent 安装 Skill（Codex / Claude Code / 通用 skills 目录各选一条）：

cp -R skill-package/story-to-handdrawn-video ~/.codex/skills/

然后在 Agent 中输入自然语言指令，例如：

使用 $story-to-handdrawn-video，把下面的故事生成手绘动画，先给我预览版：
小猫坐在窗边。小鸟停在枝头。

三种使用方式

• 故事生成视频：指定内置风格 ID、名称或别名，故事原文保留，每个完整句子默认一个节拍
• 已有图片生成视频：按顺序传入图片，可选逐层绘制或翻书效果
• 参考图生成并收藏风格：解析参考图特征绘制新故事，并保存为私有风格

项目原理

项目把生成图片与制作动画分开处理：Agent 负责理解故事和画风、调用生图工具；本地脚本从已确认的母图派生素材；Remotion 按分镜播放图层并导出视频。母图是每页完整的「手写文字 + 插画」，已有图片也可直接作为母图输入。

命令行统一入口为 scripts/run_story_video.py，支持 --mode plan / generate / import / preview / render 等阶段，在 Agent 中使用 Skill 时无需手动执行。

成片输出

输出为 3:4、30 fps、H.264 静音 MP4，默认不生成配音或音乐，供后期剪辑使用。预览为 720×960，正式成片为 1080×1440。

注意事项

• 每张母图需检查中文字、角色连续性和四周留白，无法可靠分离时需修图或重生成
• 纯 CLI 只能准备视觉分析请求，看图需由 Agent 完成
• 切换画风、参考图或配色会改变素材指纹，避免误用上一批图片