系統定位
yihui-dev/awesome-opus5-5-videos 是一份策展型開源資料集，彙整社群創作者運用 Claude Opus 5.5 產生的程式碼動畫與影片提示詞。此專案展示大型語言模型將文字提示直接編譯為單一 HTML、Canvas 2D、SVG、GSAP 時間軸、Three.js 空間幾何或 GLSL 片段著色器之能力，而非依賴擴散模型（Diffusion Models）生成點陣視訊。官方儲存庫
適用任務：
查閱與複用經過社群驗證的 853 組 Claude Opus 5.5 動畫提示詞。
透過 Skillry 平台比對 523 組原始社群動態與實時重製（Live Remake）渲染效果。
掌握 Canvas、SVG、GSAP 與 Three.js 在 AI 生成情境下的提示結構與語法邊界。
建立從文字提示、單一 HTML 程式碼、無頭瀏覽器逐幀抽樣到 FFmpeg MP4 視訊輸出的確定性影音管線。
提示詞輸入層
- 853 組結構化 Prompts
- 運動參數與時間約束
- 視覺風格與調色指引
程式碼合成模型
- Claude Opus 5.5
- Claude Code CLI
- Agent 執行環境
前端動效渲染堆疊
- Canvas 2D
- SVG / GSAP
- Three.js / WebGL
- GLSL Shaders
- Web Audio
輸出與交付管道
- 單一 HTML 檔案
- 瀏覽器 60fps 即時預覽
- Playwright 確定性抽幀
- FFmpeg MP4 編碼
與傳統 AI 影片生成工具相比，程式碼驅動動畫具備零解析度壓縮失真、可任意縮放向量路徑、程式邏輯可逆修訂與影格數精確受控等特點。專案以 MIT 授權釋出，資料截至 2026-10-12，收錄 853 組提示詞與 100 組精選代表作。
安裝與驗證
- 未完成：
備妥 Git 2.30 以上版本與終端機環境。
- 未完成：
備妥 Python 3.9+ 或 Node.js 18+（用於本機靜態伺服器預覽）。
- 未完成：
具備 Claude Opus 5.5 存取權限（Claude Code、Anthropic Console API 或相容 Agent 用戶端）。
- 未完成：
（選用）安裝 Playwright 與 FFmpeg，供逐幀截圖與 MP4 視訊編碼管線使用。
複製官方儲存庫至本機環境：
git clone https://github.com/yihui-dev/awesome-opus5-5-videos.git
cd awesome-opus5-5-videos驗證資料集檔案數量與結構：
ls prompts | wc -l啟動本機靜態伺服器預覽或檢視資料檔案：
# Start local preview server with Python
python3 -m http.server 8080
# Or start with Node.js serve
npx serve -l 8080收錄動態類型與技術堆疊分佈：
| 分類名稱 | 提示詞總數 | 精選範例數 | 主流技術堆疊 | 典型應用場景 |
|---|---|---|---|---|
| Motion graphics | 501 | 58 | Canvas, SVG, GSAP, CSS | 品牌識別動效、SaaS 產品展示、動態資訊圖表 |
| 3D scenes | 123 | 14 | Three.js, WebGL, GLSL | 空間幾何構造、程序化地景、粒子場域、物理模擬 |
| Explainers | 122 | 16 | Canvas, SVG, GSAP, Web Audio | 科學概念解說、技術架構演示、演算法運作可視化 |
| Games & interactive | 107 | 12 | Three.js, Canvas, Web Audio | 像素復古遊戲、互動式物理沙盒、控制介面原型 |
核心能力
Motion
prompts/motion/*.md
2D 動態圖形與介面動效
運用 Canvas 2D 繪圖與 GSAP 時間軸，建立文字排版變形、精確影格交錯與幾何路徑動態。
3D Scene
prompts/3d/*.md
空間幾何與著色器算圖
載入 Three.js 場景圖與 GLSL 片段著色器，建立相機軌跡運鏡、動態光源與十萬級粒子渲染。
Explainer
prompts/explainer/*.md
圖解架構與同步音效
結合 SVG 向量圖層與 Web Audio API 音訊合成器，以固定時間節點同步推進視覺與聲效。
Interactive
prompts/interactive/*.md
即時控制與遊戲邏輯
封裝鍵盤與滑鼠事件監聽器，建立碰撞偵測迴圈與狀態機，提供可遊玩之互動原型。
提示詞工程核心規範：
單一自包含檔案（Self-Contained Single File）：提示詞要求模型將 HTML 骨架、CSS 樣式表、JavaScript 邏輯與外部 CDN 連結（如 cdnjs 引入之 Three.js 或 GSAP）完整收錄於單一檔案，杜絕本機相依性載入失敗。
固定顯示比例與相對縮放（Fixed Aspect Ratio）：標準化畫布尺寸為 16:9（1920x1080）或 1:1（1080x1080），座標運算一律基於基準尺寸，並透過 CSS 縮放適配視窗。
影格時間軸與狀態分離（Decoupled State Pipeline）：將繪圖邏輯封裝為
draw(frameIndex)純函數，使動畫既能在瀏覽器即時播放，亦可透過無頭瀏覽器精確步進抽樣。
操作原則
確定性影格運算優於動態時間戳記
避免在算圖迴圈中使用 Date.now（）或動態 requestAnimationFrame delta。改以全域影格計數器 frameIndex 作為狀態函數自變數，確保同一影格編號在任何環境皆產出相同之畫面像素。
偽隨機演算法替換內建 Math.random
內建 Math.random（）會導致每次重新載入產生不同隨機分佈。提示詞中應指示 Opus 5.5 實作 Mulberry32 或 LCG 偽隨機演算法，給定固定種子（Seed）以鎖定視覺外觀與粒子軌跡。
明確釘選 CDN 函式庫版本
提示詞中應明確指定相容之函式庫版本（例如 Three.js r128、GSAP 3.12.5）。避免使用 unpkg 或 cdnjs 之 latest 別名，防止外部相依性升級引發 API 廢棄或破圖。
預先配置記憶體與物件池架構
高影格率 Canvas 動畫應要求模型在繪圖迴圈外配置物件與陣列，嚴禁在 draw 迴圈內重複呼叫 new 關鍵字，避免觸發垃圾回收（GC）造成動畫停頓或影格跳躍。
操作範例
以儲存庫收錄之確定性影格渲染提示詞（prompts/0xkarmi-129839.md）為例，透過 Claude Code 生成獨立 HTML 並以無頭瀏覽器驗證渲染結果：
$ git clone https://github.com/yihui-dev/awesome-opus5-5-videos.git
ok: Cloning into 'awesome-opus5-5-videos'... done.
$ ls prompts | wc -l
ok: 853
$ claude -p "Read prompts/0xkarmi-129839.md. Implement a self-contained HTML page: 1080x1080 canvas, Mulberry32 PRNG seed 42, deterministic draw(f) loop for 720 frames at 60fps. Save to butterfly.html"
ok: Created butterfly.html (self-contained HTML, Canvas 2D, 720 frames deterministic loop)
$ npx playwright screenshot --viewport-size=1080,1080 butterfly.html preview-frame-0.png
ok: Captured preview-frame-0.png (1080x1080, 0 frame drift)提示詞輸入結構範例：
Build a self-contained HTML page:
1. Canvas viewport: Fixed 1080x1080 pixels, background #0A0A0B.
2. Render loop: Deterministic draw(frameIndex) function, 720 frames (12 seconds at 60fps).
3. Deterministic constraints: No Date.now() or Math.random(); implement Mulberry32(seed=42) PRNG.
4. Visuals: Multi-layer vector geometric butterfly, wingbeat cycle of 60 frames, closed-loop particle flow.
5. Controls: Play/pause and frame-by-frame step buttons with frameIndex indicator.執行輸出檢驗標準：
於瀏覽器開啟
butterfly.html，點擊播放維持 60 fps 平滑動態。影格 0 與影格 720 之畫布輸出重合，無邊界像素跳躍。
重新載入頁面 5 次，第 360 影格之截圖雜湊值一致。
限制與注意事項
後續操作
對照 Skillry 實時重製作品：存取 Skillry Opus 5.5 重製庫，觀察相同提示詞在不同模型取樣下的動態差異與程式碼實作。
建立自動化抽幀與視訊編碼管線：撰寫 Playwright 腳本逐幀呼叫
draw(f)並匯出 PNG 序列，再運用 FFmpeg 指令（ffmpeg -framerate 60 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4）封裝為高品質 MP4 視訊。整合 GSAP Skills 規範：參閱
skills-atlas-gsap-skills實戰手冊，將 GSAP 提示詞轉換為相容於 ReactuseGSAP()生命週期之企業級前端元件。