hyperframes (heygen-com/hyperframes)
製作、編輯、加入動畫並算繪 HyperFrames 影片,涵蓋宣傳片、解說片、圖表與字幕。
HyperFrames 技能:HyperFrames 技能與未使用技能的影片品質相同,但 Token 用量是 1.9 倍,專案結構也更容易編輯
Codex CLI · gpt-6-astra
19.9 / 30
相對未使用技能的提升:-0.01 · 視情況推薦 · 18 次執行
視情況推薦:總分 19.9/30 低於 22,並且提升幅度 -0.01 低於 +1.0。推薦條件為總分至少 22/30、產出品質至少 3.5、提升幅度至少 +1.0。
SOTA
透過使用 Codex 測試。
涵蓋 Codex, Claude Code
Codex CLI 0.166(SOTA 等級):18 次評分執行。依我們的等級規則,在這裡通過也涵蓋 Claude Code;但這不代表第二等級的結果。
分數
每個維度為 0 到 5 分,六個維度相加即為滿分 30 的總分。每個維度都是 5 分最好。成本 5 分代表便宜又快速;安裝 5 分代表容易安裝。
- 觸發可靠性
- 5.0
- 相對未使用技能的提升
- 2.0
- 產出品質
- 4.9
- Token 與時間成本
- 2.0
- 安裝與可攜性
- 3.0
- 安全性
- 3.0
安全審查
注意靜態掃描:27 CRITICAL / 26 HIGH / 88 MEDIUM。人工審查:可在無網路沙箱中安全執行。掃描結果不能證明技能一定安全。
安裝
npx skills@latest add heygen-com/hyperframes --skill hyperframes
固定 Commit: af0d68d612ebd9c419f27d9ebc8068512667bae4
測試日期: 2026-11-02
我們測了什麼
- 15 秒產品預告 — 在這個 HyperFrames 專案(index.html 根作品、GSAP 時間軸,以 npx hyperframes render 渲染)中,為 Tidepool 建立一支 15 秒、1920x1080、30 fps 的產品預告,這是一個每月配送的海苔零食訂閱服務。畫面上必須出現的文字:名稱「Tidepool」、…
- 20 秒動態長條圖解說 — 在這個 HyperFrames 專案(index.html 根作品、GSAP 時間軸,以 npx hyperframes render 渲染)中,建立一支 20 秒、1920x1080、30 fps 的動態解說影片:一張月營收長條圖(8 月 $42k、9 月 $58k、10 月 $71k)。標題「Revenue, last 3 months…
- 30 秒直式字幕短片 — 在這個 HyperFrames 專案(index.html 根作品、GSAP 時間軸,以 npx hyperframes render 渲染)中,建立一支 30 秒、直式 1080x1920、30 fps 的社群短片,並燒錄字幕。字幕依序出現,每段停留約 5 秒,從…
優點
- 技能即使未被點名也會被採用:6/6 次實驗組執行都讀取了技能檔案。
- 使用技能後的絕對品質很高:4.89 / 5。
缺點
- 相對未使用技能沒有可測量的提升(-0.01,落在雜訊範圍內)。
- 一句話提示得分 4.91,使用技能則為 4.89(-0.01)。
- Token 用量是未使用技能的 1.95 倍。
- 對照組本來就拿到 4.9:這是天花板效應,因此測試無法顯示提升幅度。
- 測試注意事項:只評估技能提供的指引;沙箱中沒有 hyperframes CLI 迴圈(check、preview、render)。CLI 是另一個 npm 套件,我們沒有審核也沒有執行,而且除非關閉,它會傳送使用情況遙測。同系列的技能 hyperframes-core 與 hyperframes-animation 是在較舊的 commit 207c8a4 上測試,這個技能則是 af0d68d。
- 每個任務的每個組別 n=2;約 1 分以內的差異屬於雜訊。
評測
在 Mac 測試機上執行 Codex CLI 0.166(gpt-6-astra,低推理),每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取,技能分為已安裝(實驗組)、未安裝(對照組),以及未安裝但把技能核心要求濃縮成一句話附加在提示詞後(一句話提示組),每個任務的每個組別執行 2 次,關閉網路,封鎖 /tmp 寫入。提示詞從未提到技能(除了下方註明的措辭)。環境:所有組別都使用相同的專案範本(含 GSAP script 標籤的 index.html、作品的中繼資料)。沙箱沒有網路,也沒有 HyperFrames CLI,因此各組都無法執行 check、snapshot 或 render,只能撰寫原始碼。之後我們在另一台離線機器上,用固定版本 HyperFrames 0.8.226(draft 品質)渲染每個專案。這測的是技能的文字內容,而不是它的 CLI 迴圈。
三組對照
| 組別 | 平均分數(0-5) | 每次執行 Token 用量 |
|---|---|---|
| 未使用技能 | 4.9 | 128k |
| 一句話提示 | 4.91 | 150k |
| 使用技能 | 4.89 | 249k |
以 Codex CLI 執行 18 次,採規則式檢查評分,不經 LLM 評審。總分 19.9 / 30,評級為 視情況推薦。
揭露事項:只評估技能提供的指引:沙箱中沒有 hyperframes CLI 迴圈(check、preview、render)。CLI 是另一個 npm 套件,我們沒有審核也沒有執行,而且除非關閉,它會傳送使用情況遙測。同系列的技能 hyperframes-core 與 hyperframes-animation 是在較舊的 commit 207c8a4 上測試,這個技能則是 af0d68d。
判定:視情況而定(19.9 / 30)。 來源:heygen-com/hyperframes,skills/hyperframes,固定於提交 af0d68d。安裝:npx skills@latest add heygen-com/hyperframes --skill hyperframes。授權條款: Apache-2.0。
這是什麼
來自 heygen-com/hyperframes 的 hyperframes 技能(Apache-2.0):一份 1,100 字的 SKILL.md,加上約 25 個參考檔案與幾個輔助指令碼,用來把影片做成 HTML,再透過逐格 seek 暫停的 GSAP 時間軸渲染成 MP4。它制定了一套 12 條規則的渲染契約(每個有時間的元素都是 class="clip" 並帶有 data-start/data-duration,在 window.__timelines 註冊一個暫停的時間軸,且沒有任何不具決定性的內容)、一種可編輯結構(每個子合成一個場景),以及一個以 npx hyperframes CLI 為核心的工作迴圈(檢查、快照、預覽、渲染)。
我們如何測試
在 Mac 測試機上使用 Codex CLI 0.166(gpt-6-astra,低推理),每次執行都使用全新的暫存專案與暫存 HOME/TMPDIR/快取,安裝技能(實驗組)、未安裝(對照組),或未安裝但將技能核心要求濃縮成一句話附加在提示詞後(一句話提示組),每個任務每組執行 2 次,網路關閉,/tmp 寫入封鎖。提示詞從未提及技能(以下註明的措辭除外)。
環境:專案範本(含 GSAP script 標籤的 index.html、composition 中繼資料)對所有組別都相同。沙箱沒有網路,也沒有 HyperFrames CLI,因此各組都無法執行 check、snapshot 或 render;他們只撰寫原始碼。接著我們在另一台離線機器上,以固定版本的 HyperFrames 0.8.226(草稿品質)渲染每個專案。這測試的是技能的文字,而不是它的 CLI 迴圈。
- 15 秒產品預告 — 在這個 HyperFrames 專案中(index.html 根 composition、GSAP 時間軸,透過
npx hyperframes render渲染),為 Tidepool 建立一支 15 秒、1920x1080、30 fps 的產品預告;Tidepool 是每月海藻零食訂閱服務。畫面上必要的文字:名稱「Tidepool」、… - 20 秒動畫長條圖解說 — 在這個 HyperFrames 專案中(index.html 根 composition、GSAP 時間軸,透過
npx hyperframes render渲染),建立一支 20 秒、1920x1080、30 fps 的動畫解說影片:每月營收的長條圖(8 月 $42k、9 月 $58k、10 月 $71k)。標題「Revenue, last 3 months… - 30 秒直式字幕短片 — 在這個 HyperFrames 專案中(index.html 根 composition、GSAP 時間軸,透過
npx hyperframes render渲染),建立一支 30 秒直式 1080x1920、30 fps、帶有燒錄字幕的社群短片。字幕依序出現,每則停留約 5 秒,從…
評分方式為程式化檢查(隱藏測試/植入問題召回/限制條件檢查/視情況進行渲染與 OCR),每次執行 0–5 分。沒有任何 LLM 評審決定分數。
結果
提供給第三組的一句話提示:「把它建成 HyperFrames HTML 合成:一個根節點帶有 data-composition-id/data-width/data-height/data-duration,每個有時間的元素都賦予 class="clip" 以及以秒為單位的 data-start 與 data-duration,將一個暫停的 GSAP 時間軸註冊為 window.__timelines["<composition-id>"],且沒有任何不具決定性的內容(不要 Date.now()、未播種的 Math.random()、計時器、網路或 repeat:-1)。」
| 任務 | 對照組分數 | 一句話提示 | 使用技能 | 對照組 Token 數 | 一句話提示 Token 數 | 使用技能 Token 數 | 技能讀取 |
|---|---|---|---|---|---|---|---|
| t1-teaser | 5.0 | 5.0 | 4.97 | 140k | 173k | 364k | 2/2 |
| t2-chart | 4.71 | 4.72 | 4.71 | 125k | 116k | 184k | 2/2 |
| t3-vertical | 5.0 | 5.0 | 5.0 | 117k | 158k | 197k | 2/2 |
平均分數:未使用技能 4.9,使用技能 4.89(差異 -0.01)。每次執行 Token 數:128k 對 249k(1.95 倍);時間 154 秒對 208 秒。一句話提示組:4.91(技能相較一句話提示的增益:-0.01;一句話提示相較無技能的增益:+0.0);一句話提示每次執行 150k Token,因此技能的成本是一句話提示的 1.67 倍。
實際發生了什麼
- 影片品質相同。全部 18 個專案都在第一次嘗試就渲染出正確的尺寸、長度與影格率,而 OCR 在每個應該出現必要文字的執行中,都在畫面上找到那些文字(名稱、標語、$14/盒、結尾句、字幕)。平均分數:未使用技能 4.90、只使用其規則一句話版本 4.91、使用技能 4.89。所有三組唯一失分的地方,是長條圖解說影片有長時間靜止不動(有動作的影格佔 15-23%)。
- 一句話版本表現與技能相當。給對照組代理一句契約內容(clip 類別、data-start/data-duration、一個暫停的時間軸、沒有不具決定性的程式碼),就產生相同的分數與相同的外觀:我們檢視了三組的預告、圖表與直式短片的縮圖拼版,無法依品質為它們排名。
- 技能每次都會被讀取(6/6 次實驗組執行),但改變的是專案的建構方式,而不是外觀。全部 6 次技能組執行都將影片拆成子合成(compositions/*.html,每個場景一個),符合其「保持可編輯」章節的要求;未使用技能的 12 次執行中則有 0 次這麼做。將有時間的元素標記為
clip的情況因組別而異,而非因技能而異:無技能執行每個專案使用 0-6 個、技能組 1-9 個、一句話提示組 3-25 個。如果之後有人要在 HyperFrames Studio 開啟專案,這正是技能中重要的部分,而這裡並未計分。 - 成本很高。每次執行 249k Token,未使用技能為 128k(1.94 倍),使用一句話提示為 150k(1.66 倍);每次執行 15 個指令,對照組 8 個;時間約多 35%。代理會先讀取 SKILL.md 與數個參考檔案,而且在自主模式下,它仍會寫出沒有人要求的
SPEC.md、REVIEW.md與 README(每次執行 4.7 個檔案,對照組 1 個)。 - 技能有一部分無法執行。SKILL.md 的迴圈是檢查、快照、審查、渲染;在沒有 CLI 的情況下,代理退而手寫 REVIEW.md 檔案。若在 CLI 可運作的環境中設定,可能會出現不同結果,也可能抓到此地第一次嘗試的專案所沒有的錯誤。
各面向分數
| 面向 | 分數 | 原因 |
|---|---|---|
| 1_輸出品質 | 4.89 | 使用技能時平均分數 4.89/5(程式化檢查,見各任務 表格)。 |
| 2_相較無技能的提升 | 1.99 | 相較未使用技能的 4.90,-0.01 分(每項任務 n=2;約 1 分以下 屬於雜訊)。 |
| 3_觸發 | 5.0 | 技能檔案在 6/6 次實驗組執行中被讀取。 |
| 4_指令可攜性 | 3 | 依賴 |
| 5_效率 | 2 | 1.95 倍 Token(每次執行 249k 對 128k)與 1.35 倍時間(208 秒對 154 秒)。 |
| 6_安全性與衛生 | 3 | 已審查文字與指令碼:僅命中 |
這項測試的限制
- 沙箱中無法使用 CLI 迴圈(檢查、快照、預覽、渲染),因此這裡只評分技能的指引;技能本身的前提是 CLI 能形成完整迴圈。
- 三項任務:產品預告、三條長條圖,以及直式字幕短片,全部以程式碼繪製。實拍素材、音訊、地圖、registry 區塊與基於 HeyGen 的媒體功能並未測試。
- 在 Linux 機器上以草稿品質渲染;動作檢查是粗糙的影格差異門檻,而同一個圖表任務在每組都失分。
- 結構計數(子合成、clip 元素)來自閱讀原始碼檔案,不屬於 0-30 分的一部分。
- 授權為 Apache-2.0,但技能依賴的 CLI 是另一個 npm 套件,我們並未稽核,也未在測試電腦上執行;除非停用,否則它會傳送使用遙測資料。
- 每項任務每組 n = 2:約 1 分以下的差異屬於雜訊。
- 規則式評分只能衡量檢查看得到的部分;無法評判品味,也無法判斷結果是否為最佳可能。
安全性
見 security.md。掃描:CRITICAL 27 / HIGH 26 / MEDIUM 88。判定:可安全執行(網路關閉的沙箱)。乾淨的掃描結果不能證明技能安全。
總結
在這個沙箱中,對於一次性的程式碼繪製影片,技能並沒有讓影片變得更好,還多花了大約一倍的 Token;把它的契約寫成一句話也有相同效果。它的價值在於專案結構(每個子合成一個場景、標記 clip),適合之後還會在 HyperFrames Studio 繼續編輯的人,以及我們無法實際演練的 CLI 迴圈。如果你經常使用 HyperFrames,就安裝它;如果只是快速做一次性的渲染,可以跳過。
完整紀錄
執行日誌:hyperframes (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 欄位:任務、組-輪次、得分(0-5)、token、秒、通過的檢查、代理開啟的 skill 檔案。 t1-teaser control-1: 得分 5.0, token 158742, 秒 258.0, 檢查 5/5, 未開啟 t1-teaser control-2: 得分 5.0, token 122491, 秒 163.4, 檢查 5/5, 未開啟 t1-teaser oneliner-1: 得分 5.0, token 194827, 秒 274.5, 檢查 5/5, 未開啟 t1-teaser oneliner-2: 得分 5.0, token 151350, 秒 215.4, 檢查 5/5, 未開啟 t1-teaser treatment-1: 得分 4.94, token 359882, 秒 360.9, 檢查 5/5, 開啟 hyperframes t1-teaser treatment-2: 得分 5.0, token 370088, 秒 251.3, 檢查 5/5, 開啟 hyperframes t2-chart control-1: 得分 4.73, token 159545, 秒 126.0, 檢查 4/5, 未開啟 t2-chart control-2: 得分 4.69, token 91764, 秒 107.4, 檢查 4/5, 未開啟 t2-chart oneliner-1: 得分 4.74, token 118117, 秒 146.0, 檢查 4/5, 未開啟
18 次執行、21 個產出檔案
範例產出
SOTA · 装了 skill:compositions/arrival.html(t1-teaser,第 1 次,Codex)
<template> <style>*{box-sizing:border-box}#root{position:absolute;inset:0;font-family:Arial,Helvetica,sans-serif;color:#173E32}.stage,.artboard{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden}.artboard{background:#F5F0DF}h1,h2,p{margin:0}.eyebrow{font-size:24px;font-weight:700;letter-spacing:4px;text-transform:uppercase}.rule{height:2px;background:currentColor;opacity:.3}.pouch{position:absolute;width:470px;height:650px}.pouch svg{width:100%;height:100%}.wipe{position:absolute;z-index:20}.serial{position:absolute;left:192px;top:930px;font-size:22px;letter-spacing:3px}.wordmark{font-weight:900;letter-spacing:-8px}.chip{position:absolute;width:400px;height:472px}.chip svg{width:100%;height:100%} </style> <div id="root" data-composition-id="arrival" data-width="1920" data-height="1080" data-duration="5"> <div id="arrival-stage" class="clip stage" data-start="0" data-duration="5" data-track-index="0" data-track-kind="graphics"><div class="artboard"> <svg id="arrival-rings" width="1920" height="1080" style="position:absolute" aria-hidden="true"><g fill="none" stroke="#173E32" stroke-width="2" opacity=".16"><ellipse cx="1450" cy="530" rx="335" ry="335"/><ellipse cx="1450" cy="530" rx="445" ry="445"/><ellipse cx="1450" cy="530" rx="560" ry="560"/></g></svg> <div id="arrival-kicker" class="eyebrow" style="position:absolute;left:192px;top:202px">Meet your monthly ocean fix</div> <div style="position:absolute;left:192px;top:299px;overflow:hidden;width:1000px;height:220px"><h1 id="arrival-title" class="wordmark" data-var-text="brand" style="font-size:192px;line-height:1.1">Tidepool</h1></div> <p id="arrival-copy" data-var-text="tagline" style="position:absolute;left:194px;top:555px;width:820px;font-size:48px;line-height:1.25;letter-spacing:-1px">Crisp seaweed snacks, delivered monthly</p> <div id="arrival-rule" class="rule" style="position:absolute;left:194px;top:750px;width:710px"></div> <p id="arrival-note" style="position:absolute;left:194px;top:785px;font-size:24px;letter-spacing:2px">FROM THE SEA. TO YOUR SNACK DRAWER.</p> <div id="arrival-pouch" class="pouch" style="left:1190px;top:201px"><svg viewBox="0 0 470 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustrated Tidepool seaweed snack pouch"><defs><linearGradient id="a-foil" x1="0" x2="1"><stop stop-color="#BACA99"/><stop offset=".12" stop-color="#E3E8BC"/><stop offset=".7" stop-color="#D7DFAE"/><stop offset="1" stop-color="#AABA8C"/></linearGradient><pattern id="a-seal" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M0 0V8" stroke="#173E32" opacity=".2" stroke-width="2"/></pattern></defs><path d="M40 15Q235 0 430 15L420 68Q436 350 445 605Q235 640 25 605L48 68Z" fill="url(#a-foil)" stroke="#173E32" stroke-width="3"/><path d="M40 15Q235 0 430 15L425 50H44Z" fill="url(#a-seal)"/><path d="M30 580Q235 600 441 580L445 605Q235 640 25 605Z" fill="url(#a-seal)"/><path d="M48 68H420" stroke="#173E32" stroke-width="3" opacity=".4"/><path d="M64 82L47 565M405 80L423 564" stroke="#FFFBE2" stroke-width="4" opacity=".6"/><text x="235" y="157" text-anchor="middle" fill="#173E32" font-family="Arial, sans-serif" font-size="71" font-weight="900" letter-spacin [... excerpt: first 3200 of 5490 characters]