HyperFrames AI 视频 Prompt、Brief 与渲染检查清单

高质量 HyperFrames Prompt 应同时说明视频目标、受众、时长、画幅、场景节拍、视觉规范、媒体资产、确定性约束和验收流程，并要求 Agent 在高质量渲染前依次完成 Brief、Storyboard、check、snapshot 与 preview。

这套模板解决什么问题

让 AI Agent 制作 HyperFrames 视频时，最容易失败的不是某一行 GSAP，而是需求里缺少重要信息：

• 不知道视频给谁看
• 不知道必须表达哪一个结论
• 没有固定时长和画幅
• 没有分镜和阅读停顿
• 没有视觉规范
• 不知道哪些素材已经存在
• 不知道什么时候可以开始渲染

这套资源把一次视频任务拆成六类可复制模板：

1. 主任务 Prompt
2. BRIEF.md
3. STORYBOARD.md
4. 单场景制作卡
5. 修改与调试 Prompt
6. 渲染前检查清单

使用时复制需要的部分，把 {{变量}} 替换成真实内容即可。

HyperFrames Skills 和 CLI 会持续更新。模板中的字段用于帮助表达需求；如果当前 Skill 生成的规范字段与示例不同，以项目安装版本的技术合约为准。

模板一：完整视频主 Prompt

适合创建一个新项目或新视频。

请使用 HyperFrames 制作一条视频。

## 目标

视频主题：{{主题}}
核心信息：{{观众看完后必须记住的一句话}}
目标观众：{{受众}}
发布渠道：{{官网 / YouTube / 小红书 / 抖音 / 内部演示}}
行动目标：{{观看 / 点击 / 注册 / 理解 / 分享}}

## 输出

时长：{{20 秒}}
画幅：{{1920×1080 / 1080×1920 / 1080×1350}}
帧率：{{30 FPS}}
语言：{{zh-CN}}
字幕：{{需要 / 不需要}}
旁白：{{需要 / 不需要 / 已提供}}
输出格式：{{MP4}}

## 内容结构

1. {{0–3 秒：Hook}}
2. {{3–8 秒：问题或背景}}
3. {{8–14 秒：核心解释或演示}}
4. {{14–18 秒：结果或证据}}
5. {{18–20 秒：结论和 CTA}}

## 视觉方向

风格：{{瑞士排版 / 编辑杂志 / 极简科技 / 品牌现有风格}}
背景：{{颜色或素材}}
主色：{{颜色}}
高亮色：{{颜色}}
字体：{{字体；没有则由 Agent 提案}}
主视觉：{{产品界面 / 数据 / 流程 / 人物 / 抽象图形}}

必须做到：
- {{每幕只保留一个视觉中心}}
- {{大字号、少文字}}
- {{高潮后有阅读停顿}}

禁止：
- {{通用 SaaS 卡片墙}}
- {{无意义粒子和 3D}}
- {{小字号长段说明}}
- {{过度玻璃拟态}}

## 素材

品牌 Logo：{{文件路径 / 未提供}}
图片：{{文件路径 / 未提供}}
视频：{{文件路径 / 未提供}}
配音：{{文件路径 / 待生成}}
BGM：{{文件路径 / 风格描述 / 不需要}}
参考视频或设计：{{路径 / 描述}}

## HyperFrames 工程要求

- 先检查项目状态、hyperframes.json、现有 Brief、frame.md 和 Blocks。
- 使用当前安装的 HyperFrames Skills 和项目固定的 CLI 版本。
- 先生成或更新 BRIEF.md 与 STORYBOARD.md。
- Storyboard 确认后再编写 Composition。
- 遵守 hyperframes-core 的 Composition、Clip、Track 和媒体合约。
- 每个 Composition 使用同步创建、可暂停、可 Seek 的动画时间轴。
- 不使用未固定的随机数、系统时间、无限循环或渲染时网络请求。
- 关键字体和媒体保存为本地文件。
- 优先复用项目已有 Block、Recipe、设计 token 和转场。
- 动画默认使用 GSAP；只有内容确实需要时才引入 Three.js、Lottie 或其他运行时。

## 检查与审批

1. 写作期间运行 lint。
2. 完成后运行 check。
3. 为每个场景抽取进入、中点、高潮、停留和离场关键帧。
4. 检查通过后打开最终 preview。
5. 等待人工确认，不要自行执行高质量 render。
6. 确认后渲染 {{输出文件名}}。
7. 使用 ffprobe 检查时长、分辨率、帧率和音轨。

## 交付

请保留并整理：
- BRIEF.md
- STORYBOARD.md
- SCRIPT.md（如有）
- frame.md
- Composition 源码
- 本地媒体资产
- 检查结果
- 关键帧截图
- 最终视频

模板二：BRIEF.md

BRIEF.md 负责回答“为什么做、给谁看、必须表达什么”。

---
workflow: {{general-video / 当前 Skill 选择的 workflow}}
flow: {{companion / automation}}
storyboard: {{yes / no}}
message: "{{视频唯一核心信息}}"
destination: "{{发布渠道}}"
aspect: "{{16:9 / 9:16 / 1:1 / 3:4}}"
language: "{{zh-CN}}"
audience: "{{目标受众}}"
length: "{{20s}}"
---

# Project

{{项目或视频名称}}

## Goal

{{这条视频要让观众理解、相信或完成什么}}

## Audience

- 身份：{{身份}}
- 已知：{{他们已经知道什么}}
- 未知：{{需要解释什么}}
- 阻力：{{为什么可能不相信或不行动}}

## One message

> {{如果观众只记住一句话，应该是什么}}

## Destination

- 渠道：{{渠道}}
- 使用位置：{{首页 Hero / 社交帖子 / 发布会 / 广告}}
- 是否静音播放：{{是 / 否}}

## Must include

- {{必须出现的内容 1}}
- {{必须出现的内容 2}}
- {{品牌、数据或法律要求}}

## Must avoid

- {{不能出现的表达}}
- {{不能使用的视觉}}
- {{不能修改的品牌内容}}

## Assets

- Logo：{{路径}}
- Images：{{路径}}
- Video：{{路径}}
- Voice：{{路径或待生成}}
- Music：{{路径或情绪描述}}
- Fonts：{{路径}}

## Approval

- Storyboard approver：{{谁确认}}
- Final preview approver：{{谁确认}}
- Render quality：{{draft / high}}

Brief 自检

• 是否只有一个核心信息
• 是否明确观众已知和未知内容
• 是否明确发布渠道和画幅
• 是否列出必须出现和禁止出现的内容
• 是否知道现有素材在哪里
• 是否明确谁负责确认最终预览

模板三：STORYBOARD.md

Storyboard 不只是场景列表，还要记录每幕的信息任务和动作阶段。

# STORYBOARD

## Global

- Duration: {{20s}}
- Aspect: {{16:9}}
- FPS: {{30}}
- Message: {{唯一核心信息}}
- Visual system: {{frame.md 路径}}
- Narration: {{有 / 无 / SCRIPT.md}}
- Music: {{情绪或文件}}

---

## Scene 01 — {{场景名}}

- Time: {{0–3s}}
- Purpose: {{这一幕为什么存在}}
- One message: {{观众这一幕要看懂什么}}
- Main visual: {{唯一主视觉}}
- On-screen text: {{屏幕文字}}
- Voiceover: {{旁白；没有写 none}}
- Entrance: {{进入动作}}
- Build: {{关系如何建立}}
- Climax: {{强调什么}}
- Dwell: {{结果停留多久}}
- Exit: {{如何进入下一幕}}
- Media: {{使用的媒体路径}}
- Reusable block: {{现有 Block / 新 Block / 否}}
- Checkpoints: {{0.2s, 1.5s, 2.6s}}

## Scene 02 — {{场景名}}

- Time: {{3–8s}}
- Purpose: {{...}}
- One message: {{...}}
- Main visual: {{...}}
- On-screen text: {{...}}
- Voiceover: {{...}}
- Entrance: {{...}}
- Build: {{...}}
- Climax: {{...}}
- Dwell: {{...}}
- Exit: {{...}}
- Media: {{...}}
- Reusable block: {{...}}
- Checkpoints: {{...}}

Storyboard 自检

• 每幕是否只有一个主要信息
• 每幕是否只有一个视觉中心
• 是否写清进入、建立、强调、停留和离场
• 高潮后是否有足够阅读时间
• 是否有无法在规定时长内讲完的文字
• 旁白场景是否以真实音频长度为准
• 是否标出每幕的关键检查时间点
• 可复用场景是否计划为 Block 或 Sub-composition

模板四：单场景制作卡

适合让 Agent 独立制作或修改一个场景，避免影响整条视频。

场景：{{Scene 03 / Big Number}}
时间窗口：{{8–12 秒}}
Composition ID：{{scene-big-number}}

目的：
{{这一幕要让观众理解什么}}

保持不变：
- 总视频时长
- 其他场景时间
- frame.md 颜色和字体
- 已确认旁白
- 主 Composition 的 Track 结构

输入：
- 数字：{{60%}}
- 标签：{{渲染时间缩短}}
- 来源：{{内部测试}}

视觉：
- 数字占画面高度约 30%
- 标签位于数字下方
- 背景保留现有深绿色色场
- 不增加卡片容器

动作：
1. 标签先进入
2. 数字从 0 或较小尺度建立
3. 60% 成为高亮
4. 完整结果停留至少 1.2 秒
5. 整体向上退出

技术约束：
- 只动画内部包装元素，不控制 .clip 显示
- 使用当前 Composition 的 paused timeline
- 不读取 Date.now 或 Math.random
- 不添加远程资源
- ID 在组装页面中必须唯一

检查：
- 8.1 秒：没有提前闪现
- 9.2 秒：数字建立中
- 10.4 秒：高潮状态
- 11.5 秒：完整结果仍然可读

完成后：
- 运行 lint/check
- 只抽取上述关键帧
- 汇报修改文件和检查结果
- 不执行最终 render

模板五：修改视频的 Prompt

修改请求应该包含时间、对象、目标和保持不变的部分。

节奏修改

修改 Scene 02（4–10 秒）的节奏。

当前问题：三个节点进入后立刻退出，观众来不及看完整流程。
目标：保持场景总时长和现有布局不变，让完整流程至少停留 1.3 秒。

允许修改：
- 节点进入时间
- 连线建立时间
- 退出起点

不要修改：
- 场景文字
- 颜色和字体
- 其他场景
- 总视频时长

修改后抽取 5.0、7.0、8.5、9.7 秒截图，不要渲染 MP4。

视觉修改

修改 Scene 01 的构图，不改变文案和时长。

当前问题：标题像网页 Hero，画面上方和下方过空。
目标：让标题成为真正的视频主视觉。

要求：
- 标题字号提高约 20%
- 使用两行不对称排版
- 高亮词向右下偏移
- 增加一个克制的背景尺度元素
- 不添加卡片、按钮或导航栏
- 保持 96px 安全边距

只修改 Scene 01 及其内部样式和时间轴。

局部故障修复

修复 HyperFrames check 在 {{时间点}} 报告的 {{错误信息}}。

请先定位：
1. 哪个 Composition
2. 哪个元素
3. 是静态布局还是动画峰值造成
4. 是否属于有意出画

修复限制：
- 不通过全局缩小字体掩盖问题
- 不在根节点滥用 layout ignore / allow overflow
- 不修改无关场景
- 保持现有时间和视觉目标

修复后重新运行 check，并抽取错误时间前后各一个关键帧。

模板六：渲染前总检查清单

A. 内容

• 视频只有一个核心信息
• 开场 1～3 秒能说明问题或价值
• 每幕都能用一句话解释存在原因
• 屏幕文字可以在当前停留时间内读完
• 结尾只有一个 CTA
• 数据、名称和品牌文案已经复核

B. Storyboard 与节奏

• 所有场景时间之和与 Composition 时长一致
• 场景之间没有意外空白或重叠
• 每幕包含进入、建立、强调和停留
• 高潮不是刚好发生在最后一帧
• 有旁白的场景已经按真实音频长度同步
• 转场没有遮挡下一幕的重要文字

C. Composition 结构

• 根元素有 Composition ID、起点、宽度、高度和时长
• 可见片段带有 class="clip"
• Track 顺序符合预期
• 同轨重叠是有意设计
• 所有 ID 在组装页面中唯一
• Sub-composition Host 与内部 ID 完全一致
• Sub-composition 内容位于 <template> 内
• 全画幅背景位于子元素而不是只写在根节点

D. 动画确定性

• 每个 Composition 只有一条主要 paused timeline
• Timeline 在页面加载时同步创建
• Timeline key 与 Composition ID 一致
• 没有未固定的 Math.random()
• 没有 Date.now()、performance.now() 驱动画面
• 没有无限 repeat: -1
• 没有通过 setTimeout 或异步回调临时创建 Timeline
• 没有 tween display 或原始 visibility
• 没有在页面加载时控制后续 .clip 的显示
• 空间动画优先使用 transform：x、y、scale、rotation

E. 媒体

• 关键图片、字体、视频和音频已经保存到本地
• 素材来源和使用授权清楚
• 视频素材可以在任意时间点正确 Seek
• 配音、BGM 和音效使用统一时间基准
• BGM 不遮挡语音
• 不同媒体元素没有重复 ID
• 所有路径在渲染环境中可访问

F. 视觉

• 每幕只有一个主视觉中心
• 主标题、关键数字和辅助文字有明显尺度差
• 正文没有小到只能暂停阅读
• 关键文字处于安全区域
• 背景装饰不穿过文字
• 颜色对比度通过检查
• 画面不是重复的三列卡片布局
• 特效服务内容，而不是单纯增加复杂度

G. CLI 检查

# 写作期间
npx hyperframes lint

# 最终门槛
npx hyperframes check

# 根据 Storyboard 记录的时间点检查画面
npx hyperframes snapshot --at {{关键时间列表}}

# 打开最终 Composition 预览
npx hyperframes preview

• lint 没有未处理错误
• check 通过
• 每个场景至少检查了一个可见中点
• 进入和离场边界没有闪屏
• Storyboard 看板和最终 Composition 预览没有混淆
• 最终 preview 已由负责人确认

H. 渲染与交付

npx hyperframes render --quality high --output {{output.mp4}}
test -s {{output.mp4}}
ffprobe -v error -show_format -show_streams {{output.mp4}}

• 未经最终预览确认，没有提前高质量渲染
• 输出文件存在且非空
• 时长正确
• 分辨率正确
• 帧率正确
• 音轨存在且同步
• 从头到尾播放正常
• 源码、素材、Prompt 和最终视频一起归档

常见问题速查

推荐的项目归档结构

project/
  BRIEF.md
  STORYBOARD.md
  SCRIPT.md
  frame.md
  hyperframes.json
  compositions/
    index.html
    frames/
      01-title.html
      02-problem.html
      03-demo.html
      04-cta.html
  assets/
    brand/
    fonts/
    images/
    video/
    audio/
  snapshots/
  output/
  notes/
    prompts.md
    revisions.md

不一定每个项目都需要全部文件，但固定结构可以让 Agent 更快找到正确上下文。

系列导航

教程：

1. HyperFrames 原理详解：AI Agent 如何把 HTML 渲染成视频
2. HyperFrames Skills 实战：从 Brief 到 MP4 生成第一条视频
3. HyperFrames 进阶：如何提高画面质量与生产效率
4. 玩转 HyperFrames：从 AI Coder 到 AI Layout Driver
5. HyperFrames 官方 Registry 指南：让 Agent 自动查、拉、挂、验
6. HyperFrames Registry 实战：Block + JSON Schema 视频流水线

资源：

• HyperFrames AI 视频 Prompt、Brief 与渲染检查清单
• HyperFrames Block Registry Starter Kit