跳转到使用指南
product-launch-video作者 HeyGen

Product Launch Video Skill.

一个 Claude Code 和 Codex skill,用于动效和视频:将产品 URL、脚本或 brief 转换为产品发布或宣传视频。

  • Motion & Video
  • Video
heygen-com/hyperframes · skills/product-launch-video/SKILL.mdSKILL.md
--- name: product-launch-video description: Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes. --- ## Step 0: Setup ## Step 1: Capture assets ## Step 2: Design System ## Step 3: Storyboard and Script ## Step 3.1: Audio ## Step 4: Frame Visual Design
前置信息和章节标题读取自上游文件,时间为 2026-09-14 · 完整内容 32,560 字符

01 功能说明

product-launch-video Skill 在 Claude Code 和 Codex 中的功能

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

通过七步工作流协调产品发布和推广视频的制作。接收产品 URL、粘贴的脚本或 brief,并通过 HyperFrames 生成 MP4。

从实时网站抓取品牌素材,采用一个画面预设并将其重塑到品牌 token 上,编写与配音节奏对齐的带时间码镜头序列分镜稿,生成旁白和背景音乐,派发并行子 Agent 将每个画面构建为 HTML,并在 lint/check/快照校验后进行渲染。适用于 SaaS 推广、功能发布、应用上线和网站导览。可登录 HeyGen 使用,也可离线配合本地 TTS/BGM 引擎使用。

它产出什么

  • 最终 MP4 渲染文件位于 renders/video.mp4,并注明时长
  • 用于校验的画面中点和转场截图联系表
  • 包含带时间码镜头序列的 STORYBOARD.md,如需旁白则包含 SCRIPT.md
查看示例提示词 ↗

工作方式

  1. 01
    确认 Brief 并初始化项目

    意图层在此工作流开始前锁定 brief。

  2. 02
    从 URL 抓取素材

    在产品 URL 上运行 hyperframes capture,收集截图、DOM 结构、品牌 token(颜色/字体)、可见文本和素材描述。

  3. 03
    采用并对画面预设进行品牌重塑

    选择一个与品牌风格相符的已发布画面预设,随后运行 build-frame.mjs 复制该预设的 FRAME.md,将品牌颜色/字体重新映射到预设结构上,并复制其说明文字皮肤。

  4. 04
    编写带时间码镜头序列的分镜稿

    按照故事主线原则起草 STORYBOARD.md 和 SCRIPT.md。

  5. 05
    在后台生成音频

    分镜稿获批后,使用选定的服务商和音色启动 TTS 旁白,按情绪从 HeyGen 音乐库获取背景音乐,生成逐词时间标注,并在不等待的情况下继续进行视觉设计。

  6. 06
    派发子 Agent 并行构建画面

    等待音频完成、同步时长,然后为每个画面构建一个受限数据包,并为每个画面派发一个子 Agent。

02 找到适合场景

何时使用 product-launch-video Skill

当工作是此类动效与视频时,在 Claude Code 或 Codex 中使用 product-launch-video skill。以下适用范围和限制取自该 skill 自己的文件。

适合场景

  • SaaS 推广、功能发布、产品演示、应用与公司发布
  • 按原样展示所抓取页面的网站导览或展示
  • 带有可用于抓取旁白和素材的 URL 的产品

了解边界

  • URL 抓取失败后无法制造合成替代方案
  • 如果抓取结果不可用,不要凭空生成或重建页面
  • 非营销类意图或单纯的“制作视频”请求,先通过 /hyperframes 路由处理

需要提供的信息

  • 粘贴的脚本或 brief逐字保存为 user_script.txt。VO_MODE(逐字还是重构)来自 BRIEF.md。意图层在脚本到达时只询问一次。
  • 声音偏好如果请求指定了声音、性别或语气,选择匹配的 voice id,并通过 --voice 传入。
  • 风格预设选择当 BRIEF.md 指定了 style_preset 时,说明用户在意图层已通过展示案例凭眼光选定了它。
  • 音乐情绪或无音乐BGM 情绪来自 storyboard 的 music: 字段。music: none 会关闭 BGM。规范的完全静音标记是 music: none 且没有 SCRIPT.md。

03 Skill 内部

product-launch-video Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 离开设置前显示登录状态

    运行 hyperframes auth status 并原样转达其输出。它会报告 voice/BGM 将使用 HeyGen 还是本地引擎。退出码 1 是正常的未登录状态,并非失败。

  2. 设计具名效果前先在目录中搜索

    对于 brief 中提到的每一种效果(CRT 扫描线、glitch、胶片颗粒),在写入 STORYBOARD.md 之前先运行 hyperframes catalog --query。

  3. 时长同步是机械操作,切勿手动编辑

    真实的语音时长优先。静音帧保留估算值。音频完成后运行 audio.mjs sync-durations。切勿手动编辑 storyboard 中已同步的时长。

  4. Worker 只写自己的帧 HTML

    每个子 Agent 只读取自己的 packet 和 frame.md,只写入 compositions/frames/NN-*.html,绝不能编辑 STORYBOARD.md。

  5. 通铺背景放在剪辑层,而非根层

    一帧的底色(色场、渐变、网格)是它自己的全时长背景剪辑。

  6. 捕获失败即硬性停止

    非零退出码、JSON ok: false,或 capture/BLOCKED.md 都会停止捕获流程。报告原因,且不得使用部分截图、DOM 或资源。

  7. 渲染前务必通过检查

    在每帧中点和每次剪切处运行 lint、check 和 snapshot。检查布局失败和跳变。修复任何可见的不连贯问题后才能渲染。

04 投入使用

在 Claude Code 或 Codex 中安装 product-launch-video

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 product-launch-video 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video

针对 skills/product-launch-video/SKILL.md 的通用 skills CLI 形式;具体仓库可能记录了自己的路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Create a product launch video for [our new SaaS platform at example.com]. Show the dashboard interface, key collaboration features, and real-time sync. Use a confident professional voice and keep it under 60 seconds with energetic background music.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 运行 hyperframes lint 以验证组装后的 index 和帧
  • 运行 hyperframes check 以在渲染前验证结构
  • 在帧中点和每次剪切处截图,比较图片以发现跳变
  • 验证转场,确保注入的转场正确
  • 确认捕获 JSON 报告 ok: true 且不存在 BLOCKED.md
  • 在同步时长并组装之前,等待步骤 3.1 的音频完成

在 OpenDesign 中 通过其 SKILL.md 链接导入 product-launch-video:Plugins → Add → Skill → Import from link,然后在顶部栏选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
HeyGen
Repository
github.com/heygen-com/hyperframes 分支 main
Skill 文件
skills/product-launch-video/SKILL.md 内容校验和记录于验证时;提交 558c11b
License
Apache-2.0 来自 LICENSE。
仓库星标数
49,761 GitHub 快照拍摄于 2026-09-14,针对整个 heygen-com/hyperframes 代码仓库,该仓库在此目录中包含 9 个 skills。不是 product-launch-video 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. Product Launch to HyperFrames该编排器角色概览,以及从 URL 到 MP4 的七步工作流
  2. 步骤 0:设置从意图层确认 brief,初始化 HyperFrames 项目,显示登录状态
  3. 步骤 1:捕获素材对 URL 运行 hyperframes capture,或根据粘贴的脚本构建无捕获路径
  4. 步骤 2:设计系统选择帧预设,将品牌 token 重混到其上,复制字幕样式
  5. 步骤 3:故事板与脚本编写 STORYBOARD.md 和 SCRIPT.md,运行审阅循环,获取方案批准
  6. 步骤 3.1:音频生成 TTS 旁白、单词时间轴,按情绪获取 BGM,后台运行
  7. 步骤 4:帧视觉设计如为协作模式则绘制草图板,内联添加带时间码的镜头序列与运动
  8. 步骤 5:构建帧同步时长,获取 SFX,按帧分派子 Agent,组装索引与字幕
  9. 步骤 6:定稿注入转场,运行 lint/check/snapshot,暂停等待审阅,渲染 MP4
  10. 快速参考格式、后台脚本,以及按步骤划分的文档参考表
Skill 自身的描述
"将产品或营销 URL、粘贴的脚本或 brief 转换为产品发布/宣传视频——SaaS 宣传片、功能展示、产品演示、应用和公司发布。当用户想要营销、发布、推广或展示产品时使用;任何商业 URL 的默认选项。网站导览/网站展示也会路由到这里——brief 承载了原样展示的意图。不确定时 → /hyperframes。"

来自 SKILL.md 的前置描述。完整文件约 32,560 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 product-launch-video Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

使用此 skill 需要 HeyGen 账户吗?

不需要。工作流在离开设置阶段前会显示登录状态,并报告语音与 BGM 将使用 HeyGen 还是本地引擎。若未登录,工作流会继续使用可用的本地引擎(用于 TTS 的 Kokoro)。登录后可启用 HeyGen 的 Starfish 语音与音乐库。

此工作流可生成哪些视频格式和时长?

根据 BRIEF.md 中的 destination 字段,生成横屏 1920x1080、竖屏 1080x1920 或方形 1080x1080 视频。时长依据 brief 中的长度字段设定为大致预期;组装阶段会报告最终成片与该预期的差距。最终回复会给出 MP4 路径和实际时长。

Product Launch Video

在真实的运动和视频任务上运行 product-launch-video。

下载 OpenDesign,从其 SKILL.md 链接导入 product-launch-video,粘贴上方的提示,在结果前阅读计划。

终端
npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows