
由此 Skill 渲染
一個免費的 HyperFrames 區塊,做 15 秒的 3D 筆電 B-roll。一台 3D 筆電放在桌上、著色器光線下;螢幕上是液態玻璃桌面,有選單列、行事曆、天氣和正在播放的小工具、一個檔案視窗、一則通知和 Dock,依序以動畫登場。所有螢幕內容都是可以編輯的 HTML。
更新於 2026年11月4日
你將得到
- 一支 15 秒、1920×1080、有 3D 筆電的 MP4
- 有小工具、視窗、通知和 Dock 的液態玻璃桌面
- 整個螢幕都是可編輯的 HTML
適合
- SaaS 和桌面 App 上市
- 網站和到達頁面的主視覺
- 發表會 B-roll
不適合
- 你 App 的真實螢幕錄影
- 純直式格式
關於此 Skill
/macos-tahoe-liquid-glass 幫 Solenne 做一支 3D 筆電桌面:一個列出 Scenes、Rooms 和 Plans 的 Solenne 視窗,一則通知「Evening wind-down starts at 16:14」,Dock 用中性圖示。
軟體放在真的硬體上,看起來就是真的。3D 筆電桌面把一整個液態玻璃桌面(小工具、視窗、通知、Dock)放到一台 3D 筆電上,讓你的產品在精緻的場景中登場,適合上市影片和到達頁面。
運作方式
- 提出需求:告訴助手視窗標題和項目、小工具內容、通知和 Dock 圖示。
- 填入:它把你的文案和顏色寫進區塊的變數,文字長度盡量貼近版面原本設計的長度。
- 算繪:它用
npx hyperframes render算繪一版草稿,檢查幾格畫面,再算繪出最終的 MP4。 - 重複使用:變數都放在一個小小的 JSON 檔裡,下一個版本再算繪一次就好。
小訣竅
- 把預設的 Dock 圖示換成你自己的或中性的;我們的範例就是這樣做。
- 視窗用你的產品命名。
- 通知控制在一行。
- 這個區塊沒有變數:助手會照著 SKILL.md,直接在 HTML 裡修改文字。
開源
這是 HyperFrames registry 裡的一個區塊,由 HeyGen 和 HyperFrames 貢獻者製作(heygen-com/hyperframes),以 Apache License 2.0 開源。下載內容包含區塊和它的素材,以及一份由 Reelity 撰寫的 SKILL.md,讓你的助手知道怎麼填寫和算繪;HyperFrames 本身從 npm 執行。
開始前需要準備
- 你需提供
- 你想要的視窗、小工具和通知文字,以及你的品牌色。
- 依賴
- Node.js 22 或更新版本——必要 · FFmpeg——必要
- 外部費用
- 沒有。HyperFrames 免費開源,在你自己的電腦上算繪。
- 最近測試
- v1.0.0 —
使用者評價
還沒有評價。安裝這個 Skill,成為第一個評分的人。
常見問題
裡面附的是真的 App 圖示嗎?
原版在 Dock 裡用知名 App 的圖示當作預留位置。請把它們換掉;我們的範例用的是生成的中性圖示。
桌布可以換嗎?
可以。桌布是 HTML 裡的一張圖片。
為什麼免費?
這是 HeyGen 和 HyperFrames 貢獻者做的開源 HyperFrames 區塊。我們原樣上架,附上 SKILL.md 讓你的助手直接上手,範例是用我們自家品牌 Solenne 做的。






