HTML → 视频：多种方案、择优、最终合成
Claude 最擅长 HTML/CSS 设计。因此视频的制作方式如下：用 HTML 编写动画，渲染成视频，通过肉眼观察结果（帧），比较不同方案并进行优化。
要求
node+playwright（含 Chromium）、ffmpeg。检查：bash scripts/check-env.sh。
快速开始
cp references/template-scenes.html work/<名称>/v1.html # 场景引擎模板
node scripts/render.mjs work/<名称>/v1.html --preset vertical-preview --duration 20 --out work/<名称>/v1.mp4
references/engine.js— 场景引擎：背景、高亮字幕（*单词*）、进度条、转场、缓动（E.pop、E.type、E.set）。references/parts.js— 部件：吉祥物P.bot、图标P.icon、macOS 窗口P.win、聊天气泡。references/design-notes.md— 让视频“生动”的关键要素（故事情节、钩子、节奏、字幕）。在编写方案前请先阅读。- 示例成品视频：
examples/（claude-ad— 16:9；chatgpt-ad— 9:16，25 秒；duolingo-ad— 9:16，40 秒，60 fps，有剧情和演示；claude-self-ad— 9:16，39 秒，60 fps，Claude 的自我宣传，带有元转折）。 - 文件大小：40 秒 / 60 fps 视频 ≈ 10 MB；如需更小体积，可使用
--fps 30或重新编码：ffmpeg -i in.mp4 -crf 24 out.mp4。
主要质量原则
-
展示，而非告知。 视频中的任何主张都应通过场景来证明，而不是单纯显示文字。
主张 应展示的内容 “能写代码” 打印请求，然后逐行显示代码 “解释清晰” 显示真实错误（“she drink”），高亮并显示规则“+s”，配有猫头鹰解释 “实践教学” 手指点击单词，短语组合，显示绿色“正确！”面板 “连续 346 天” 计数器从 1→346 并带火焰效果，日历波浪式填充，通知，祝贺并伴有彩花 “游戏” 排行榜，主角行升至第 1 名，并显示 +XP -
描述正在发生的事。 每个场景包含两层文字：上方小标题标签（
<div class="kick">：“课程”、“排行榜”）和下方字幕，其中关键单词高亮（cap: '清晰讲解*错误*'）。完整句子优于单个标语。 -
流畅性。 最终渲染采用 60 fps。所有内容应连续变化：弹性入场（
E.spring、E.pop）、缓慢镜头推进（cam: [1, 1.05]）、吉祥物晃动、眨眼（P.blink）、手指点击带涟漪（P.touch）、计数器（E.count）、circle/wipe/left等转场效果。连续静态画面不应超过约 0.5 秒。 -
情节结构： 钩子（痛点/幽默）→ 演示 → “核心优势” → 高潮（奖励/结果）→ 行动号召。广告片长 30–45 秒。
-
三种方案代表三种不同思路，而非三种配色方案（例如：“连续计数器”、“实时课程”、“与吉祥物对话”三种不同思路）。最终版本将从所有方案中选取最佳场景进行合成。
流程
1. 简报
明确（或选择合适的默认值）：主题/文案、目标受众、时长（广告 20–30 秒，故事片最长 60 秒）、格式（默认竖屏 1080×1920 适用于 Reels/Shorts/TikTok；1920×1080 和 1080×1080 按需设置）、fps（30）、风格、颜色/字体。制定简短分镜：钩子 → 问题 → 解决方案 → 演示 → 行动号召。品牌广告不使用官方 Logo，而是绘制自己的吉祥物。
2. 三套或以上不同的方案
创建工作目录 work/<名称>/，并在其中创建 v1.html、v2.html、v3.html（可更多）。方案应在概念上有所区别，而非细节差异。例如：（a）吉祥物故事，（b）产品卡片演示，（c）快速剪接配上大号字体排版。不同的构图、配色、节奏。每个文件应为自包含 HTML（无外部加载，字体使用系统字体或内嵌）。动画规则见 references/animation-contract.md；起始模板见 references/template.html。
3. 渲染每个方案
方案使用预览分辨率（快速渲染），最终版本使用全分辨率：
node scripts/render.mjs work/<名称>/v1.html --out work/<名称>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<名称>/final.html --out work/<名称>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]
渲染为确定性的且可并行（根据 CPU 核心数）：每帧手动设置时间，无需担心丢帧或卡顿。--from 5 --to 9 仅渲染片段。单帧截图（无视频）：node scripts/frame.mjs v1.html 3.5,7 work/<名称>/frames --width 540 --height 960。
4. 分析 — 必须通过肉眼观察
bash scripts/contact-sheet.sh work/<名称>/v1.mp4 work/<名称>/v1-sheet.png 12
打开 *-sheet.png 并通过 Read 查看单帧（图像可被视觉读取）。依据 references/rubric.md 进行评估（8 个标准，每项 5 分，总计 40 分）：可读性、层次结构、节奏、流畅度、平衡性、完整性、与简报的符合度。对于每个方案，记录：每项得分、最佳表现点、最弱表现点。仅凭帧上所见内容进行评估，而非代码。如有任何不明确之处，可生成更密集的帧或特定时间点的帧：bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>。
5. 选择最佳方案并进行合成
- 根据总分选出最佳方案。
- 列出“借鉴点”：从其他方案中提取的具体优秀设计（例如，“v2 的排版” 、“v3 的入场动画” 、“v1 的配色”）。
- 以最佳方案为基础创建
final.html，并应用这些借鉴的改进。同时修复最佳方案的薄弱环节。
6. 迭代与最终验证
渲染 final.mp4，再次生成联系表，与最佳方案进行比较。如果最终版本在评分上未优于最佳方案，则继续修改（最多 3 次迭代）。然后向用户展示结果：final.mp4 路径、各方案评分简表以及每项改进的来源。
7. 添加音频（可选）
ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4
规则
- 不要复制品牌吉祥物和 Logo：绘制自己的角色，品牌名称仅以文字形式出现。
- 不可跳过第 4 步：决策基于看到的帧，而非猜测。
- 所有工件均放入
work/目录（已在.gitignore中），只向仓库提交技能和示例。 - 如果 Chromium/ffmpeg 不可用，请直接说明，不要模拟结果。