Agent Skills

全部技能

hyperframes-animation (HeyGen HyperFrames)

規定 HyperFrames 合成的時間與動畫規則：data-* 屬性、clip、軌道與子合成。

hyperframes-animation：能讓 HyperFrames 動畫作品遵循渲染契約（對照組 3.8、技能組 4.9、一句話提示組 4.5），代價是 1.05 倍對照組的 Token，但這個技能已從 HeyGen 的儲存庫移除

推薦注意

Codex CLI · gpt-6-astra

26.1 / 30

相對未使用技能的提升：+1.16 · 推薦 · 18 次執行

推薦：總分 26.1/30 至少 22，產出品質 4.9 至少 3.5，提升幅度 +1.16 至少 +1.0。

SOTA

透過

使用 Codex 測試。

涵蓋 Codex, Claude Code

Codex CLI 0.166（SOTA 等級）：18 次評分執行。依我們的等級規則，在這裡通過也涵蓋 Claude Code；但這不代表第二等級的結果。

分數

每個維度為 0 到 5 分，六個維度相加即為滿分 30 的總分。每個維度都是 5 分最好。成本 5 分代表便宜又快速；安裝 5 分代表容易安裝。

觸發可靠性
5.0
相對未使用技能的提升
3.2
產出品質
4.9
Token 與時間成本
5.0
安裝與可攜性
4.0
安全性
4.0

安全審查

注意

靜態掃描：17 CRITICAL / 17 HIGH / 148 MEDIUM。人工審查：可在無網路沙箱中安全執行（掃描器的 BLOCK 是誤報）；請勿盲目執行它的腳本。掃描結果不能證明技能一定安全。

安裝

npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation

來源

固定 Commit: 207c8a4daf6480d697f203784f1fd422727569e3

測試日期: 2026-11-02

我們測了什麼

  • 動態標題 — 建立一個 6 秒、1920x1080 的 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）作品：三個字詞的標題（「Build. Ship. Repeat.」），每個字詞依序撞入…
  • 場景轉場 — 建立一個 8 秒、1920x1080 的 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）作品，包含兩個全螢幕場景（「Problem」4.5 秒、「Solution」4.5 秒），…
  • 帶長條圖的數字遞增 — 建立一個 7 秒、1920x1080 的 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）作品：一個大數字在 2.5 秒內從 0 遞增到 87%，並搭配水平…

優點

  • 相對未使用技能，平均分數從 3.76 提升到 4.92（+1.16）。
  • 技能即使未被點名也會被採用：6/6 次實驗組執行都讀取了技能檔案。
  • 沒有額外 Token 負擔：Token 用量是未使用技能的 1.05 倍。
  • 比把自身規則濃縮成一句話的版本高 +0.39。
  • 使用技能後的絕對品質很高：4.92 / 5。

缺點

  • 測試注意事項：在 heygen-com/hyperframes 的 commit 207c8a4 上測試，屬於較舊的版本。這個技能後來已從儲存庫的 HEAD 移除，因此安裝指令可能無法對目前的儲存庫生效。執行期間它也會讀取 hyperframes-core。
  • 每個任務的每個組別 n=2；約 1 分以內的差異屬於雜訊。

評測

在專用的 Windows 測試電腦上執行 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取，技能分為已安裝（實驗組）、未安裝（對照組），以及未安裝但把技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務的每個組別執行 2 次，關閉網路，封鎖 /tmp 寫入。提示詞從未提到技能（除了下方註明的措辭）。每個提示詞都用一句話描述 HyperFrames（透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4）。任務：一個 6 秒的動態標題，三個字詞依序撞入；一個 8 秒的雙場景轉場；以及一個 7 秒、帶長條圖的數字遞增動畫。一句話提示組用一段文字說明動畫規則。

三組對照

組別平均分數（0-5）每次執行 Token 用量
未使用技能3.76131k
一句話提示4.5287k
使用技能4.92137k

以 Codex CLI 執行 18 次，採規則式檢查評分，不經 LLM 評審。總分 26.1 / 30，評級為 推薦。

揭露事項：測試版本為 heygen-com/hyperframes 的 commit 207c8a4，屬於較舊的版本。這個技能後來已從儲存庫的 HEAD 移除，因此安裝指令可能無法對目前的儲存庫生效。執行期間它也會讀取 hyperframes-core。

評定：推薦（26.1 / 30）。 來源：heygen-com/hyperframes，skills/hyperframes-animation, skills/hyperframes-core，固定於提交 207c8a4。安裝：npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation。授權： Apache-2.0（儲存庫 LICENSE）。

這是什麼

hyperframes-animation 技能（來自 heygen-com/hyperframes，測試於提交 207c8a4；該技能已不在儲存庫的 HEAD，因此以下描述的是已退役版本）：HyperFrames 構圖的動畫指引：在 window.__timelines[root id] 註冊一條暫停的 GSAP 時間軸；使用 GSAP 的 transform 別名而非版面屬性；使用具名緩動；序列動作使用 stagger；補間當下不得使用 Math.random、Date.now、timer、rAF 或 getBoundingClientRect；計數器透過代理物件補間；場景使用 data-start/data-duration，且總長度由根 duration 涵蓋。

測試方式

在專用的 Windows 測試電腦上使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都建立全新的臨時專案，並使用臨時的 HOME/TMPDIR/快取；分別為安裝技能（技能組）、未安裝（對照組），以及未安裝但把技能核心要求濃縮成一句話附加在提示詞後（一句話組）；每項任務的每組執行 2 次；關閉網路，並封鎖對 /tmp 的寫入。提示詞完全不會提到技能名稱（以下註明的措辭除外）。

每則提示詞都用一句話描述 HyperFrames（將 HTML 頁面透過逐格定位 GSAP 時間軸渲染成 MP4）。任務包括：6 秒的動態標題，三個詞依序用力撞入；8 秒的雙場景轉場；7 秒的數字遞增搭配長條圖。一句話版本則用一段話說明動畫規則。

  1. 動態標題 — 建立一個 6 秒、1920x1080 的 HyperFrames 構圖（HyperFrames 是一套開源框架，透過逐格定位 GSAP 時間軸，將 HTML 頁面渲染成 MP4；GSAP 由 CDN script 標籤載入）：由三個詞組成的標題（'Build. Ship. Repeat.'），每個詞用力撞入…
  2. 場景轉場 — 建立一個 8 秒、1920x1080 的 HyperFrames 構圖（HyperFrames 是一套開源框架，透過逐格定位 GSAP 時間軸，將 HTML 頁面渲染成 MP4；GSAP 由 CDN script 標籤載入），包含兩個全螢幕場景（'Problem' 4.5 秒、'Solution' 4.5 秒）…
  3. 數字遞增統計與長條圖 — 建立一個 7 秒、1920x1080 的 HyperFrames 構圖（HyperFrames 是一套開源框架，透過逐格定位 GSAP 時間軸，將 HTML 頁面渲染成 MP4；GSAP 由 CDN script 標籤載入）：一個大數字在 2.5 秒內從 0 遞增到 87%，並搭配水平…

計分採程式化方式（隱藏測試／預埋問題召回／限制條件檢查／視情況搭配渲染與 OCR），每次執行 0–5 分。分數並非由任何 LLM 評審決定。

結果

提供給第三組的一句話版本：「在 HyperFrames 構圖中，使用一條在 window.__timelines[root id] 註冊的暫停 GSAP 時間軸；以 GSAP transform 別名（x、y、scale、rotation、opacity）移動物件，絕不使用 width/height/top/left；選用具名緩動，序列動作使用 stagger；補間當下不得使用 Math.random/Date.now/timers/rAF/getBoundingClientRect，也不得使用 repeat:-1；計數器透過代理物件的 onUpdate 補間驅動；場景是帶有 data-start/data-duration 的計時元素，根 data-duration 必須涵蓋它們。」

任務對照組分數一句話版本技能組對照組 token 數一句話版本 token 數技能組 token 數技能讀取
t1-kinetic3.54.254.75113k77k144k2/2
t2-transition3.575.05.0152k111k159k2/2
t3-countup4.214.325.0126k73k107k2/2

平均分數：無技能 3.76，技能組 4.92（差異 +1.16）。每次執行 token 數：131k 對 137k（1.05 倍）；時間 72 秒對 70 秒。一句話組：4.52（技能相較一句話版本的增益：+0.39；一句話版本相較無技能的增益：+0.77）；一句話版本每次執行 87k token，因此技能的 token 成本是一句話版本的 1.57 倍。

實際表現

  • 對照組 3.76、技能組 4.92、一句話版本 4.52（各 n=6）。對照組最常見的失敗屬於結構問題：根元素在 6/6 次執行中都缺少完整的 id/width/height/duration 組合，且時間軸在 5/6 次執行中未註冊於 window.__timelines，導致 HyperFrames 渲染器找不到它。
  • 技能組在 6/6 次執行中都通過這些檢查。一句話版本只在 6 次執行中的 2 次正確註冊時間軸（在動態標題與數字遞增任務中失敗），不過根 duration 與屬性都給對了。
  • 動態標題任務：技能組與對照組在 2/2 次執行中都未通過 stagger 檢查的逐詞 stagger 要求（它們為每個詞使用個別補間）；一句話版本在 2/2 次執行中使用了 stagger。這項檢查範圍狹窄，因此差異有一部分只是程式碼風格。
  • Token：技能組每次執行 137k、一句話版本 87k、對照組 131k。技能以對照組的 token 成本讓執行更可靠，並沒有更便宜；一句話版本則比兩者都便宜 36%。
  • 技能體積龐大（工作資料夾中安裝了約 133 個檔案，包含規則、藍圖與技巧）。技能組的執行同時讀取了 hyperframes-animation 與 hyperframes-core，因此技能會指向核心技能，而這部分增益有一部分來自核心契約。

各面向分數

面向分數原因
1_output_quality4.92

技能組平均分數 4.92/5（程式化檢查，詳見各任務 表格）。

2_lift_vs_no_skill3.16

相較無技能的 3.76 高出 +1.16 分（每項任務 n=2；約 1 分 以下的差異屬於雜訊）。

3_trigger5.0技能組 6/6 次執行都讀取了技能檔案。
4_instructions_portability4SKILL.md 加上許多參考檔案；專屬於 HyperFrames。
5_efficiency5

token 為 1.05 倍（每次執行 137k 對 131k），時間為 0.96 倍（70 秒對 72 秒）。

6_safety_hygiene4僅文字與規則；詳見 security.md。

本測試的限制

  • 僅對 HTML/GSAP 文字做靜態檢查；並未渲染任何影格（hyperframes CLI、Chrome 與 FFmpeg 都未執行），因此視覺時機與品質未經測量。
  • 因 HEAD 已不再包含該技能，測試固定在提交 207c8a4；安裝指令在目前的儲存庫上可能無法運作。
  • stagger 檢查只接受 GSAP 的 stagger 選項，不接受等效的逐詞位移。
  • 每格 n=2。
  • 每項任務的每組 n = 2：約 1 分以下的差異屬於雜訊。
  • 規則式計分只能衡量檢查項目看得見的部分，無法評判品味，也無法判斷結果是否為最佳解。

安全性

詳見 security.md。掃描：17 CRITICAL / 17 HIGH / 148 MEDIUM。評定：可在無網路沙箱中安全執行。掃描結果乾淨並不代表技能一定安全。

總結

使用技能時，構圖幾乎每次都能符合 HyperFrames 契約；沒有技能時，根元素與時間軸註冊通常會出錯。用一段話說明規則，就能以更少的 token 挽回大部分問題。由於技能已不在供應商的儲存庫中，請將本結果視為該早期版本的紀錄。

完整紀錄

執行日誌：hyperframes-animation (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
欄位：任務、組-輪次、得分（0-5）、token、秒、通過的檢查、代理開啟的 skill 檔案。

t1-kinetic control-1: 得分 3.5, token 128548, 秒 60.2, 檢查 7/10, 未開啟
t1-kinetic control-2: 得分 3.5, token 99223, 秒 66.5, 檢查 7/10, 未開啟
t1-kinetic oneliner-1: 得分 4.25, token 79255, 秒 64.5, 檢查 9/10, 未開啟
t1-kinetic oneliner-2: 得分 4.25, token 75639, 秒 62.9, 檢查 9/10, 未開啟
t1-kinetic treatment-1: 得分 4.75, token 106794, 秒 54.6, 檢查 9/10, 開啟 hyperframes-animation,hyperframes-core
t1-kinetic treatment-2: 得分 4.75, token 181725, 秒 64.4, 檢查 9/10, 開啟 hyperframes-animation,hyperframes-core
t2-transition control-1: 得分 3.57, token 139995, 秒 89.6, 檢查 8/11, 未開啟
t2-transition control-2: 得分 3.57, token 164538, 秒 97.6, 檢查 8/11, 未開啟
t2-transition oneliner-1: 得分 5.0, token 98384, 秒 101.1, 檢查 11/11, 未開啟

18 次執行、21 個產出檔案

範例產出

SOTA · 装了 skill：index.html（t1-kinetic，第 1 次，Codex）

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Build. Ship. Repeat.</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #080b10; color: #f5f7f5; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; } .clip { position: absolute; inset: 0; } .background { background: #080b10; } .glow { position: absolute; left: 310px; top: 140px; width: 1300px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, #167b60 0%, #0d463e 32%, transparent 70%); opacity: .24; } .grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse, black, transparent 72%); } .content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .headline { display: flex; align-items: baseline; justify-content: center; gap: 34px; margin: 0; width: 1720px; font-size: 160px; font-weight: 850; letter-spacing: -9px; line-height: 1.15; } .word { display: block; flex: 0 0 auto; transform-origin: 50% 65%; opacity: 0; } #repeat { color: #b7f676; } .subtitle { margin: 38px 0 0; font-size: 34px; font-weight: 400; letter-spacing: 1px; color: #b9c5c2; opacity: 0; } .beats { position: absolute; bottom: 210px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; } .beat { display: block; width: 38px; height: 4px; background: #b7f676; opacity: .15; transform-origin: left center; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"> <div class="clip background" data-start="0" data-duration="6" data-track-index="0" aria-hidden="true"> <div class="glow" id="glow"></div> <div class="grid"></div> </div> <section class="clip content" data-start="0" data-duration="6" data-track-index="1"> <h1 class="headline" aria-label="Build. Ship. Repeat."><span class="word" id="build">Build.</span><span class="word" id="ship">Ship.</span><span class="word" id="repeat">Repeat.</span></h1> <p class="subtitle" id="subtitle">The loop that never stops</p> <div class="beats" aria-hidden="true"><i class="beat"></i><i class="beat"></i><i class="beat"></i></div> </section> </div> <script> // Every visual change belongs to this single, frame-seekable timeline. const tl = gsap.timeline({ paused: true }); const beats = [0.25, 0.95, 1.65]; tl.fromTo('#glow', { scale: 0.88, x: -65, opacity: 0.24 }, { scale: 1.12, x: 65, opacity: 0.40, duration: 6, ease: 'sine.inOut' }, 0); tl.fromTo('#build', { scale: 1.65, y: -55, opacity: 0 }, { scale: 1, y: 0, opacity: 1, duration: 0.32, ease: 'power4.out' }, beats[0]); tl.fromTo('#ship', { scale: 1.35, x: 95, opacity: 0 }, { scale: 1, x [... excerpt: first 3200 of 4167 characters]

檢視 Pro