一次性设置
在您的项目中（或在您的代理的全局范围内）安装技能：克劳德设计
克劳德设计公司使用了不同的设置。从 GitHub 下载claude-design-hyperframes.md（单击 ↓ 按钮），然后将其附加到您的聊天（不要粘贴 URL — 文件附件会产生更好的输出）：
npx hyperframes preview 的 AI 编码智能体中进行优化。请参阅 Claude 设计指南 了解完整的工作流程。
两种提示形状
最成功的超框架提示属于两种形式之一。冷启动——描述视频
你从头开始告诉代理人你想要什么。最适合您头脑中有创意方向的全新工作。
使用 /hyperframes 创建一个 10 秒的产品介绍，并在深色背景和微妙的背景音乐上淡入标题。
使用 /hyperframes 制作一个关于 [主题] 的 9 分 16 秒的 TikTok 式挂钩视频，并带有与 TTS 旁白同步的弹性字幕。
当您指定以下内容时，冷启动提示效果最佳：
- 持续时间（例如“10 秒”、“30 秒”、“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 转换为动画条形图竞赛。
热启动提示会产生更丰富、更接地气的视频，因为代理正在撰写“特定的内容”，而不是发明文案。
迭代
超框架是一种对话。第一次渲染后，以与视频编辑器交谈的方式与代理交谈 - 不要从头开始重新提示：将标题放大 2 倍。
切换到深色模式。
在结尾处添加淡出效果，并在 0:03 处添加一个下三分之一，其中包含我的名字和标题。
标题太小并且与下三分之一重叠。将它们向上移动并缩小。
将背景音乐替换为 assets/track.mp3。
代理已经打开了构图并加载了技能——小的有针对性的编辑比长时间的重新指定产生更好的结果。
改变输出的词汇
这些技能将自然语言形容词映射到特定的框架设置。使用正确的词语可以获得正确的结果，而无需指定技术细节。运动和缓动
描述运动应该如何“感觉”以及代理如何选择匹配的 GSAP 缓动：
**时间速记：**快（0.2秒）=能量，中（0.4秒）=专业，慢（0.6秒）=豪华，非常慢（1-2秒）=电影般。
字幕音
描述您的标题的“能量”，代理会选择匹配的版式、大小和动画：过渡
每个多场景合成都受益于过渡。描述能量水平：
或者按心情描述：
音频反应动画
将音频频段映射到视觉属性。代理使用以下默认值：标记亮点
手绘文本强调效果：文本转语音
TTS 通过 Kokoro 在本地运行（无需 API 密钥）。描述内容，然后客服人员选择一个声音，或者直接请求一个声音：渲染质量
规则须知
这些技能会自动强制执行这些规则，但如果您手动编辑合成或调试问题，这些规则就很重要：- 在
window.__timelines上注册所有时间线 — 渲染器无法寻找它不知道的动画。 - 视频元素必须是
muted— 音频位于单独的<audio>元素中，以便渲染器可以混合它。 - 没有
Math.random()— 随机值在每次渲染上产生不同的帧，打破了确定性。如果您需要伪随机值，请使用种子 PRNG（例如 mulberry32）。 - 同步时间线构建 - GSAP 时间线设置期间无
async/await或fetch()。 - 定时元素需要
class="clip"— 加上data-start、data-duration和data-track-index。 - 为每个场景添加入口动画 - 没有动画的元素在视频中感觉很破碎。
- 在场景之间添加过渡 - 在合成视频中，场景之间的跳切几乎总是无意的。
反模式
引起摩擦（或错误输出）的因素：- 不要要求 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 捕获结构问题，验证捕获运行时错误（JS 异常、缺少资产、对比问题）。 - 不要假设代理知道您的资产。 明确提及文件路径（
assets/intro.mp4、assets/logo.png） - 代理将检查那里有什么，但提示会加快速度。
推荐的工作流程
npx hyperframes init my-video— 搭建一个项目（技能自动安装）- 在 Claude Code（或 Cursor / Codex）中打开项目
- 使用
/hyperframes和上面的形状之一进行提示 npx hyperframes preview— 在代理编辑时在浏览器中观看- 用有针对性的小提示进行迭代
npx hyperframes render --output final.mp4当你高兴的时候
后续步骤
快速入门
构建并渲染您的第一个视频
常见错误
linter 无法捕获的陷阱
GSAP动画
添加淡入淡出、滑动、缩放和自定义动画
目录
50 多个即用型块和组件