Jacky Motion

科普动画导演

把口播稿变成可录屏的 16:9 信息动画 HTML。信息表达驱动一切——布局服务于信息层次，动画服务于信息节奏。

流水线（6 阶段，3 确认门）

口播稿 → [审稿] →⏸→ [分镜] →⏸→ [锁风格] →⏸→ [生成HTML] → [验收] → [配音录制] → 交付

Phase 1：审稿

按 [script-audit.md](references/script-audit.md) 的 6 条标准检查 → 输出：通过 / 轻改 / 重写。 停止，等用户确认。

Phase 2：分镜

按口播自然段落拆节拍，数量由内容决定，不设上限。每个节拍填表：

节拍 | 口播摘要 | 核心信息(1句) | 信息结构 | 视觉动词 | 屏幕文字

停止，等用户确认。 硬约束：每个节拍必须有视觉动词；核心信息只能一句话；屏幕文字必须短于口播。

Phase 3：锁风格 + 构图

推荐风格 → 读 [styles/{ID}.md](styles/) → 为每个节拍描述构图方案。输出：

风格：[ID]
Beat 1 → 构图：[描述] → 核心元素：[列表] → 4段编排简述
Beat 2 → ...

停止，等用户确认。全片单一风格，不可混搭。

Phase 4：生成 HTML

1. 读风格模板 [assets/templates/{ID}.html](assets/templates/) 获取 CSS 变量和组件类
2. 为每个 beat 编写独立 CSS 类（如 b1-left, b2-grid）和独立 GSAP 动画
3. 每个 beat 按 4 段式设计镜头编排
4. 输出单文件 .html
5. HTML 中预留音频钩子：advance() 和 showBeat() 函数结构支持后续注入 playStepAudio()，无需重写导航逻辑

Phase 5：验收

按 [quality-check.md](references/quality-check.md) 检查 → 不通过自动修复。

Phase 6：配音录制

验收通过后询问用户选择配音方式：

• 选项 A：自行配音 → 用户用 OBS/QuickTime 全屏录制 HTML，自己配音，流程结束。
• 选项 B：TTS 配音 → 进入 TTS 合成流程（见下文），输出带音频的自动播放 HTML，用户录屏即可。

---

TTS 合成流程（Phase 6B）

轻量级 TTS 流水线，无 npm，单文件 HTML + 外部 mp3 文件夹。

前置检查

检查 mmx CLI 是否可用：

mmx auth status

如果未安装，提示用户三选一：

1. 安装 MiniMax CLI：npm install -g mmx-cli && mmx auth login --api-key （推荐，中文效果好）
2. 改用其他 TTS（OpenAI TTS / Edge TTS 等）——AI 修改合成脚本适配
3. 跳过 TTS，回退到选项 A 自行配音

Step 1：提取口播文本

从分镜表提取每个步骤（step）的口播文本，生成 audio-segments.json：

[
  {"beat": 1, "step": 0, "text": "口播文本…", "file": "audio/b1-s0.mp3"},
  {"beat": 1, "step": 1, "text": "口播文本…", "file": "audio/b1-s1.mp3"},
  {"beat": 2, "step": 0, "text": "口播文本…", "file": "audio/b2-s0.mp3"}
]

规则：

• 多步节拍（data-steps）拆成多条，每步一段音频
• 空文本跳过，不生成音频
• 文件放在 HTML 同目录的 audio/ 文件夹

Step 2：合成音频

逐条调用 TTS，串行执行避免限频：

mkdir -p audio
for each segment in audio-segments.json:
  mmx speech synthesize --text "$text" --out "$file"

已存在的 mp3 自动跳过（安全重跑）。加 --force 强制重新合成。

Step 3：注入音频到 HTML

在已生成的 HTML 中做两处修改：

1) 给每个 step 标注音频路径：

在每个 .beat 上添加 data-audio-map 属性，值为 JSON：

单步节拍（无 data-steps）：

2) 添加播放模式切换 + 音频控制器脚本：

// 三种模式：manual / audio / auto
// manual: 原始手动翻页，无音频
// audio: 播放音频，但手动翻页
// auto: 播放音频 + 音频结束自动翻页
//
// 切换方式：按 M 键循环，或 URL 参数 ?auto=1 / ?audio=1
// 浏览器自动播放限制：auto 模式首次需要用户点击一次启动

音频控制器核心逻辑：

let mode = 'manual'; // manual | audio | auto
let audioEl = null;

function playStepAudio(beat, step) {
  if (mode === 'manual') return;
  const map = JSON.parse(beat.dataset.audioMap || '[]');
  const src = map[step];
  if (!src) return;
  if (audioEl) { audioEl.pause(); audioEl = null; }
  audioEl = new Audio(src);
  audioEl.play().catch(() => {});
  if (mode === 'auto') {
    audioEl.onended = () => setTimeout(advance, 200);
  }
}

• advance() 后调用 playStepAudio(currentBeat, currentStep)
• 手动翻页时如果有音频在播，立即停止
• 200ms 尾部缓冲，避免切换太突兀

Step 4：录制

1. 用浏览器打开 HTML（建议 Chrome 全屏）
2. 加 ?auto=1 启用自动播放模式
3. 启动录屏（QuickTime / OBS / Cmd+Shift+5）
4. 点击一次启动，全片自动播完
5. 停止录屏，裁头尾即可

TTS 备选方案

如果不用 MiniMax，替换合成命令即可，接口约定：

• 输入：文本（≤5000 字）+ 输出文件路径
• 输出：mp3 文件
• 示例（OpenAI TTS）：

curl -s https://api.openai.com/v1/audio/speech \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model":"tts-1","input":"文本","voice":"alloy"}' \
  --output "$file"

---

视觉动词 × 信息结构

| 视觉动词 | 含义 | 信息结构适配 | |---|---|---| | 高亮 | 看这里 | 证据、引用、对比 | | 连接 | 有关联 | 关系、层级、流程 | | 增长 | 数量增加 | 数据、对比 | | 对比 | A和B不同 | 对比、数据 | | 推近 | 细节重要 | 证据、概念、引用 | | 展开 | 背后有逻辑 | 概念、层级、流程、结论 | | 流动 | 在系统中传递 | 流程、关系、时间线 | | 堆叠 | 证据/层级累积 | 证据、时间线 | | 计数 | 数字重要 | 数据 | | 灰化聚焦 | 先忽略其他 | 概念、关系、对比、结论 |

4 段式镜头编排

每个节拍的动画分 4 个阶段，点击后自动完成，然后停在 hero frame：

1. 主视觉入场 — 建立画面主体
2. 画面重构 — 布局变化或新元素加入
3. 关键词强调 — 重点信息视觉突出
4. 标注落位 — 辅助信息就位，画面定格

这是编排思路，AI 用 GSAP timeline 自由实现。总时长 2-4 秒，各阶段留出呼吸感。

4 种风格

| 风格 | 适用 | 气质 | |---|---|---| | [newspaper-evidence](styles/newspaper-evidence.md) | 新闻、历史、政策、社会议题 | 证据、档案、纪录片 | | [apple-tech-gradient](styles/apple-tech-gradient.md) | AI工具、产品概念、抽象机制 | 克制keynote、概念展开 | | [finance-studio-cards](styles/finance-studio-cards.md) | 财经、商业、公司分析 | 演播室信息大屏 | | [editorial-magazine](styles/editorial-magazine.md) | 深度知识、文化、商业洞察 | 高级编辑版面 |

生成规则

1. 画面比例默认 16:9（1920×1080），可选 4:3（1440×1080）。手动翻页（click / Space / ←→）。比例在 Phase 3 锁风格时确认
2. 单文件 HTML，GSAP 3 via CDN，无 npm
3. 读风格模板获取 CSS 变量和组件类，以此为视觉基础
4. 每个 beat 编写独立 CSS 类（如 b1-left, b2-grid）和独立 GSAP 动画
5. 每个 beat 的 4 段式编排总时长 2-4 秒，各阶段有呼吸感
6. 每个 beat 必须撑满画面——字号下限（16:9）：标题 ≥ 96px，正文 ≥ 25px，标签/辅助 ≥ 18px；4:3 时：标题 ≥ 72px，正文 ≥ 22px，标签 ≥ 16px
7. .beat 用 position:absolute;inset:0 撑满画布，不加 padding；只有内部容器有 padding。beat 内部容器加 overflow:hidden，子元素禁止超出 stage 边界
8. 节拍数量由内容决定，宁多不丢信息
9. 截图/配图必须作为可见的主视觉展示，不可作为暗淡背景图（opacity 中 > 小视觉层级，至少一个主导元素显著大于其余

长内容处理

| 长度 | 处理 | |---|---| | 1-3 分钟 | 单一 storyboard，一个 HTML | | 3-8 分钟 | 拆章节，先做第 1 章确认视觉锚点 | | 8 分钟以上 | 拆成多集或多文件 |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Jackywxsz
• Source: Jackywxsz/Jacky-motion
• License: MIT

Install and usage instructions live in the source repository linked above.