Claude 動畫做完怎麼交付？HTML、SVG 與 MP4 的用途和檢查重點
Claude 動畫做完，下一步是選對交付格式。本文區分 HTML、SVG 與 MP4，說明網站互動、社群影片和後續修改的差別，並整理字型、素材、手機與播放檢查方法。
Claude 動畫在預覽裡看起來順暢，交出去卻不能修改，或放到手機上就跑版，是製作流程常見的落差。
原因可能不在提示詞，而在一開始沒有決定要交付什麼：網站互動、可修改的圖形，還是固定播放的影片。
HTML 是描述網頁結構的格式，SVG 用文字描述向量圖形，MP4 則是常用的影音容器，三者保留的能力不同。
向量圖形以形狀與路徑描述畫面，放大時不必像一般點陣圖片逐格放大。影音容器則把影像、聲音等資料放在同一個檔案裡。
Prompt Motion 把作品和提示詞、Skill 放在一起，適合觀察製作方向，但案例展示不會自動替你決定交付格式。
我的建議是先問成果會在哪裡使用、誰需要修改，再安排輸出。若等畫面完成才處理格式，往往需要回頭整理素材與製作方式。
本文整理格式判斷與建議驗收方法，沒有宣稱各種 Claude 工具都具備相同輸出功能。先分清交付目的，後面的檢查才有依據。
Claude 動畫交付格式，先由使用場景決定
網站上的互動動畫，需要能對滑鼠、點擊或資料變化反應。社群影片則通常需要一段已安排好時間的畫面，兩者用途不同。
如果希望使用者按下按鈕後，看到介面狀態改變，就需要保留互動行為。把畫面錄成影片，觀眾只能看見示範，不會真的操作其中按鈕。
若用途是課程宣傳或社群貼文，固定的影片可能更容易進入既有上架流程。此時應先確認平台接受的比例、長度與編碼條件。
需要交給設計師修改的工作，則要保留來源檔、素材與文字內容。只交一段影片，不能期待對方像修改網頁那樣替換每個元素。
因此，交付前先回答三件事：在哪裡觀看、是否互動、誰會修改。這三個答案能決定主要格式，也能說明是否需要附另一種版本。
同一項動畫專案可以有多種交付，例如網站版加社群影片。但兩個版本應各自確認，不能因其中一個正常，就省略另一個用途的檢查。
目的明確後，再看每種格式保留什麼能力。首先從最容易被誤認為單一可攜檔案的 HTML 開始。
| 交付格式 | 適合用途 | 後續修改與驗收重點 |
|---|---|---|
| HTML | 網站內容與互動 | 保留網頁來源、素材與依賴，確認實際部署環境 |
| SVG | 可縮放圖形與線條動畫 | 保留圖形來源，確認嵌入方式、字型與動畫行為 |
| MP4 | 固定時間播放的影片 | 另附製作來源，確認編碼、比例、聲音與播放裝置 |
HTML 適合網站互動，也需要交代依賴的素材
HTML 描述網頁內容與結構，通常配合 CSS 控制外觀，並用 JavaScript 處理互動。CSS 是版面與樣式規則，JavaScript 是讓網頁執行動作的程式。
一個看起來完整的網頁動畫，可能同時依賴圖片、字型、程式庫與外部資料。只傳送一個 HTML 檔，不一定包含它需要的全部內容。
交付時應列出哪些素材放在專案裡，哪些需要連接外部網址。下一位使用者能理解依賴關係，才知道為什麼某個環境能顯示、另一個環境不行。
例如使用本機字型時，接收者電腦沒有同樣字型，文字就可能換行不同。圖片路徑指向製作電腦，也可能在移動專案後失效。
建議把專案放到另一個乾淨位置，用預期的使用方式重新開啟。觀察字型、圖片與互動是否符合需求，不只在原本開發視窗看結果。
若工作需要正式網站部署，還要確認載入方式與資料權限。能在自己的瀏覽器開啟，不代表已經完成網站環境的上線工作。
HTML 的優勢是保留結構與互動，代價是需要清楚管理依賴。若需求主要是圖形與簡單動態，下一個選擇可能是 SVG。
SVG 適合可縮放圖形，仍要分清嵌入與播放方式
MDN 的 SVG 介紹說明，SVG 用文字描述二維向量圖形，可以和網頁技術一起使用。
Logo、圖示與線條圖表很適合先考慮這種結構。形狀、顏色與部分文字可以在來源裡修改，比從一張固定圖片重新描繪更有調整空間。
但 SVG 不等於影片格式，也不是所有嵌入方式都保留同樣行為。接收端如何顯示它，會影響腳本、互動與外部資源的可用性。
因此，先確認成果要直接放進網頁，還是以圖片方式引用。不同方式需要對照使用環境，不能只由副檔名判斷動畫一定能播放。
文字也需要選擇保留方式。維持文字結構有利於修改，但字型差異可能改變版面；轉成路徑則需要另行確認修改與使用需求。
如果動畫包含複雜濾鏡或大量元素，還要在實際觀看裝置確認表現。向量格式有縮放優點，不代表每一種複雜效果都能流暢呈現。
交付時保留來源、說明顯示方式，再提供一張靜態預覽，能讓接收者理解預期畫面。需要固定時間播放時，則要考慮影片輸出。
MP4 保存固定影像，不能代替可編輯來源
MDN 的影音容器文件區分容器與編碼。MP4 是容器，影片能否播放還涉及裡面的影音編碼。
編碼是把影音資料轉成可儲存和播放形式的方式。相同副檔名的兩個檔案，可能使用不同編碼，因此不能只看名稱推定所有裝置都支援。
MP4 適合固定時間的成品，例如社群短片與簡報中的示範。觀眾看到的是已輸出的畫面，不會取得製作時的每個文字、圖形與互動元件。
如果品牌名稱要改，或某個數字每月更新，最好保留製作來源。否則修改者可能只能重新做畫面，再輸出一份影片。
建議同時交付動畫來源與播放檔，並說明它們的對應版本。來源負責後續修改，播放檔負責讓接收者直接觀看與上架。
另外確認解析度、比例、長度與聲音。這些條件影響使用場景，不能只用電腦上可播放來判定交付完成。
影片能方便觀看，卻不保留全部製作能力。這個差別清楚後，才不會把「可下載成品」寫成「可繼續修改專案」。
可修改的承諾，要指出到底能修改哪一部分
工具介紹中的可編輯，可能指提示詞能再修改、程式來源能調整，或能輸出特定專案檔。這些能力不能彼此代替。
動畫交付需求應寫成具體動作，例如換品牌名稱、改顏色、調整出場時間，或把資料換成另一組數值。下一位使用者才知道要驗收什麼。
若工具只提供固定影片，就不要讓接收者以為能直接選取其中的文字。若提供網頁來源，也應確認依賴素材與使用方式是否完整。
可以準備一項最常見的修改，請接收者按照說明完成。這是建議交接方法，目的在確認來源是否真的能承接工作，而非要求對方重做整個專案。
例如把標題從四個字改成八個字，就能觀察文字區域與時間安排是否仍然合理。只改顏色，可能看不出版面需要的調整能力。
修改完成後再輸出，核對新的播放檔是否包含變更。來源能改和輸出能更新，應形成同一條完整流程。
動畫交接的價值是下一個人能繼續工作。對應能力說明越具體，越容易選擇合適的製作方式，而不是被一個模糊名稱吸引。
手機與不同尺寸，要看文字是否仍然能讀
動畫放在製作電腦上，文字通常比手機畫面更容易閱讀。交付前應按實際觀看尺寸確認，不能只把桌面預覽縮小當成全部驗收。
網站版需要看版面是否跟著寬度調整，影片版則要看固定畫面在較小螢幕上是否清楚。兩者遇到的問題不同。
網站動畫的文字可能因寬度改變而換行，固定影片則不會自動重排。若某個數字原本很小，放到手機上就可能失去資訊價值。
先挑最重要的一段文字、主要圖形與行動按鈕查看。觀眾需要理解的訊息先成立，再決定裝飾效果是否值得保留。
不同用途也需要不同版本。橫式簡報與直式社群畫面，不能只靠裁掉兩側就保證內容完整，標題、圖表與字幕都要重新確認位置。
比較時記錄使用尺寸、工具與實際結果。若只寫「手機正常」，後續很難知道確認了哪一種畫面與哪一個檔案版本。
畫面比例與文字確認後，再處理播放條件。動畫本身能動，不代表每個觀看環境都會用同一種方式播放。
播放、聲音與減少動態偏好，需要在用途裡確認
MDN 的 video 文件說明影音元素的播放設定，包括控制列、預載與自動播放等能力。
實際瀏覽器可能限制有聲自動播放。網站若依賴影片立即播放才能說明產品，就應確認限制下仍有可理解的畫面與操作入口。
可以提供封面、播放按鈕與文字摘要，讓觀眾在影片尚未開始時也知道內容。這比把全部資訊藏在第一秒的動作裡更容易使用。
網站動畫還應考慮使用者的減少動態偏好。MDN 對 prefers-reduced-motion 的說明介紹了偵測這項系統偏好的方式。
它可以協助網站在使用者希望減少動態時，改用較少移動或靜態呈現。具體處理仍需由製作方式實作，不能因使用某個模型就推定已包含。
影片若包含口白，也應確認字幕與音量。觀眾可能在靜音環境觀看，重要訊息不宜只靠聲音傳遞。
這些檢查的目的，是讓觀看方式改變時，核心內容仍然成立。完成後再把檔案、來源與版本一起整理，交付才不會漏掉後續工作需要的資料。
一份交付資料，讓接收者知道看哪個檔案、改哪個來源
動畫交付包可以包含播放檔、製作來源、使用素材與簡短說明。每個項目都應有用途，不必把整個開發資料夾直接交出去。
說明中先指出主要觀看入口，再寫修改來源與輸出方式。如果需要特定工具或版本，也一起記錄，避免接收者反覆猜測。
素材來源與授權資訊同樣要保留。Prompt Motion 明確標示作品與提示詞屬於各自創作者，參考展示不能自動變成自己的品牌素材。
本文使用的網站展示來自 Prompt Motion 策展者，不是 Anthropic 官方動畫成果，也沒有宣稱可將其中作品任意商業重用。
最後用交付包重新開啟一次，確認檔案對應版本與預期畫面。完成一個清楚的交接，比留下很多命名相近的輸出更有幫助。
如果之後只修改一項內容，就從來源建立新版本，再確認受影響的部分。保留可追溯的版本，才能減少多次修改後的混亂。
工具可以協助製作，但格式、素材與驗收仍需要有人安排。當這些條件明確，AI 才更容易參與可以持續使用的內容流程。
從可用作品開始，逐步建立自己的輸出流程
我的選擇是：需要網站互動時保留網頁來源，需要線條圖形時評估向量結構，需要社群播放時準備影片，並為後續修改保留原始專案。
這個判斷沒有要求所有作品都用同一種工具，而是讓交付目的決定製作方式。可以觀看、可以修改與可以上架，都應有各自的確認。
若想學習從來源製作到影片輸出的完整工作方式，可查看AI 互動式影片工作流：用 Codex + HyperFrames 實現可編程影片自動化。課程使用的工具與本文格式判斷相連，但不保證所有案例一鍵重現。
延伸閱讀：Prompt Motion 收集 Claude 動畫案例：影片旁邊就能看提示詞與 Skill
延伸閱讀：Claude 動畫提示詞怎麼寫？拆解 UI 變形、節奏與無縫循環
Claude 動畫交付常見問題
HTML 動畫能直接當成 MP4 上架嗎？
不能直接把兩者當成同一種格式。需要影片的用途，應透過適合的輸出流程產生播放檔，再核對聲音、尺寸與內容。
SVG 一定能在所有網站播放嗎？
不能保證。實際結果和嵌入方式、動畫實作及觀看環境有關，應在預期使用位置確認。
交付 MP4，就表示對方可以改每個文字嗎？
不表示。固定影片不保留每個元素的原始結構，後續修改通常還需要製作來源與素材。
本文是否測過所有模型與輸出工具？
沒有。本文是格式說明與建議驗收方法，沒有把參考影片或文件能力描述為本站完整實測。
