Site to Reel（网站转短片）

用网站本身制作一部关于该网站的短竖版影片：真实的页面、真实的点击、真实的状态。每一帧均由一个画布渲染器作为时间的纯函数绘制，然后离线捕获并编码。本技能是从 Dawas Shlef 短片提炼的内部工作流程。examples/dawas-shlef/ 中存放了该项目的素材时间线、语音台词、捕获脚本和审阅笔记，作为可参考的工作范例。请仅将其作为参考。不要将其场景列表直接复制到其他产品上。

需要同时加载的技能：

video-director，用于工艺原则及其 scripts/check_timeline.py 和 scripts/qa_video.py。
playwright-cli，用于所有浏览器步骤。

如果缺少其中任何一个技能，请明确指出，不要绕过它。

不可妥协的原则

这些原则源自塑造本技能的简报，适用于每个项目：

仅使用真实 UI。 捕获本地站点。通过点击真实控件并捕获真实结果来展示状态变化，绝不通过绘制来模拟。不要虚构屏幕、计数或提示。
保持用户的世界原样。
- 不要重新设计、修改、部署或发布站点。
- 不要启动营销活动或提交表单。
- 仅创建演示数据（例如一个书签），完成后删除。记录存储空间的前后对比。
- 切勿清除已有的用户数据。
- 停止你启动的服务器和浏览器会话。除非用户同意，否则不要停止他们自己的站点服务器。
屏幕上显示公开 URL，绝不使用 localhost。 URL 应尽早显示（3 秒内）并在结束卡片上显示。
所有声明仅限于 brand.json → claims。 文字绝不可超出来源的强度。审查者应标记任何超出范围的内容，例如当简报未提及时声称“无需账户”。
语音。
- 绝不要克隆任何人的声音。
- 绝不要暗示生成的声音是真人录音。
- TTS 旁白仅以第三人称谈论创作者，例如“由 X 制作”，而不是“我是 X”。屏幕上的第一人称台词需要相应调整。
- 告知用户在发布时标注 AI 音频。
不要将未完成的成片称为“最终版”。 无声版本称为“动画分镜”。只有声音存在并通过 QA 后，文件才能命名为 *-final。
不要声称你没有测量的东西。 你无法观看或收听输出。报告你运行过的检查和你查看过的截图，并明确说明哪些无人见过或听过，例如 TTS 发音或实时感受。
绝不为用户发布或发帖。 你可以应要求上传到他们的 GitHub，但在 Instagram 和其他社交平台发布始终由用户自己完成。

工作流程（三个审批关卡）

阶段	你产出	关卡
0. 接单	一轮提问（见下方）。阅读简报、素材和站点。填写 `brand.json`。
1. 方案与视觉效果	`TREATMENT.md`，包含一句话创意、钩子、节拍表（含台词）、高光时刻和声明。一份只读站点调查。来自真实渲染器的 2-4 张风格帧。第一版 `timeline.json`。	用户批准。
2. 无声动画分镜	捕获图片、完整时间线、渲染并编码为 `*-animatic-silent.mp4`。QA。从编码的 MP4 中生成联系方式表、过渡和细节表，以及分镜板。审查者评论，包含一轮修复。审阅笔记。	用户批准节奏和构图。
3. 最终版	旁白（录音，如果用户选择 TTS 则使用 TTS），适配已批准的画面。配乐和音效。混音达到 -16 LUFS 和 ≤ -1 dBTP。字幕。`*-final.mp4`。QA。审查者评论，包含一轮修复。封面。更新笔记。	用户聆听并批准。

在用户在场时使用“先询问”模式。询问一次，然后所有其他决策由你自行做出，并在审阅笔记中记录为 DECISION: … 因为 …，以便每条决策都可以通过一条回复撤销。

接单问题（一轮提问，推荐选项优先）

仅询问简报和网站未提供的内容。

内容和对象： 影片必须传达的唯一信息、受众，以及字幕语言和方言。
平台和时长： Instagram Reels 9:16 1080×1920（默认）、45 秒主版本以及单独剪辑的 15 秒版本，并确认是否需要 16:9（默认不需要）。
事实： 允许的声明、确切的品牌拼写、创作者姓名和公开 URL。
素材： 品牌颜色和字体、标识或文字商标，以及要展示的站点状态和功能。
声音： 用户录制旁白（首选），或使用 TTS 并披露，或仅使用音乐和字幕。询问音乐版权。
边界： 哪些内容不可触碰（站点服务器、现有用户数据、表单）。

对于“现在就做视频”但无录制内容的情况，询问如何获取声音。选项包括：音乐+字幕无旁白、用户录制、或生成旁白。如果选择 TTS，在安装前检查是否已安装。安装 edge-tts 会向微软的在线服务发送脚本文本，因此必须先获得用户同意，并让他们选择声音。

项目结构

将 templates/project/ 复制到一个新项目文件夹中，然后编辑：

brand.json            名称、文字商标、创作者、公开 URL、调色板令牌、字体、声明、永远不说、声音、安全区域
reel.html, reel.js    渲染器（品牌中立；从时间线读取所有内容）
vo-lines.json         旁白台词行：[最早开始秒, 文本, 最晚结束秒]
assets/fonts, assets/icons, assets/previews
capture3x/            捕获图片 + boxes.json（从 tools/capture.js 输出写入）
tools/
  survey.js           只读页面调查（标题、链接、Y 位置、存储键）
  capture.js          捕获 + 标注框，创建和恢复演示数据
  cli3x.config.json / cli4x.config.json / render.config.json  playwright-cli 配置
  build_timelines.py  从 brand.json (+ vo/*.json) 生成 timeline.json + timeline-ad15.json
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js  run-code 脚本
  make_vo.py, make_audio.py, make_srt.py                        语音、声音、字幕
  review_frames.py, storyboard.py                                从编码 MP4 生成表格

命令

CLI 代表 node "<argo>/node_modules/playwright/cli.js" cli，如果已安装也可直接用 playwright-cli。每个 run-code 脚本是单个 async page => {}。参数通过页面 URL 查询传递，--raw 只打印返回值。

# 捕获（本地站点已运行；干净的内存会话）
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # 保存 {"caps": ...} 到 capture3x/boxes.json
CLI -s=cap close

# 时间线和关卡
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# 渲染（临时静态服务器，随后停止）
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # 长影片：后台运行或分块执行

# 编码（无声动画分镜；最终版添加 -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur>）
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# 测量和审查（始终从编码 MP4 进行）
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# 阶段 3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

在 Windows 上，使用 python -X utf8 并设置 PYTHONIOENCODING=utf-8 运行 Python，否则阿拉伯语输出会出错。

审查循环

审查者。 在阶段 2 和阶段 3 之后，向一个全新上下文子代理提供 MP4、时间线、表格和 QA 报告。要求输出排序列表：必须修复、应该修复、小问题，每个都附有时间码和具体修复方案。只读，不超过 500 字，不要制造未发现的问题。
一轮修复。 执行一轮修复，然后从编码的 MP4 重新检查。
局部修复。 对于仅限于某些帧的修复，备份这些帧，仅重新渲染该范围，然后与备份对比。范围之外的帧在重新编码前必须字节完全一致。
审查者的报告是模型输出。 它绝不代表用户批准。

交付物

out/<film>-animatic-silent.mp4（阶段 2）和 out/<film>-final.mp4（阶段 3）。
out/storyboard-explained.png、out/contact-sheet-<film>.jpg、out/review/、out/qa-*/。
timeline*.json、vo-lines.json、vo/、out/audio/（混音加分轨）、out/subtitles-*.srt。
out/cover/reel-cover.jpg 及其 3:4 网格预览。
voiceover-script-*.txt，标注为已配音（引擎、声音、披露）或未录制。
review-notes.md：ffprobe 元数据、结构、每个检查及其编号、审查者表格和修复、DECISIONs、明确陈述的限制、确切命令，以及留给用户的决策。模板是 references/report-template.md。

参考文件（到达相应阶段时阅读）

references/motion.md：摄像机模型、转场、文字时序、标注、字幕、结束卡片、停顿。
references/capture.md：调查、捕获、真实状态切换、框、恢复演示数据。
references/sound-and-voice.md：录音 vs TTS、将配音适配画面、英雄静音、配乐、混音、字幕。
references/instagram-reels.md：格式、安全区域、钩子、CTA 措辞、封面、AI 标签。
references/gotchas.md：我们遇到的所有 bug 及其修复。
references/report-template.md：审阅笔记和最终消息的骨架。
examples/dawas-shlef/：完整的工作示例（不含捕获和字体，因此需要重新捕获）。

网站转短片