前言¶

产品方甩过来一个落地页 HTML，说”把这个做成一个 30 秒的宣传片，要有解说”。传统做法是录屏、剪辑、配音、加动效，一圈下来半天起步，效果还受制于录屏分辨率和剪辑工具。下面介绍的视频生成技能（source-to-video）走另一条路：把 HTML 页面直接作为素材源，由 HyperFrames 合成带口播和动效的短视频，省去录屏与剪辑环节。

这是什么¶

视频生成技能是一个基于 HyperFrames 的 Agent Skill，坐标 @user_8bae2f22/source-to-video，版本 1.0.1，由社区发布者 user_8bae2f22 维护，来源为 community，分类属于 design-media。它解决的问题是：当手上只有 HTML 页面 / 工作台 / 落地页这类原始素材，却需要产出可分享的宣传短视频时，把素材理解、设计令牌提取、合成、配音、渲染串成一条流水线，由 Agent 调用技能一次性完成。

据官方简介，该技能覆盖素材理解、设计令牌提取、合成、清晰中文配音、渲染全流程，默认产出 30 秒、1920×1080@30fps 的成片。

核心功能¶

已核实的能力：

• 输入为原始素材（HTML 页面 / 工作台 / 落地页），由技能理解页面结构与样式。
• 合成层基于 HyperFrames，从素材中提取设计令牌（配色、字体、间距等）用于动效与画面统一。
• 产出带中文口播配音的宣传短视频，默认规格 30 秒、1920×1080、30fps（据官方简介）。

触发场景（据官方简介）：用户提供 HTML 文件并要求”做成视频 / 宣传片 / 短视频”、提到 Hyperframes、或想把某个产品 / 页面 / 功能录制成可分享的动效视频时，应使用此技能。

安装与启用¶

已抓取资料中未给出具体的安装命令，也没有 Cursor / Codex CLI / Claude Code 的分端说明，此处不臆测，请以官方页面为准。

可核实的元数据：

• 标签 requires_api_key=false，即调用不需要额外配置 API Key。
• 官方地址：https://api.skillhub.cn/user_8bae2f22/source-to-video
• SkillHub 页面：https://www.skillhub.cn/skills/user_8bae2f22/source-to-video

启用方式按通用 SKILL.md 技能流程：在支持 SkillHub 技能的 Agent 环境中加载该技能坐标，由 Agent 在遇到上述触发场景时自动调用。

适用场景与注意¶

适合：

• 手上有 HTML 落地页、产品页或内部工作台，需要快速产出带解说的短视频用于发布或演示。
• 希望画面动效与页面设计一致，而不是录屏后的粗糙效果。

注意：

• 该技能依赖 HyperFrames 合成链路，素材越结构化（标准 HTML + CSS），产出越稳定。
• 配音为中文口播，若需要其他语言或特定音色，目前资料中未见相关配置项。
• 资料中显示安装数为 0、来源为 community，属于较新的社区技能，大规模生产使用前建议先用一个页面做小样验证。

结尾¶

视频生成技能把”HTML 素材 → 带口播动效的宣传片”这条链路收敛成一次技能调用，核心价值是替代录屏 + 剪辑的手工流程，并保持画面与页面设计的一致性。想进一步确认安装命令与最新参数，建议直接打开官方地址查看。

官方地址：https://api.skillhub.cn/user_8bae2f22/source-to-video