一句话：这是一个 Claude Skill —— 让 AI 在浏览器里现场画出一本会自己动的手绘水彩绘本：画面一笔笔画出来、镜头有分镜、翻页像翻真的纸、配乐是生成的、旁白用豆包语音、还带中英双语字幕。全片是实时绘制，不是预渲染视频。
五个”真的会动”的瞬间
下面全是这个 Skill 做出来的效果——画面在浏览器里实时画出来，不是导出好的视频。素材来自仓库 previews/（已压缩转存）。
它到底是什么
一个 Claude Skill（技能包），装进 Claude 里，给一句话就能开工，比如”做一本会自己画画的绘本”或”给绘本加一章，用豆包配音”。
产出物是一整套网页动画：React + TS + 自研 Canvas/SVG 引擎，用 esbuild 打成单文件。参考实现叫 The Living Storybook《追星星的小狐狸》。
关键点：它不是”生成一段视频给你下载”，而是浏览器实时绘制——每一帧都是代码画出来的。所以观众能做的事很朴素：开始、暂停/继续、声音、重播、跳章。
核心能力
1. 画面自己画出来
分层场景（Plate 景深层）：sky .12 / far .35 / back .62 / mid 1 / actors 1 / fore 1.38，纵向视差系数 ≈0.12。水彩、钢笔线、米色纸分开渲染，用 1–3 秒的”多笔扫出”（reveal）把画面画出来。
2. 镜头是设计过的，不是匀速平移
每章 4–7 个设计过的镜头（远/中/特写/插入），禁止用一个匀速平移撑一整章。每章有起因/发展/意外/高潮/收尾，且开头 5 秒内必须出主角 + 悬念，至少一次惊人的视觉变化。
3. 转场像翻一本真书
- 章与章：卷边翻页 → 纸上印出章节卡（至少停 1.5s）→ 纸淡出，下一章在白纸上重新画出；
- 同章换场景：canvas 湿笔刷毛边擦除；
- 高潮收尾：金光铺满 → 章节卡 → 化开；
- 纸页撕裂/穿越：冻结旧页 + 挖洞 + 纤维卷边，镜头推进穿洞，后面是新世界。
4. 生成式治愈配乐
毛毛钢琴（正弦 + 轻八度，快起慢收），每拍至多一个音、五声音阶级进、常留空；暖长音垫底、卷积长混响代替回声。音乐音量 ≈0.2，有人声时自动压到 0.42——配音永远优先于音乐。
5. 豆包语音配音 + 中英双语字幕
配音走火山引擎语音合成 2.0（X-Api-Resource-Id: seed-tts-2.0）：
- 中文旁白用一个温柔女声，语速慢、Pitch 微调；
- 小狐狸的英文对白同一音色，靠
context_texts语气描述 + pitch 区分角色； - 小墨怪还有一套叫声样本库（
v-boop / v-eep / v-giggle / v-squeak…）； - 字幕上英下中，按音频真实起止时间显示；时间轴 cue 挂在每句台词上，跟随真实音频，暂停时音频也暂停。
值钱的其实是一堆”真坑”
这个 Skill 最特别的地方，是它把工程里踩过的坑写进去了（不是空泛的”最佳实践”）：
- 水彩低 alpha 叠层会偏紫：8 位预乘 alpha 会把绿通道舍入成 0。解法是合并淡层
k=ceil(MIN_ALPHA/alpha)、alpha'=1-(1-alpha)^k，再用像素值判断（R>G 且 B 高 = 偏紫）。 - 内联 JS 必须用函数形式
.replace('</body>', () => ...)，否则压缩代码里的$'、$&会被当成替换模式，直接白屏。 - 浏览器语音兜底：
speak前先speechSynthesis.resume()，否则暂停过会吞句。 - 验证要真跑：Playwright 无头 Chromium 逐章截图 + 快进连拍转场；无头帧率低，结果以”故事时钟”为准；而且明说”自己听不到声音，要如实标注未试听、未在真机确认”。
怎么装、怎么用
Claude（网页 / 桌面）：把仓库下成 ZIP → Customize → Skills → + → Create skill → Upload a skill → 选 ZIP。
Claude Code：
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/
然后直接说需求：”做一本会自己画画的绘本”、”给绘本加一章，用豆包配音”、”Build a self-drawing storybook animation with bilingual subtitles”。
前提与分寸（诚实项）
- 豆包配音要你自己的火山引擎 API Key，放在项目根目录的
.env里，别提交到仓库；Skill 明确要求”不假装生成过音频、不虚构 API 调用”，密钥只走环境变量。 - 它不是一键出片：流光水彩、分镜、配音都按流程来；扩展已有项目时强调”先读全引擎，不重建、不改前面章节”，保持角色造型与画风一致。
- 仓库很新（2026-10-16 创建），Star 不多，属于早期项目——当参考实现和学习材料用没问题，当生产级框架要自己再掂量。
适合谁
- 想做”故事书动画 / 绘本短视频”，又不想一帧帧手画、逐条剪辑的人；
- 研究 AI 动画、浏览器实时绘制、以及”让 coding agent 做创意”的开发者——它把一套完整的创作方法论和踩坑清单都摊开了。
