Communitygithub.com

pisakhov/x-motion

為特定溝通目標進行藝術指導與建構原創動態圖像、動畫解說、片頭序列、產品影片與動態字體排版。適用於動態簡報、分鏡腳本、動畫預覽、確定性 HTML 動畫、同步音訊與渲染影片評論。從受眾與視覺論點開始,而非從模板開始。

x-motion 是什麼?

**pisakhov/x-motion** 是一套可攜式的動態設計方法,靈感來自 LangChain 文章中的設計代理討論,但完全獨立於 LangChain 程式碼或服務。此技能引導 AI 代理透過五個精簡階段(簡報→視覺論點、分鏡→可讀論證、動畫預覽→低成本測試、製作→有意識執行、評論→修改→交付)產出具溝通意圖的動畫,而非僅是技術渲染。它強調品味是脈絡化的,並要求使用一個主導視覺論點與一個支配性焦點,同時將類型、間距、影像處理、動態與聲音視為一體化系統來設計。 此技能支援多種平台(Claude Code、Cursor、Codex 等),但並不依賴特定模型或渲染引擎。其核心特色是可選的 HTML 渲染器合約,提供確定性的 `renderFrame` 與 `renderAudio` 函數,以確保每次呼叫產生一致影格,並透過內建檢查驗證影格與音訊的確定性。工具鏈包含基於 Node.js 的渲染腳本,可匯出分鏡 PNG、影片(含 ffmpeg)及音訊檔案,所有資產均保留在本機並明確記錄來源。評論階段最多進行三次反覆運算,並將可測量失敗與主觀疑慮分開處理。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pisakhov/x-motion/tree/HEAD/skills/x-motion

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

X Motion

創作出能傳達特定內容的動態作品。品味是脈絡化的:一段安靜的技術展示與一段熱鬧的音樂識別需要不同的決策。一個功能強大的渲染器並不等於好的設計。作品的品質來自於藝術指導、執行、觀察與反覆修改。

這是一套原創、可攜帶的動態設計方法,靈感來自 LangChain 的文章 中有關設計代理的討論。它不依賴 LangChain 程式碼或服務,也不暗示任何附屬關係。

工作契約

  • 遵循主機專案的指示與使用者的實際範圍。此技能不授予發布、花費、呼叫模型、取得憑證或使用未授權資產的權限。
  • 在特定時刻使用一個視覺論點與一個主導焦點。複雜性可以支持論點,但不能意外地與之競爭。
  • 將類型、間距、影像處理、動態與聲音設計為一個系統。不要用裝飾來將一個薄弱的概念偽裝成複雜的精緻。
  • 根據任務與可用環境選擇工具。不需要特定的模型、框架或渲染引擎。
  • 將技術證據與美學判斷分開。切勿捏造品味評分、觀眾反應或認可。切勿在僅檢查靜止畫格時就聲稱已觀看過影片。
  • 保持資產在本機,並明確說明其來源。鎖定依賴項。除非專案刻意要求,否則不要將產生的渲染版本納入版本控制。

選擇最小的有用流程

小型編輯: 複製修正、時間調整、資產替換或孤立的緩動修正可能可以跳過新的簡報、分鏡腳本與動畫預覽。保留已核准的方向;檢查受影響的段落及其相鄰段落,重新渲染,並執行相關檢查。如果變更改變了訊息、層級或敘事,則升級到完整流程。

新合成或大幅重新設計: 遵循以下階段。根據任務調整產出物的規模;一個六秒的片頭不需要一本製作聖經。如果遺漏了關鍵意圖,請提出一個聚焦的問題。當無法提出問題時,標記一個保守的假設,並避免不可逆轉的工作。

1. 簡報 → 視覺論點

確定受眾、預期收穫、觀看情境、持續時間、長寬比、交付物、所需副本/資產、品牌限制、可及性需求,以及聲音是否能承載意義。將硬性要求與偏好分開標記。

以下列形式撰寫論點:

針對 [受眾],讓 [概念] 透過 [視覺機制] 感覺 [特定品質],使他們理解或做到 [結果]。

命名組織隱喻、主導主體、字體角色與動態邏輯。像「高級、電影感、乾淨」這樣的清單不是方向。解釋哪些選擇讓這些詞彙具體化。使用參考文獻來識別原則,而不是複製他人作品的身份。

閱讀 藝術指導 以了解簡報解析、參考分析與一致的視覺語言。

2. 分鏡 → 可讀的論證

在打磨畫格之前先規劃段落。針對每個段落,記錄:

時間範圍觀看者學到什麼焦點 / 關鍵畫格轉場與理由音訊提示
開始–結束一個訊息主體與層級改變了什麼,以及為什麼事件或有意的靜默

使用真實副本與實際資產比例繪製或渲染代表性畫格。給予足夠的閱讀與辨識時間;不要習慣性地均勻分配每個段落的時間。確認開場承諾、段落之間的因果關係以及最終收穫。在必要時,在昂貴的製作開始前與人類驗證關鍵副本或方向。

在鎖定構圖或文字時間之前閱讀 字體排版。

3. 動畫預覽 → 低成本測試時間

建立粗略的計時畫格、區塊或低細節動態。僅在法律允許且清楚標示的情況下使用臨時音效。以預期速度測試完整運行時間,而不僅僅是拖動檢查。

檢查注意力是否落在資訊所在處、文字是否可讀,以及結尾是否有空間收尾。在此處修正結構。將對方向的不確定性表面化,而不是將其打磨掉。

閱讀 動畫與攝影機 以了解時間設計與確定性場景建構;當聲音是作品的一部分時,閱讀 音訊。

4. 製作 → 有意識的執行

使用最終字體、資產、燈光或圖形處理、動態曲線、轉場與聲音,精煉已核准的段落。保留論點。每個添加的效果必須有一個任務:揭示、連接、強調、定位或解決。如果它不執行其中任何一項,則移除它或證明其表達角色的合理性。

可選的 HTML 渲染器合約

使用 X Motion HTML 渲染器時,每個合成公開:

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // 從此時間戳與固定的場景資料設定每個動畫屬性。
  // 重複呼叫(包括順序錯誤的呼叫)會產生相同的畫格。
};
window.renderAudio = async function ({ sampleRate }) {
  // 可選。在 OfflineAudioContext 中建構配樂並返回其 AudioBuffer。
};

這些數字是說明性的,不是設計預設值。寬度與高度為像素;duration、poster 與 tSeconds 為秒;fps 為影格率。poster 為可選,命名用作縮圖的畫格。將它們與簡報匹配。

  • 直接從提供的時間戳計算狀態。不使用實時時間、自主 CSS 動畫、累積模擬步驟、網路資產或未設定種子的隨機性。
  • 在捕捉之前載入並解碼本地資產與字型。不要在 renderFrame 返回後引入非同步影格變更;驗證主機渲染器的就緒機制。
  • 定義在段落邊界與活動區間之外的行為。測試重複的時間戳與向後搜尋。
  • 畫格函數定義視覺,而非音訊播放。聲音僅來自 renderAudio:一個或兩個聲道,離線渲染,每次呼叫相同。永不捕捉 HTML 媒體播放。

首先解析此技能目錄的真實位置,遵循任何安裝符號連結到完整的 X Motion 克隆。相對於已解析的 skills/x-motion 目錄,儲存庫根目錄為 ../..,而不是相對於使用者的目前工作目錄。在執行這些命令之前,請切換到該儲存庫根目錄;下面的合成路徑是相對於它的。

匯出分鏡 PNG 與 manifest.json(預設無影片)。加上 --times 0.5,2,4.25 以選擇靜止畫格,加上 --audio 以同時匯出 sound.wav 以及音量數據:

node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio

匯出分鏡 PNG、完整畫格、poster.webp、film.mp4(當存在 renderAudio 時,將配樂以 AAC 格式多工合成)與 manifest.json:

node scripts/render.mjs path/to/scene.html --out renders/name-video --video

為每次修訂使用一個新的輸出目錄。在報告成功之前檢查 manifest.json 與實際輸出:它記錄了畫格確定性檢查、音訊確定性檢查、整合響度、真實峰值與削波樣本。影片編碼需要 ffmpeg。在其他主機中,保留確定性時間戳語義並調整匯出命令。

5. 評論 → 修改 → 交付

當反饋指定一個已發布的影片 ID 時,閱讀 圖庫反饋。解析確切的影片,保留其身份與反饋,並在新的關聯 ID 下發布修訂版本。向前推進範圍內的教訓,而不是將每個特定片段的指令視為通用規則。

檢查渲染成品,而不僅僅是原始碼。檢視分鏡以了解構圖,播放影片以感受節奏;聆聽導出的音訊(如果有的話)。如果無法播放或聆聽,請確切說明哪些部分尚未審查。

使用 評論與交付 將可測量的失敗與主觀疑慮分開。首先解決影響最大的問題。將評論/修改循環限制在每個方向的 三次反覆運算。如果方向仍未解決,請停止,解釋相互競爭的疑慮,並要求人類在繼續之前做出選擇或澄清。技術通過不等於美學批准。

交付成品位置、原始碼位置、匯出規格、驗證證據、已知限制以及未解決的批准問題。報告您實際觀察到的內容。未經授權請勿對外發布。

參考文獻地圖

僅載入當前階段所需的參考文獻:

  • 藝術指導:意圖、品味、參考文獻、視覺論點。
  • 動畫與攝影機:時間安排、場面調度、轉場、確定性渲染。
  • 字體排版:層級、可讀的動態文字、字型處理。
  • 音訊:提示圖、同步、靜默、匯出檢查。
  • 評論與交付:證據、有限修改、交接。
  • 圖庫反饋:不可變 ID、聊天反饋、保留/改進/捨棄、及範圍內學習。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相關技能