YouTube 图文实操手册 Skill

把 YouTube 教程视频整理成一份可以边看边操作的图文手册。

它不是“视频总结器”。它的目标是把视频变成：

• 可保留的 Markdown
• 可直接阅读的 HTML
• 可分享的 PNG 长图
• 可打印/归档的 PDF
• 带截图、时间点、操作步骤、注意事项的图文操作卡

适合什么场景

• 你看到一个 YouTube 教程，想边看边跟做
• 你希望视频里的每个阶段都变成图文步骤
• 你想把视频教程沉淀成自己的学习资料
• 你希望把学习记录分享给别人，让别人不用反复拖进度条

效果演示

本仓库内置了这次真实案例：

视频：I Made Vox-Style Motion Graphics Using Only Claude Code & Remotion

演示文件在：

• examples/vox-remotion/guide.html
• examples/vox-remotion/guide.md
• examples/vox-remotion/guide.png
• examples/vox-remotion/guide.pdf

打开 examples/vox-remotion/guide.html 可以看到完整效果。顶部有：

• 复制图文
• 下载 .md
• 下载 .png
• 下载 .pdf

安装方式

Codex

把 youtube-practice-guide 文件夹复制到：

~/.codex/skills/youtube-practice-guide

Windows 常见路径：

C:\Users\<你的用户名>\.codex\skills\youtube-practice-guide

然后在 Codex 里说：

Use $youtube-practice-guide，把这个 YouTube 视频做成图文实操手册：https://youtu.be/xxxx

Claude Code

把 youtube-practice-guide 文件夹复制到你的 Claude Code skills 目录。

常见用法：

Use $youtube-practice-guide，把这个 YouTube 教程变成可跟做的 HTML/Markdown 图文手册：https://youtu.be/xxxx

WorkBuddy / 其他 Agent

如果你的工具支持 SKILL.md，把 youtube-practice-guide 整个文件夹作为一个 skill 导入。

如果不支持 skill 系统，也可以直接把 youtube-practice-guide/SKILL.md 的规则和 scripts/ 里的脚本交给 Agent 使用。

依赖

Python 依赖：

python -m pip install yt-dlp imageio-ffmpeg pillow webvtt-py

如果要导出 PNG / PDF，还需要 Node.js + Playwright：

npm install playwright
npx playwright install chromium

在 Codex 或其他托管 Agent 中，如果系统没有 python、node、ffmpeg，让 Agent 使用自带运行时即可。

基本流程

1. 采集视频素材

python youtube-practice-guide/scripts/collect_youtube.py "https://youtu.be/VIDEO_ID" --out work/video-guide

生成内容包括：

• metadata.json
• transcript_by_chapter.md
• contact_sheet.jpg
• guide.assets/ 截图文件夹

2. 让 Agent 写 guide.md

把 metadata.json、transcript_by_chapter.md、contact_sheet.jpg 和截图交给 Agent。

要求它严格按照 youtube-practice-guide/references/output_contract.md 写 guide.md。

3. 渲染 HTML

python youtube-practice-guide/scripts/render_guide.py work/video-guide/guide.md --html work/video-guide/guide.html

4. 导出 PNG / PDF

node youtube-practice-guide/scripts/export_html.cjs --html work/video-guide/guide.html --png work/video-guide/guide.png --pdf work/video-guide/guide.pdf

5. 把 PNG / PDF 嵌回 HTML 下载按钮

python youtube-practice-guide/scripts/render_guide.py work/video-guide/guide.md --html work/video-guide/guide.html --download-png work/video-guide/guide.png --download-pdf work/video-guide/guide.pdf

输出规则

最终手册必须包含：

• 中文翻译后的视频标题
• 原视频标题
• 来源、作者、时长
• 小结
• 按视频顺序排列的截图操作卡
• 每张图下方有图注
• 每张图后面有“马上操作”和“注意”

不要包含：

• 推荐截图
• 阶段产物
• 跟做清单
• 对照操作总表
• 这类视频以后应该怎么自动记
• 看图确认
• 截图 1 / 截图 2 / 截图 3

这些规则已经写入 youtube-practice-guide/references/output_contract.md。

许可

MIT。你可以自由使用、修改、二创和再发布。