handdraw-story-video：手绘插图秒变短视频，AI Agent 直接出片

Yxy
Agent Skills , 视频制作
17 Jul, 2026

痛点切入

你画了一组手绘故事插图，想做成短视频发到抖音、小红书或视频号。

传统做法是什么？打开剪映或 Premiere，把图片一张张导入，手动设置每张的时长，加转场，配音乐，调整字幕位置。8 张图至少折腾半小时，还做不出那种”线稿一笔笔画出来，然后慢慢上色”的效果。

如果你想让 AI 帮你做，更难。大多数视频工具不接受 prompt，你没法让 agent 自动完成这个流程。

handdraw-story-video 解决的就是这个问题：把”手绘插图 → 短视频”这条路径自动化。你只管提供 7-9 张彩色母图，剩下的事——提取线稿、设置动画、生成页面、渲染 MP4——全部由 agent 完成。

技能能做什么，不能做什么

handdraw-story-video 是一个可以安装到 Claude Code、Codex 等编程助手的技能。它不是”上传图片就出视频”的魔法工具，而是一个让 agent 知道怎么把手绘插图组装成短视频的技能包。

技能提供的能力：

线稿提取：从彩色母图自动生成完全对齐的黑白线稿
动画生成：用 GSAP 实现从左到右的线稿显现 + 逐步上色效果
故事配置校验：自动检查时长、重复素材、字幕行数与字号范围
HyperFrames 页面生成：输出可渲染的 HTML 页面
渲染出片：一条命令生成 720×960 竖屏 MP4，30fps，35-45 秒

技能不提供的东西：

不生成图片：手绘插图需要你自己画或用 AI 生成
不生成音乐：背景音乐需要你自己准备
不生成字幕内容：字幕文本需要你写在配置里
不处理复杂动画：只做线稿显现 + 上色，不做其他特效

一句话总结：你提供手绘母图，agent 写代码组装，HyperFrames 渲染出 MP4。

完整使用流程

1. 安装技能

首先克隆仓库并设置环境：

git clone https://github.com/xiejunjie524/handdraw-story-video.git
cd handdraw-story-video
python -m venv .venv
source .venv/bin/activate  # macOS/Linux
pip install -r requirements.txt
npm install gsap

2. 准备手绘母图

每一幕只需要一张彩色母图。建议尺寸 1K（1024×1024 或更高），竖屏比例最佳。

把图片放到 assets/images/ 目录下，命名格式 scene-01-color.png、scene-02-color.png 等。

3. 提取线稿

用脚本从彩色母图提取线稿：

python scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png

这条命令会生成与彩色图完全对齐的黑白线稿。每一幕都需要执行一次。

4. 编写故事配置

复制模板并填写你的故事：

cp templates/story-template.json story.json

最小场景结构：

{
  "id": "scene-1",
  "duration": 5,
  "caption_lines": ["凌晨四点，", "他总会经过那家早餐店。"],
  "line_image": "assets/images/scene-01-line.png",
  "color_image": "assets/images/scene-01-color.png",
  "crop": {"scale": 1, "x": 0, "y": 0}
}

5. 生成并渲染

# 生成 HyperFrames 页面
python scripts/build_story.py story.json hyperframes/index.html --check-assets

# 检查配置
npx hyperframes check hyperframes/index.html --json

# 渲染 MP4
npx hyperframes render hyperframes/index.html --output renders/story-v1.mp4 --workers 1

不要覆盖旧成片，每次使用新的输出文件名。

核心功能解析

线稿提取算法

make_lineart.py 使用 OpenCV 进行边缘检测，从彩色图中提取线稿。关键是它保证线稿与彩色图”完全对齐”——这是后续动画能正确叠加的基础。

提取逻辑大致是：

# 简化示意
gray = cv2.cvtColor(color_image, cv2.COLOR_BGR2GRAY)
edges = cv2.Canny(gray, 50, 150)
lineart = 255 - edges  # 白底黑线

实际实现会处理更多细节：抗锯齿、线条粗细控制、填充区域处理。

动画设计

每幕的动画分两步：

线稿显现：从左到右，黑白线稿逐渐出现，模拟”正在画”的效果
逐步上色：线稿完全出现后，从左到右填入低饱和色彩

动画使用 GSAP 的 clipPath 或 mask 实现，方向统一从左向右。这种设计让 8 幕视频有统一的视觉节奏，不会显得杂乱。

故事配置校验

build_story.py 会自动检查：

总时长是否在 35-45 秒范围内
是否有重复的图片素材
字幕行数是否超过 3 行
字号是否在合理范围内
每幕时长是否合理（通常 5 秒左右）

这避免了”做了半小时视频，最后发现字幕溢出”的尴尬。

使用场景

短视频内容创作

最直接的场景：把绘本、漫画、故事插图做成短视频。适合抖音、小红书、视频号等竖屏平台。

儿童故事

手绘风格天然适合儿童内容。家长可以把自己画的故事做成视频给孩子看，或者幼教老师可以批量制作教学素材。

品牌故事

品牌可以用手绘插图讲述品牌故事、产品起源、用户案例。比纯文字更有温度，比实拍更轻量。

教育内容

知识类博主可以用手绘 + 上色的方式讲解概念、流程、历史事件。动画节奏适合配合讲解。

注意事项

画风一致性

每幕必须是不同构图，不能靠裁切或缩放凑时长。主体通常位于画面下方 45%–55%，保留大面积纸白留白。单帧最多 2–3 人、两个关键背景锚点，避免人群、密集建筑和大块黑线。

如果你用 AI 生图，需要确保所有图片风格一致。建议使用固定的画风提示词（项目 docs/prompts.md 有参考）。

字幕限制

字幕最多 3 行，每行不超过约 18 个中文字符。超出范围会导致渲染问题。

音乐选择

音乐按故事选择，不把某一首 BGM 固定进模板。你需要自己准备已获授权的音乐文件。

输出规格

默认输出 720×960、30fps、35-45 秒。这是为竖屏平台优化的规格。如果需要横屏或其他分辨率，需要手动调整配置。

结论

handdraw-story-video 不是一个通用视频工具，它解决的是一个具体问题：把手绘插图快速变成有节奏感的短视频。

如果你经常需要把手绘内容做成视频，或者想让 agent 自动完成”图片 → 视频”的流程，这个技能值得试。它不解决所有视频制作问题，但把手绘故事视频这一件事做到了可用。

仓库：https://github.com/xiejunjie524/handdraw-story-video 使用方法：https://github.com/xiejunjie524/handdraw-story-video/blob/main/docs/usage.md