前言¶

做产品宣传片、带字幕的口播、社交平台的叠层动效时，常见路径是先在 AE、Premiere 或在线剪辑里搭时间线，再导出成片。页面里已经有一套 HTML/CSS/JS 和 GSAP 动画时，往往还要「再录一遍屏」或手工对齐帧，既难复现也难交给 Agent 迭代。

下面介绍 SkillHub 上的 hyperframes-超帧视频（坐标 @u_cfbf2639/hyperframes-chaozhen-shipin）。它把上游 HyperFrames（heygen-com 维护，Apache-2.0）的工作流写进 Agent Skill：以 HTML 为单一事实源，由引擎逐帧采集页面，经 FFmpeg 编码为 MP4/WebM。适合在对话里直接说「把这段脚本做成带 TTS 和字幕的视频」或「给这个网站做一条宣传片」。

这是什么¶

hyperframes-超帧视频 是社区来源（community）的 design-media 类 Skill，当前版本 1.0.0，SkillHub 页面标注作者为庞才儒；Skill 正文与上游 HyperFrames 文档一致，声明 author: heygen-com。requires_api_key=false，不依赖额外 API Key。

它解决的核心问题：在 Agent 侧统一「规划 → 写合成 HTML → lint/预览 → 渲染」的规程，并标明与 manim-video（数学讲解）、meme-generation（梗图）等技能的边界。

运行环境前提（Skill 元数据）：本机需有 node、ffmpeg、npx；支持 linux / macos / windows。一次性环境准备建议 Node.js >= 22，全局安装 hyperframes@>=0.4.2，并通过 Puppeteer 预装 chrome-headless-shell（详见下文安装节）。

核心功能¶

以下能力均来自 Skill 包内 SKILL.md / hyperframes-超帧视频-SKILL.md 的说明，可与官方 HyperFrames CLI 对应：

1. HTML 视频合成：合成页使用 data-* 控制时间，GSAP 时间线驱动动画，CSS 控制外观；输出 MP4 或 WebM。
2. 动效与版式：动画标题卡、底部信息条、 kinetic 排版、图表/Logo 叠在媒体之上。
3. 口播与字幕：TTS 生成旁白、transcribe 得到词级字幕并与波形对齐；支持多种字幕风格选型规则。
4. 音频响应：预提取低/中/高频段，在时间线上逐帧采样驱动 scale、发光、透明度等（避免无限 repeat 破坏采集）。
5. 转场：场景间禁止硬切；可用 CSS 转场或 npx hyperframes add 安装着色器转场（如 flash-through-white、liquid-wipe）。
6. 社交叠层与网站转视频：Instagram/TikTok/YouTube 风格叠加；给定 URL 时按 7 步流程（采集 → DESIGN.md → SCRIPT.md → 分镜 → 合成 → 渲染 → 交付）处理。
7. 质量与可访问性工具链：lint（结构）、validate（WCAG 对比度）、inspect（布局溢出/遮挡）、doctor（环境诊断）。

明确不适用的场景：纯数学方程动画（用 manim-video）、静态梗图生成、实时会议或推流。

安装与启用¶

在 SkillHub 安装 Skill¶

先确认是否已有 skillhub CLI（完整说明见 skillhub.cn/install/skillhub.md）：

command -v skillhub && skillhub --version

未安装时可执行官方安装脚本（需联网）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

将 Skill 装进当前 Agent 识别的 skills 目录（必须用 --dir，否则默认落在 ./skills/ 可能不被加载）：

skillhub install '@u_cfbf2639/hyperframes-chaozhen-shipin' --dir ~/.cursor/skills/

各客户端常见路径（摘自 SkillHub 安装文档）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下 .agents/skills/

也可在对话中让 Agent 按官方提示安装：

请根据 https://skillhub.cn/install/skillhub.md，安装 @u_cfbf2639/hyperframes-chaozhen-shipin。

SkillHub 展示页（截至资料抓取）：评分 100000，下载 5883，分类 design-media，标签 requires_api_key=false。

一次性准备 HyperFrames 运行时¶

Skill 建议在首次渲染前跑上游 setup.sh（路径依赖本机 Hermes/OpenClaw 技能目录中的 hyperframes 包；若仅安装了 SkillHub 中文版，可先通过 npx 使用 CLI，并手动满足依赖）：

bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

脚本会：检查 Node.js >= 22 与 FFmpeg；执行 npm install -g hyperframes@>=0.4.2；预缓存 chrome-headless-shell；运行 npx hyperframes doctor。

典型用法¶

1. 从零脚手架到成片¶

先用 CLI 初始化项目并进入目录：

npx hyperframes init my-video --non-interactive
cd my-video

可选模板包括 blank、warm-grain、kinetic-type、product-promo 等；可用 --example <name>，或用 --video clip.mp4 / --audio track.mp3 带入素材。

写 HTML 前，Skill 要求先定视觉标识（项目根 DESIGN.md 或向用户确认氛围/明暗/品牌色），避免默认 #333、Roboto 等「未设计」痕迹。布局顺序是：先静态 hero 帧，再加 GSAP 入场；时间线须 paused: true 并注册到 window.__timelines["<composition-id>"]。

校验与渲染：

npx hyperframes lint
npx hyperframes preview
npx hyperframes render --quality draft --output draft.mp4
npx hyperframes render --quality high --output final.mp4

常用渲染参数：--quality draft|standard|high、--fps 24|30|60、--format mp4|webm、--docker、--strict。

2. TTS + 字幕口播¶

生成旁白并转录为词级字幕（示例来自 Skill 正文）：

npx hyperframes tts "脚本文本" --voice af_nova --output narration.wav
npx hyperframes transcribe narration.wav

音频轨道应使用独立 <audio>，视频标签保持 muted playsinline。非英语内容注意不要误用仅英语的 Whisper .en 模型（会翻译而非转录）。

3. 多场景与转场¶

安装着色器转场并查看列表：

npx hyperframes add flash-through-white
npx hyperframes add --list

多场景规则摘要：场景之间必须有转场；除最后一镜外不要用元素出场动画（转场即出场）。

4. 交付前自检¶

Skill 推荐的最低检查：

npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect
ls -lh final.mp4
ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4

渲染失败时先执行 npx hyperframes doctor 并根据输出排查。

适用场景与注意¶

适合谁

• 已熟悉前端与 GSAP，希望把「网页动效」变成可版本管理的视频产物。
• 需要在 Agent 对话里完成：脚本 → TTS → 字幕 → 渲染一条龙。
• 要把现有网站或产品 UI 录成宣传短片（按 Skill 引用的 website-to-video 流程）。

限制与常见坑（Skill「常见陷阱」节）

• repeat: -1 会破坏帧采集；须换算为有限 repeat。
• 时间线必须同步构建，不要用 async/await、setTimeout 包裹 window.__timelines 的注册。
• Chromium 147+ 可能缺少 HeadlessExperimental.beginFrame；需 hyperframes@>=0.4.2，必要时 export PRODUCER_FORCE_SCREENSHOT=true。
• 勿自行调用 video.play() / audio.play()；勿用视频轨承载音频。
• 使用系统 Chrome 而非 chrome-headless-shell 时，渲染可能 120 秒超时——按 doctor 提示安装 headless shell。

与 manim-video 分工：几何/公式讲解走 Manim；motion graphics、真实媒体驱动、社交叠层和着色器转场走 HyperFrames。

结尾¶

hyperframes-超帧视频 把 HyperFrames 的「HTML 即成片源」流程固化成 Agent 可执行的规程：从 DESIGN.md 与 hero 帧布局，到 lint、预览、高质量渲染，并覆盖 TTS、字幕、音频响应与网站转视频。若你的需求是确定性导出 MP4/WebM，而不是实时剪辑或纯数学动画，可以把它加入 skills 目录并在对话中直接描述成片目标。

• SkillHub 页面：https://www.skillhub.cn/skills/u_cfbf2639/hyperframes-chaozhen-shipin
• API 坐标页：https://api.skillhub.cn/u_cfbf2639/hyperframes-chaozhen-shipin
• 安装说明：https://skillhub.cn/install/skillhub.md