给 Agent 装一个视频生成 Skill_it博客站

为什么你需要这个 Skill

大多数 AI Agent 的输出停留在文本、图片或 JSON，但很多场景（比如生成产品演示、数据分析动画、教学视频）需要动态视频。传统做法是调用 FFmpeg 或 Puppeteer 写大量胶水代码，维护成本高。

Hyperframes 的思路很直接：Write HTML. Render video. 它把视频生成抽象成一个纯 JS 函数，入参是 HTML 字符串 + 配置（分辨率、帧率、时长），返回视频 Buffer。专为 Agent 调用优化，不需要 GUI 环境。

读完本文，你会得到一个可直接复制运行的 Skill 模板，让 Agent 轻松产出视频内容。

触发条件与适用场景

当 Agent 需要制作动态仪表盘回放时
当 Agent 被要求演示某个操作流程（如 UI 点击路径）
当 Agent 需要将数据分析结果转化为短视频报告
当你需要批量生成社交媒体预告片时

触发条件可以写进 Skill 的 trigger 字段，例如用户消息包含「视频」「动画」「演示」等关键词。

完整 Skill 结构

下面是一个可以直接使用的 SKILL.md，你只需要把 renderVideo 函数替换为 Hyperframes 的实际 API（见仓库文档，主要方法名类似 synthesize）。

markdown

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

# Skill: video_renderer

## Description
将 HTML 模板渲染为 MP4 视频，适用于 Agent 生成动态内容。

## Trigger
- 用户请求 「生成视频」「制作动画」「渲染演示」
- 任务结果需要视频格式输出

## Parameters
| 参数 | 类型 | 必需 | 说明 |
|------|------|------|------|
| `html` | string | 是 | 完整的 HTML 内容（含 CSS、JS 动画） |
| `width` | number | 否 | 视频宽度，默认 1920 |
| `height` | number | 否 | 视频高度，默认 1080 |
| `fps` | number | 否 | 帧率，默认 30 |
| `duration` | number | 是 | 视频时长，单位秒 |
| `outputPath` | string | 否 | 输出路径，默认 /tmp/video.mp4 |

## Implementation
```typescript
import { renderVideo } from 'hyperframes'; // 替换为实际包名和导出名

export async function execute(params: {
  html: string;
  width?: number;
  height?: number;
  fps?: number;
  duration: number;
  outputPath?: string;
}): Promise<string> {
  const buffer = await renderVideo(params.html, {
    width: params.width ?? 1920,
    height: params.height ?? 1080,
    fps: params.fps ?? 30,
    duration: params.duration,
  });

  const output = params.outputPath ?? `/tmp/video_${Date.now()}.mp4`;
  await fs.promises.writeFile(output, buffer);
  return `视频已生成：${output}`;
}

示例调用

json

1 2 3 4 5 6

{
  "html": "<html><body style='background:black;'><h1 style='color:white;'>Hello</h1></body></html>",
  "duration": 5,
  "width": 1280,
  "height": 720
}

text

1 2 3 4 5 6 7 8


这个 Skill 不依赖任何 GUI 环境，Hyperframes 底层通过 Headless Chrome 渲染帧并合成，在纯服务器环境也能运行。

## 差 Prompt vs 好 Prompt：定义 Agent 调用逻辑

差 Prompt：
```markdown
你是一个会生成视频的助手，当用户说生成视频时，你就调用视频生成函数。

问题：不明确调用哪个函数、参数如何映射、如何处理错误。

好 Prompt（直接嵌入 Skill 定义）：

markdown

1 2 3 4 5 6

你拥有 `video_renderer` 技能。当用户请求生成视频时，按以下步骤执行：
1. 解析用户需求，生成对应 HTML 模板（包括 CSS 动画和 JS 逻辑）。
2. 提取或询问视频时长、尺寸（可选默认）。
3. 调用 skill video_renderer 的 execute 方法，传入 html, duration, width, height。
4. 将返回的路径反馈给用户。
注意：如果用户没提供详细样式，用简洁美观的默认模板。

为什么好 Prompt 有效？

明确技能边界和参数来源，减少 Agent 幻觉。
给出默认值策略，避免 Agent 反复询问。
将 HTML 生成责任交给 Agent 本身，利用其编程能力，而不是硬编码模板。

实际案例演示

假设用户输入：「生成一个 10 秒的饼图动画，展示 2024 年各季度销售额占比」。Agent 会：

使用 Hyperframes 的 HTML 模板（基于 Chart.js 或纯 SVG）渲染数据。
调用 video_renderer 生成视频。
返回视频文件路径。

关键代码片段的流程：

typescript

1 2 3 4 5

// Agent 内部逻辑（伪代码）
const data = [45, 30, 15, 10]; // 各季度占比
const html = generatePieChartHTML(data, { animation: true, duration: 10 });
const videoPath = await execute({ html, duration: 10 });
console.log(`视频已保存至 ${videoPath}`);

如果你需要更复杂的组合，比如先跑数据分析 Skill 得到 JSON，再用模板引擎（EJS）嵌入生成 HTML，最后渲染视频——三个 Skill 可以无缝串联。

复用与组合技巧

模板复用： 提取常用图表模板（折线图、柱状图、数据滚动），存储在 /templates 目录，Agent 通过名称引用。
参数固化： 对于固定格式的视频（如每周报告），可以将宽度/高度/帧率写死，只暴露 data 和 title。
异步回调： 超长视频渲染可能耗时，设计中加入 WebSocket 进度通知（Hyperframes 支持帧流式输出）。
缓存机制： 相同的 HTML+参数组合可以缓存视频指纹，避免重复计算。

变体扩展

GIF 版本： 将 duration 改为 loop 模式，输出 GIF（需配合 different renderer）。
字幕叠加： 修改 HTML 模板，引入 WebVTT 组件，为视频添加字幕。
实时流： 结合 WebSocket，每一帧渲染后直接推送，实现实时直播 Agent。

现在你有了一个可运行的 Skill 骨架，去 GitHub 上查看 Hyperframes 的最新 API 并替换掉参数即可投入生产。

给 Agent 装一个视频生成 Skill