text-to-lottie

Text To Lottie

為官方本機 Skia Skottie 播放器製作可上線的 Lottie JSON。
交付物是播放器中可渲染的場景，而非獨立的 JSON。

運作模式

• 使用官方播放器專案，並在 Skia Skottie 中驗證。請勿自行建立自訂檢視器或切換渲染器進行驗證。
• 保持技能在 Agent Skills 用戶端之間的可攜性。避免在技能說明中使用特定主機的命令、命令模式或編排慣例。
• 偏好較少提問與更強的預設值。僅在決策會實質改變輸出時才提問，例如透明背景 vs 全畫面背景、品牌限制、目標格式或提供的來源素材。
• 優先追求乾淨、有目的性、專業的動畫，而非僅滿足字面上的提示。

參考資料載入

此 SKILL.md 是精簡的控制層。僅載入與任務相符的一層參考資料。請勿開啟整個參考資料庫。

在建立、編輯、修復或驗證場景前，務必先閱讀 references/player-contract.md。如果路由的參考資料無法取得，請繼續使用此檔案中的內嵌規則。

使用者意圖	存在時應讀取的參考資料
任何新建/編輯/修復 Lottie 場景	references/player-contract.md
JSON 結構、關鍵影格、插槽、形狀、素材	references/lottie-spec-map.md
標誌動畫	references/recipe-logo.md、references/motion-taste.md、references/design-taste.md
字體排版、標題、引言、文字揭示	references/recipe-typography.md、references/design-taste.md、references/motion-taste.md
下三分之一、姓名標籤、字幕條、覆蓋層	references/recipe-lower-thirds.md、references/design-taste.md、references/motion-taste.md
載入器、圖示、旋轉圖示、徽章動畫	references/recipe-loaders-icons.md、references/motion-taste.md
成功、錯誤、警告、完成、空狀態	references/recipe-loaders-icons.md、references/design-taste.md、references/motion-taste.md
UI 微互動	references/recipe-ui-microinteractions.md、references/design-taste.md、references/motion-taste.md
一般「將此 SVG 製作成動畫」或 SVG 轉 Lottie	references/recipe-svg-animation.md、references/svg-compatibility.md、references/motion-taste.md
攝影機跟隨、平移、縮放、視差、場景運動	references/recipe-camera-scene-motion.md、references/design-taste.md、references/motion-taste.md
圖表、技術線條動畫、標註、流程追蹤	references/recipe-diagram-technical.md、references/design-taste.md、references/motion-taste.md
資料、統計、KPI、圖表、指標、儀表板數字	references/recipe-data-stats.md、references/design-taste.md、references/motion-taste.md
產品發表、功能公告、社群宣傳	references/recipe-product-promo.md、references/design-taste.md、references/motion-taste.md
長文字、多個想法、列表/功能/步驟、時間軸、前後對比、問題/解決方案、引言+證明、回顧/故事、產品導覽、多語言變體、章節、多拍序列、集數、跳接/硬切、轉場語法	references/chapterization-transition-grammar.md、references/motion-taste.md
發光、玻璃、金屬、漸層、填色、氣泡/爆發效果	references/recipe-visual-effects.md、references/design-taste.md、references/motion-taste.md
標誌/圖示/UI/下三分之一工作中的 SVG 輸入	任務配方加上 references/svg-compatibility.md
入門簡報或可重複使用的專案方向	references/recipe-starter-projects.md、references/design-taste.md、references/motion-taste.md
任何「高級」、「乾淨」、「極簡」、「現代」、「時尚」或「精緻」的修飾詞	references/design-taste.md（節制預設值），加上路由的配方

對於混合提示，從主要交付物中選擇一個主要配方，然後為來源格式或視覺處理添加次要參考資料。範例：帶發光的 SVG 標誌使用標誌作為主要配方，加上 SVG 相容性和視覺效果；帶平移/縮放的產品發表使用產品宣傳加上攝影機場景運動；技術 SVG 圖表追蹤使用圖表/技術加上 SVG 相容性；帶玻璃掃掠的動態標題使用字體排版加上視覺效果。

工作流程

1. 使用上表路由任務。僅讀取存在的相關參考資料。
2. 找到官方播放器專案，並使用下方的目標優先順序解析目標場景。在編輯前，確認解析路徑為 public/projects/<project>/<scene-N>/lottie.json；在覆寫前立即重新讀取該當前檔案，因為 UI 可能將插槽編輯寫回來源。
3. 在創作前決定背景政策。
4. 寫入或更新 public/projects/<project>/<scene-N>/lottie.json，並在有用時更新 controls.json。
5. 驗證 JSON，執行或重複使用開發伺服器，使用 ?frame=N 檢查精確影格，並在完成前修復渲染/設計/動畫問題。

內嵌規則

設計預設值（始終適用）

這幾個預設值是不可協商的，並適用於每個設計的場景。載入 references/design-taste.md 以取得完整理由，特別是對於任何「高級」、「乾淨」、「極簡」、「現代」或「卡片」提示。

• 高級意味著減法，而非加法。當提示提到高級、乾淨、極簡、現代、時尚或精緻時，預設為節制：在添加裝飾之前先移除裝飾。高級感來自於比例、重量、亮度、間距和時機，絕不來自於卡片、邊框、分隔線、陰影、發光或疊加色調。
• 裝飾/容器預算預設為 0。除非空白和對齊無法完成的工作，否則不要添加框架卡片、容器、邊框或分隔線。先用負空間和對齊來分隔網格和欄位，其次使用單一細線，最後才使用填色或邊框卡片，且僅在明確需要時使用。
• 單一表面色調。使用一種背景色調。不要疊加兩種接近黑色或接近白色的色調來偽造「表面」；這會顯得很混濁。如果卡片表面必須與背景不同，請使其成為一個有明確目的的自覺步驟。
• 單一分隔線處理，單一顏色。如果確實需要分隔線，請對所有分隔線使用一種粗細和一種顏色，包括標題規則和欄位規則。絕不要對每個分隔線使用略有不同的顏色或粗細。

場景規則

• 場景檔案位於 public/projects/<project>/<scene-N>/lottie.json。
• 按權威性解析目標場景：明確的檔案路徑優先；瀏覽器 URL 路由如 /<project>/<scene> 其次；已為任務知道的專案/場景再次；否則建立一個新的安全場景。僅在任務明確指示編輯當前螢幕上的內容且沒有更具體的目標時，才使用 /__context 進行發現、驗證或播放狀態。不要讓 /__context.live 覆蓋已知的檔案路徑、URL 或專案/場景。僅在 main-project/scene-1 仍然是未修改的佔位符時才覆寫它；否則建立一個新場景。
• 全畫面獨立合成應包含一個可見的背景圖層，帶有 bgColor 插槽和 controls.json 條目。
• 預設為透明的輸出包括標誌、圖示、載入器、覆蓋層、下三分之一和 SVG 衍生的素材，除非使用者要求背景。
• 包含頂層的 v、fr、ip、op、w、h、nm、assets 和 layers。將 op 視為獨佔。
• 使用有目的的緩動和分階段。避免預設為線性運動。從 motion-taste.md 中基於行為的錨點推導緩動（由運動行為選擇，焦點元素最強）；不要對每個圖層都回退到統一的緩動。
• 對重要的可編輯值使用插槽，並在它們改善屬性面板時添加 controls.json 標籤/範圍。
• 對於 SVG 輸入，保留 viewBox，標準化樣式，注意填色規則和交叉點，並在 Skottie 中驗證結果。
• 原生 Lottie 文字/文字插槽（ty:5）在此播放器中渲染，當場景附帶其字體時：將 .ttf/.otf/.ttc 放在 lottie.json 旁邊，在 fonts.list 中宣告它，fFamily 與字體的內嵌系列名稱匹配，並從文字文件中引用它。載入器會將每個場景字體傳遞給 Skottie。偏好原生文字；僅在需要路徑效果（描邊、字形變形、手寫）時才使用向量/形狀文字。請參閱 player-contract 中的「原生文字」參考。

驗證

在完成之前：

1. 確認目標檔案路徑為 public/projects/<project>/<scene-N>/lottie.json。

2. 驗證 JSON：

   node -e "JSON.parse(require('fs').readFileSync('public/projects/<project>/<scene-N>/lottie.json','utf8'))"
   

3. 確認官方播放器正在執行，且場景出現在 GET /__context 中。

4. 在瀏覽器中檢查固定影格。對於新場景，檢查影格 0、中點和 op - 1。

5. 確認背景政策符合使用案例。

6. 檢查空白畫布、遺失素材、未設定樣式的形狀、錯誤的圖層順序、不良的緩動、尷尬的時機、裁切的內容、文字溢出和可見的 SVG 瑕疵。

7. 僅在動畫渲染乾淨且感覺有目的性時才完成。

維護評估

在正常的動畫工作中不要讀取評估檔案。僅在測試或變更此技能時使用它們：

• evals/trigger-prompts.json
• evals/routing-prompts.json
• evals/reference-loading-prompts.json
• evals/output-rubric.md