Agent Skills
› heygen-com/hyperframes
heygen-com/hyperframes
GitHub将每周更新日志 Markdown 转换为品牌化短视频,包含动画 UI 模拟、配音及字幕。
Install All Skills
npx skills add heygen-com/hyperframes --all -g -y
Skills in Collection (40)
将每周更新日志 Markdown 转换为品牌化短视频,包含动画 UI 模拟、配音及字幕。
用户提供 changelog/digest markdown 并请求生成周视频
用户输入 'changelog video'
npx skills add heygen-com/hyperframes --skill changelog-video -g -y
将每周更新日志 Markdown 转换为品牌化短视频。通过解析内容、匹配可视化方案、生成脚本及配音,利用预设资产和脚手架渲染出符合规范的动画视频。
用户提供 changelog 或 digest markdown
用户明确要求制作 changelog video
npx skills add heygen-com/hyperframes --skill changelog-video -g -y
提供叶冠分屏标题动画组件,支持通过变量自定义文本、字体及叶子动画效果。
需要添加动态标题过渡动画
配置 HyperFrames 视觉组合
npx skills add heygen-com/hyperframes --skill canopy-part-title -g -y
提供基于WebGL的3D网格翻转动画组件,支持自定义文案、运动轨迹及光影效果,适用于前端页面视觉增强。
需要添加3D网格翻转动画效果
集成HyperFrames可视化组件
配置WebGL动画参数
npx skills add heygen-com/hyperframes --skill code-slice-hero -g -y
提供基于Three.js和GSAP的3D圆角长方体轮播动画组件,支持自定义卡片内容、几何参数及缓动效果,适用于前端视觉展示。
需要3D轮播或滑块效果
前端可视化展示需求
集成HyperFrames动画组件
npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -y
提供22.5秒冰裂特效镜头环绕动画组件,支持自定义Logo和两行文本,通过HyperFrames集成到前端页面。
需要添加品牌宣传视频或动态展示效果
前端项目需要集成复杂的CSS/JS动画组件
npx skills add heygen-com/hyperframes --skill frost-sequence-camera-orbit -g -y
基于HyperFrames的1080p玻璃碎片标题动画组件,利用Three.js实现Voronoi切割与物理效果,支持自定义 headline、瓷砖数量及运动参数。
需要生成动态文字标题视频
集成3D粒子或碎片动画效果
构建视觉特效演示页面
npx skills add heygen-com/hyperframes --skill glass-shard-title -g -y
提供10秒3D卡片环绕动画组件,支持自定义标题、描述及轨道角度,通过HyperFrames集成与渲染。
需要添加3D动画效果
生成视频合成片段
npx skills add heygen-com/hyperframes --skill orbit-card -g -y
提供3D线框字体门户动画组件,支持标题与替换短语的切换、自定义变量及渲染配置。
需要添加动态文字动画效果
集成HyperFrames视觉组件
npx skills add heygen-com/hyperframes --skill wireframe-portal-title -g -y
将文本转化为无真人出镜的解说视频。作为编排者,引导从需求确认、脚本编写到逐帧视觉设计与最终渲染的全流程,适用于概念解析与教程类内容。
需要将文章或笔记制作成视频
请求生成概念解释或教程视频
创建无实景素材的动画解说
npx skills add heygen-com/hyperframes --skill faceless-explainer -g -y
将Figma设计资源(静态资产、品牌令牌、组件、动效)导入HyperFrames视频合成项目。支持REST接口及连接器辅助,自动处理认证与本地缓存,实现设计稿到动态内容的自动化转换。
用户粘贴figma.com链接
请求将Figma设计/帧/品牌元素导入视频或合成项目
npx skills add heygen-com/hyperframes --skill figma -g -y
用于创建或编辑自定义 HyperFrames 视频作品,支持长片、蒙太奇、品牌宣传片等。通过媒体适配器和 Figma 集成处理素材,依据项目状态(如 BRIEF.md)决定工作流,强调认证检查与离线回退策略。
需要制作非特定工作流的定制视频内容
处理多场景、品牌宣传片或混剪视频
基于 BRIEF.md 或现有项目进行视频组装
npx skills add heygen-com/hyperframes --skill general-video -g -y
HyperFrames核心技能,定义HTML视频合成规范。指导构建可渲染项目,涵盖DOM时序声明、数据属性、轨道剪辑、子合成及确定性渲染规则。提供开发陷阱提示与参考文档索引,确保正确实现框架媒体播放与动画运行时。
构建HyperFrames HTML视频合成项目
查阅data-*属性或轨道剪辑规范
解决CSS变换与GSAP冲突问题
分析渲染性能与GPU模式
npx skills add heygen-com/hyperframes --skill hyperframes-core -g -y
HyperFrames创意方向技能,负责视频设计规范、调色板、排版、旁白及构图规划。专注非动画的视觉风格与品牌决策,需先读取参考文档以生成高质量内容,避免网页化布局。
需要确定视频画面的视觉风格或品牌调性
制定色彩方案、字体选择或场景节奏规划
npx skills add heygen-com/hyperframes --skill hyperframes-creative -g -y
指导处理 HyperFrames 中的关键帧动画,包括缩放、平移、遮罩及各类视觉特效。明确与剪辑组装的边界,提供具体实现机制如 GSAP、CSS 或 SVG 变形,排除场景策略和媒体源管理。
需要制作推拉镜头、缩放或 Ken Burns 效果
实现相机移动、匹配剪辑或遮罩过渡
使用 GSAP、CSS keyframes 或 Anime.js 等库进行动画
排查 hyperframes keyframes 相关诊断问题
npx skills add heygen-com/hyperframes --skill hyperframes-keyframes -g -y
定义 HyperFrames Studio 项目的结构规范,包括场景子化、单字幕轨道、元素分类及安全区设置,确保时间线可读性。
构建或编辑 HyperFrames 项目的时间线布局
检查内容是否符合安全区和轨道分组规范
npx skills add heygen-com/hyperframes --skill hyperframes-studio -g -y
将音乐轨道转化为节拍同步视频,支持歌词、幻灯片或动感宣传视频。通过自动化分析音频节拍并编排画面,实现零素材或基于用户媒体的高质量视频生成。
需要制作音乐视频
根据音频生成节拍同步内容
将音频转换为可视化视频
npx skills add heygen-com/hyperframes --skill music-to-video -g -y
将 GitHub PR 代码变更转化为解释视频。作为编排器,协调从 PR 解析、故事板设计到帧生成的全流程,输出代码变更说明视频。
用户请求将 GitHub Pull Request 转换为视频
提供 PR URL 或引用并意图生成代码变更解说
npx skills add heygen-com/hyperframes --skill pr-to-video -g -y
用于将产品URL、脚本或简介转化为产品发布或宣传视频。作为编排器,按步骤完成项目设置、素材捕获、品牌设计、故事板规划及逐帧构建,最终渲染出推广视频。
用户希望制作产品宣传或推广视频
需要展示产品功能或进行应用/公司发布
npx skills add heygen-com/hyperframes --skill product-launch-video -g -y
将现有的 Remotion (React) 视频合成源码单向迁移转换为 HyperFrames (HTML+GSAP) 格式。仅处理明确的迁移请求,通过 SSIM 阈值测试确保转换质量,不支持反向或新建场景。
用户明确要求将 Remotion 项目移植、转换、迁移或翻译到 HyperFrames
提供 Remotion 源码并要求重写为 HyperFrames HTML
npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -y
用于创建 HyperFrames 交互式演示文稿或 Pitch Deck,支持幻灯片、分支导航及演讲者模式。强调输出为可导航的 Deck 而非 MP4,需先确认用户意图并处理 Figma 源文件。
用户要求制作演示文稿、Pitch Deck 或交互式幻灯片
用户请求将现有页面转换为 Deck
npx skills add heygen-com/hyperframes --skill slideshow -g -y
为现有口播视频添加同步于语音的图形覆盖层(标题、数据图表等),生成MP4。
graphic overlays
on-screen graphics
package / dress up my video
npx skills add heygen-com/hyperframes --skill talking-head-recut -g -y
提供视频字幕叠加的指导原则,定义字幕为覆盖层而非预留区域,规范drop/rail/embed三种模式的使用,指导构图与排版。
添加或编辑视频字幕
决定字幕显示方式(隐藏、底部轨道、嵌入背景)
进行视频画面构图设计
npx skills add heygen-com/hyperframes --skill captions-overlay -g -y
提供七种高级运动图形转场技术(如Cut the Curve、Zoom-Through等)的参数规范与力学原理,涵盖速度匹配、Z轴方向规则及模糊逻辑,指导动态文本与场景过渡的精确编排。
需要制作电影级或高质感视频转场
设计动态文本入场或组内元素重排动画
npx skills add heygen-com/hyperframes --skill cut-the-curve -g -y
定义多场景视频连贯动画的核心法则,确保镜头运动连续性。涵盖向量定律、电流方向、无缝衔接及禁止闲置晃动等规则,指导场景切换与动效执行,替代通用运动指南。
需要创建或审查多场景视频动画的连贯性
设计场景间的转场效果以维持视觉动量
解决动画中镜头跳跃或动量中断的问题
npx skills add heygen-com/hyperframes --skill motion-doctrine -g -y
提供MacOS风格超大光标在HyperFrames发布视频中的设计规范,包括尺寸、品牌化样式、入场/点击/离场动画逻辑及CSS实现,用于引导视线和增强场景动态。
制作UI演示或鼠标指针主导的场景
需要低成本高收益的动态元素来激活静态画面
设计过渡动画或点击触发动作的视觉叙事
npx skills add heygen-com/hyperframes --skill oversized-cursor -g -y
指导视频时间线合成中的场景过渡渲染正确性,解决白闪等问题。涵盖背景防护、注入器逻辑及模板占位符机制。
组装主时间线时
出现剪辑白闪或过渡透明度异常时
验证重叠场景包装器的混合机制时
npx skills add heygen-com/hyperframes --skill seam-craft -g -y
定义视频字幕叠加规范,确立drop/rail/embed三级模型及顶部覆盖原则。指导在添加字幕时避免预留空白带,保持画面居中与完整构图,适用于口播或开场视频的字幕处理与排版决策。
添加字幕或副标题到视频中
决定短语是丢弃、保留还是嵌入
进行包含字幕的画面构图布局
npx skills add heygen-com/hyperframes --skill captions-overlay -g -y
Motion Graphics 转场与动态排版技能集,涵盖五种 SEAM 剪辑技巧及两种场景内技术。核心原则为在峰值速度处剪辑并匹配方向与速度,包含 Z 轴符号规则、模糊逻辑及 GSAP 代码模板,用于实现电影级流畅过渡与动能文本效果。
需要创建平滑的场景或元素转场
设计动能文本(Kinetic Text)入场或退出动画
处理标题卡或段落开头的层级排列
优化组元素的重新定位滑动效果
npx skills add heygen-com/hyperframes --skill cut-the-curve -g -y
Motion Doctrine 是动画与视频合成的核心指导原则,旨在确保多场景视频呈现为连续镜头而非独立幻灯片堆叠。它定义了向量法则、运动连贯性及接缝处理规范,指导如何消除视觉动量断裂和无效晃动,强制运动执行性能,并链接至底层技术技能以实现无缝过渡。
需要创建或审查多场景动画/视频的连续性时
处理场景切换、转场效果及运动矢量匹配时
制定动画叙事节奏和视觉流规则时
npx skills add heygen-com/hyperframes --skill motion-doctrine -g -y
提供HyperFrames视频制作中超大光标动效规范,涵盖尺寸、样式、入场及点击交互逻辑,用于引导视线和增强场景过渡。
需要制作Launch视频中的光标动效
UI场景启动或静态画面缺乏动感时
需要视觉引导或场景切换触发
npx skills add heygen-com/hyperframes --skill oversized-cursor -g -y
提供HyperFrames视频合成中场景接缝的渲染正确性规范,解决白闪问题并说明注入器机制。
组装主时间线时
出现切点白闪或透明度 dips
验证重叠场景包装器的混合逻辑
npx skills add heygen-com/hyperframes --skill seam-craft -g -y
为单人讲话视频添加嵌入式字幕,支持标准、电影感和主题风格。通过本地工作流自动完成转录、抠像和合成,无需剪辑原始素材,提供多种视觉身份选择。
需要给视频添加字幕或标题
要求嵌入特效字幕或电影感效果
希望在不编辑原片的情况下增强视频视觉效果
npx skills add heygen-com/hyperframes --skill embedded-captions -g -y
HyperFrames动画技能,提供原子运动规则、多阶段场景蓝图、转场及7种运行时适配器(GSAP等),支持确定性时间轴编排与动画审计。
需要实现页面元素动画效果
查询特定运行时库的API用法
复用预定义的多阶段场景模板
分析现有动画组合的编排逻辑
npx skills add heygen-com/hyperframes --skill hyperframes-animation -g -y
用于 HyperFrames 中已放置音频的混音处理,包括淡入淡出、交叉淡化、音量自动化、侧链压缩及 EQ 等效果链。不涉及素材获取或剪辑时序。
需要对已有音频轨道进行混音处理
配置音频效果链(如 EQ、压缩器)
设置音量自动化或旁白避让
npx skills add heygen-com/hyperframes --skill hyperframes-audio -g -y
HyperFrames CLI开发循环指南,涵盖项目初始化、资产查找与安装、时间线编排、代码检查、预览验证及多环境渲染发布。用于高效构建和调试动态视觉内容。
需要创建或编辑动态视频/动画项目
使用HyperFrames CLI进行本地或云端渲染
排查渲染失败或媒体资产问题
npx skills add heygen-com/hyperframes --skill hyperframes-cli -g -y
提供HyperFrames注册表的搜索、安装及组件集成能力,支持400+视觉效果的快速发现与配置,避免重复开发。
需要查找或应用特定视觉效果(如CRT扫描线、故障艺术等)
执行hyperframes add命令安装块或组件
npx skills add heygen-com/hyperframes --skill hyperframes-registry -g -y
HyperFrames 视频制作入口技能,负责将 HTML 转换为视频。处理从项目状态识别、意图解析到工作流路由的全过程,支持编辑、渲染、诊断及 Remotion 迁移等任务。
创建或编辑 HyperFrames 视频项目
将 Remotion 项目移植到 HyperFrames
对现有项目进行审查、预览或批量渲染
使用 CLI 工具如 timeline 检查项目结构
npx skills add heygen-com/hyperframes --skill hyperframes -g -y
HyperFrames项目的媒体操作系统技能,支持解析、生成和处理音频、视频及图像等多媒体资产。提供统一命令解决素材需求,集成TTS、风格化及隐私处理,实现跨项目资产复用。
需要获取背景音乐、音效或图片等媒体资源
需要对视频或图像进行剪辑、重构图或色彩校正
需要生成语音旁白或字幕
需要对媒体内容进行风格化处理或隐私模糊
npx skills add heygen-com/hyperframes --skill media-use -g -y
用于生成简短、设计导向的动态图形(如动效排版、数据可视化、Logo动画等),强调视觉传达而非旁白。支持从Figma提取资产,通过Hyperframes框架自主执行,输出MP4或透明图层视频。
需要制作短时长动态图形
涉及动效排版或数据可视化
从Figma导入品牌资产制作动画
npx skills add heygen-com/hyperframes --skill motion-graphics -g -y


