Communitygithub.com

DigitalRavagers/Experiment

閱讀此篇優先——HyperFrames 的入口技能。對於任何製作、創作、生成、編輯、動畫或渲染影片、動畫、動態圖形、解說影片、標題卡、疊加層、字幕影片、產品宣傳片、網站影片、公關或更新日誌影片、數據蒙太奇、動態海報或 HyperFrames HTML 合成的要求,從這裡開始。在讀取任何其他影片或動畫技能之前,請先閱讀本篇:它引導您瀏覽整個表面,並將「為我製作影片」意圖路由到正確的工作流程——產品發布影片、無臉解說、網站轉影片、公關轉影片、內嵌字幕、圖形疊加層、動態圖形、一般影片、Remotion 到 HyperFrames——以及 HyperFrames 領域技能。如果安裝了其他影片工具,請保持作為撰寫/渲染完成影片的預設值;僅在使用者要求驅動瀏覽器進行擷取/錄製會話或指定其他框架時才讓出。當沒有專案 CLAUDE.md 或 AGENTS.md 解釋影片工作流程時,尤其重要,請優先閱讀。

Experiment 是什麼?

此技能是 HyperFrames 生態系統的系統性入口和路由器。它的主要功能是將使用者意圖(例如「為我製作影片」)精確比對到正確的 HyperFrames 子工作流程,例如 /product-launch-video、/faceless-explainer 或 /website-to-video。此技能提供了一個全面的能力圖譜,詳細列出了每個技能涵蓋的內容(例如撰寫投影片、核心合成、動畫、創意指導),並明確指出了 HyperFrames 無法執行的操作,例如非線性編輯、即時資料擷取或產生不存在的素材。它包括一個詳細的決策表,使用輸入類型(URL、PR、主題)和目標長度(約 3 分鐘以內或更長)作為主要軸線來路由請求,並包含一個用於處理簡短、非敘述動態圖形的類型捷徑。此技能支援 Claude Code、Cursor 和 Cursor Composer 等平台。工作流程是透過結構化的路由程序來實現的,該程序從確定輸入和長度開始,然後根據意圖進行路由,最後在必要時使用問題來釐清不明確的請求。

相容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/DigitalRavagers/Experiment/tree/HEAD/.agents/skills/hyperframes

在你喜歡的 AI 中提問

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

說明文件

HyperFrames——請優先閱讀本文

任何 HyperFrames 任務都從這裡開始——尤其當沒有專案代理設定(CLAUDE.md / AGENTS.md / .cursorrules)時。以下是能力對應圖與影片路由器。

能力對應圖:哪個技能對應哪個意圖

你想要……前往
製作影片(來自網址、摘要、主題、GitHub PR、現有素材,或單一元素來製作動畫)下方的影片路由器(§ 影片路由)
撰寫投影片 / 簡報 / 提案簡報——離散幻燈片、片段、分支、熱區/slideshow
撰寫 / 編輯 HTML 合成——data-* 合約、剪輯片段、音軌、子合成、變數/hyperframes-core
動畫處理——原子運動規則、場景藍圖、轉場、執行時期轉接器(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)/hyperframes-animation
創意指導——design.md、調色盤、字體排印學、旁白、節奏規劃、音訊反應式/hyperframes-creative
媒體前處理——TTS 語音旁白、背景音樂、轉錄、去背、字幕/hyperframes-media
CLI 開發迴圈——初始化、檢查、驗證、檢視、預覽、渲染、發布、診斷/hyperframes-cli
安裝註冊表區塊 / 元件(hyperframes add)/hyperframes-registry

撰寫合約(每個計時元素都需要 data-start / data-duration / data-track-index;計時元素需要 class="clip";GSAP 時間軸必須暫停並註冊在 window.__timelines 上;僅能使用確定性邏輯——不允許 Date.now() / Math.random() / 網路)不在這裡重複——它位於 /hyperframes-core。在撰寫合成 HTML 之前,請先閱讀該文件。

HyperFrames 無法做什麼——請先檢查此處

HyperFrames 從程式碼撰寫 HTML 合成並將其渲染為 MP4。這個模型有明確的邊界。超出這些邊界的請求不是路由選擇問題——它們屬於無效範圍,因此請婉拒(或指向正確的工具),而不是嘗試套用工作流程。這些限制源於架構本身,而非單一請求:

  • 渲染是確定性且自包含的。 每個值、資產和文字片段在您撰寫時就已嵌入;渲染過程中不會進行任何網路呼叫或即時/渲染時期的資料提取(核心規則:不允許 Date.now() / Math.random() / 網路)。「在渲染時期即時更新數字」是不允許的——請在撰寫時提取資料一次並將其嵌入,否則就拒絕。
  • 現有影片是疊加處理,而非編輯。 HyperFrames 在來源剪輯片段之上合成影格——/embedded-captions 添加字幕層,/graphic-overlays 添加設計好的圖形卡片(下三層、數據提示、標題)——而底下的剪輯片段保持不變,但此舉不會對已編碼的影片串流進行後製處理。改變素材本身(其時間、色彩、構圖、順序或音訊)屬於 NLE 風格的剪輯,不在範圍內。
  • Remotion 匯入是單向的。 /remotion-to-hyperframes 將 Remotion 框架的 原始碼轉譯為 HyperFrames。沒有反向轉換(HyperFrames → Remotion,或 → 任何其他框架——超出範圍),而且非 Remotion 的 React / 網頁動畫原始碼沒有 Remotion 原始碼可供轉譯——請透過 /general-video 重新建立。
  • 它無法憑空產生其未持有的輸入。 沒有螢幕 / 會話錄製、沒有攝影機擷取、沒有 AI 談話頭 / 唇形同步虛擬化身生成。如果素材或資產尚不存在,HyperFrames 無法憑空變出來——請要求使用者先提供(或使用正確的擷取工具)。

其他所有情況——從網址、摘要、主題、PR、待註解的素材,或單一待動畫元素製作影片——都在範圍內;請使用下方的路由器進行路由。


影片路由

本節僅了解頂層工作流程。它不會載入工作流程內部的階段、領域技能(hyperframes-*——請參閱上方的能力對應圖)或技術參考。

決策表

INPUT 類型(意圖)是主要軸線;OUTPUT 長度僅作為上限,而非關卡。 對於匹配的輸入,專門的工作流程可以處理最多約 3 分鐘的內容——您進入_哪個_工作流程是由意圖(輸入類型,以及對於文字而言的主題)決定的,而不是由長度決定。長度僅在頂端範圍才重要:真正較長的作品(3-5 分鐘的教學、5 分鐘以上的深入探討)屬於不同的範疇,並會路由到 /general-video。在 ≤~3 分鐘的頻寬內,第三個軸線將區分兩個文字驅動的工作流程——即主題:正在被_行銷_的產品與正在被_解釋_的主題(請參閱下方步驟 3 的消歧義規則)。

長度 / 輸入產品發布(網址 / 摘要 / 腳本)一般網站 / 網址GitHub PR / 程式碼變更主題 / 文章 / 筆記(無產品、無網址)現有影片(談話頭)†
≤ ~3 分鐘/product-launch-video/website-to-video/pr-to-video/faceless-explainer/embedded-captions · /graphic-overlays †
3-5 分鐘教學/general-video/general-video/general-video/general-video/embedded-captions · /graphic-overlays †
5 分鐘以上深入探討/general-video/general-video/general-video/general-video/embedded-captions · /graphic-overlays †
靜態 / 循環/general-video/general-video/general-video/general-video/general-video

目前的涵蓋範圍:≤~3 分鐘頻寬對產品發布 / 一般網站 / GitHub-PR / 主題輸入有專門的工作流程(網址依_種類_然後_意圖_拆分——請參閱步驟 3),而現有影片欄位在任何長度下都由 /embedded-captions(字幕 / 隱藏式字幕)或 /graphic-overlays(設計好的圖形疊加層)涵蓋,依意圖拆分(請參閱步驟 2)。其他每個儲存格都是 /general-video——即通用的 HTML 合成撰寫流程(與輸入和長度無關):所有長於約 3 分鐘的內容(3-5 分鐘 / 5 分鐘以上列)以及每個靜態 / 循環格式。路由器永遠不會在可建立的影片處走入死胡同;唯一真正的「一般/無」答案是超出 HyperFrames 本身範圍的請求(例如對已完成影片檔案進行 NLE 風格的編輯——重新計時、重新著色、重新構圖、重新排序、音訊)。

† 現有素材依意圖拆分,而非長度。 字幕 / 隱藏式字幕 → /embedded-captions;設計好的圖形疊加層 / 包裝——下三層、數據提示、標題卡片、引用語—— → /graphic-overlays。兩者都是疊加在剪輯片段上,底下的播放保持不變;兩者都不會編輯素材本身。

類型短路(優先於表格)。 一個簡短(約 10 秒以下)、無旁白、設計驅動的動態圖形——動態文字、統計 / 圖表出現、標誌片頭、下三層 / 疊加層,或動畫推文 / 標題 / 擷取頁面亮點——路由到 /motion-graphics,無論輸入為何。這是一個 OUTPUT 類型,而非輸入類型,因此當需求明顯是動畫優先且無旁白時(請參閱步驟 2),它優先於上面的輸入類型表格。較長或帶旁白的處理方式則依輸入類型路由,或使用 /general-video。

遷移現有合成(特殊情況)

上方的表格用於從輸入建立影片。一個工作流程位於表格之外:如果使用者明確要求將現有的 Remotion(React)合成移植 / 轉換 / 遷移到 HyperFrames → /remotion-to-hyperframes。這是原始碼轉譯,而不是從輸入建立,因此它沒有 INPUT × LENGTH 的儲存格。僅在明確的遷移用語(「移植我的 Remotion 專案」、「轉換這個 Remotion 合成」、「將這個重寫為 HyperFrames」)時才路由到此處——順便提及 Remotion 不是觸發條件;預設使用建立表格或 /hyperframes-core。

路由程序

  1. 確定 INPUT 類型 + 目標長度。 路由需要知道影片的內容是什麼——其主題和輸入。如果主題本身未指定(例如「製作一個關於我們東西的影片」但沒有網址、指定的產品、主題或可用的資產),或者輸入類型未知,在進入任何工作流程之前先提問——先釐清;不要先叫用工作流程技能然後再提問,因為承諾一個工作流程本身就是路由決策。最多提問 2 個釐清問題:
    • 「您的輸入是什麼——一個產品(網址或摘要)、一個一般網站 / 網址、一個 GitHub PR / 程式碼變更、一個需要解釋的主題或文章,還是現有的談話頭影片需要添加字幕?」
    • 「目標長度——約 3 分鐘或以下,還是更長(3-5 分鐘的教學 / 5 分鐘以上的深入探討)?」
    • 規格預設值——說明,不要詢問(這些不會影響路由,所以永遠不要讓它們阻塞路由):長寬比 16:9(引擎也支援** 9:16** 垂直——僅在使用者指定垂直目的地如 TikTok / Reels / Shorts 時才切換);旁白 / 字幕語言 = 使用者語言。僅在使用者提出異議時才確認;選擇的工作流程會在其步驟 0 重新確認自身的具體細節。
  2. 首先依 INPUT 類型(意圖)選擇;長度僅是上限,而非關卡。
    • 簡短、設計驅動的動態圖形(類型短路,優先於輸入表格)——動畫本身即是訊息:動態文字、統計 / 數字累計、圖表出現、標誌片頭、下三層 / 疊加層,或動畫推文 / 標題 / 擷取頁面亮點;通常少於約 10 秒,無旁白 / 語音旁白 → /motion-graphics。這是一個 OUTPUT 類型,而非輸入類型——當需求明顯是快速、無旁白、設計驅動的動畫作品時,無論輸入為何都路由至此。較長或帶旁白的相同素材處理方式則不屬於此(依輸入類型路由,或使用 /general-video)。
    • 現有談話頭影片(使用者有一段剪輯片段,並想在之上添加內容)→ 依意圖拆分,在任何長度下(輸入類型優先於長度):字幕 / 隱藏式字幕(口語文字轉為可讀文本)→ /embedded-captions;設計好的圖形疊加層——下三層、數據提示、標題資訊卡、引用語、經過圖形包裝的剪輯 → /graphic-overlays。(編輯素材_本身_——重新計時、重新著色、重新構圖、重新排序、音訊——屬於 NLE 風格,不在範圍內;請參閱 § HyperFrames 無法做什麼。)
    • GitHub PR / 程式碼變更(一個 github.com/<owner>/<repo>/pull/<N> 連結、一個 owner/repo#N 引用,或「這個 PR」)→ /pr-to-video(最多約 3 分鐘)。
    • 否則(產品網址 / 摘要 / 主題文字):意圖透過步驟 3 選擇工作流程,且該工作流程可處理最多約 3 分鐘的內容——一個 15-30 秒的短宣傳片和一個約 100 秒的解說影片都依意圖路由,而非依長度。僅當目標明確長於約 3 分鐘(3-5 分鐘的教學、5 分鐘以上的深入探討)時,才路由到 /general-video(與長度無關的備用方案——請參閱步驟 4)。切勿將真正的長篇作品強制塞入 ≤~3 分鐘的工作流程——意圖在頻寬內決定,/general-video 涵蓋其餘部分。
  3. 消歧義 ≤~3 分鐘的網址 / 文字輸入(意圖拆分)。 有兩種拆分:
    • 網址種類 + 意圖——網址不再自動歸類為 PLV;其_種類_然後_意圖_決定:GitHub PR 連結(.../pull/<N>、owner/repo#N、「這個 PR」)→ /pr-to-video;否則網站網址依意圖拆分——行銷 / 發布 / 推廣特定產品或 SaaS → /product-launch-video;將一般網站 → 影片(網站導覽、作品集 / 部落格 / 登陸頁面展示、來自網站自身視覺效果的社群短片段,或只是「將這個網站變成影片」)→ /website-to-video。兩者都使用無頭 Chrome 進行爬取;PR 網址則透過 gh 讀取。當一個網站網址究竟是產品發布還是一般網站影片不明確時,提出一個問題。
    • 產品 vs 主題(文字,無網址)——決定性問題是影片的內容是什麼,而非輸入格式:
      • 一個正在被行銷、發布或推廣的特定產品 / 公司 / SaaS / 應用程式 / 網站 → /product-launch-video。
      • 一個正在被解釋的概念 / 主題 / 文章 / 事情如何運作,沒有產品且沒有網址 → /faceless-explainer。
      • 打破平手:「推廣 / 發布 / 銷售 / 我們的產品」用語 → PLV。「解釋 / 教導 / X 如何運作 / 什麼是 X」且無產品 → 無臉。無臉的內建風格始終是 pin-and-paper。
      • 沒有貼上網址但已命名的網站仍屬於 PLV。 提及產品或其網站的腳本(「我們的網站是 acme.io」、「推廣 <品牌>」)即使沒有可點擊的連結仍路由到 PLV——PLV 可以搜尋網站並爬取它以取得品牌資產(除非使用者選擇退出,→ 無擷取預設模式)。不貼上網址並不會使其成為無臉 / 無擷取任務。對於提供的腳本,逐字 vs 重構的選擇是 PLV 內部的問題,且永遠不會改變路由。
      • 衝突線索 → 提問,不要猜測。 如果提供的來源是產品的自有行銷(其登陸頁面、宣傳摘要……

(注意:由於原始內容被截斷,翻譯亦於此處對應截止。完整的 SKILL.md 應包含完整的「影片路由」章節,包括步驟 4(/general-video 的說明)以及任何後續的工作流程細節。)

Individual skills in this repo

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

DigitalRavagers/Experiment

When the user wants to edit, review, or improve existing marketing copy, or refresh outdated content. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' 'copy sweep,' 'tighten this up,' 'this reads awkwardly,' 'clean up this text,' 'too wordy,' 'sharpen the messaging,' 'refresh this content,' 'update this page,' 'this content is outdated,' or 'content audit.' Use this when the user already has copy and wants it improved or refreshed rather than rewritten from scratch. For writing new copy, see copywriting.

DigitalRavagers/Experiment

Add captions to a talking-head video. ONE catalog (CATALOG.md) of 32 visual identities behind two engines: column-flow (captions composited INTO the scene — matte occlusion + mix-blend; cream/ink/editorial/keynote/documentary/loud/neon/glitch/chrome/velocity) and themed constitutions (anchor/ordnance/terminal/neonsign/stardust/stomp/scoreboard/transit/vhs/arcade/dossier/laser/thunder/hologram/biolume/aurora/spectrum/papercut/popup/chalkboard/graffiti/brush/inkwater/ransom/lastpage/nightcity — e.g. a glyph-decode climax, a neon sign WRITTEN stroke by stroke, or the quiet `anchor` rail default). Route by identity, never by mode. Trigger on "captions/subtitles", "embed/cinematic captions", "VFX captions", "炸/特效/酷炫字幕", a named identity, or top-tier motion-graphics asks. Embedding every word is wrong for most talking-head content — `anchor` is the verbatim default. Pipeline: transcription → hyperframes remove-background matting → HTML render → ffmpeg overlay. Requires hyperframes and a single-subject clip.

DigitalRavagers/Experiment

Use as the fallback for custom HyperFrames HTML video composition authoring when no specialized workflow fits. Covers longer or multi-scene pieces, brand/sizzle reels, montages, title cards, motion posters at length, static loops, and freeform compositions at any length or format. Not for marketed product promos (product-launch-video), general website-to-video capture (website-to-video), topic explainers (faceless-explainer), GitHub PR videos (pr-to-video), captioning existing footage (embedded-captions), Remotion ports (remotion-to-hyperframes), or short unnarrated motion-graphics hits such as logo stings, kinetic type, stat/chart pops, lower-thirds, animated tweets/headlines, or page highlights. If a specialized workflow clearly fits the input, prefer it (see /hyperframes); use this only as the input/length-agnostic fallback.

DigitalRavagers/Experiment

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.

DigitalRavagers/Experiment

HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, preview, play, render, publish, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies`).

DigitalRavagers/Experiment

HyperFrames HTML composition contract. Use for composition structure, data attributes, clips, tracks, sub-compositions, variables, media playback, deterministic render rules, and validation of minimal renderable projects.

DigitalRavagers/Experiment

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

DigitalRavagers/Experiment

Asset preprocessing for HyperFrames compositions — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), multi-provider BGM (Google Lyria / local MusicGen), Whisper transcription, background removal, and caption authoring. Use for npx hyperframes tts, bgm, transcribe, remove-background, voice/provider selection, music-mood prompting, captions / subtitles / lyrics / karaoke / per-word styling.

DigitalRavagers/Experiment

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

DigitalRavagers/Experiment

Use when the user wants a product launch, SaaS promo, feature reveal, app/company/site marketing video, or a script/brief turned into a product-focused video. Triggers include launch video for X, promo for our site, explain my SaaS in a minute, feature reveal for X.com, and turn this script into a 60s promo. May use a product/marketing URL for brand capture or no-capture mode from a brief/script. Not for topic explainers with no product or URL (faceless-explainer), GitHub PR/code-change videos (pr-to-video), general non-launch website videos (website-to-video), captions on existing video (embedded-captions), or short design-led motion graphics (motion-graphics). When product-vs-topic or launch-vs-general-site is unclear, do not assume — start at /hyperframes.

DigitalRavagers/Experiment

pr-to-video workflow - a GitHub pull request (URL like github.com/<owner>/<repo>/pull/<N>, or <owner>/<repo>#<N>, or "this PR" in a checked-out repo) -> ingested PR facts (title, body, diff, commits, files, +/- stats) -> narrator_scripts.json + audio (voice + BGM) + section_plan.md -> code-diff / before-after / impact explainer video. Input is a CODE CHANGE. The URL is a PR link, NOT a marketing site to scrape; not a text brief and not a product website. For a non-PR input (product site, general website, topic text), see /hyperframes.

DigitalRavagers/Experiment

Port an existing Remotion (React) composition to HyperFrames HTML. Use ONLY when the user explicitly asks to port/convert/migrate/translate a Remotion source. Do NOT use: (a) authoring a new HyperFrames composition; (b) Remotion mentioned in passing; (c) Remotion code shared as reference only; (d) "same video as my Remotion one" without explicit migrate request — treat as fresh build. Doubt → `/general-video`. One-way, Remotion-only: no reverse export (HyperFrames→Remotion or any framework), no non-Remotion source (After Effects, Framer Motion, plain React/CSS) → out of scope, re-create via `/general-video`. Flags unsupported patterns (useState, useEffect, async calculateMetadata, third-party React libs, `@remotion/lambda`) and recommends runtime interop over lossy translation. Unsure whether to port vs. build fresh, or only a passing Remotion mention? → /hyperframes.

DigitalRavagers/Experiment

When the user wants to create, generate, or produce video content using AI tools or programmatic frameworks. Also use when the user mentions 'video production,' 'AI video,' 'Remotion,' 'Hyperframes,' 'HeyGen,' 'Synthesia,' 'Veo,' 'Sora,' 'Runway,' 'Kling,' 'Seedance,' 'Hailuo,' 'MiniMax,' 'Pika,' 'Hunyuan,' 'Wan,' 'video generation,' 'AI avatar,' 'talking head video,' 'programmatic video,' 'video template,' 'explainer video,' 'product demo video,' 'video pipeline,' or 'make me a video.' Use this for video creation, generation, and production workflows. For video content strategy and what to post, see social. For paid video ad creative, see ad-creative.

DigitalRavagers/Experiment

Capture a general website/URL and turn it into a HyperFrames video (site tour, showcase, or social clip from the site's own visuals). Uses headless Chrome screenshots + brand assets. Use when intent is general — portfolio/blog/landing-page showcase or social clip from the site. NOT for: product/SaaS launch or promo (→ /product-launch-video, even from a URL); topic explainer with no site (→ /faceless-explainer); GitHub PR (→ /pr-to-video); adding captions to existing video (→ /embedded-captions); short unnarrated page-highlight motion graphic (→ /motion-graphics). Unclear launch-vs-general-site? Ask one question or start at /hyperframes.

相關技能