GitHub Copilot CLI

GitHub Copilot CLI 将 AI 驱动的编程辅助带到你的终端。HyperFrames skills 教会它如何编写正确的合成、GSAP 时间线和框架特定的模式——因此你无需自己阅读文档就能获得有效的视频 HTML。

前提条件

• GitHub Copilot 订阅 — Free、Pro、Pro+、Business 或 Enterprise 均包含 CLI 访问
• 已安装 Copilot CLI — npm install -g @github/copilot（或通过安装脚本）
• Node.js 22+ 和 FFmpeg 用于 HyperFrames CLI

安装 skills

将 HyperFrames skill 包安装到你的项目中：

npx skills add heygen-com/hyperframes

这会将 skill 目录写入项目中的 .agents/skills/——Copilot CLI 自动扫描的工作区范围 skills 路径。

💡 Tip

要让 skills 在所有项目中可用，请全局安装：

npx skills add heygen-com/hyperframes --agent github-copilot --global

全局 skills 位于 ~/.copilot/skills/ 中，在每个 Copilot CLI 会话中加载。

如果你在活动会话期间安装 skills，运行 /skills 打开 skill 选择器并验证它们是否出现。安装到项目目录的新 skills 会在下次提示时自动被获取。

使用 skills

Copilot CLI 支持通过斜杠命令的显式调用和基于提示的自动检测。

斜杠命令

在 skill 名称前加上 / 来显式加载：

/hyperframes Create a 10-second product intro with a fade-in title and dark background.

/gsap Add a scale-pop animation to the title element.

/hyperframes-cli How do I render at 60fps with Docker?

自动检测

Copilot 还会根据每个 SKILL.md 中的 description 字段匹配 skills。如果你的提示提到合成、时间线或视频渲染，agent 会加载正确的 skills，无需你指定：

Create a 9:16 TikTok hook video about AI productivity with bouncy captions.

当你安装了大量 skills 时，显式调用更可靠——对于大型 skill 集，agent 的 token 预算可能无法容纳每个 skill 描述，因此直接命名 skill 可以保证加载。

Skill 管理

创建和预览视频

创建项目脚手架

npx hyperframes init my-video
cd my-video

Skills 会自动安装在新项目中。

启动预览服务器

npx hyperframes preview

在浏览器中打开 HyperFrames Studio。编辑会自动重载。

在项目目录中启动 Copilot CLI

在第二个终端中：

copilot

使用 skill 发出提示

/hyperframes Create a 15-second dark-themed product intro with hype-style
captions and a flash transition to the CTA.

agent 编写有效的 HyperFrames HTML——data-* 属性、计时元素上的 class="clip"、在 window.__timelines 上注册的暂停 GSAP 时间线。预览在文件保存时更新。

迭代

继续提示而无需重新指定完整上下文：

Make the title 2x bigger and add a lower third at 0:03.

Swap the transition to a whip pan.

渲染

npx hyperframes render --output output.mp4

或者让 agent：

/hyperframes-cli Render this composition to output.mp4 at high quality.

Agent 模式

Copilot CLI 的 agent 模式可以自主处理多步骤任务——创建项目脚手架、编写合成、安装 registry blocks 并按顺序渲染：

/hyperframes Scaffold a new project called "launch-video", create a 30-second
product launch video with 5 scenes, install the flash-through-white transition
block, and render to mp4.

在 agent 模式下，Copilot 会代你运行终端命令（如 npx hyperframes init 和 npx hyperframes render）。在批准前检查命令——特别是如果 skill 在其 allowed-tools 中预批准了 shell。

⚠️ Warning

仅对你信任的 skills 在 skill allowed-tools 中预批准 shell 或 bash。HyperFrames skills 不会预批准 shell 访问——agent 会在运行终端命令前请求确认。

MCP 替代方案

Copilot CLI 还支持 MCP 服务器，用于无需本地 CLI 的云端创作。使用 --additional-mcp-config 标志将 HyperFrames MCP 服务器添加到你的会话：

copilot --additional-mcp-config '{"mcpServers":{"hyperframes":{"url":"https://mcp.heygen.com/mcp/hyperframes"}}}'

或将配置保存到文件并引用：

copilot --additional-mcp-config @mcp-config.json

在提示时通过 OAuth 授权。参见 MCP 指南了解完整详情。

提示

• 合成工作始终以 /hyperframes 开始。 这会加载完整的 skill 上下文——合成规则、data 属性、GSAP 模式、字幕格式——这些是通用网络知识无法涵盖的。
• 使用 /skills 检查 skill 状态。 如果输出看起来不对，打开 skill 选择器验证 HyperFrames skills 是否已启用。
• 渲染前运行 npx hyperframes lint。 检查器会捕获复杂多场景编辑中 agent 可能遗漏的结构问题。
• 在单独的终端中保持预览服务器运行。 你可以在 Copilot CLI 中提示时实时看到每次编辑的反映。
• 安装 registry blocks 以获得过渡和效果。 npx hyperframes add shimmer-sweep 安装预构建 blocks，然后提示 agent 将它们接入。

下一步

• 提示指南 生成更好合成的词汇和模式。
• 目录 50+ 可直接使用的 blocks，agent 可以安装和连接。
• GSAP 动画 运动原理和时间线创作。
• 管线指南 agent 用于多节拍视频的 7 步结构。