提示词指南

Hyperframes 专为 AI 代理构建——合成是纯 HTML，CLI 是非交互式的，框架提供 skills 来教会代理文档无法单独覆盖的模式。本指南展示在安装 skills 后如何有效提示代理——改变输出的词汇、节省时间的迭代模式，以及防止出错的规则。

一次性设置

在你的项目中安装 skills（或为你的代理全局安装）：

npx skills add heygen-com/hyperframes

在 Claude Code 中，安装后重启会话。Skills 注册为斜杠命令：

💡 Tip

始终在 Hyperframes 提示词前加上 /hyperframes（或以其他方式为非 Claude 代理调用 skill）。这会显式加载 skill 上下文，使代理首次就能正确理解合成规则，而不是依赖它对网页视频的记忆。

Claude Design

Claude Design 使用不同的设置。从 GitHub 下载 claude-design-hyperframes.md（点击 ↓ 按钮），然后附加到你的聊天中（不要粘贴 URL——文件附件产生更好的输出）：

Use the attached skill. 25-second LinkedIn video for my startup.

Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
Traction: 200+ teams, $1.2M ARR, 18% MoM growth.
CTA: autocrmhq.com

Claude Design 生成有效的初稿（品牌识别、场景内容、动画、过渡）。下载 ZIP 并在任何 AI 编程代理中精修，同时运行 npx hyperframes preview。完整工作流请参见 Claude Design 指南。

两种提示词模式

大多数成功的 Hyperframes 提示词属于以下两种模式之一。

冷启动——描述视频

你从零开始告诉代理你想要什么。最适合你脑海中已有创意方向的全新工作。

使用 /hyperframes，创建一个 10 秒的产品介绍，深色背景上带淡入标题和微妙的背景音乐。

使用 /hyperframes，制作一个 9:16 TikTok 风格的钩子视频，关于主题，带弹跳字幕与 TTS 旁白同步。

冷启动提示词在你指定以下内容时效果最好：

• 时长（如"10 秒"、"30s"、"5 个场景各 3 秒"）
• 宽高比（"16:9"、"9:16 竖屏"、"1:1 方形"）——否则默认为 1920x1080
• 氛围/风格（"极简瑞士网格"、"温暖颗粒感模拟"、"高能量社交"）
• 关键元素（标题、底部字幕条、字幕、背景视频、音乐）

热启动——将上下文转化为视频

你给代理一些可用的东西——URL、文档、CSV、转录文本——然后要求它将这些合成为视频。这是 Hyperframes 大放异彩的地方，因为代理在一次流程中完成研究/总结步骤_和_制作步骤。

看看这个 GitHub 仓库 https://github.com/heygen-com/hyperframes，使用 /hyperframes 向我解释其用途和架构。

使用 /hyperframes 将附加的 PDF 总结为 45 秒的宣传视频。

阅读此更新日志，使用 /hyperframes 将前三项变更转化为 30 秒的发布公告视频。

使用 /hyperframes 将此 CSV 转化为动画柱状图竞赛。

热启动提示词产生更丰富、更有依据的视频，因为代理是针对_具体事物_进行创作，而不是凭空编造文案。

迭代

Hyperframes 是对话式的。在首次渲染后，像与视频编辑交谈一样与代理对话——不要从头重新提示：

标题放大两倍。

切换到深色模式。

在结尾添加淡出，在 0:03 添加底部字幕条，带上我的名字和头衔。

字幕太小并且与底部字幕条重叠。把它们上移并缩小。

用 assets/track.mp3 替换背景音乐。

代理已经有打开的合成和加载的 skills——小的有针对性的编辑比冗长的重新描述产生更好的结果。

改变输出的词汇

Skills 将自然语言形容词映射到具体的框架设置。使用正确的词语就能得到正确的结果，无需指定技术细节。

动效与缓动

描述运动应该如何_感觉_，代理会匹配相应的 GSAP 缓动：

时长速记： 快速（0.2s）= 活力，中速（0.4s）= 专业，慢速（0.6s）= 奢华，极慢（1-2s）= 电影感。

字幕风格

描述字幕的_能量_，代理会选择匹配的字体、大小和动画：

"Hype-style captions with scale-pop"
"Calm, elegant subtitles with slow fades"
"Karaoke-style word highlighting"

逐字样式也可以：

"Make brand names larger with accent color"
"Add bounce to emotional keywords"
"Highlight numbers differently"

过渡

每个多场景合成都受益于过渡。描述能量级别：

或按氛围描述：

"Warm transitions for this wellness brand"
"Cold, clinical transitions for tech"
"Playful bouncy transitions"
"Dramatic zoom for the reveal"

音频响应动画

将音频频率带映射到视觉属性。代理使用以下默认值：

"Make the text pulse with the beat"
"Add bass-driven scale to the logo"
"Create glow that responds to treble"

💡 Tip

文本的音频响应效果保持微妙（3-6% 强度）。背景可以更大（10-30%）。

马克笔高亮

手绘强调效果的文本：

"Add a marker highlight sweep on 'revolutionary'"
"Circle this keyword with hand-drawn effect"
"Add burst lines around 'AMAZING'"

文字转语音声音

TTS 通过 Kokoro 在本地运行（无需 API 密钥）。描述内容，代理会选择声音，或直接指定：

"Generate narration for this script"
"Create voiceover with a professional female voice"
"Add TTS with British male voice at 1.1x speed"

渲染质量

"Quick draft render"
"Render at high quality"
"Export as transparent WebM"

需要知道的规则

Skills 会自动执行这些规则，但如果你手动编辑合成或调试问题，以下是重要的规则：

1. 在 window.__timelines 上注册所有时间轴——渲染器无法定位它不知道的动画。
2. 视频元素必须是 muted——音频放在单独的 <audio> 元素中以便渲染器混合。
3. 不使用 Math.random()——随机值在每次渲染时产生不同帧，破坏确定性。如果需要伪随机值，使用种子 PRNG（如 mulberry32）。
4. 同步时间轴构建——GSAP 时间轴设置期间不使用 async/await 或 fetch()。
5. 定时元素需要 class="clip"——加上 data-start、data-duration 和 data-track-index。
6. 为每个场景添加入场动画——没有动画的元素在视频中会显得有问题。
7. 在场景之间添加过渡——合成视频中场景之间的跳切几乎总是无意的。

⚠️ Warning

规则 1-5 是技术要求——违反会导致渲染不正确。规则 6-7 是最佳实践，skills 默认应用。你有理由时可以覆盖它们。

反模式

导致摩擦（或错误输出）的做法：

• **不要要求 React / Vue 组件。**Hyperframes 合成是带有 data-* 属性和 GSAP 时间轴的纯 HTML。要求"给片头做一个 React 组件"会迫使代理后续进行转换。
• **不要要求 4K 或 60fps，除非你确实需要。**默认值（1920×1080、30fps）渲染快且效果好。更高的规格会显著减慢渲染速度。
• **不要跳过斜杠命令。**没有 /hyperframes，代理可能猜测 HTML 视频惯例，而不是使用框架的实际规则（定时元素上的 class="clip"、window.__timelines 注册等）。
• **不要将长错误日志直接粘贴到提示词中而不提供上下文。**先运行 npx hyperframes lint 和 npx hyperframes validate——lint 捕获结构问题，validate 捕获运行时错误（JS 异常、缺失素材、对比度问题）。
• **不要假设代理知道你的素材。**明确提及文件路径（assets/intro.mp4、assets/logo.png）——代理会检查现有内容，但提示能加快速度。

推荐工作流

1. npx hyperframes init my-video——搭建项目（skills 自动安装）
2. 在 Claude Code（或 Cursor / Codex）中打开项目
3. 使用 /hyperframes 和上述模式之一进行提示
4. npx hyperframes preview——在浏览器中观看代理编辑
5. 使用小的有针对性的提示进行迭代
6. npx hyperframes render --output final.mp4——满意后渲染

下一步

• 快速开始 构建并渲染你的第一个视频
• 常见错误 Linter 无法捕获的陷阱
• GSAP 动画 添加淡入、滑动、缩放和自定义动画
• 素材目录 50+ 即用型块和组件