hyperframes-core (HeyGen HyperFrames)
用 HTML 建構可渲染的 HyperFrames 合成，涵蓋結構、時間、媒體播放與驗證。
hyperframes-core：使用技能後，Codex 正確完成 HyperFrames 作品的次數大幅提高（對照組 4.1、技能組 4.9、一句話提示組 4.6），而且 Token 用得更少（對照組的 0.48 倍），但這個技能已從 HeyGen 的儲存庫移除
Codex CLI · gpt-6-astra
25.8 / 30
相對未使用技能的提升：+0.85 · 視情況推薦 · 18 次執行
視情況推薦：提升幅度 +0.85 低於 +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.9
- 產出品質
- 4.9
- Token 與時間成本
- 5.0
- 安裝與可攜性
- 4.0
- 安全性
- 4.0
安全審查
安全靜態掃描：0 CRITICAL / 0 HIGH / 21 MEDIUM。人工審查：可安全安裝。掃描結果不能證明技能一定安全。
安裝
npx skills@latest add heygen-com/hyperframes --skill hyperframes-core
固定 Commit: 207c8a4daf6480d697f203784f1fd422727569e3
測試日期: 2026-11-02
我們測了什麼
- 三場景解說 — 建立一個 12 秒、1920x1080 的影片，使用 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）。三個場景各 4 秒：一張標題卡（「Meet Orbit」）、一個條列清…
- 修好壞掉的作品 — 這個資料夾裡的 index.html 是一個 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）作品，但渲染結果有問題（畫面抖動、場景時間點錯誤、場景 2 看不見、…
- 可重複使用的下三分之一圖卡作為子作品 — 建立一個 HyperFrames（一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN 的 script 標籤）的 8 秒、1920x1080 影片。一個可重複使用的下三分之一圖卡（姓名與職稱從左側滑入，…
優點
- 相對未使用技能，平均分數從 4.09 提升到 4.94（+0.85）。
- 技能即使未被點名也會被採用：6/6 次實驗組執行都讀取了技能檔案。
- 沒有額外 Token 負擔：Token 用量是未使用技能的 0.47 倍。
- 比把自身規則濃縮成一句話的版本高 +0.32。
- 使用技能後的絕對品質很高：4.94 / 5。
缺點
- 測試注意事項：在 heygen-com/hyperframes 的 commit 207c8a4 上測試。這個技能後來已從儲存庫的 HEAD 移除，因此本評測描述的是已下架的版本，安裝指令可能無法對目前的儲存庫生效。
- 每個任務的每個組別 n=2；約 1 分以內的差異屬於雜訊。
評測
在專用的 Windows 測試電腦上執行 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存的 HOME/TMPDIR/快取，技能分為已安裝（實驗組）、未安裝（對照組），以及未安裝但把技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務的每個組別執行 2 次，關閉網路，封鎖 /tmp 寫入。提示詞從未提到技能（除了下方註明的措辭）。提示詞把 HyperFrames 描述為「一個開源框架，透過逐格定位 GSAP 時間軸，把 HTML 頁面渲染成 MP4」，沒有提到任何契約細節。任務：製作一個 12 秒的三場景解說影片、修好一個壞掉的作品（抖動、時間點錯誤），以及建立一個可重複使用的下三分之一圖卡作為子作品。一句話提示組用一段文字說明完整的作品契約。
三組對照
| 組別 | 平均分數（0-5） | 每次執行 Token 用量 |
|---|---|---|
| 未使用技能 | 4.09 | 239k |
| 一句話提示 | 4.62 | 160k |
| 使用技能 | 4.94 | 114k |
以 Codex CLI 執行 18 次，採規則式檢查評分，不經 LLM 評審。總分 25.8 / 30，評級為 視情況推薦。
揭露事項：測試版本為 heygen-com/hyperframes 的 commit 207c8a4。這個技能後來已從儲存庫的 HEAD 移除，因此本評測描述的是已下架的版本，安裝指令可能無法對目前的儲存庫生效。
判定：視情況而定（25.8 / 30）。 來源：heygen-com/hyperframes，skills/hyperframes-core，固定於提交 207c8a4。安裝：npx skills@latest add heygen-com/hyperframes --skill hyperframes-core。授權條款： Apache-2.0（儲存庫 LICENSE）。
這是什麼
heygen-com/hyperframes 的 hyperframes-core 技能，測試於提交 207c8a4（該技能後來已從儲存庫 HEAD 移除，因此本文描述的是已下架的版本）。它說明了 HyperFrames 的合成合約：根 div 帶有 data-composition-id/width/height/duration、有時間性的剪輯帶有 data-start/data-duration 與 class=clip、一個暫停的 GSAP 時間軸註冊在 window.__timelines[root id]、渲染時確定性規則，以及放在獨立檔案中的子合成。
我們如何測試
在專用 Windows 測試 PC 上使用 Codex CLI 0.166（gpt-6-astra，低推理），每次執行都使用全新的暫存專案與暫存 HOME/TMPDIR/快取，安裝技能（實驗組）、未安裝（對照組），或未安裝但將技能核心要求濃縮成一句話附加在提示詞後（一句話提示組），每個任務每組執行 2 次，網路關閉，/tmp 寫入封鎖。提示詞從未提及技能（以下註明的措辭除外）。
提示詞把 HyperFrames 描述為「一個開放原始碼框架，會逐格快轉 GSAP 時間軸，把 HTML 頁面渲染成 MP4」，但不提供合約細節。任務：製作一支 12 秒、三個場景的解說影片；修正一個壞掉的合成（抖動、時間錯誤）；以及把可重複使用的下三分之一字幕條做成子合成。一句話提示則用一段文字說明完整的合成合約。
- 三場景解說影片 — 建立一支 12 秒、1920x1080 的影片，使用 HyperFrames（一個開放原始碼框架，會逐格快轉 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN script 標籤）。三個場景各 4 秒：一張標題卡（「Meet Orbit」）、一個條列清…
- 修正壞掉的合成 — 這個資料夾的 index.html 是一個 HyperFrames（一個開放原始碼框架，會逐格快轉 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN script 標籤）合成，但渲染結果不對（畫面抖動、場景時間錯誤、場景 2 看不見、d…
- 可重複使用的下三分之一字幕條子合成 — 建立一支 HyperFrames（一個開放原始碼框架，會逐格快轉 GSAP 時間軸，把 HTML 頁面渲染成 MP4；GSAP 來自 CDN script 標籤）影片，長 8 秒、1920x1080。一個可重複使用的下三分之一字幕條（姓名與職稱從左側滑入，以及…
評分方式為程式化檢查（隱藏測試／預埋問題召回／限制條件檢查／視情況進行渲染與 OCR），每次執行 0–5 分。沒有任何 LLM 評審決定分數。
結果
提供給第三組的一句話提示：「HyperFrames 合成合約：在 <body> 中放一個獨立的根 <div data-composition-id data-width data-height data-duration>；有時間性的元素帶有 data-start 與 data-duration（class=clip）；建立一個 gsap.timeline({paused:true}) 並註冊到 window.__timelines['<root id>']；渲染時確定性：不得使用 Math.random/Date.now/計時器/rAF，不得 repeat:-1，絕不對剪輯補間 display/visibility/autoAlpha；子合成放在獨立檔案中，使用 data-composition-src，內容包在 <template> 裡，host id = inner id = timeline key。」
| 任務 | 對照組分數 | 一句話提示 | 使用技能 | 對照組 Token 數 | 一句話提示 Token 數 | 使用技能 Token 數 | 技能讀取 |
|---|---|---|---|---|---|---|---|
| t1-explainer | 3.33 | 5.0 | 5.0 | 136k | 82k | 98k | 2/2 |
| t2-fix | 3.95 | 3.86 | 4.82 | 377k | 100k | 128k | 2/2 |
| t3-sub | 5.0 | 5.0 | 5.0 | 203k | 298k | 114k | 2/2 |
平均分數：未使用技能 4.09，使用技能 4.94（差異 +0.85）。每次執行 Token 數：239k 對 114k（0.47 倍）；時間 107 秒對 79 秒。一句話提示組：4.62（技能相較一句話提示的增益：+0.32；一句話提示相較無技能的增益：+0.53）；一句話提示每次執行 160k Token，因此技能的成本是一句話提示的 0.71 倍。
實際發生了什麼
- 對照組 4.09、技能 4.94、一句話提示 4.62（各 n=6）。最大差距在解說影片：對照組 2/2 次在剪輯上寫了 visibility/display 補間或 autoAlpha，且 2/2 次沒有把時間軸註冊到 window.__timelines；技能兩次與一句話提示兩次都乾淨（5.0）。
- 修正任務：技能 4.82，對照組 3.95、一句話提示 3.86。對照組 2/2 次讓根元素沒有 duration 並硬編碼 px 尺寸，且根元素的 duration 沒涵蓋最後一個剪輯；一句話提示組硬編碼 px 尺寸，其中一次沒有註冊時間軸。
- 子合成任務：三組都 5.0，因此只要要求可重用元件，單純的模型就能處理
data-composition-src與 template 包裝。 - Token：技能 114k、一句話提示 160k、對照組 239k（每次執行）。沒有合約時，對照組會多花許多步驟（每次執行 13 個指令對 9 個）試圖摸清格式；技能比完全沒有指引還便宜。
- 有一項檢查「每個有時間性的元素都有 duration」在 3 次執行中失敗，包括技能組；它在修正任務的檔案中只計入兩個剪輯，且對所有組都是同一條規則。
各面向分數
| 面向 | 分數 | 原因 |
|---|---|---|
| 1_輸出品質 | 4.94 | 使用技能時平均分數 4.94/5（程式化檢查，見各任務 表格）。 |
| 2_相較無技能的提升 | 2.85 | 相較未使用技能的 4.09，+0.85 分（每項任務 n=2；約 1 分以下 屬於雜訊）。 |
| 3_觸發 | 5.0 | 技能檔案在 6/6 次實驗組執行中被讀取。 |
| 4_指令可攜性 | 4 | SKILL.md 加上參考資料；內容專屬於 HyperFrames CLI。 |
| 5_效率 | 5 | 0.47 倍 Token（每次執行 114k 對 239k）與 0.74 倍時間（79 秒對 107 秒）。 |
| 6_安全性與衛生 | 4 | 僅有文字與規則；見 security.md。 |
這項測試的限制
- 檢查是靜態的：解析了 HTML 結構、GSAP 呼叫與時間軸註冊，但沒有渲染任何影格（未執行 hyperframes CLI、Chrome 與 FFmpeg）。
- 技能是在提交 207c8a4 測試，因為 HEAD 已不再包含它；評測中的安裝指令可能無法對目前的儲存庫運作。
- 每個儲存格 n=2；對照組的 Token 數被幾次極長的執行（最高 440k）拉高。
- 提示詞用一句話描述 HyperFrames；有網路存取能力的 agent 可以查文件，但網路是關閉的。
- 每項任務每組 n = 2：約 1 分以下的差異屬於雜訊。
- 規則式評分只能衡量檢查看得到的部分；無法評判品味，也無法判斷結果是否為最佳可能。
安全性
見 security.md。掃描：CRITICAL 0 / HIGH 0 / MEDIUM 21。判定：可安全執行（網路關閉的沙箱）。乾淨的掃描結果不能證明技能安全。
總結
在格式未知的情況下，這項技能大約把合約出錯的機率減半，並省下 Token。用一段文字說明合約，就能找回大部分的效益。由於技能已不在廠商的儲存庫中，請把結果視為那個早期版本的紀錄。
完整紀錄
執行日誌：hyperframes-core (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 欄位：任務、組-輪次、得分（0-5）、token、秒、通過的檢查、代理開啟的 skill 檔案。 t1-explainer control-1: 得分 3.1, token 140793, 秒 87.3, 檢查 7/11, 未開啟 t1-explainer control-2: 得分 3.57, token 132979, 秒 80.3, 檢查 8/11, 未開啟 t1-explainer oneliner-1: 得分 5.0, token 90890, 秒 75.8, 檢查 11/11, 未開啟 t1-explainer oneliner-2: 得分 5.0, token 73311, 秒 72.9, 檢查 11/11, 未開啟 t1-explainer treatment-1: 得分 5.0, token 111517, 秒 90.6, 檢查 11/11, 開啟 hyperframes-core t1-explainer treatment-2: 得分 5.0, token 84676, 秒 102.2, 檢查 11/11, 開啟 hyperframes-core t2-fix control-1: 得分 3.95, token 314272, 秒 165.7, 檢查 7/10, 未開啟 t2-fix control-2: 得分 3.95, token 440614, 秒 142.2, 檢查 7/10, 未開啟 t2-fix oneliner-1: 得分 3.77, token 108753, 秒 81.4, 檢查 7/10, 未開啟
18 次執行、3 個產出檔案
範例產出
SOTA · 装了 skill：index.html（t1-explainer，第 1 次，Codex）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Meet Orbit — 12-second film</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: #f3f0e7; color: #202d29; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f0e7; } .brand { position: absolute; top: 66px; left: 100px; display: flex; align-items: center; gap: 16px; font-size: 32px; font-weight: 750; letter-spacing: -1px; } .brand-mark { width: 30px; height: 30px; border: 8px solid #e65932; border-radius: 50%; } .edition { position: absolute; top: 77px; right: 100px; font-size: 18px; letter-spacing: 3px; } .clip { position: absolute; inset: 0; } .scene { width: 100%; height: 100%; padding: 190px 100px 150px; display: flex; align-items: center; gap: 65px; } .copy { flex: 1; position: relative; z-index: 2; } .eyebrow { margin: 0 0 30px; font-size: 21px; font-weight: 650; letter-spacing: 4px; text-transform: uppercase; color: #52635b; } h1, h2, p { margin: 0; } h1 { font-size: 150px; line-height: 1.05; letter-spacing: -10px; font-weight: 650; } h2 { font-size: 86px; line-height: 1.07; letter-spacing: -5px; font-weight: 650; } .subtitle { margin-top: 34px; font-size: 31px; line-height: 1.5; color: #52635b; } .art { width: 760px; height: 650px; flex: none; } .orbit-svg { display: block; width: 100%; height: 100%; overflow: visible; } .footer { position: absolute; bottom: 65px; left: 100px; right: 100px; display: flex; justify-content: space-between; font-size: 18px; letter-spacing: 2px; color: #52635b; } .progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: #deded3; } .progress { width: 100%; height: 100%; background: #e65932; transform-origin: left center; } .features-copy { max-width: 650px; } .features { list-style: none; margin: 0; padding: 0; width: 930px; } .feature { display: flex; align-items: center; gap: 30px; padding: 39px 0; border-bottom: 2px solid #ced3c9; font-size: 43px; font-weight: 550; letter-spacing: -1.5px; } .feature:first-child { border-top: 2px solid #ced3c9; } .number { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 50%; background: #202d29; color: #f3f0e7; font-size: 22px; letter-spacing: 0; } .feature-dot { margin-left: auto; color: #e65932; font-size: 40px; } .closing { justify-content: center; text-align: center; } .closing-copy { width: 1300px; } .closing h2 { font-size: 119px; letter-spacing: -7px; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 50px; margin-top: 48px; padding: 26px 42px; border-radius: 100px; background: #e65932; color: #17251f; font-size: 32px; font-weight: 650; } .cta-arrow { font-size: 40px; line-height: 1; } .closing-icon { display: block; width: 84px; height: 84px; margin: 0 auto 38px; border: 19px solid [... excerpt: first 3200 of 7731 characters]