Communitygithub.com

通用影片

此技能提供了一個結構化的工作流程,用於建立和編輯影片專案,涵蓋從初始設定、腳本規劃、媒體管理到最終合成的各個階段。

通用影片 是什麼?

通用影片(General Video)技能專為 AI 代理(如 Claude Code, Cursor, Codex)設計,提供一個全面且嚴謹的影片製作工作流程。它不僅是一個編輯工具,更是一個專案管理框架,確保影片從概念到完成的每個步驟都遵循標準化流程和品牌準則。此技能支援自動化與協作(Companion)兩種工作流程,適用於 Hyperframes 生態系。 其核心功能包括:透過 `npx hyperframes skills update` 指令進行技能版本管理;強制使用 `/media-use` 和 `/figma` 等跨領域轉接器處理媒體和設計資源,以防止規格未經許可的偏離;根據專案狀態(特定編輯、已有 Brief、全新專案)自動決定起始點。在執行階段,技能要求載入特定知識庫(如 `/hyperframes-core`, `/hyperframes-creative`),並遵循嚴格的依賴順序:規劃、審查、解析相依性、生成素材、最終合成。特別是在協作模式下,此技能扮演「導演」角色,鼓勵提供最佳方案,並透過能力選單與使用者進行精細互動,避免直接傾倒所有選項。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/general-video

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

通用影片 是做什麼的?

在此工作流程運作前,請先執行:

npx hyperframes skills update general-video

成功但無動作表示技能已是最新。請顯示更新失敗訊息,而非從記憶體繼續執行。

1. 套用跨領域來源轉接器

  • 媒體: 對於任何音訊、圖片、圖示、標誌、配音、調色、LUT、特效/效果、字幕或媒體操作需求,請載入 /media-use,並遵循 ../media-use/references/resolve.md(解析、採用、重用)和 ../media-use/references/setup-providers.md(供應商、認證)。對於模糊的素材回饋和命名樣式,請在編輯前使用 ../media-use/references/media-treatments.md;請勿使用 CSS/SVG/透明度即興創作出支援的媒體效果。在第一次經過認證的供應商操作之前,請執行 npx hyperframes auth status,並逐字輸出其結果。如果已登出,則套用 ../hyperframes/references/brief-contract.md 中的關卡:協作模式等待登入或明確的離線選擇;自動化模式則陳述狀態並透過可用的離線供應商繼續執行。當沒有離線供應商能滿足所需能力時,請顯示阻礙。僅本機採用不需要認證關卡。
  • Figma: 如果任何輸入是 figma.com URL,請先執行 /figma。從其匯出的素材、Tokens、元件或故事板影格進行建構。請勿使用原始的 Figma Connector 呼叫,因為它們會跳過 SVG 清理、媒體來源追溯和品牌 Token 綁定。

這些轉接器不會變更由 /hyperframes 選取的工作流程。

2. 從專案狀態開始

套用第一個符合的列;不要評估較低的狀態列:

狀態動作
特定編輯進行編輯,保留現有的專案決策,然後重新執行受影響的檢查。不要重新開始探索階段。
BRIEF.md 存在讀取它。如果 workflow 指名另一個工作流程且 flow 不是 companion,則交接。不要問任何簡報問題。
無簡報,但存在 hyperframes.json 或 STORYBOARD.md從檔案和記錄的偏好設定恢復。僅從已知事實回填 BRIEF.md。
全新創作執行 /hyperframes 及其意圖層。僅在 workflow: general-video 或 flow: companion 時返回此處。

對於新專案,請從簡報中選擇一個 kebab-case 的目錄名稱,並在撰寫簡報前進行初始化:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

然後在專案根目錄中使用 ../hyperframes/references/brief-format.md 撰寫 BRIEF.md。在現有專案中,根目錄是包含 hyperframes.json 的目錄。僅使用 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT> 記錄由簡報格式指定的、已確認的偏好支援欄位;切勿記錄推斷的預設值。此處的 <MEDIA_DIR> 是已安裝的 /media-use 技能目錄,<PROJECT_ROOT> 是包含 hyperframes.json 的目錄。如果意圖層採用了配方,請立即使用 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> 套用,並且不要再詢問。

3. 解讀執行形狀

僅使用 ../hyperframes/references/brief-contract.md 中的規範術語:

欄位意義效果
flow誰來驅動automation:選擇並執行路徑。companion:在對話中共同創作。
storyboard在建立前先計畫、草繪並審查yes:執行計畫和草繪審查 (storyboard.html)。no:直接建立而不審查。
衍生的 mode檢查點閘門的行為遵循簡報合約。切勿要求使用者命名一個模式。

請勿為這些狀態發明同義詞。持續的「直接建立它」訊號由意圖層處理,並以 flow: automation、storyboard: no 的形式送達。

  • 對於 flow: automation,選擇路線並在第一個進度更新中用一行話說明。
  • 對於特定編輯,進行編輯,不要發明新的路線。

對於既有素材的硬切、修剪、拼接或重新排序,請將同一個影片來源複製到多個剪輯元素中。在每個副本上,使用 data-media-start 加上 data-duration 設定來源範圍,然後使用 data-start 設定作者指定的位置/順序。獨立製作的音訊遵循在相符的 <audio> 元素上相同的剪輯範圍和時序。/hyperframes-core 擁有此時間軸編輯;僅對視覺屬性動畫(如縮放、打孔、平移、裁切、遮罩或內部包裝器上的 clip-path)使用 /hyperframes-keyframes。從 ../hyperframes-core/references/creator-editing-recipes.md 複製完整的合約。

協作流程

當 flow: companion 時:

  • 讀取 BRIEF.md,並將已接受的 ## 素材 和 ## 自訂 與專案成品進行比對。完成已接受但仍待完成的工作;跳過已完成的工作;請勿再次提供已接受的能力,如同它是新的一樣。
  • 以導演而非承包商的身份到來。 選擇協作的使用者選擇了參與和品質;誠實的回應是您能設計出的最佳版本,而不是您能辯護的最小版本。第一個計畫是天花板處理:故事弧線(借用最接近的類型鏡頭 — 菜單 § 類型鏡頭)、設計規格、每個場景的動作處理(按 § 5 的計畫規範引用名稱)、轉場、音訊識別 — 音樂和聲音標記,或刻意留白 — 使用者的素材放置位置,以及設計的開場和結尾。用一句話說明每個層級增加的內容;在提及它們時標記昂貴的項目(渲染時間、登入、計費)。使用者修剪一個處理方式;他們從不應該需要一個接一個地批准來組裝一個。
  • 天花板屬於概念,而非工具箱。 每個層級都必須服務於簡報的訊息 — 任何影片都適用的處理方式只是裝飾。工藝提升至天花板;內容永遠不會超出所要求的範圍(§ 6)。
  • 在檢查點之間,../hyperframes/references/capability-menu.md 有兩種作用。作為觸發列表:當使用者提到其輸入或建構達到其需求時,提供相關的能力。作為每次迭代的升級通道:計畫、草繪或建構檢查點可以攜帶一個或兩個追蹤的提議,指向使用者正在查看的材料(「場景 3 的統計數據需要計數動畫效果」)。在提供之前先讀取它;切勿傾倒完整的目錄。
  • 在使用者接受一個能力後,產生其成品並立即將決策記錄到相符的 BRIEF.md 主體部分。僅當使用者明確更改它時,才重新寫入 frontmatter 欄位並記錄已確認的偏好。
  • 保持相同的故事板、驗證、最終預覽和渲染批准關卡。協作改變的是誰來掌舵,而不是品質需要什麼。

4. 在每個階段前載入必需的知識

當條件符合時,必須讀取以下項目:

條件在行動前讀取
任何組合 HTML 或場景佈局/hyperframes-core;使用 references/determinism-rules.md 取得其佈局合約
任何非平凡的創作或視覺處理/hyperframes-creative → references/house-style.md 和 references/video-composition.md
任何動作、動畫或場景轉場/hyperframes-animation;遵循其路由到相符的規則、轉接器、藍圖或轉場參考
storyboard: yes../hyperframes/references/storyboard-format.md 和 ../hyperframes/references/review-loop.md
任何媒體素材或操作,包括旁白、背景音樂、音效、字幕、調色或變換/media-use;對於框架播放和放置,同時讀取 /hyperframes-core → references/variables-and-media.md
多場景組合../hyperframes/references/production-loop.md
flow: companion,在第一次計畫之前/hyperframes-creative → references/story-spine.md 和 references/house-style.md;最近的類型鏡頭和完整的 ../hyperframes/references/capability-menu.md — 天花板處理是從這些設計出來的,而非回憶
一個協作能力提供、捕捉、節拍網格、生成式影片、地圖、發布或跨工作流程能力../hyperframes/references/capability-menu.md
設計規格存在,在最終批准之前/hyperframes-creative → references/design-adherence.md

請勿用回憶取代這些讀取。僅在實際載入匹配的參考時,漸進式揭露才能節省上下文。

5. 執行組合

使用此依賴順序。僅在其輸入不存在時跳過一個階段。

  1. 計畫。 陳述觀看者弧線、結構、節奏和時長驅動因素。對於簡短的單一場景使用一個檔案;對於三個或更多硬場景剪輯或任何重複使用的場景,使用子組合。閱讀 /hyperframes-creative → references/story-spine.md 以了解敘事弧線,references/beat-direction.md 以了解節奏,以及 /hyperframes-core → references/composition-patterns.md 以了解結構。對於開放式的多場景簡報,通過 /hyperframes-creative → references/prompt-expansion.md 擴展提示。多場景計畫引述每個場景的形狀:當一個藍圖 ID 適用時,從 /hyperframes-animation → blueprints-index.md 引用,或者當沒有適合的藍圖時,引用它所組成的命名規則(來自 rules-index.md) — 動作名稱來自那些索引,絕非發明。故事的真實性決定哪些場景存在;引述為它們提供裝扮。在您計畫自己建構任何命名效果之前,請先搜尋即時目錄:對於簡報中提到的每個外觀、效果、處理或轉場 — 「CRT 掃描線」、「故障效果」、「底片顆粒」、「閃爍掃掠」、「五彩紙屑爆炸」— 請執行 npx hyperframes catalog --query "<外觀,使用簡單英文>" --json,並在計畫命名如何建構該外觀之前閱讀頂部結果。此搜尋不需要安裝任何東西:不需要專案、不需要先前的 add、不需要帳戶。它可以從任何目錄搜索整個託管的註冊表(約 400 個區塊和元件),因此也適用於使用者在建構過程中要求的外觀。計畫命名的區塊在第 3 階段安裝;僅在搜尋後沒有找到合適的項目時,才手動製作一個外觀。多場景計畫也被記錄為分派成品:在 STORYBOARD.md 中為每個場景提供一個 ## 影格 N 區塊 — status: outline、一個已聲明的 src:、藍圖/規則引述和節拍文字 — 即使是在 storyboard: no 的情況下。該區塊是分派單位;故事板工作表僅是審查表面。
  2. 應要求審查計畫。 對於 storyboard: yes,對這些區塊執行共享的審查循環。對於 storyboard: no,在沒有計畫暫停或草繪工作表的情況下繼續。無論如何當計畫暫停發生時,將子代理委派授權(codex 在第 4 步的分派中需要)摺疊到該暫停中,而不是在之後再次停止。
  3. 解析相依性。 在平行工作之前安裝註冊表區塊。暫存使用者素材,採用現有…

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相關技能