Communitygithub.com

heygen-com/hyperframes

将产品、营销URL、粘贴的脚本或概要转化为产品发布/推广视频——适用于SaaS推广、功能揭晓、产品演示、应用和公司发布。

hyperframes 是什么?

此技能用于通过HeyGen的HyperFrames平台,将产品营销需求转化为完整的发布或推广视频。它从确认简报(BRIEF.md)开始,依次执行产品捕捉、品牌设计系统创建、故事板和脚本编写、视觉设计、逐帧构建以及最终渲染。该技能支持通过URL、粘贴脚本或用户提供的摘要作为输入,并自动处理资产分类、品牌标记绑定和音频源选择。它已集成到HyperFrames工作流中,可与Figma URL协作,并利用/media-use技能处理HeyGen目录中的音频和图像,确保品牌一致性。主要步骤包括:通过npx hyperframes init设置项目、使用npx hyperframes capture捕获资产、通过预设设计系统构建frame.md、生成STORYBOARD.md和SCRIPT.md、为每一帧分派子代理,以及最终渲染为video.mp4。关键的门控步骤(步骤0、3、6)需要用户审批,确保在继续之前对创意方向和资产使用达成一致。

兼容平台~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/product-launch-video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

插件安装: 在运行设置或更新命令之前,当此技能位于HyperFrames插件内部时,请遵循插件执行规则。独立安装则保留下面的更新说明。

首先,保持此技能最新——请在运行前与用户确认: npx hyperframes skills update product-launch-video。如果一切是最新的,则快速无操作;否则,在依赖此技能之前,它会刷新此技能及其依赖的核心领域技能。

media-use:在获取音频/图像/标志之前,请调用/media-use从HeyGen目录和官方来源解析BGM/SFX/图像和品牌标志。首先运行--adopt以注册现有资产。请参阅/media-use技能。

figma源:如果源是figma.com URL,请首先运行/figma —— 如果需要,进行资源导出、品牌令牌和组件/故事板重建 —— 然后从其输出构建此工作流。不要直接通过原始MCP工具驱动Figma:这将跳过SVG清理、.media/manifest.jsonl来源和品牌令牌var()绑定,因此后续的品牌更改无法在不完整重新导入的情况下传播。

产品发布到HyperFrames

使用此技能来捕捉产品、了解其品牌、规划发布视频,并逐帧在HyperFrames中构建它。

前端入口是/hyperframes。 你是编排者。运行每个步骤,验证其门控,然后才继续下一步。此技能适用于正在营销、发布、推广或揭晓的产品,包括诸如“为我们的网站制作推广视频”之类的请求(当目的是推广时)。站点巡览/展示请求也保留在此处:BRIEF.md携带按原样展示的意图,捕获的截图将成为视频展示的资产。任何其他意图、简单的“制作视频”或任何不确定性 → 请先阅读/hyperframes —— 意图层拥有每个路由决策权,而一个没有BRIEF.md的新创作到达此处时无论如何都会经过它(设置的开场规则)。

你是编排者。在videos/<project>/中工作。按顺序运行步骤,并在继续之前通过每个门控。用户门控步骤为步骤0、步骤3和步骤6。在步骤0之前阅读../hyperframes/references/brief-contract.md —— 它定义了门控类型以及BRIEF.md的flow/storyboard如何派生控制步骤3/4/6门控的模式。自己执行每个步骤,除了步骤5,你为每一帧分派一个子代理。不要在此处放置设计或动画规则;这些规则存在于帧工作者子代理、此技能的本地../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/以及hyperframes-creative中。

工作流:步骤0设置 -> hyperframes.json;步骤1捕获 -> capture/;步骤2设计系统 -> frame.md;步骤3故事板/脚本 -> STORYBOARD.md和SCRIPT.md;步骤3.1音频 -> audio_meta.json;步骤4视觉设计 -> 增强的STORYBOARD.md;步骤5帧 -> compositions/frames/NN-*.html和index.html;步骤6最终渲染 -> renders/video.mp4。


步骤0:设置

目标:以确认的简报进入,创建HyperFrames项目,并使简报持久化。

简报由意图层确认,而不是通过此处提问的问题。 开场规则,按顺序:(1) BRIEF.md存在 → 阅读它并且不提问任何问题——简报已确定,其flow/storyboard派生模式(简报合同§1)。(2) 没有BRIEF.md但项目存在(磁盘上有hyperframes.json / STORYBOARD.md)→ 从故事板的前言和记录的首选项恢复;永不重新审问一个半构建的项目。(3) 两者都没有——直接到达此处的全新创作请求 → 阅读/hyperframes并运行其意图层(references/intent-interview.md):它检查配方和记住的默认值,进行此路由的问题(../hyperframes/references/routes/product-launch-video.md),并交回锁定的简报。编辑请求跳过所有这些——直接执行编辑。

仅当hyperframes.json丢失时才初始化。从品牌或域名以kebab-case命名<project>,例如acme-promo;从不使用工作区名称或时间戳。

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video —— init检查已安装的技能是否与GitHub上的最新版本匹配,并更新全局集(如果有任何过时)。

初始化后,让<PROJECT_ROOT>为videos/<project>,并将每个后续的相对路径命令的工作目录设置为该目录。在下面的命令中,.表示<PROJECT_ROOT>;不要将.media、capture或输出文件写入调用者目录。

在init之后立即写入BRIEF.md(之前绝不——init拒绝非空目录):意图层锁定的简报,形状符合../hyperframes/references/brief-format.md。将<MEDIA_DIR>解析为已安装的/media-use技能目录。然后使用node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .记录每个偏好支持的答案(brief-format.md命名字集)。如果意图层采用了配方,运行node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>;它将frame.md复制到项目中(步骤2随后跳过),并返回步骤3草稿所基于的骨架。配方填充答案,而不是审批;审查门控仍然运行。

在继续进行设置之前显示登录状态 —— 运行npx hyperframes auth status并逐字转发其输出。它报告语音/BGM将使用HeyGen还是本地引擎,以及未登录时如何登录。注意退出码约定:auth status 在未登录时退出1(并且当存储的凭据被拒绝时)—— 该非零退出是正常的未登录状态,而不是命令失败,因此不要将其视为错误,不要重试,也不要以会中止工作流的方式将其与&&/set -e链接。应用一个分支:

  • 协作模式: 等待用户登录或明确选择offline / go。
  • 自主模式: 说明状态并通过可用的本地引擎继续。

当没有离线提供者时,不要静默地省略必需的能力;暴露阻塞方。不要将此决定折叠到另一个问题中,也不要将密钥写入每个仓库的.env。身份验证所有权和离线回退:/media-use references/setup-providers.md § 提供者。

门控: hyperframes.json和BRIEF.md存在;偏好支持的答案已记录(简报合同§2);登录状态已显示(已登录,或继续离线)。


步骤1:捕获资产

目标:收集源材料、品牌信号和可用于视频的资产。

对输入进行分类并选择路径。显式URL -> 捕获它,并使用网站进行叙述和资产。粘贴的脚本/简报 -> 按原样保存为user_script.txt;VO_MODE(按原样或重构)来自BRIEF.md —— 当脚本到达时,意图层会询问它(仅当简报以某种方式缺少时才在此处询问一次)。然后解析捕获目标:文本中的URL -> 使用它;仅品牌名称 -> WebSearch,在一行中确认URL,然后抓取;没有URL/网站(或简报说不要抓取)-> 无捕获路径。

使用以下命令运行捕获:npx hyperframes capture "<URL>" -o ./capture --json。保留默认的导航后预算,除非调用者拥有更小的截止日期;然后传递一个正数的--capture-budget <milliseconds>,为下游工作留出时间。--timeout仅控制页面导航。仅当可选图像字幕被有意禁用时,才使用--skip-vision。

立即检查命令结果和输出目录。非零退出、JSON ok: false或capture/BLOCKED.md是捕获路径的硬停止:报告记录的原因,并且不要消费部分截图、DOM、令牌或资产。在URL捕获失败后,不要制造合成性的无捕获回退。仅当原始简报提供了源材料,或者当用户失败后明确切换到提供的截图或简报时,才继续通过无捕获路径。

例如非常少的文本内容等警告以及空的资产目录并不能证明页面可用。对于站点巡览或按原样展示的简报,需要可信的捕获结构或提供的截图;如果两者都不存在,则停止。不要仅仅因为捕获不可用就发明或重建页面。

对于站点巡览或按原样展示的简报,捕获的页面是视觉事实来源。使用真实截图而不是在HTML中重建整个网站。如果截图需要内部移动,保持截图作为基础,并在测量位置叠加真实的捕获资产,或者仅重建移动的组件。对于滚动截图,在capture/screenshots/full-page.png上动画化视口——整个文档的1倍板,对于在其上移动的1920宽视口是像素精确的。当页面太高无法整体捕获时,它不存在;回退到同一目录中的重叠滚动位置截图。推进超过1:1希望改为该区域的自己的2倍捕获,因为板在1倍以上没有余量。仅当用户明确要求风格化解释时才重建整个页面;仅凭不可用的捕获并不是授权。

如果存在GEMINI_API_KEY、GOOGLE_API_KEY或OpenRouter密钥,捕获会自动为资产添加字幕到capture/extracted/asset-descriptions.md。这不是审查门控。没有视觉密钥时,使用DOM上下文并继续。

无捕获路径:手动创建capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md和capture/assets/。tokens.json应为{ "title": "", "description": "", "colors": [], "fonts": [] };在可能时从简报填充标题/描述。visible-text.txt包含完整的简报或脚本。asset-descriptions.md应说明没有捕获资产,除非用户提供了资产说明。

门控: 捕获JSON报告ok: true;capture/BLOCKED.md不存在;capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md和capture/assets/存在;并且你可以用一句清晰的句子说明品牌。将asset-descriptions.md视为主资产清单。如果实际捕获后它缺失,停止并报告捕获不完整。关于降级可选阶段的警告仅在结构门控仍然通过时才是可接受的。


步骤2:设计系统

目标:选择一个随附的帧预设;一个脚本将其转化为此视频的frame.md + 字幕皮肤。

当BRIEF.md命名了style_preset —— 用户通过意图层的展示用眼睛挑选了它 —— 使用它;仅在简报沉默时,判断决定权归你。然后你做出一个决定——哪个预设:阅读../hyperframes-creative/references/design-spec.md并选择最符合品牌和简报的预设外观。然后运行:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

脚本确定性完成其余工作:复制预设的FRAME.md → frame.md,并将其混音到capture/extracted/tokens.json中的品牌令牌上(品牌颜色按角色——墨水、画布、强调色——映射到预设的颜色键上,保持键/结构/组件;将预设的显示字体和正文字体替换为品牌的),将预设的字幕皮肤复制到.hyperframes/caption-skin.html,并自我验证(在映射损坏时退出1)。一旦它退出0,就继续下一步——不要手动编辑规范。

tokens.json没有品牌颜色/字体(例如无捕获)→ 脚本保留预设自己的调色板,一个完整的可交付设计。如果简报命名了品牌颜色/字体而捕获遗漏了,在运行前将它们添加到capture/extracted/tokens.json中(或使用用户的design.md来填充它);仅在映射确实需要时才手动调整frame.md。

门控: build-frame.mjs退出0 —— frame.md来自已命名预设存在,并且(当预设附带一个时).hyperframes/caption-skin.html作为字幕皮肤源存在;选择的预设已记录为首选项(--key style_preset --workflow <此工作流>,简报合同§2)。


步骤3:故事板和脚本

目标:将简报和捕获材料转化为已批准的逐帧故事计划。

阅读../hyperframes-creative/references/story-spine.md(钩子语言、先价值后证据、故事板作为提案、来源可追踪的视觉元素)、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes/references/storyboard-format.md和../hyperframes/references/script-format.md。使用它们编写STORYBOARD.md,并在需要叙述时编写SCRIPT.md。从前言设置duration:来自简报的length —— 一个粗略的期望;汇合报告最终剪辑相对于它的位置。

使用story-design.md进行故事蓝图、钩子、说服逻辑、节拍、VO_MODE和资产选择。作为一个软指南,查阅../hyperframes-animation/blueprints-index.md中的角色→蓝图菜单:对于每个节拍,当一个适合时记下一个候选蓝图ID。故事的真实性仍然决定哪些节拍存在 —— 从不强制一个节拍适合一个蓝图,也从不仅仅因为一个经过验证的形状可用就发明一个节拍。从capture/extracted/asset-descriptions.md(规范清单)中选择每个视觉帧的asset_candidates —— 不要浏览原始的capture/assets/。除非该清单缺失或不可用,否则不要要求用户选择资产。使用来自故事板和脚本参考的确切必需字段。

起草后,运行审查循环的计划阶段 —— ../hyperframes/references/review-loop.md § 1:将计划作为提案呈现,并问两个问题——批准或更改,以及先草图(推荐)或跳过。反馈以聊天回复形式到达;循环直到批准。这是一个检查点门控(简报合同§1):在自主模式和协作模式下都要求用户批准。在门控打开之前,不要继续到步骤3.1或步骤4。

步骤3.1:音频。 在步骤3和步骤4之间:运行/media-use技能(如下所示)为BGM、SFX、VO和字幕选择音频。使用audio_meta.json(从/media-use返回)进行选择,其中包含bgm_track、sfx_tracks(每个节拍的)和voice_over_id。

将/media-use与--adopt资源结合使用,以重用在之前的项目中使用的资产,或者从HeyGen目录中选择新的。如果选择了语音,生成SCRIPT.md的代理或TTS版本。此步骤被门控到步骤3之后,因为音频选择依赖于批准的故事板。

门控: 用户已批准STORYBOARD.md和SCRIPT.md(如果需要);audio_meta.json从/media-use填充了BGM、SFX(如果适用)和VO选择。没有音频选择是允许的(例如no_bgm: true)。


...(由于输入截断,剩余内容有限,但星号制表符和结构保持与原文一致)


Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相关技能