Claude Code HyperFrames最強(qiáng) AI 視頻搭檔你有沒有想過跟 AI 聊幾句話它就能幫你做出一個(gè)產(chǎn)品宣傳視頻不是那種粗糙的 AI 生成畫面而是精確到每一幀的、可以直接交付給客戶的專業(yè)視頻。今天我就把壓箱底的工作流分享出來——用 Claude Code 搭配 HyperFrames讓你像跟視頻編輯器對(duì)話一樣做視頻。為什么是 Claude Code HyperFrames說實(shí)話我一開始對(duì)AI 做視頻這事兒是持懷疑態(tài)度的。畢竟之前試過不少 AI 視頻工具出來的東西要么畫面詭異要么完全不可控。直到我遇到了 HyperFrames。它的思路跟其他 AI 視頻工具完全不同——不是讓 AI 憑空生成像素而是讓 AI 寫 HTML/CSS 代碼來描述視頻。這意味著完全可控每一幀都是確定性渲染同樣的代碼永遠(yuǎn)輸出同樣的視頻前端零門檻會(huì)寫 HTML 就會(huì)做視頻AI 友好AI 寫 HTML 可比寫視頻編輯腳本強(qiáng)太多了而 Claude Code 呢它是我用下來最適合做這件事的 AI 編碼工具。原因很簡單——HyperFrames 專門為 Claude Code 打造了一套 Skills 系統(tǒng)裝上之后Claude Code 就像被點(diǎn)化了一樣瞬間變成一個(gè)懂 HyperFrames 的視頻制作專家。安裝 HyperFrames Skills3 分鐘搞定先說環(huán)境要求Node.js 22這個(gè)不用多說了吧FFmpeg渲染視頻必須的Claude CodeAnthropic 的 AI 編碼 CLI 工具第一步初始化項(xiàng)目# 創(chuàng)建新項(xiàng)目npx hyperframes init my-product-videocdmy-product-video這會(huì)在當(dāng)前目錄創(chuàng)建一個(gè)標(biāo)準(zhǔn)的 HyperFrames 項(xiàng)目結(jié)構(gòu)my-product-video/ ├── index.html # 主組合文件你的視頻劇本 ├── preview.html # 瀏覽器預(yù)覽入口 ├── meta.json # 項(xiàng)目元數(shù)據(jù) ├── assets/ # 媒體資源目錄 └── compositions/ # 子組合目錄第二步安裝 Skills這是關(guān)鍵步驟。一行命令搞定npx skillsaddheygen-com/hyperframes執(zhí)行后會(huì)彈出一個(gè)技能選擇界面我建議你至少選上這 5 個(gè)核心技能Skill 名稱作用hyperframesHTML 組合創(chuàng)作包括字幕、TTS、音頻響應(yīng)動(dòng)畫、轉(zhuǎn)場hyperframes-cliCLI 命令init、lint、preview、render、transcribe、tts、doctorhyperframes-media媒體預(yù)處理TTS 語音合成、轉(zhuǎn)錄、背景移除hyperframes-registryBlock 和組件安裝hyperframes addgsapGSAP 動(dòng)畫 API、時(shí)間線、緩動(dòng)、插件等第三步驗(yàn)證安裝回到 Claude Code輸入/看看有沒有出現(xiàn) HyperFrames 相關(guān)的斜杠命令。如果看到了/hyperframes、/hyperframes-cli、/hyperframes-media這些命令恭喜你安裝成功了踩坑提醒如果你發(fā)現(xiàn) Claude Code 沒有識(shí)別到 Skills檢查一下你的.claude/目錄是否存在。有時(shí)候手動(dòng)在項(xiàng)目根目錄創(chuàng)建.claude/文件夾可以解決這個(gè)問題。另外確保skills/目錄下確實(shí)有對(duì)應(yīng)的 SKILL.md 文件。Claude Code 的 HyperFrames 斜杠命令詳解安裝完 Skills 后你就擁有了幾個(gè)強(qiáng)大的斜杠命令。我把它們整理成了一張表命令功能使用場景/hyperframes創(chuàng)作 HTML 組合從零開始寫視頻、修改視頻內(nèi)容/hyperframes-cli執(zhí)行 CLI 命令init、lint、preview、render 等操作/hyperframes-media媒體預(yù)處理TTS 語音合成、視頻轉(zhuǎn)錄、背景移除/gsapGSAP 動(dòng)畫幫助寫動(dòng)畫代碼時(shí)獲取 API 參考/hyperframes——你的視頻創(chuàng)作入口這是最常用的命令。當(dāng)你輸入/hyperframes后Claude Code 會(huì)加載 HyperFrames 的完整創(chuàng)作知識(shí)包括HTML 組合的正確結(jié)構(gòu)data-composition-id、data-start、data-duration等屬性Clip 和 Track 的管理方式子組合sub-composition的嵌套規(guī)則字幕和 TTS 的集成方法轉(zhuǎn)場效果的使用/hyperframes-cli——開發(fā)循環(huán)的利器這個(gè)命令讓 Claude Code 能直接幫你執(zhí)行 CLI 操作。比如/hyperframes-cli lintClaude Code 會(huì)運(yùn)行npx hyperframes lint幫你檢查組合文件有沒有錯(cuò)誤。這在迭代開發(fā)時(shí)特別有用——每次改完代碼先 lint 一下確保沒有低級(jí)錯(cuò)誤。/hyperframes-media——媒體處理一條龍想做 TTS 配音想給視頻加字幕這個(gè)命令就派上用場了/hyperframes-media tts --text 歡迎使用我們的產(chǎn)品 --voice zh-CN-XiaoxiaoNeural它會(huì)自動(dòng)調(diào)用 TTS 服務(wù)生成語音文件并放到assets/目錄下。從提示詞到視頻完整工作流說了這么多配置來看看實(shí)際的工作流是什么樣的。我用一個(gè)真實(shí)案例來演示——幫一個(gè)做 SaaS 產(chǎn)品的朋友做了一個(gè) 30 秒的產(chǎn)品宣傳視頻。有錯(cuò)誤通過不滿意滿意 描述視頻需求 Claude Code 生成 HTML 組合 lint 檢查 Claude Code 修復(fù)? preview 預(yù)覽 反饋修改意見 render 渲染 輸出 MP4 文件第一步描述你的視頻我是這樣跟 Claude Code 說的/hyperframes 幫我做一個(gè) 30 秒的產(chǎn)品宣傳視頻。產(chǎn)品叫 TaskFlow是一個(gè)項(xiàng)目管理工具。風(fēng)格要簡潔現(xiàn)代主色調(diào)是 #6C5CE7紫色。需要 3 個(gè)場景開場產(chǎn)品名稱 一句話 slogan “讓項(xiàng)目管理像呼吸一樣自然”功能展示3 個(gè)核心功能圖標(biāo)依次出現(xiàn)看板、時(shí)間線、報(bào)表結(jié)尾 CTA官網(wǎng)地址 “免費(fèi)試用” 按鈕動(dòng)畫注意這里的關(guān)鍵——描述要具體。顏色值、場景數(shù)量、每個(gè)場景的內(nèi)容這些信息都給清楚了。AI 不是讀心術(shù)你給的信息越多出來的效果越好。第二步Claude Code 生成代碼Claude Code 會(huì)生成一個(gè)完整的index.html文件。我來展示一下核心結(jié)構(gòu)省略了部分樣式代碼!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讓項(xiàng)目管理像呼吸一樣自然/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免費(fèi)試用/button/divscript// GSAP 時(shí)間線 —— 必須 paused 注冊(cè)到 window.__timelinesconsttlgsap.timeline({paused:true});// 場景 1 動(dòng)畫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 功能圖標(biāo)依次出現(xiàn).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 動(dòng)畫.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)});// ?? 關(guān)鍵注冊(cè)到 window.__timelineswindow.__timelines{taskflow-intro:tl};/script/body/html第三步lint 檢查生成代碼后我讓 Claude Code 執(zhí)行 lintnpx hyperframes lint它檢查了幾個(gè)關(guān)鍵點(diǎn)? 所有data-*屬性是否完整?classclip是否在每個(gè)場景上? GSAP 時(shí)間線是否正確注冊(cè)? 場景可見性是否正確管理第四步預(yù)覽npx hyperframes preview這會(huì)在瀏覽器中打開一個(gè)預(yù)覽界面你可以實(shí)時(shí)看到視頻效果。預(yù)覽模式下可以拖拽時(shí)間線、逐幀查看。第五步迭代優(yōu)化第一次出來的效果說實(shí)話只有 70 分。我跟 Claude Code 說功能展示部分的圖標(biāo)出現(xiàn)太生硬了加一點(diǎn)彈性效果。另外場景之間的切換加一個(gè)模糊轉(zhuǎn)場。CTA 按鈕加一個(gè)脈沖動(dòng)畫讓它更醒目。Claude Code 立刻修改了 GSAP 動(dòng)畫代碼// 圖標(biāo)加入彈性效果.from(#feat-kanban,{scale:0,rotation:-15,duration:0.8,ease:elastic.out(1, 0.5)// 彈性緩動(dòng)})// 轉(zhuǎn)場加入模糊效果.set(#scene-intro,{visibility:hidden,filter:blur(20px)// 模糊轉(zhuǎn)場})// CTA 按鈕脈沖動(dòng)畫.to(#scene-cta .cta-button,{scale:1.05,duration:0.8,repeat:-1,yoyo:true,ease:sine.inOut})就這樣來回迭代了 3 輪最終效果朋友看了直呼專業(yè)。第六步渲染輸出npx hyperframes render--outputtaskflow-promo.mp4等個(gè)幾十秒取決于視頻長度和機(jī)器性能一個(gè) 1080p 的 MP4 文件就出來了。迭代優(yōu)化像和視頻編輯器對(duì)話這是 Claude Code HyperFrames 最讓我上癮的地方。傳統(tǒng)的視頻編輯你得在 Premiere 或者 After Effects 的時(shí)間線上拖拖拽拽改一個(gè)動(dòng)畫曲線要點(diǎn)好幾下鼠標(biāo)。而現(xiàn)在我只需要用自然語言描述我想要的效果。分享幾個(gè)我常用的迭代話術(shù)節(jié)奏調(diào)整“場景 1 的停留時(shí)間太長了從 10 秒縮短到 7 秒場景 2 相應(yīng)延長到 15 秒”Claude Code 會(huì)幫你調(diào)整所有data-start和data-duration屬性同時(shí)修改 GSAP 時(shí)間線的關(guān)鍵幀位置。動(dòng)畫微調(diào)“標(biāo)題的入場動(dòng)畫改成從左側(cè)滑入帶一點(diǎn)旋轉(zhuǎn)緩動(dòng)用 easeOut”// Claude Code 修改后.from(#scene-intro h1,{x:-200,// 從左側(cè)滑入rotation:-5,// 輕微旋轉(zhuǎn)opacity:0,duration:1,ease:power2.out// easeOut 緩動(dòng)})樣式修改“把整體配色改成深色模式背景用 #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;}添加轉(zhuǎn)場“場景之間加一個(gè) WebGL 著色器轉(zhuǎn)場用從左到右的擦除效果”Claude Code 會(huì)引入hyperframes/shader-transitions并配置轉(zhuǎn)場參數(shù)。實(shí)戰(zhàn)從零創(chuàng)建一個(gè)完整的產(chǎn)品視頻光說不練假把式。我用一個(gè)完整的實(shí)戰(zhàn)案例演示 Claude Code HyperFrames 的全部流程。這次給一個(gè)虛擬的 AI 寫作工具 “WriteBot” 做一個(gè) 45 秒的產(chǎn)品視頻。需求分析先整理一下需求項(xiàng)目要求時(shí)長45 秒分辨率1920×1080橫版場景數(shù)4 個(gè)風(fēng)格科技感、深色背景、藍(lán)紫色調(diào)音頻背景音樂 TTS 旁白用途官網(wǎng)首頁展示場景規(guī)劃場景時(shí)間內(nèi)容動(dòng)畫開場0-8sWriteBot Logo “AI 寫作從此不同”Logo 縮放 文字漸入痛點(diǎn)8-18s“寫作慢沒靈感格式亂”文字依次彈出 抖動(dòng)功能18-35s3 個(gè)功能演示截圖滑入 標(biāo)注動(dòng)畫CTA35-45s官網(wǎng) 二維碼 “立即體驗(yàn)”漸入 脈沖和 Claude Code 對(duì)話我的完整提示詞/hyperframes 幫我做一個(gè) 45 秒的產(chǎn)品宣傳視頻產(chǎn)品叫 WriteBot是一個(gè) AI 寫作工具。整體風(fēng)格科技感、深色背景#0a0a1a藍(lán)紫色調(diào)主色 #5B6FEC輔色 #A855F7。4 個(gè)場景開場0-8sWriteBot Logo 從中心縮放出現(xiàn)下方文字AI 寫作從此不同漸入痛點(diǎn)8-18s三個(gè)痛點(diǎn)文字依次彈出——“寫作太慢”、“沒有靈感”、“格式混亂”每個(gè)帶一個(gè)紅色 ? 圖標(biāo)功能18-35s三個(gè)功能卡片從左滑入——“一鍵生成大綱”、“智能續(xù)寫”、“多格式導(dǎo)出”每個(gè)卡片停留 5 秒CTA35-45s官網(wǎng)地址 writebot.ai 一個(gè)立即體驗(yàn)按鈕按鈕有脈沖動(dòng)畫場景之間用硬切不需要轉(zhuǎn)場特效。背景音樂節(jié)奏輕快。Claude Code 用了大約 30 秒生成了完整的代碼。我執(zhí)行了 lint → preview → 反饋 → 修改 → 再 preview 的循環(huán)總共迭代了 4 輪。最終渲染# 先添加 TTS 旁白npx hyperframes tts--textWriteBotAI寫作從此不同。寫作太慢沒有靈感格式混亂讓W(xué)riteBot幫你解決。一鍵生成大綱智能續(xù)寫多格式導(dǎo)出。立即體驗(yàn) writebot.ai--voicezh-CN-YunxiNeural--outputassets/narration.mp3# 最終渲染npx hyperframes render--outputwritebot-promo.mp4--fps30最終效果說實(shí)話作為一個(gè)寫了 5 年代碼的人這是我做出來的最好看的視頻。進(jìn)階技巧1. 使用 Block 注冊(cè)表加速開發(fā)不用什么都從零寫。HyperFrames 有 50 預(yù)制組件可以直接用# 安裝一個(gè)數(shù)據(jù)圖表 Blocknpx hyperframesadd># 安裝一個(gè)文字動(dòng)畫 Blocknpx hyperframesaddtext-animation安裝后告訴 Claude Code 你要用這個(gè) Block它會(huì)自動(dòng)生成正確的引用代碼。2. 利用子組合實(shí)現(xiàn)模塊化把每個(gè)場景拆成獨(dú)立的子組合文件!-- 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這樣做的好處是每個(gè)場景可以獨(dú)立開發(fā)和調(diào)試Claude Code 修改時(shí)也不容易搞亂其他場景。3. 用 CLAUDE.md 固定項(xiàng)目規(guī)范在項(xiàng)目根目錄創(chuàng)建CLAUDE.md文件寫入項(xiàng)目的設(shè)計(jì)規(guī)范# WriteBot 視頻項(xiàng)目規(guī)范 ## 設(shè)計(jì)系統(tǒng) - 主色#5B6FEC - 輔色#A855F7 - 背景#0a0a1a - 字體Inter英文、思源黑體中文 - 圓角統(tǒng)一 12px ## 動(dòng)畫規(guī)范 - 入場動(dòng)畫0.6-1s - 緩動(dòng)函數(shù)power2.out - 場景切換硬切 ## 注意事項(xiàng) - 所有 GSAP 時(shí)間線必須 paused: true - 必須注冊(cè)到 window.__timelines - 渲染前必須通過 lint這樣每次和 Claude Code 對(duì)話時(shí)它都會(huì)遵循這些規(guī)范減少反復(fù)溝通的成本。常見問題排查問題原因解決方案Skills 命令不出現(xiàn).claude/目錄缺失手動(dòng)創(chuàng)建.claude/目錄并重新安裝渲染出來首幀閃爍資源未預(yù)加載在head中預(yù)加載字體和圖片GSAP 動(dòng)畫不播放時(shí)間線未注冊(cè)確保window.__timelines正確賦值場景同時(shí)可見visibility 未管理用 GSAP.set()控制場景顯隱音頻不同步采樣率不匹配統(tǒng)一使用 44100Hz 采樣率小結(jié)Claude Code HyperFrames 的組合真的是我見過最優(yōu)雅的 AI 視頻制作方案了。它不是讓 AI 去猜你想要什么畫面而是讓 AI 用精確的代碼來描述每一個(gè)像素。這意味著可控性100% 確定性的輸出不會(huì)出現(xiàn)這次渲染和上次不一樣的詭異情況可迭代性像改代碼一樣改視頻每次修改都有明確的 diff可復(fù)用性寫好的場景和組件可以在不同視頻中復(fù)用整個(gè)工作流的核心就三句話npx skills add heygen-com/hyperframes安裝技能用自然語言描述你想要的視頻lint → preview → 迭代 → render 的循環(huán)如果你是一個(gè)前端開發(fā)者又恰好有視頻制作的需求這套組合絕對(duì)是你的最佳選擇。下節(jié)預(yù)告Claude Code 雖然強(qiáng)大但并不是唯一的選擇。下一節(jié)我會(huì)帶你看看 HyperFrames 在其他 AI 編碼工具中的集成方案——Cursor、Gemini CLI、Codex 各有各的特點(diǎn)和優(yōu)勢。哪個(gè)更適合你的工作場景我會(huì)做一個(gè)全面的對(duì)比分析幫你找到最趁手的那把武器。如果覺得本文對(duì)你有幫助歡迎點(diǎn)贊、收藏、關(guān)注三連本系列持續(xù)更新中關(guān)注不迷路~