Agent Skills
› heygen-com/hyperframes
heygen-com/hyperframes
GitHub将每周更新日志Markdown转换为1080p品牌视频，包含动画UI模拟、配音和字幕。通过预设资产和脚手架确保视觉一致性，严格遵循可视化优先原则生成45-60秒短视频。
安装全部 Skills
npx skills add heygen-com/hyperframes --all -g -y
集合内 Skills (40)
将每周更新日志Markdown转换为1080p品牌视频，包含动画UI模拟、配音和字幕。通过预设资产和脚手架确保视觉一致性，严格遵循可视化优先原则生成45-60秒短视频。
用户提供changelog markdown并要求制作视频
用户提及'changelog video'
npx skills add heygen-com/hyperframes --skill changelog-video -g -y
将每周更新日志Markdown转换为品牌化短视频，包含UI动画、配音和字幕。通过解析内容、规划脚本并调用指定技能生成符合规范的HTML项目，最终渲染为1080p视频。
用户提供了changelog或digest markdown文件并要求制作周更视频
用户明确输入'changelog video'
npx skills add heygen-com/hyperframes --skill changelog-video -g -y
用于生成12秒动态标题动画的组件，通过叶片扫过画面揭示标题。支持自定义字体、背景及动画参数，适用于前端页面视觉增强。
需要添加动态标题动画效果
配置前端视觉组件
npx skills add heygen-com/hyperframes --skill canopy-part-title -g -y
提供基于WebGL2的1920x1080动态标题翻转视觉效果组件，支持自定义文案、扫动方向及多种交互参数。
需要添加高帧率3D视觉特效
集成前端动态UI组件
npx skills add heygen-com/hyperframes --skill code-slice-hero -g -y
提供3D轮播组件，含圆角斜面立方体运动动画。支持通过JSON或变量自定义卡片内容、几何尺寸及缓动效果，适用于前端视觉展示。
需要实现3D卡片轮播效果
集成前端动态视觉组件
npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -y
提供22.5秒冰裂视觉序列，包含Logo、双文本及相机环绕动画。支持通过变量自定义文案和Logo，适用于前端页面展示或视频渲染。
需要制作带有冰裂特效的Logo或文字动画
前端项目中集成可配置的3D/粒子视觉组件
npx skills add heygen-com/hyperframes --skill frost-sequence-camera-orbit -g -y
提供玻璃碎片拼贴标题的动画效果，支持自定义文本、分片数量及物理参数。适用于前端视频或动态视觉展示场景。
需要生成带有玻璃质感的标题动画
集成 HyperFrames 组件进行视觉渲染
npx skills add heygen-com/hyperframes --skill glass-shard-title -g -y
提供10秒1080p动态功能卡片组件，支持标题、描述、颜色和轨道角度配置。基于GSAP和Three.js实现入场、环绕及退场动画，适用于HyperFrames视频合成系统。
需要添加带3D环绕动画的功能介绍卡片
生成HyperFrames视频合成中的动态视觉元素
配置自定义样式的UI动效组件
npx skills add heygen-com/hyperframes --skill orbit-card -g -y
提供基于3D线框字体的动态标题动画组件，支持门户爆发、文字替换及自定义变量，适用于前端视觉呈现。
需要添加动态文字标题效果
生成前端UI动效组件
npx skills add heygen-com/hyperframes --skill wireframe-portal-title -g -y
将文本转化为无出镜讲解视频，通过编排步骤生成设计、脚本和逐帧 HTML 动画。
需要将文章或笔记转为视频
创建概念拆解或教程视频
npx skills add heygen-com/hyperframes --skill faceless-explainer -g -y
将Figma设计稿（资产、品牌标识、组件、动效）导入HyperFrames视频合成，支持REST调用及连接器辅助，实现从静态资源到GSAP动画的自动化转换。
用户粘贴Figma链接
请求导入Figma设计或品牌元素
npx skills add heygen-com/hyperframes --skill figma -g -y
用于创建或编辑自定义 HyperFrames 视频作品，支持多场景、品牌宣传片、蒙太奇及自由构建。处理媒体适配与 Figma 集成，管理项目状态与素材引用。
需要制作长视频或多场景作品
创建品牌宣传片或混剪视频
无专用工作流时的通用视频生成
npx skills add heygen-com/hyperframes --skill general-video -g -y
HyperFrames 核心技能，定义 HTML 组合结构的构建规范。涵盖 data-* 属性、轨道剪辑、变量及确定性渲染规则，提供技术契约与常见陷阱指南，确保视频从 HTML 的正确生成与渲染。
需要构建或理解 HyperFrames 项目的基础结构
查询 data-* 属性、轨道/剪辑配置或渲染规则
排查 CSS 变换冲突或渲染性能问题
npx skills add heygen-com/hyperframes --skill hyperframes-core -g -y
提供 HyperFrames 视频的非动画创意方向，包括品牌、节奏、风格、旁白和构图。处理设计规范、调色板、排版及节拍规划，确保视觉输出符合品牌规范且避免网页化空洞感。
需要确定视频的品牌风格或配色方案
请求生成或解析设计规格文件
进行视频画面的构图与节拍规划
调整视觉风格以匹配特定情绪或预设
npx skills add heygen-com/hyperframes --skill hyperframes-creative -g -y
定义 HyperFrames 关键帧技能，处理缩放、平移、镜头运动等视觉动画及 CSS/SVG 动画实现，明确与剪辑组装的边界，提供具体机制指导。
需要制作推拉镜头或 Ken Burns 效果
生成 CSS 或 JS 动画关键帧代码
执行 hyperframes keyframes 诊断
npx skills add heygen-com/hyperframes --skill hyperframes-keyframes -g -y
将音乐曲目转化为节拍同步视频，支持歌词、幻灯片或动态宣传视频。通过自动分析音频节拍，编排并生成逐帧合成文件，最终渲染为完整视频作品。
用户需要将音频转换为视频
需要制作音乐节拍同步的视频内容
基于音乐节奏自动生成视觉素材
npx skills add heygen-com/hyperframes --skill music-to-video -g -y
将 GitHub PR 代码变更转化为解释性视频。作为编排器，按步骤摄入 PR 差异、设计故事板与脚本、生成帧并渲染最终视频，适用于代码变更展示场景。
用户请求将 GitHub Pull Request 转换为视频
需要基于代码 Diff 和提交记录制作功能或修复说明视频
npx skills add heygen-com/hyperframes --skill pr-to-video -g -y
将产品或营销内容转化为推广视频，涵盖需求捕获、品牌设计、脚本分镜及帧级制作。作为编排者，按步骤引导用户完成从brief到最终视频的生成流程，支持Figma源和多媒体资源调用。
需要制作产品发布或推广视频
要求展示网站功能或进行应用演示
提供产品URL、脚本或简报以生成宣传物料
npx skills add heygen-com/hyperframes --skill product-launch-video -g -y
将现有的Remotion(React)视频合成源文件单向迁移转换为HyperFrames HTML。仅在用户明确要求迁移时使用，支持机械性翻译并自动运行SSIM测试验证质量，拒绝不支持的反向转换或非Remotion源。
port my Remotion project to HyperFrames
convert this Remotion code to HyperFrames
migrate from Remotion
translate this Remotion comp
npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -y
用于制作 HyperFrames 幻灯片演示、Pitch Deck 或交互式演示文稿，支持片段揭示、分支导航及演讲者模式。需确认用户意图，优先处理 Figma 源文件，输出为可导航的 Deck 而非 MP4。
用户要求制作幻灯片、演示文稿或 Pitch Deck
提及 HyperFrames slideshow 或交互式演示
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
提供七种动态图形转场与入场技巧，包括SEAM剪辑、瀑布切割及Nudge曲线。核心原则为在速度峰值处剪辑并匹配方向与速度，涵盖Z轴符号规则、模糊逻辑及GSAP实现细节，用于指导Kinetic Text和镜头运动的设计。
设计视频转场或动态文字效果
需要匹配运动速度和方向的视觉特效
配置GSAP动画参数
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
提供MacOS风格超大光标在HyperFrames发布视频中的使用规范，包括尺寸、样式、入场动画及点击交互，用于引导观众视线并增强场景过渡的动态效果。
视频场景涉及鼠标指针或指针主导的动作
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 captions-overlay -g -y
提供七种动态图形转场与入场技巧，涵盖缩放、切割、模糊及组滑动。核心原则为在峰值速度处剪辑并匹配方向与速率，包含Z轴符号规则与模糊逻辑，用于实现流畅的视觉过渡与文本节奏控制。
制作视频转场效果
设计动态文字入场动画
调整画面组块的移动节奏
npx skills add heygen-com/hyperframes --skill cut-the-curve -g -y
指导多场景视频动画连贯性的核心规范，确保镜头运动无缝衔接。涵盖向量法则、过渡时机及性能要求，防止场景割裂与无效晃动。
需要制作多场景视频动画
设计场景间转场效果
检查动画运动的连贯性
npx skills add heygen-com/hyperframes --skill motion-doctrine -g -y
提供用于视频制作的超大光标视觉技巧，指导如何作为视觉引导元素进入、点击触发及退出场景，增强画面动感与叙事连贯性。
制作产品发布视频中的UI交互场景
需要为静态或沉闷的画面增加动态引导
npx skills add heygen-com/hyperframes --skill oversized-cursor -g -y
定义场景间过渡的渲染正确性原则，解决白闪和合成问题。涉及时间线组装、CSS背景修复及注入器逻辑，确保视频转场在Master Timeline上正确混合。
组装主时间线或index.html时
出现切点或交叉淡入淡出处的白色闪光时
分析过渡透明度 dips 原因时
验证重叠场景包装器混合机制时
npx skills add heygen-com/hyperframes --skill seam-craft -g -y
为单人说话视频添加字幕，支持标准、电影感和主题特效三种风格。通过本地流程完成转录、抠像和合成，不修改原始素材，按视觉标识路由。
需要为视频添加字幕或标题
要求生成电影感或VFX风格的嵌入字幕
npx skills add heygen-com/hyperframes --skill embedded-captions -g -y
HyperFrames动画技能，提供原子运动规则、多阶段场景蓝图、转场及运行时适配器（GSAP等）。用于组合动画、加载模板或查询API。
需要实现UI动效或场景过渡
查找特定运行时（如GSAP/Lottie）的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开发循环指南，涵盖项目初始化、素材检索、时间线编排、代码检查、预览及多端渲染发布。用于高效制作动态视觉内容并诊断构建失败问题。
需要创建或编辑视频/动画项目
执行媒体资产查找与组合
运行项目检查或渲染任务
排查构建或渲染失败错误
npx skills add heygen-com/hyperframes --skill hyperframes-cli -g -y
HyperFrames注册表技能，用于搜索、安装和配置视觉块与组件。支持CLI命令管理素材库，自动处理依赖，指导HTML属性接线及文件路径配置，覆盖从发现到贡献上游的全流程。
需要查找或安装特定的视觉效果（如CRT、故障风）
使用hyperframes add命令安装模块
配置block/component的HTML接线属性
修改hyperframes.json中的注册表路径
npx skills add heygen-com/hyperframes --skill hyperframes-registry -g -y
定义 HyperFrames Studio 项目构建规范，包括时间轴布局、子组合结构及字幕轨道规则。区分编辑与对话场景，指导如何规划新影片及遵循现有文件约定。
用户询问或请求修改 HyperFrames 视频项目的结构或布局
需要规划新影片的 storyboard 和构建顺序
讨论时间轴中元素轨道的组织和安全区域设置
npx skills add heygen-com/hyperframes --skill hyperframes-studio -g -y
HyperFrames视频制作入口技能，支持从HTML生成动画/视频。涵盖项目状态管理、插件安装、使用量检查及多场景路由（如Remotion迁移、现有项目渲染等），集成CLI与Studio工作流。
创建或编辑视频、动画、动态图形
将Remotion源移植到HyperFrames
检查、诊断、预览或发布HyperFrames项目
处理现有项目的特定操作
npx skills add heygen-com/hyperframes --skill hyperframes -g -y
HyperFrames媒体操作系统，通过resolve命令统一解决BGM、音效、图像等素材，支持TTS生成及音视频处理。
需要获取背景音乐、音效、图片或Logo资源
生成语音旁白或进行视频后期处理
npx skills add heygen-com/hyperframes --skill media-use -g -y
用于生成短时长、无旁白的设计导向动态图形，涵盖动效排版、数据可视化及UI动画等。支持从Figma导入资产，通过自主工作流完成素材获取、镜头规划与渲染输出，强调设计驱动与品牌一致性。
需要制作10秒内的动态Logo或品牌锁屏
生成动态数据图表或统计数字动画
创建网页滚动效果或UI交互演示动画
制作社交媒体覆盖层或动态地图
npx skills add heygen-com/hyperframes --skill motion-graphics -g -y
