品牌一致性從一份明確的小型素材包開始。本指南採用開源 Claude Motion 工具包與 Remotion 的素材約定。這些準備也適合編輯 HyperFrames 專案,但 React 匯入和 staticFile 是 Remotion 的用法,並非本站編輯器的命令。
建立智慧體能遵循的素材清單
收集已批准的標誌、現有的深淺背景版本、準確的字型檔案、簡潔的配色和允許公開的截圖。在專案旁的文件中記錄每個檔名、用途、來源及使用許可,補充當前產品名和批准過的行動文案。清楚標註佔位素材。實現前讓智慧體列出實際找到的檔案,可以避免看似可信的樣片悄悄換掉真實標誌,或編造產品並不存在的介面。
使用穩定的本地路徑
在 Remotion 專案中,把公共素材放在 public 下,例如 public/assets/logo.png 和 public/assets/dashboard.png,透過 staticFile 引用相對於 public 的路徑。檔名應簡短並統一大小寫;一臺電腦能用的路徑,換到另一臺電腦可能因為大小寫不同而失效。優先使用本地、已獲授權的素材,避免可能過期的臨時圖片連結。不要在 URL 中放訪問令牌,也不要為了渲染方便而把包含客戶隱私的截圖上傳到公開素材站。
動畫之前先檢查透明度與裁切
分別在淺色和深色背景開啟標誌。白色矩形可能本來就在圖片裡,並非渲染錯誤;透明留白也會讓可見標誌顯得過小。保持標誌比例和批准的留白空間。決定每張照片是填滿容器還是完整顯示,前者可能裁掉重要內容。增加動畫之前,為每個素材要求一張靜幀。按手機實際觀看尺寸檢查細線,而不只是放大桌面畫面來看。
載入真實字型並檢查每種文字
Remotion 文件提供了透過 @remotion/fonts 載入本地字型的方法。使用指定字型族和真實字重,並在文字測量或渲染之前等待字型載入完成。確認字型許可覆蓋預定用途,並保留許可記錄。拉丁字型可能不包含中日韓字元,應指定並審閱適當的回退字型,不能假設所有語言外觀相同。測試最長標題、標點、數字和重音字元。翻譯導致換行變化時,先調整佈局,不要把所有語言都縮到難以閱讀。
寫清品牌提示詞並檢查匯出
使用下方提示詞明確說明品牌要求。批准後,在實際 MP4 中檢查字型替換、標誌裁切、顏色變化或圖片缺失。將素材、清單、字型資訊和成品一起儲存。本站可編輯下載支援繼續本地製作,但不要假設存在通用品牌上傳或自動品牌包匯入功能。
使用提供的標誌,不要重畫。只採用批准的奶油色背景、炭灰文字,並僅在關鍵行動上用綠色強調。載入提供的字型檔案。保持截圖比例和內容不變。先展示包含標誌、最長標題和截圖的靜幀,再新增動畫。下一步行動
給智慧體真實檔案和明確規則,再在匯出影片中核對。正確的素材清單,比一句“做得有品牌感”更可靠。
探索創作工作區資料來源與延伸閱讀
引用連結指向原始文件和創作者。產品可用性可能變更,訂閱或安裝前請確認來源。
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills