Motion Engineering Guide · 動態影像工程指南 將 Claude Opus 5.5 轉化為可重複交付的動態影像工作室。從單次生成提示詞，跨越至確定性工程系統。

核心哲學

1. 影音本質是時間狀態的確定性查詢

   frame = render(time, shot_list, assets, style_tokens, seed)。當每一幀都能被獨立尋址（Seekable）與局部重繪時，修改一個標題進場時間或彈簧阻尼係數只需毫秒，無需重新生成整段素材。

2. 以客觀渲染幀（Contact Sheet）作為批判依據

   拒絕在終端機中盲目重播 60 秒影片。在主要節奏點導出索引圖紙，專注修復三個最具破壞力的幾何與對齊瑕疵，建立可客觀驗證的閉環反饋。

3. 交付檔案資產與代碼庫，而非對話歷程

   單次對話結束不等於系統建立。將產品簡報、風格規範、分鏡表、真實資產與渲染原始碼結構化打包進 motion-studio/，讓每次迭代皆為下一次專案的穩固基底。

將創意影音產製管線拆解為獨立職責層，杜絕模型將決策塌縮為平庸的預設展示。

工作室五層架構

THE FIVE-LAYER STUDIO PIPELINE

DIRECTOR · 確立單一論點與產品真實邊界

Layer 01 · 導演層

拒絕模糊氛圍提示詞，交付包含核心論點、目標受眾與禁止項目的導演簡報

明確定義一句話核心記憶點、目標受眾痛點、不可妥協的真實產品界面與失敗標準。模型可以自由探索攝影機運鏡與節奏，但嚴禁憑空捏造儀表板數據或置換品牌 Logo。

✓ 核心記憶點

真實資產綁定

禁止捏造界面

明確失敗條件

Role

Director

Artifact

brief.md

Scope

Boundary

REFERENCE · 逆向解析可量化的視覺文法

Layer 02 · 參考層

將優秀作品提煉為嚴謹的樣式指南，而非拼貼抄襲元素

輸入參考影音或畫面，命令模型提煉出具體 Hex 色碼調色盤、字體字重比例、視覺焦點動線、換幕節奏速度與材質紋理。產出 style-guide.md，嚴禁直接挪用他人專利資產或標誌。

Hex 色碼系統

焦點動線分析

運動速度曲線

✓ 風格合規

Role

Visual Lead

Artifact

style-guide.md

TIMELINE · 狀態流轉與精確節奏點

Layer 03 · 時間軸層

以 UI 狀態轉換取代特效堆疊，明確定義每一個鏡頭的存在理由

建立結構化 shotlist.md：將影音拆解為 SEARCH → RESULT → DETAIL → ACTION → CONFIRMATION 等連續狀態。每個分鏡必須標註起止時間、進場狀態、出場狀態與教學目的，無法合理解釋目的之鏡頭直接刪除。

狀態機設計

秒級節奏對齊

無效鏡頭剔除

視覺連續性

Role

Editor

Artifact

shotlist.md

RENDERER · 確定性且任意可尋址的幀函數

Layer 04 · 渲染器層

第 240 幀必須能直接獨立渲染，杜絕隱藏隨機時鐘與未定狀態

選擇 Remotion、HyperFrames 或原生 Canvas/SVG。核心合約為 render(t, spec, assets)，不依賴運行滿 8 秒後的瀏覽器狀態。當標題進場太早或阻尼不足時，修改局部數值即可在毫秒內重繪該幀。

✓ Seekable 可尋址

確定性種子

Remotion

HyperFrames

Role

Engineer

Artifact

src/

CRITIC · Contact Sheet 圖紙與三大瑕疵修復

Layer 05 · 評論層

拒絕盲目全片重播，依據渲染接觸圖紙實施有邊界的工程熱修補

在關鍵拍點輸出單張大圖（Contact Sheet），審查手機端字體可讀性、邊界安全區、真實資產完整度與轉場破綻。命令模型指出影響最大的前三個缺陷，提供時間戳、具體證據與局部程式碼修復方案。

接觸圖紙檢視

安全邊界稽核

三大瑕疵鎖定

✓ 局部重繪驗證

Role

Critic

Artifact

reviews/

涵蓋簡報邊界、物理運動權重、音訊節奏網格到跨尺寸多比例輸出的實操法則。

十大工程實踐

10 CORE ENGINEERING PRINCIPLES

導演簡報與視覺文法逆向工程

Principles 01–02 · 規格與文法

拒絕模糊氛圍提示詞，要求模型逆向解析參考樣例並輸出風格規範

**原則 1：撰寫導演簡報而非氣氛提示詞。**明訂單一句子論點、目標受眾、時長、尺寸、真實 Logo/UI 路徑與不可侵犯之禁忌；**原則 2：提供可解析的實體參考。**給予具體樣例畫面，命令模型提煉出 Hex 調色盤、字體寬度字重、焦點動線與運動節奏，沉澱為 style-guide.md，嚴禁直接剽竊元素。

✓ 明確論點

真實 UI 綁定

Hex 色碼體系

禁止侵權抄襲

Inputs

Brief & Ref

Output

style-guide.md

狀態分鏡合約與確定性渲染引擎

Principles 03–04 · 狀態與引擎

以 UI 狀態機取代特效堆疊，渲染器必須滿足第 240 幀可獨立隨機尋址

**原則 3：將敘事轉化為狀態與節奏點。**分鏡不是特效清單，而是 SEARCH → RESULT → DETAIL → ACTION → CONFIRMATION 等連續狀態，每拍均需標註進出場條件；**原則 4：有意識選擇渲染器。**無論採用 Remotion、HyperFrames 或原生 Canvas/SVG，核心是 Seekability（任意可尋址性），任何幀皆為確定性查詢，不依賴全局累加時鐘。

狀態機推進

確定性種子

✓ Seekable 可尋址

Remotion / SVG

State Machine

shotlist.md

Contract

render(t)

物理動態層級與音畫同軸 Beat Grid

Principles 05–06 · 物理與節奏

拒絕全局彈簧過衝，音訊必須作為時間軸輸入而非事後附屬品

**原則 5：賦予運動真實物理質量。**Micro UI 快速精準、Panels 穩健沉降、Camera 絲滑近乎隱形、Headlines 強勢進場並穩定停留，避免所有物件均大幅彈跳；**原則 6：音訊置於同一時間軸。**建立精確 Beat Grid（0.00s 擊中、0.50s 狀態變更、1.00s 產品揭示、1.50s 點擊音效、2.00s 視覺獎勵），閉眼盲聽亦具備完整敘事結構。

分級物理曲線

視野錨定檢驗

Beat Grid 網格

✓ 音畫完全對齊

Physics

5 Classes

Audio Grid

Millisecond

Contact Sheet 圖紙與多比例原生適配

Principles 07–08 · 驗證與跨端

先以關鍵幀接觸圖紙檢視瑕疵，禁止在寬螢幕影片上做野蠻居中裁切

**原則 7：導出前先行檢查靜態幀。**在主要節拍點與高速轉場導出 Contact Sheet，檢查手機字體、安全區、真實素材與音畫對齊，鎖定三大最嚴重瑕疵實施局部重繪；**原則 8：從原始碼導出比例變體而非裁切。**同套時間軸與核心資產，16:9 展現空間脈絡，9:16 重組為強垂直層級，1:1 緊縮字體排印，個別透過獨立排版函數原生生成。

接觸圖紙檢驗

三大瑕疵修復

拒絕中央裁切

✓ 16:9 / 9:16 / 1:1

Inspection

Contact Sheet

Formats

Source-native

工作室資產打包與審查門禁機制

Principles 09–10 · 沉澱與門禁

將成果沉澱為可復用目錄結構，以階梯門禁遏止長程 Agent 自由漂移

**原則 9：打包整個工作室而非單次對話。**建立 motion-studio/ 專案樹（包含 brief、style-guide、shotlist、assets、src、reviews、out），下次專案只需抽換簡報；**原則 10：給予長程運行門禁而非自由。**設立 GATE 1 至 GATE 6，Agent 可在門禁間自主編程數小時，但缺少資產時必須停下提問，嚴禁自行捏造品牌決策。

motion-studio/

資產檔案化

六道審查門禁

✓ 阻斷幻覺漂移

Structure

7 Folders

Control

Gate 1–6

給予長程執行的 Agent 嚴格階段查核點，確保自律執行不偏離品牌軌道。

六大審查門禁

LONG-RUN AUTONOMY WITH GATES

G1/06

GATE 1 · 核准參考素材與真實產品資產

Gate 01 · 資產查驗

缺少真實產品界面屬於阻塞條件，嚴禁模型自行偽造假 UI

若簡報指明「呈現真實後台界面」，缺少截圖即為生產阻塞項（Blocker）。模型必須暫停並向使用者索取，或輸出小型測試幀，不得生成 900 幀精緻但完全捏造的假界面。

✓ 阻塞停頓

真實截圖確認

品牌標誌鎖定

杜絕幻覺捏造

Gate

Gate 1

Check

Assets Lock

G2

GATE 2 · 審核視覺風格指南與分鏡時間軸

Gate 02 · 規範確認

在動手編寫渲染程式碼前，先行核准 style-guide.md 與 shotlist.md

確認調色盤 Hex、字體排印、每拍起止秒數與進出場狀態。檢驗是否所有鏡頭都具備傳達資訊之目的，剔除單純重複敘事的贅述分鏡。

style-guide.md

shotlist.md

✓ 前置驗證

Gate

Gate 2

Check

Specs & States

G3

GATE 3 · 檢查代表性靜態關鍵幀

Gate 03 · 靜態取樣

以靜態渲染圖確認排版比例、眼睛動線與行動端可讀性

抽取 3–5 張代表性靜態影格進行檢驗。確認焦點層級、文字對比度與空間留白是否符合預期，避免進入全片動畫代碼編寫後才發現風格偏差。

關鍵幀取樣

焦點動線校準

文字層級審查

Gate

Gate 3

Check

Stills Review

G4

GATE 4 · 渲染粗剪版本與接觸圖紙 Contact Sheet

Gate 04 · 全片印表

將全片各拍點拼貼為接觸圖紙，以圖像化證據取代文字空談

命令渲染器在每個重要拍點與轉場高速區間抽幀，生成接觸圖紙。依據客觀渲染圖像審核全片節奏，而非盲目重複播放 60 秒視頻。

✓ Contact Sheet

轉場幀檢查

全時序檢視

Gate

Gate 4

Check

Rough Cut

G5

GATE 5 · 修復影響度最高的三大視覺瑕疵

Gate 05 · 有界修補

鎖定具體時間戳與證據，進行局部程式碼補丁與重繪

禁止全片盲目重畫。命令模型針對接觸圖紙中挑出的前三大瑕疵（如文字遮擋、過衝抖動、轉場破綻），給出局部修復代碼，僅重繪受影響之影格。

三大瑕疵修復

時間戳對齊

✓ 局部重繪驗證

Gate

Gate 5

Check

Defect Patch

G6

GATE 6 · 音訊同步校對與多格式最終交付

Gate 06 · 交付驗收

音畫對齊檢驗、多比例源生導出與 studio-handoff 套件打包

盲聽音軌以確保節奏獨立完整；驗證 16:9、9:16、1:1 格式在手機端呈現效果；打包原始碼、海報尾幀、資產清單與可重現之 CLI 渲染命令。

音畫同步稽核

16:9 / 9:16 / 1:1

✓ studio-handoff

Gate

Gate 6

Check

Final Delivery

實戰指令與架構包

拒絕模糊的「做個酷炫影片」。將以下完整的 Production Contract 提示詞與專案結構複製進 Claude Code，立即啟動確定性影音工作室流程。

AI-First 設計與技術顧問公司。15+ 年、300+ 品牌。我們把 Claude、MCP、Agentic Commerce 接進 Headless CMS、Webflow、Shopify Plus 的企業級交付 — 讓 AI 透過 GEO (AEO) 找到你的品牌，讓 B2B ABM 把買家轉成營收。

解決方案

By Topic

資源

公司

© 2026 Tenten Inc. · Skills Atlas · 資料來源：@0xwhrrari 公開研究成果 · 轉載與引用請保留來源。