HyperFrames2026终极指南-第8章第2节-MCP与AI Agent集成-ClaudeCode加HyperFrames最强AI视频搭档

Claude Code + HyperFrames：最强 AI 视频搭档

你有没有想过，跟 AI 聊几句话，它就能帮你做出一个产品宣传视频？不是那种粗糙的 AI 生成画面，而是精确到每一帧的、可以直接交付给客户的专业视频。今天我就把压箱底的工作流分享出来——用 Claude Code 搭配 HyperFrames，让你像跟视频编辑器对话一样做视频。

为什么是 Claude Code + HyperFrames？

说实话，我一开始对"AI 做视频"这事儿是持怀疑态度的。毕竟之前试过不少 AI 视频工具，出来的东西要么画面诡异，要么完全不可控。直到我遇到了 HyperFrames。

它的思路跟其他 AI 视频工具完全不同——不是让 AI 凭空生成像素，而是让 AI 写 HTML/CSS 代码来描述视频

。这意味着：

  1. 完全可控：每一帧都是确定性渲染，同样的代码永远输出同样的视频
  2. 前端零门槛：会写 HTML 就会做视频
  3. AI 友好：AI 写 HTML 可比写视频编辑脚本强太多了

而 Claude Code 呢？它是我用下来最适合做这件事的 AI 编码工具。原因很简单——HyperFrames 专门为 Claude Code 打造了一套 Skills 系统

，装上之后，Claude Code 就像被"点化"了一样，瞬间变成一个懂 HyperFrames 的视频制作专家。

安装 HyperFrames Skills：3 分钟搞定

先说环境要求：

  • Node.js 22+（这个不用多说了吧）
  • FFmpeg（渲染视频必须的）
  • Claude Code（Anthropic 的 AI 编码 CLI 工具）

第一步：初始化项目

# 创建新项目npx hyperframes init my-product-videocdmy-product-video

这会在当前目录创建一个标准的 HyperFrames 项目结构：

my-product-video/ ├── index.html # 主组合文件（你的视频"剧本"） ├── preview.html # 浏览器预览入口 ├── meta.json # 项目元数据 ├── assets/ # 媒体资源目录 └── compositions/ # 子组合目录

第二步：安装 Skills

这是关键步骤。一行命令搞定：

npx skillsaddheygen-com/hyperframes

执行后会弹出一个技能选择界面，我建议你至少选上这 5 个核心技能：

Skill 名称作用
hyperframesHTML 组合创作，包括字幕、TTS、音频响应动画、转场
hyperframes-cliCLI 命令：init、lint、preview、render、transcribe、tts、doctor
hyperframes-media媒体预处理：TTS 语音合成、转录、背景移除
hyperframes-registryBlock 和组件安装（hyperframes add）
gsapGSAP 动画 API、时间线、缓动、插件等

第三步：验证安装

回到 Claude Code，输入/看看有没有出现 HyperFrames 相关的斜杠命令。如果看到了/hyperframes、/hyperframes-cli、/hyperframes-media

这些命令，恭喜你，安装成功了！

💡踩坑提醒：如果你发现 Claude Code 没有识别到 Skills，检查一下你的.claude/目录是否存在。有时候手动在项目根目录创建.claude/文件夹可以解决这个问题。另外确保skills/

目录下确实有对应的 SKILL.md 文件。

Claude Code 的 HyperFrames 斜杠命令详解

安装完 Skills 后，你就拥有了几个强大的斜杠命令。我把它们整理成了一张表：

命令功能使用场景
/hyperframes创作 HTML 组合从零开始写视频、修改视频内容
/hyperframes-cli执行 CLI 命令init、lint、preview、render 等操作
/hyperframes-media媒体预处理TTS 语音合成、视频转录、背景移除
/gsapGSAP 动画帮助写动画代码时获取 API 参考

/hyperframes

——你的视频创作入口

这是最常用的命令。当你输入/hyperframes

后，Claude Code 会加载 HyperFrames 的完整创作知识，包括：

  • HTML 组合的正确结构（data-composition-id、data-start、data-duration等属性）
  • Clip 和 Track 的管理方式
  • 子组合（sub-composition）的嵌套规则
  • 字幕和 TTS 的集成方法
  • 转场效果的使用

/hyperframes-cli

——开发循环的利器

这个命令让 Claude Code 能直接帮你执行 CLI 操作。比如：

/hyperframes-cli lint

Claude Code 会运行npx hyperframes lint

帮你检查组合文件有没有错误。这在迭代开发时特别有用——每次改完代码，先 lint 一下，确保没有低级错误。

/hyperframes-media

——媒体处理一条龙

想做 TTS 配音？想给视频加字幕？这个命令就派上用场了：

/hyperframes-media tts --text "欢迎使用我们的产品" --voice zh-CN-XiaoxiaoNeural

它会自动调用 TTS 服务生成语音文件，并放到assets/

目录下。

从提示词到视频：完整工作流

说了这么多配置，来看看实际的工作流是什么样的。我用一个真实案例来演示——帮一个做 SaaS 产品的朋友做了一个 30 秒的产品宣传视频。

有错误

通过

不满意

满意

💬 描述视频需求

🤖 Claude Code 生成 HTML 组合

🔍 lint 检查

🔧 Claude Code 修复

👁️ preview 预览

💬 反馈修改意见

🎬 render 渲染

📦 输出 MP4 文件

第一步：描述你的视频

我是这样跟 Claude Code 说的：

/hyperframes 帮我做一个 30 秒的产品宣传视频。产品叫 TaskFlow，是一个项目管理工具。风格要简洁现代，主色调是 #6C5CE7（紫色）。需要 3 个场景：

  1. 开场：产品名称 + 一句话 slogan “让项目管理像呼吸一样自然”
  2. 功能展示：3 个核心功能图标依次出现（看板、时间线、报表）
  3. 结尾 CTA：官网地址 + “免费试用” 按钮动画

注意这里的关键——描述要具体

。颜色值、场景数量、每个场景的内容，这些信息都给清楚了。AI 不是读心术，你给的信息越多，出来的效果越好。

第二步：Claude Code 生成代码

Claude Code 会生成一个完整的index.html

文件。我来展示一下核心结构（省略了部分样式代码）：

DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>TaskFlow Product Videotitle><scriptsrc="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js">script><style>:root{--primary:#6C5CE7;--bg-dark:#1a1a2e;--text-light:#ffffff;}body{margin:0;background:var(--bg-dark);}.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;/* GSAP 控制可见性 */}.scene h1{font-size:72px;color:var(--text-light);}.scene .slogan{font-size:28px;color:#a29bfe;margin-top:16px;}.feature-icon{width:120px;height:120px;border-radius:24px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:48px;color:white;}style>head><body><divclass="scene clip"id="scene-intro"data-composition-id="taskflow-intro"data-start="0"data-duration="10"><h1>TaskFlowh1><pclass="slogan">让项目管理像呼吸一样自然p>div><divclass="scene clip"id="scene-features"data-composition-id="taskflow-features"data-start="10"data-duration="12"><divclass="feature-icon"id="feat-kanban">📋div><divclass="feature-icon"id="feat-timeline">📊div><divclass="feature-icon"id="feat-report">📈div>div><divclass="scene clip"id="scene-cta"data-composition-id="taskflow-cta"data-start="22"data-duration="8"><h2>taskflow.comh2><buttonclass="cta-button">免费试用button>div><script>// GSAP 时间线 —— 必须 paused + 注册到 window.__timelinesconsttl=gsap.timeline({paused:true});// 场景 1 动画tl.from("#scene-intro h1",{y:60,opacity:0,duration:1}).from("#scene-intro .slogan",{y:30,opacity:0,duration:0.8},"-=0.3")// 场景 1 → 场景 2 切换.set("#scene-intro",{visibility:"hidden"}).set("#scene-features",{visibility:"visible"})// 场景 2 功能图标依次出现.from("#feat-kanban",{scale:0,rotation:-15,duration:0.6}).from("#feat-timeline",{scale:0,rotation:-15,duration:0.6},"+=0.3").from("#feat-report",{scale:0,rotation:-15,duration:0.6},"+=0.3")// 场景 2 → 场景 3 切换.set("#scene-features",{visibility:"hidden"}).set("#scene-cta",{visibility:"visible"})// 场景 3 CTA 动画.from("#scene-cta h2",{y:40,opacity:0,duration:0.8}).from("#scene-cta .cta-button",{scale:0,duration:0.5,ease:"back.out(1.7)"});// ⚠️ 关键：注册到 window.__timelineswindow.__timelines={"taskflow-intro":tl};script>body>html>

第三步：lint 检查

生成代码后，我让 Claude Code 执行 lint：

npx hyperframes lint

它检查了几个关键点：

  • ✅ 所有data-*属性是否完整
  • ✅class="clip"是否在每个场景上
  • ✅ GSAP 时间线是否正确注册
  • ✅ 场景可见性是否正确管理

第四步：预览

npx hyperframes preview

这会在浏览器中打开一个预览界面，你可以实时看到视频效果。预览模式下可以拖拽时间线、逐帧查看。

第五步：迭代优化

第一次出来的效果，说实话只有 70 分。我跟 Claude Code 说：

功能展示部分的图标出现太生硬了，加一点弹性效果。另外场景之间的切换加一个模糊转场。CTA 按钮加一个脉冲动画，让它更醒目。

Claude Code 立刻修改了 GSAP 动画代码：

// 图标加入弹性效果.from("#feat-kanban",{scale:0,rotation:-15,duration:0.8,ease:"elastic.out(1, 0.5)"// 弹性缓动})// 转场加入模糊效果.set("#scene-intro",{visibility:"hidden",filter:"blur(20px)"// 模糊转场})// CTA 按钮脉冲动画.to("#scene-cta .cta-button",{scale:1.05,duration:0.8,repeat:-1,yoyo:true,ease:"sine.inOut"})

就这样来回迭代了 3 轮，最终效果朋友看了直呼专业。

第六步：渲染输出

npx hyperframes render--outputtaskflow-promo.mp4

等个几十秒（取决于视频长度和机器性能），一个 1080p 的 MP4 文件就出来了。

迭代优化：像和视频编辑器对话

这是 Claude Code + HyperFrames 最让我上瘾的地方。传统的视频编辑，你得在 Premiere 或者 After Effects 的时间线上拖拖拽拽，改一个动画曲线要点好几下鼠标。而现在，我只需要用自然语言描述我想要的效果。

分享几个我常用的迭代话术：

节奏调整

“场景 1 的停留时间太长了，从 10 秒缩短到 7 秒，场景 2 相应延长到 15 秒”

Claude Code 会帮你调整所有data-start和data-duration

属性，同时修改 GSAP 时间线的关键帧位置。

动画微调

“标题的入场动画改成从左侧滑入，带一点旋转，缓动用 easeOut”

// Claude Code 修改后.from("#scene-intro h1",{x:-200,// 从左侧滑入rotation:-5,// 轻微旋转opacity:0,duration:1,ease:"power2.out"// easeOut 缓动})

样式修改

“把整体配色改成深色模式，背景用 #0f0f23，文字用渐变色”

:root{--bg-dark:#0f0f23;--text-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}.scene h1{background:var(--text-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

添加转场

“场景之间加一个 WebGL 着色器转场，用从左到右的擦除效果”

Claude Code 会引入@hyperframes/shader-transitions

并配置转场参数。

实战：从零创建一个完整的产品视频

光说不练假把式。我用一个完整的实战案例，演示 Claude Code + HyperFrames 的全部流程。这次给一个虚拟的 AI 写作工具 “WriteBot” 做一个 45 秒的产品视频。

需求分析

先整理一下需求：

项目要求
时长45 秒
分辨率1920×1080（横版）
场景数4 个
风格科技感、深色背景、蓝紫色调
音频背景音乐 + TTS 旁白
用途官网首页展示

场景规划

场景时间内容动画
开场0-8sWriteBot Logo + “AI 写作，从此不同”Logo 缩放 + 文字渐入
痛点8-18s“写作慢？没灵感？格式乱？”文字依次弹出 + 抖动
功能18-35s3 个功能演示截图滑入 + 标注动画
CTA35-45s官网 + 二维码 + “立即体验”渐入 + 脉冲

和 Claude Code 对话

我的完整提示词：

/hyperframes 帮我做一个 45 秒的产品宣传视频，产品叫 WriteBot，是一个 AI 写作工具。

整体风格：科技感、深色背景（#0a0a1a），蓝紫色调（主色 #5B6FEC，辅色 #A855F7）。

4 个场景：

  1. 开场（0-8s）：WriteBot Logo 从中心缩放出现，下方文字"AI 写作，从此不同"渐入
  2. 痛点（8-18s）：三个痛点文字依次弹出——“写作太慢”、“没有灵感”、“格式混乱”，每个带一个红色 ✕ 图标
  3. 功能（18-35s）：三个功能卡片从左滑入——“一键生成大纲”、“智能续写”、“多格式导出”，每个卡片停留 5 秒
  4. CTA（35-45s）：官网地址 writebot.ai + 一个"立即体验"按钮，按钮有脉冲动画

场景之间用硬切（不需要转场特效）。背景音乐节奏轻快。

Claude Code 用了大约 30 秒生成了完整的代码。我执行了 lint → preview → 反馈 → 修改 → 再 preview 的循环，总共迭代了 4 轮。

最终渲染

# 先添加 TTS 旁白npx hyperframes tts--text"WriteBot，AI写作，从此不同。写作太慢？没有灵感？格式混乱？让WriteBot帮你解决。一键生成大纲，智能续写，多格式导出。立即体验 writebot.ai"--voicezh-CN-YunxiNeural--outputassets/narration.mp3# 最终渲染npx hyperframes render--outputwritebot-promo.mp4--fps30

最终效果？说实话，作为一个写了 5 年代码的人，这是我做出来的最好看的视频。

进阶技巧

1. 使用 Block 注册表加速开发

不用什么都从零写。HyperFrames 有 50+ 预制组件可以直接用：

# 安装一个数据图表 Blocknpx hyperframesadd># 安装一个文字动画 Blocknpx hyperframesaddtext-animation

安装后告诉 Claude Code 你要用这个 Block，它会自动生成正确的引用代码。

2. 利用子组合实现模块化

把每个场景拆成独立的子组合文件：

<divdata-composition-id="main"data-start="0"data-duration="45"><divdata-composition-src="compositions/intro.html"data-start="0"data-duration="8">div><divdata-composition-src="compositions/pain-points.html"data-start="8"data-duration="10">div><divdata-composition-src="compositions/features.html"data-start="18"data-duration="17">div><divdata-composition-src="compositions/cta.html"data-start="35"data-duration="10">div>div>

这样做的好处是每个场景可以独立开发和调试，Claude Code 修改时也不容易搞乱其他场景。

3. 用 CLAUDE.md 固定项目规范

在项目根目录创建CLAUDE.md

文件，写入项目的设计规范：

# WriteBot 视频项目规范 ## 设计系统 - 主色：#5B6FEC - 辅色：#A855F7 - 背景：#0a0a1a - 字体：Inter（英文）、思源黑体（中文） - 圆角：统一 12px ## 动画规范 - 入场动画：0.6-1s - 缓动函数：power2.out - 场景切换：硬切 ## 注意事项 - 所有 GSAP 时间线必须 paused: true - 必须注册到 window.__timelines - 渲染前必须通过 lint

这样每次和 Claude Code 对话时，它都会遵循这些规范，减少反复沟通的成本。

常见问题排查

问题原因解决方案
Skills 命令不出现.claude/目录缺失手动创建.claude/目录并重新安装
渲染出来首帧闪烁资源未预加载在中预加载字体和图片
GSAP 动画不播放时间线未注册确保window.__timelines正确赋值
场景同时可见visibility 未管理用 GSAP.set()控制场景显隐
音频不同步采样率不匹配统一使用 44100Hz 采样率

小结

Claude Code + HyperFrames 的组合，真的是我见过最优雅的 AI 视频制作方案了。它不是让 AI 去"猜"你想要什么画面，而是让 AI 用精确的代码来描述每一个像素。这意味着：

  • 可控性：100% 确定性的输出，不会出现"这次渲染和上次不一样"的诡异情况
  • 可迭代性：像改代码一样改视频，每次修改都有明确的 diff
  • 可复用性：写好的场景和组件可以在不同视频中复用

整个工作流的核心就三句话：

  1. npx skills add heygen-com/hyperframes安装技能
  2. 用自然语言描述你想要的视频
  3. lint → preview → 迭代 → render 的循环

如果你是一个前端开发者，又恰好有视频制作的需求，这套组合绝对是你的最佳选择。

下节预告

Claude Code 虽然强大，但并不是唯一的选择。下一节我会带你看看 HyperFrames 在其他 AI 编码工具中的集成方案——Cursor、Gemini CLI、Codex 各有各的特点和优势。哪个更适合你的工作场景？我会做一个全面的对比分析，帮你找到最趁手的那把"武器"。

如果觉得本文对你有帮助，欢迎点赞、收藏、关注三连！本系列持续更新中，关注不迷路~