# 策展 · X (Twitter) 🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：宝玉 (@dotey) · 平台：X (Twitter) · 日期：2026-06-20
> 原始來源：https://x.com/dotey/status/2067039941960327204
## 中文摘要
Jim Liu 開發 baoyu-design，逐幀渲染匯出動畫。
Jim Liu（寶玉）近期在 GitHub 開源了 `baoyu-design`（MIT 授權，目前已累積 1.2K star），這是他把 Anthropic 的 Claude Design 重新打包而成、專為本地 Agent（如 Cursor、Claude Code、Codex）設計的「Agent Skill」。除了能生成 UI 原型、儀表板與簡報外，他更進一步實現了將動畫直接匯出為 MP4 影片的能力，解決了傳統螢幕錄製方式幀率不穩、錄入 UI 雜訊且不可重現的問題。
> 這是一段展示「baoyu-design」如何將設計工作流程整合至本地編輯器，並支援多種輸出格式的技術演示。
**核心設計理念：動畫即時間的函數**
Jim Liu 指出，傳統動畫開發多採用「命令式」思維，即在特定時刻驅動元素變更狀態，這容易導致狀態散落、時間軸混亂。`baoyu-design` 則採用「宣告式」思維，將動畫視為時間的純函數 $frame = f(t)$：
- 系統不需從頭播放，只要傳入任意時間點 $t$，引擎就能精確計算出該瞬間每個元素的視覺狀態（位置、透明度、大小）。
- 這種設計帶來了三大優勢：支援拖動播放條至任意位置、確保同一時間點 $t$ 永遠產出一致的畫面（便於除錯），以及實現精確的影片匯出。
> 這段影片展示了「BAOYU-DESIGN ANIMATION ENGINE」的核心概念，即將動畫視為時間的純函數（frame = f(t)）並實現精確的逐幀渲染。
**影片匯出技術架構**
為了達到高品質的輸出，`baoyu-design` 捨棄了即時螢幕錄製，改用類似「定格動畫」的渲染流水線：
1. **無頭瀏覽器渲染**：啟動一個無頭瀏覽器（Headless Chromium）載入動畫頁面，並透過控制介面精確操控時間軸。
2. **逐幀截圖**：針對每一幀進行截圖，並在設定時間後等待兩幀 `requestAnimationFrame`，確保 React 狀態已完成渲染，避免截到殘影。
3. **超採樣處理**：為了提升畫質，截圖時採用 2 倍設備像素比（例如以 3840×2160 渲染），最後再透過 `ffmpeg` 縮小至 1080p，確保文字與細線銳利清晰。
4. **自動化合成**：一段 95 秒、30fps 的動畫會被拆解為 2850 次「設定時間、拍照」的循環，最後由 `ffmpeg` 將影像序列編碼為 MP4 檔案。
> 本影片介紹了一種基於時間函數 $f(t)$ 的動畫渲染與匯出技術架構。
**安裝與使用建議**
使用者可透過 `npx` 指令將此 skill 安裝至本地專案中：
```bash
# 安裝至當前專案
npx skills add JimLiu/baoyu-design
# 全域安裝
npx skills add JimLiu/baoyu-design -g
```
Jim Liu 建議，由於預設生成結果為 HTML，使用者可以在 Agent 內建的瀏覽器中開啟並暫停影片，標記需要修改的位置，再讓 Agent 針對該位置進行微調，這種「視覺化二次編輯」的互動方式能大幅提升設計效率。更多詳細實作細節可參考 GitHub 專案中的 `skills/baoyu-design` 目錄。
> 這是一個展示動畫引擎開發介面的網頁截圖，畫面中包含程式碼片段、設計說明以及時間軸控制面板。
[baoyu-design GitHub 專案](https://github.com/jimliu/baoyu-design)
## 媒體內容
**這段影片展示了「BAOYU-DESIGN ANIMATION ENGINE」的核心概念，即將動畫視為時間的純函數（frame = f(t)）並實現精確的逐幀渲染。**
**影片中的 Prompt 與操作**
操作步驟：
1. @00:03 展示時間軸控制與幀回傳機制。
2. @00:09 展示 React 程式碼範例，定義動畫狀態與時間函數。
3. @00:23 展示動畫循環邏輯與 `setTime` 函數。
4. @00:46 展示渲染流水線的七個步驟，從 Chromium 啟動到 ffmpeg 輸出。
**本影片介紹了大型語言模型在處理長文本時的「中間丟失」現象及其對檢索增強生成（RAG）的啟示。**
**影片中的 Prompt 與操作**
操作步驟：
1. 無
**本影片介紹了一種基於時間函數 $f(t)$ 的動畫渲染與導出技術架構。**
**影片中的 Prompt 與操作**
操作步驟：
1. @00:09 展示 ``、`` 與 `useTime` 的程式碼結構。
2. @00:19 展示 `requestAnimationFrame` 循環與 `time` 更新邏輯。
3. @00:30 展示導出流程：無頭瀏覽器 -> PNG 幀流 -> ffmpeg 編碼。
**這是一段展示「baoyu-design」如何將設計工作流程整合至本地編輯器，並支援多種輸出格式的技術演示。**
**影片中的 Prompt 與操作**
Prompt（00:00）：
```
npx skills add JimLiu/baoyu-design
```
操作步驟：
1. （00:00）在終端機輸入安裝指令 `npx skills add JimLiu/baoyu-design`
2. （00:02）執行 `load SKILL.MD`
3. （00:03）執行 `build designs/product-intro/`
4. （00:04）執行 `preview on localhost`
## 標籤
Skills, Agent, 開源專案, IDE, baoyu-design, Cursor, Claude