这是什么
手绘动态绘本动画生成器是一个专为 Claude 设计的 Skill，它能在浏览器中实时绘制并播放手绘水彩风格的动态绘本。与传统的预渲染视频不同，这个 Skill 让每一帧画面都在浏览器中现场画出来，呈现出独特的“自绘”效果。它支持分层场景、精心设计的镜头、角色动画，以及翻页、笔刷、纸页撕裂等多种转场效果，并配有治愈系背景音乐。此外，它还集成了豆包（火山引擎）的语音配音功能，可以生成中英双语字幕，让绘本故事更加生动。
适合谁
这个 Skill 适合以下人群：
- 内容创作者：希望制作独特的手绘风格动画视频，用于社交媒体、教育或娱乐内容。
- 绘本作者：想将自己的静态绘本转化为动态版本，增加互动性和吸引力。
- 教育工作者：制作生动的教学材料，吸引学生的注意力。
- 编程爱好者：对 AI 生成动画感兴趣，愿意尝试在浏览器中实现创意。
能做什么
使用这个 Skill，你可以：
- 生成自绘动画：让画面在浏览器中自动绘制，呈现手绘水彩的独特质感。
- 设计镜头与场景：分层构建场景，设计镜头运动，增强故事表现力。
- 角色动画：让角色在场景中活动，增加故事趣味。
- 多种转场效果：使用翻页、笔刷、纸页撕裂等转场，丰富视觉体验。
- 配音与字幕：集成豆包 TTS，生成语音配音，并添加中英双语字幕。
- 扩展故事：可以基于现有绘本添加新章节，或从零开始创建新故事。
这东西还能拿来做什么？
以前想做一部这样的动态绘本，需要写剧本、画插画、做动画、剪辑、配音，整个流程成本不低。现在，很多工作都可以交给 Claude 完成，自己主要负责创意、审美把关和反复调整。
我觉得它的应用场景还挺多的：
-
知识科普： 把复杂的科学原理、历史事件做成有剧情的动画，让知识更容易理解。
-
技能教学： 把软件操作、编程入门、AI 工具教程做成直观的动画演示。
-
儿童内容： 制作睡前故事、英语启蒙、生活习惯和安全教育等内容。
-
动态绘本： 把中国神话、经典童话和原创故事做成有画面、有配音、有字幕的电子绘本。
-
产品营销： 用一个小故事讲清楚产品的功能、使用场景和核心卖点，而不是单纯展示功能列表。
-
品牌 IP： 设计固定角色和连续剧情，持续更新内容，慢慢积累受众，也为后续的 IP 开发留下空间。
这些内容既可以发布在短视频和社交平台上，也可以进一步探索电子绘本、系列动画、儿童内容产品等方向。当然，最终效果还是取决于故事、画面、配音和整体制作质量。
使用前准备
要使用这个 Skill，你需要：
- 一个 Claude 环境（claude.ai 或 Claude Code）。
- 如果使用豆包配音功能，需要自备火山引擎的 API Key，并将其保存在项目的
.env文件中，切勿提交到公共仓库。
第一步：先让 GPT 把故事想明白
剧本我用 GPT 写。
我的习惯是分三轮，不会拿到第一版就直接开做。
第一轮：先出故事。
直接给它这样的提示词：
我要设计一个创意手绘画，请你设计一个剧本，要求治愈，有吸引力，有传播价值。
让它把故事、场景、角色动作和台词都写出来，先有个完整的版本。
第二轮：让它自己挑刺。
站在挑剔的观众和动画导演的角度，批判一下这个剧本，哪里平淡、哪里不合理、哪里不够让人想转发，然后给我改好的版本。
这一步我建议别省。
有时候第一版看着挺完整，但真的做出来可能会很平，没什么让人想继续看下去的东西。
让它再审一遍，补冲突、调节奏，故事往往会好不少。
第三轮：生成分镜图，预测效果。
根据改好的剧本生成一张分镜图，每个镜头一格，标上远景、中景还是特写，写上画面内容和台词，铅笔线稿加淡水彩的风格。
这样就有了一张漫画格子一样的分镜图。
在正式制作之前，至少能先看清楚故事大概怎么展开，镜头之间有没有问题。
第二步：把剧本交给 Opus5.5
我用的是自己开源的 hand-drawn-storybook-animation skill，链接放在文末。
装好之后，把剧本和分镜图一起发给 Opus5.5，告诉它：
用 hand-drawn-storybook-animation 这个 skill，按这个剧本和分镜做一部手绘水彩动画。
接下来就让它先做一版。
这个 skill 里已经整理了制作流程和画面处理方式。Opus5.5 会根据剧本拆镜头、画场景，再做动画效果。
比如铅笔线慢慢出现，水彩一点点晕开，章节之间用翻页、湿笔刷这些方式转场。
但第一版一般还不是最终效果，我会继续看，然后直接提意见。
我当时说得很简单：
-
节奏有点慢。
-
颜色鲜艳一点。
-
转场不好看。
-
背景音乐太吵了，要治愈一点。
不用每次都写一大段提示词，哪里不满意就说哪里，让它继续改。
这个过程其实有点像当导演：你不一定需要亲手完成每个环节，但得知道自己想要什么，也得判断做出来的东西到底好不好。
第三步：接上豆包配音
接上豆包配音，整个绘本瞬间有了灵魂
之前做出来的画面已经不错了，但加上豆包配音以后，整个故事一下子就有感觉了。
尤其是旁白和角色声音出来的时候，跟单纯看画面完全不一样，故事终于有了情绪和代入感。
我用的是火山引擎的豆包语音，选择 语音合成 2.0 就可以开始尝试了，而且有一定的免费额度，可以先体验一下效果。
配音时，可以根据不同角色设置不同的声音和语气。比如旁白用温柔的讲故事语气，小狐狸用活泼一点的少女音，其他角色则根据性格来设计。
一个小建议：不要让所有角色都用同一种语气。 旁白负责营造氛围，角色声音负责表现性格，配合画面和字幕，整个绘本会生动很多。
接入是先去火山引擎控制台找到语音合成服务，开通之后创建 API Key，再按照项目要求把 Key 配置到 .env 文件里。
注意：.env 文件不要发给 AI，也不要上传到公开仓库。
然后告诉 Opus5.5：
用豆包语音给这部动画配音，旁白用温柔讲睡前故事的语气，小狐狸是活泼的小女孩，小墨怪只发萌萌的叫声，字幕跟声音对上。
剩下的交给它处理。
它会生成配音，并根据实际语音时长调整时间，让画面、声音和字幕尽量对齐。如果某句话比较长，后面的镜头也需要跟着调整。
当然，生成完还是要从头看一遍，尤其注意台词、字幕和画面有没有对上。
安装方法
安装有两种方式：
Claude（claude.ai / 桌面版）
- 下载本仓库的 ZIP 文件（或压缩
hand-drawn-storybook-animation文件夹）。 - 在 Claude 中进入 Customize → Skills → + → Create skill → Upload a skill，选择 ZIP 文件即可。
Claude Code
使用以下命令克隆并复制到 Skills 目录：
git clone https://github.com/lhlGitHub/hand-drawn-storybook-animation-skill.git
cp -r hand-drawn-storybook-animation-skill/hand-drawn-storybook-animation ~/.claude/skills/使用示例
安装完成后，你可以直接向 Claude 提出请求，例如：
- “做一本会自己画画的绘本”
- “给绘本加一章，用豆包配音”
- “Build a self-drawing storybook animation with bilingual subtitles”
Claude 会根据你的指令生成相应的动画绘本。
风险与注意事项
- API Key 安全：豆包配音需要你自己的火山引擎 API Key，务必保存在
.env文件中，不要提交到公共仓库，以免泄露。 - 浏览器性能：由于动画在浏览器中实时绘制，复杂场景可能对设备性能有一定要求，建议在较新的浏览器和设备上使用。
- 依赖外部服务：配音功能依赖火山引擎服务，需要网络连接和有效的 API Key。