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 代码来描述视频。这意味着完全可控每一帧都是确定性渲染同样的代码永远输出同样的视频前端零门槛会写 HTML 就会做视频AI 友好AI 写 HTML 可比写视频编辑脚本强太多了而 Claude Code 呢它是我用下来最适合做这件事的 AI 编码工具。原因很简单——HyperFrames 专门为 Claude Code 打造了一套 Skills 系统装上之后Claude Code 就像被点化了一样瞬间变成一个懂 HyperFrames 的视频制作专家。安装 HyperFrames Skills3 分钟搞定先说环境要求Node.js 22这个不用多说了吧FFmpeg渲染视频必须的Claude CodeAnthropic 的 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、doctorhyperframes-media媒体预处理TTS 语音合成、转录、背景移除hyperframes-registryBlock 和组件安装hyperframes addgsapGSAP 动画 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 lintClaude 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 个场景开场产品名称 一句话 slogan “让项目管理像呼吸一样自然”功能展示3 个核心功能图标依次出现看板、时间线、报表结尾 CTA官网地址 “免费试用” 按钮动画注意这里的关键——描述要具体。颜色值、场景数量、每个场景的内容这些信息都给清楚了。AI 不是读心术你给的信息越多出来的效果越好。第二步Claude Code 生成代码Claude Code 会生成一个完整的index.html文件。我来展示一下核心结构省略了部分样式代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleTaskFlow Product Video/titlescriptsrchttps://cdn.jsdelivr.net/npm/gsap3.12.5/dist/gsap.min.js/scriptstyle: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/headbody!-- 场景 1开场 (0-10s) --divclassscene clipidscene-introdata-composition-idtaskflow-introdata-start0data-duration10h1TaskFlow/h1pclassslogan让项目管理像呼吸一样自然/p/div!-- 场景 2功能展示 (10-22s) --divclassscene clipidscene-featuresdata-composition-idtaskflow-featuresdata-start10data-duration12divclassfeature-iconidfeat-kanban/divdivclassfeature-iconidfeat-timeline/divdivclassfeature-iconidfeat-report/div/div!-- 场景 3CTA (22-30s) --divclassscene clipidscene-ctadata-composition-idtaskflow-ctadata-start22data-duration8h2taskflow.com/h2buttonclasscta-button免费试用/button/divscript// GSAP 时间线 —— 必须 paused 注册到 window.__timelinesconsttlgsap.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 执行 lintnpx hyperframes lint它检查了几个关键点✅ 所有data-*属性是否完整✅classclip是否在每个场景上✅ 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 个场景开场0-8sWriteBot Logo 从中心缩放出现下方文字AI 写作从此不同渐入痛点8-18s三个痛点文字依次弹出——“写作太慢”、“没有灵感”、“格式混乱”每个带一个红色 ✕ 图标功能18-35s三个功能卡片从左滑入——“一键生成大纲”、“智能续写”、“多格式导出”每个卡片停留 5 秒CTA35-45s官网地址 writebot.ai 一个立即体验按钮按钮有脉冲动画场景之间用硬切不需要转场特效。背景音乐节奏轻快。Claude Code 用了大约 30 秒生成了完整的代码。我执行了 lint → preview → 反馈 → 修改 → 再 preview 的循环总共迭代了 4 轮。最终渲染# 先添加 TTS 旁白npx hyperframes tts--textWriteBotAI写作从此不同。写作太慢没有灵感格式混乱让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. 利用子组合实现模块化把每个场景拆成独立的子组合文件!-- index.html 主组合 --divdata-composition-idmaindata-start0data-duration45divdata-composition-srccompositions/intro.htmldata-start0data-duration8/divdivdata-composition-srccompositions/pain-points.htmldata-start8data-duration10/divdivdata-composition-srccompositions/features.htmldata-start18data-duration17/divdivdata-composition-srccompositions/cta.htmldata-start35data-duration10/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/目录并重新安装渲染出来首帧闪烁资源未预加载在head中预加载字体和图片GSAP 动画不播放时间线未注册确保window.__timelines正确赋值场景同时可见visibility 未管理用 GSAP.set()控制场景显隐音频不同步采样率不匹配统一使用 44100Hz 采样率小结Claude Code HyperFrames 的组合真的是我见过最优雅的 AI 视频制作方案了。它不是让 AI 去猜你想要什么画面而是让 AI 用精确的代码来描述每一个像素。这意味着可控性100% 确定性的输出不会出现这次渲染和上次不一样的诡异情况可迭代性像改代码一样改视频每次修改都有明确的 diff可复用性写好的场景和组件可以在不同视频中复用整个工作流的核心就三句话npx skills add heygen-com/hyperframes安装技能用自然语言描述你想要的视频lint → preview → 迭代 → render 的循环如果你是一个前端开发者又恰好有视频制作的需求这套组合绝对是你的最佳选择。下节预告Claude Code 虽然强大但并不是唯一的选择。下一节我会带你看看 HyperFrames 在其他 AI 编码工具中的集成方案——Cursor、Gemini CLI、Codex 各有各的特点和优势。哪个更适合你的工作场景我会做一个全面的对比分析帮你找到最趁手的那把武器。如果觉得本文对你有帮助欢迎点赞、收藏、关注三连本系列持续更新中关注不迷路~