[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95908":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":14,"starSnapshotCount":14,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},95908,"hand-drawn-explainer-video-nikola","hi-nikola\u002Fhand-drawn-explainer-video-nikola","hi-nikola","中文手绘知识讲解视频 Codex Skill：逐笔故事、双语义岛、让怪诞小黑动起来与程序动画",null,"Python",142,14,102,0,39,3.53,"Apache License 2.0",false,"main",true,[22,23,24,25,26],"chinese","codex-skill","explainer-video","hand-drawn-animation","whiteboard-animation","2026-09-21 02:04:29","# Hand-drawn Explainer Video Nikola\n\n作者 Nikola｜联系与交流：[X \u002F Twitter @Nikola314159](https:\u002F\u002Fx.com\u002FNikola314159)\n\n一个面向中文知识讲解的 Codex Skill：把主题、文稿或 SRT 制作成“讲一部分、画一部分”的手绘视频，并交付真实 MP4、字幕、时间轴和可编辑素材。\n\n这应该是目前手绘漫画效果最好的skills仓库了，我参考了许多大佬的方法，尝试了多次完成，TOKEN都要给我整完了。希望各位朋友喜欢，有问题直接推特留言或者提pr吧，未来也会持续维护这个仓库，并更新更多的功能。\n\n过程示例：\n\n![乔布斯案例过程帧](examples\u002Fstroke-story\u002Fsteve-jobs\u002Ftransition-contact.jpg)\n\n## 它能做什么\n\n本 Skill 只有两条制作路线。画面结构与视觉风格是逐笔路线中的可组合选项，不是额外路线：\n\n```text\n制作路线\n├─ 逐笔故事动画\n│  ├─ 画面结构：单场景 \u002F 多幕故事 \u002F 左右双语义岛\n│  └─ 视觉风格：Q版人物 \u002F 小黑风格 \u002F 其他手绘风格\n└─ 程序动画\n   ├─ HTML \u002F SVG \u002F GSAP\n   └─ 流程卡片 \u002F 关系图 \u002F 精确文字 \u002F 知识图形\n```\n\n“左右双语义岛”是逐笔故事动画的一种画面组织方法：先画左边、讲完一部分，再画右边，并保留前面的内容。也可以使用单场景或多幕连续故事。Q 版人物与小黑风格是视觉风格：前者适合乔布斯传记、历史人物等，后者适合抽象观点、方法论和隐喻；两者都能使用双语义岛，也都能使用其他画面结构。\n\n除此之外，本 Skill 也能只输出 Flow、Nano Banana 或其他图像\u002F视频模型的自包含提示词；这是交付范围，不是第三条制作路线。\n\n这个仓库不把“手绘风静图平移”冒充逐笔绘制。逐笔路线使用内置的 MIT 后端，并在最终交付前检查真实视频、音轨、字幕、场景边界和末帧。\n\n## 路线怎么选\n\n| 你说的话 | 默认路线 |\n|---|---|\n| “边讲边画”“一笔一笔画出来”“笔尖跟着线走” | 逐笔故事 |\n| “先画左边，再画右边，过程中写关键词” | 逐笔故事 + 左右双语义岛画面结构 |\n| “小黑、怪诞、白底、少量彩色批注” | 逐笔故事 + 小黑视觉风格 |\n| “流程卡片、关系图、精确标签、独立元素运动” | 程序动画 |\n| “只给我生图\u002F图生视频提示词” | 提示词模式 |\n\n完整风格说明见 [docs\u002FSTYLES.md](docs\u002FSTYLES.md)。\n\n## 案例\n\n### 《约法三章》：16:9 多幕逐笔故事动画\n\n![约法三章七幕末帧检查](examples\u002Fstroke-story\u002Fyuefa-sanzhang\u002Fseven-scenes-final-frames.jpg)\n\n![约法三章手速检查](examples\u002Fstroke-story\u002Fyuefa-sanzhang\u002Fhand-speed-contact-sheet.jpg)\n\n- [38.5 秒 16:9 手速平滑版 MP4](examples\u002Fstroke-story\u002Fyuefa-sanzhang\u002Fyuefa-sanzhang-16x9-stroke-story.mp4)\n- [可编辑工程包](examples\u002Fstroke-story\u002Fyuefa-sanzhang\u002Feditable-project.zip)\n- [七幕结构、时间轴与验证说明](examples\u002Fstroke-story\u002Fyuefa-sanzhang\u002FREADME.md)\n\n这是最终采用的优秀版本：七幅连续故事画面，每幕从空白纸张开始逐笔落墨，每幅只承载一个完整事件。旧的 9:16 单画布样片存在人物、道具和环境线条互相干扰的问题，因此不作为仓库推荐案例。\n\n### 乔布斯的一生：自然肤色 Q 版人物 + 双语义岛\n\n![逐笔源图](examples\u002Fstroke-story\u002Fsteve-jobs\u002Fsource.png)\n\n![区域预览](examples\u002Fstroke-story\u002Fsteve-jobs\u002Fregions-preview.png)\n\n- [完整 57 秒样片](examples\u002Fstroke-story\u002Fsteve-jobs\u002Fsteve-jobs-biography.mp4)\n- [8.9 秒双岛代表镜头](examples\u002Fstroke-story\u002Fsteve-jobs\u002Fsemantic-island-sample.mp4)\n- [源图、区域与时间说明](examples\u002Fstroke-story\u002Fsteve-jobs\u002FREADME.md)\n\n### “什么是 Skill”：程序动画\n\n![什么是 Skill 程序动画封面](examples\u002Fprogram-animation\u002Fskill-demo\u002Fpreview.png)\n\n- [14 秒真实 MP4 样片](examples\u002Fprogram-animation\u002Fskill-demo\u002Fwhat-is-skill-sample.mp4)\n- [可编辑 HTML\u002FSVG\u002FHyperFrames 工程与说明](examples\u002Fprogram-animation\u002Fskill-demo\u002FREADME.md)\n\n这个案例展示流程卡片、人物动作、字幕和真实旁白时间轴。出于第三方许可考虑，GSAP 浏览器文件不直接提交，由 `npm install` 获取。\n\n《商用Skills_完整手绘视频》是程序化知识图形路线的完整生产案例：44 个场景中的人物、卡片、箭头、放大镜、字幕条等均作为独立 HTML\u002FSVG 元素编排，再由 GSAP\u002FHyperFrames 按真实旁白时间轴驱动。仓库中的 36 秒工程是便于下载和学习的精简公开示例，不包含那条 7 分 29 秒完整成片。\n\n它与“边说边画”不是同一种实现：\n\n| 对比项 | 程序化知识图形 | 逐笔“边说边画” |\n|---|---|---|\n| 画面如何出现 | 独立卡片、人物、箭头和文字按时间移动、缩放、切换或描边 | 同一画布按语义区域持续落墨，先线稿后补色，已画内容保留 |\n| 核心技术 | HTML\u002FSVG + GSAP + HyperFrames | 位图线稿提取 + skeleton\u002Fstream 连续笔迹 + 分区遮罩 |\n| 最适合 | 流程、规则、关系、对比、精确文字 | 人物故事、历史叙事、白板讲解、一幅画逐步完成 |\n| 不可混称 | 手绘风元素动画不等于真实逐笔绘制 | 不能用整图淡入、卡片飞入或 SVG 运动冒充落墨 |\n\n## 配音默认\n\n成片默认使用火山引擎语音合成的刘飞音色 `zh_male_liufei_uranus_bigtts`，资源模型为 `seed-tts-2.0`。用户明确指定时，可以改用火山引擎中的其他已授权音色；已有与文稿一致、质量合格的旁白则优先复用。\n\n在火山引擎控制台进入“开通管理”，开通豆包语音的“语音合成 2.0”服务：\n\n![火山引擎豆包语音合成 2.0 开通位置](docs\u002Fassets\u002Fvolcengine-seed-tts-2-setup.png)\n\n不建议把电脑系统朗读、edge-tts 或其他低质量本地文本转语音自动当作成片替代方案，它们与已验证的刘飞听感差异明显。若当前环境没有火山引擎授权或用户提供的合格音轨，应保留已完成的画面、字幕与时间轴并说明配音缺口，不应静默换成系统声音后宣称完成。详见 [配音与声音对齐](references\u002Fvoiceover.md)。\n\n## 安装\n\n最简单的方式是让 Codex 安装此仓库，或手动克隆：\n\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fhi-nikola\u002Fhand-drawn-explainer-video-nikola.git \"$env:USERPROFILE\u002F.codex\u002Fskills\u002Fhand-drawn-explainer-video-nikola\"\npython \"$env:USERPROFILE\u002F.codex\u002Fskills\u002Fhand-drawn-explainer-video-nikola\u002Fscripts\u002Fsetup_check.py\"\n```\n\n提示词模式到这里即可使用。运行脚本需要 Python 3.10+；Windows 若默认 `python` 较旧，请改用 `py -3.12` 或已确认的新版本解释器。逐笔视频首次使用还需：\n\n```powershell\ncd \"$env:USERPROFILE\u002F.codex\u002Fskills\u002Fhand-drawn-explainer-video-nikola\"\npython vendor\u002Fsrt-whiteboard-animation\u002Fscripts\u002Fprepare_env.py\npython scripts\u002Fstroke_story_preflight.py --report preflight-stroke-story.json\n```\n\n完整 MP4 需要 FFmpeg\u002FFFprobe；程序动画需要 Node.js、浏览器和 HyperFrames。详见 [安装](docs\u002FINSTALL.md)、[配置](docs\u002FCONFIGURATION.md) 和 [排错](docs\u002FTROUBLESHOOTING.md)。\n\n逐笔核心渲染不需要下载本地神经网络小模型或模型权重，也不要求 GPU；已有合格源图\u002F线稿和旁白时，可以使用本地传统图像算法完成。首次安装 Python\u002Fnpm 依赖需要联网，从文稿生成新插画或新合成刘飞配音则需要相应外部服务。\n\n## 直接可用的触发提示词\n\n```text\n使用 $hand-drawn-explainer-video-nikola，把下面内容做成 45 秒中文手绘讲解视频。讲一部分画一部分，先画左边再画右边，重要结论用准确关键词后期写出；使用自然肤色 Q 版人物，先做代表镜头验证，再交付真实 MP4、SRT、时间轴和可编辑素材。\n```\n\n```text\n使用 $hand-drawn-explainer-video-nikola，用小黑风格解释这个方法：纯白背景、稀疏黑线、少量红橙蓝批注。要真实逐笔落墨，不要只做静图缩放；字幕和关键词必须准确。\n```\n\n```text\n使用 $hand-drawn-explainer-video-nikola，把这段内容做成手绘风流程卡片动画。使用可编辑 SVG\u002FHTML，所有标题、数字和箭头关系必须确定性生成，并验证最终 MP4。\n```\n\n## 目录\n\n- `SKILL.md`：触发说明与总工作流；\n- `references\u002F`：逐笔、双语义岛、程序动画、声音和质量规范；\n- `scripts\u002F`：预检、配音辅助、最终合成和验证；\n- `vendor\u002Fsrt-whiteboard-animation\u002F`：带来源说明的 MIT 逐笔运行时，不含第二个 Skill；\n- `examples\u002F`：公开样片、源图和可编辑工程；\n- `docs\u002F`：安装、配置、架构、风格和排错。\n\n## 安全与费用\n\n仓库不含 API Key、Token、Cookie、个人绝对路径或私有模型。云配音、生图和视频服务都是可选能力，可能收费；请先 Dry Run、复用内容匹配的缓存，并避免在结果未知时盲目重试。漏洞和凭据泄露报告见 [SECURITY.md](SECURITY.md)。\n\n## 许可\n\nSkill、原创脚本与文档使用 [Apache License 2.0](LICENSE)。`vendor\u002Fsrt-whiteboard-animation\u002F` 保留上游 MIT 许可。示例媒体按 [CC BY 4.0 媒体说明](LICENSE-MEDIA.md) 提供（仅限作者有权许可的部分）。第三方软件、人物姓名、产品名和商标不因此获得再许可，详见 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)。\n\n欢迎阅读 [CONTRIBUTING.md](CONTRIBUTING.md) 后提交新的风格预设、回归用例或渲染改进。\n\n## 致谢\n\n感谢以下开源项目及其作者分享思路、代码和可复用经验；本仓库只在各自许可与说明范围内借鉴或使用，具体代码来源边界见 [第三方说明](THIRD_PARTY_NOTICES.md)。\n\n- [kaomei\u002Fhand-drawn-video-prompts](https:\u002F\u002Fgithub.com\u002Fkaomei\u002Fhand-drawn-video-prompts)：中文口播分镜、Q 版蜡笔视觉规范与提示词工作流；\n- [geeklee\u002Fsrt-whiteboard-animation](https:\u002F\u002Fgithub.com\u002Fgeeklee\u002Fsrt-whiteboard-animation)：SRT 语义分区、持续画布与 stream 连续笔迹；\n- [gnipbao\u002Fstory-to-handdrawn-video](https:\u002F\u002Fgithub.com\u002Fgnipbao\u002Fstory-to-handdrawn-video)：故事到手绘漫画、线稿\u002F彩图配合与风格组织；\n- [ChenShuo2004\u002Fcs-board](https:\u002F\u002Fgithub.com\u002FChenShuo2004\u002Fcs-board)：完整白板视频工作台、骨架笔迹与生产流程方面的实践；\n- [heygen-com\u002Fhyperframes-launches](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes-launches)：HyperFrames 程序动画的镜头与合成范例；\n- [Vincentwei1021\u002Fvideo-shotcraft](https:\u002F\u002Fgithub.com\u002FVincentwei1021\u002Fvideo-shotcraft)：可复用镜头结构与程序化视频编排思路。\n- [helloianneo\u002Fian-xiaohei-illustrations](https:\u002F\u002Fgithub.com\u002Fhelloianneo\u002Fian-xiaohei-illustrations)：感谢 Ian 开源“小黑”视觉 IP 与配图 Skill；本仓库的小黑风格借鉴了其黑色实心小角色、白点眼、纯白手绘、大量留白和少量红橙蓝批注的视觉语言。\n\n向每一位愿意公开工具、案例和踩坑经验的创作者表示感谢。\n","这是一个面向中文知识传播的自动化手绘讲解视频生成工具，基于 Codex 技能框架，支持将文稿或字幕（SRT）转化为两种核心形态的视频：一是“逐笔故事”动画（边讲边画、保留已绘内容），支持单场景\u002F多幕\u002F左右双语义岛等画面结构及Q版人物、小黑风格等视觉选项；二是“程序动画”，通过 HTML\u002FSVG\u002FGSAP 实现流程图、关系图、精确文字标签等可编程知识图形。项目内置 MIT 后端验证真实笔迹过程，交付含音轨、字幕、时间轴和可编辑素材的完整 MP4。适用于教育科普、课程制作、知识卡片转化等需强叙事性与手绘表现力的中文内容场景。",2,"2026-09-06 02:30:03","CREATED_QUERY"]