對於本站的 Claude Motion Skills，可以把它理解為最後轉成影片的小型網頁專案。你的程式代理協助撰寫和修改原始檔，HyperFrames 提供算圖基礎。這是兩項不同的工作。理解兩者如何銜接，就更容易判斷問題出在訊息表達、動畫，還是匯出檔案。
1. 把需求變成有順序的場景
假設要為新搜尋功能製作一段 12 秒的發布影片。向代理提供核准的文案、真實截圖、目標觀眾與畫面比例。規劃三個場景：0–3 秒提出問題，3–9 秒示範有用的改變，9–12 秒展示下一步行動。這只是編輯方案的範例，並非強制範本。先確認場景順序，再打磨轉場；沒有明確重點的文字，即使提高解析度並加上動畫，也不會變得清楚。
2. 保持內容與版面可編輯
下載的原始檔套件包含動畫，以及繼續在本機工作所需的檔案。在 HyperFrames 專案中，HTML 描述畫面組成，CSS 控制外觀，JavaScript 可描述運動。把截圖、字型和音訊保存在專案中，避免依賴可能失效的外部素材。為場景使用 problem、search-demo、next-step 等有意義的名稱。標題變更時，讓代理修改對應場景並檢查換行，而不是重寫所有場景。
3. 讓每個時刻都能直接定位
算圖工具必須能直接要求某個時刻的畫面。HyperFrames 使用可定位時間的場景；瀏覽器動畫 API 也提供 Animation.currentTime 等時間控制。在每秒 30 格時，這個範例需要 360 格，從零時刻開始，以 1/30 秒為間隔取樣。只依賴即時時鐘的動畫，播放時可能正常，定位時間時卻會失敗。可以兩次要求同一時間戳並比較結果，尤其當畫面涉及粒子、隨機數或非同步媒體時。
4. 在耗時的最終算圖前檢查
瀏覽器預覽適合檢查敘事與節奏。在每個場景的開始和結束暫停，並檢查第 3 秒與第 9 秒附近的轉場。截圖中真正有用的部分是否夠大？標題是否在觀眾需要閱讀前完成入場？字幕有沒有被其他元素遮住？HyperFrames 文件提供 lint 與 check 命令做技術驗證。請使用專案附帶且適用於已安裝版本的命令；檢查成功也無法判斷訊息是否清楚。
5. 算圖、觀看並保留原始檔
本站的 MP4 流程從下載的製作套件在本機執行，使用 HyperFrames、Chrome 與 FFmpeg。算圖會擷取預定畫面並編碼成影片，而不是錄下預覽播放得是否流暢。開啟實際 MP4，檢查第一格、最後一格、完整旁白、尺寸與長度。交付影片時也保留原始檔資料夾。客戶之後若修改一個詞，你可以更新專案並再次輸出，不必從像素畫面重建整個作品。
下一步行動
用預覽判斷故事，用帶時間資訊的原始檔控制動畫，用匯出的 MP4 驗證交付。讓這三者始終保持連結。
探索創作工作區資料來源與延伸閱讀
引用連結指向原始文件和創作者。產品可用性可能變更，訂閱或安裝前請確認來源。
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen