Text-To-Lottie 實測：用 AI Agent 本地生成與即時預覽 Lottie 動畫

前言

Lottie 動畫因其向量、輕量且支援跨平台的特性，已成為現代網頁與行動端應用的視覺標準。然而，傳統上製作 Lottie 動畫需要使用 After Effects 搭配 Bodymovin 外掛，這對非設計師或是需要快速迭代的開發者來說門檻極高。

Text-To-Lottie（基於 diffusionstudio/lottie）打破了這個限制。它整合了基於 Skia CanvasKit 的 Skottie 動畫播放引擎，並提供 React、shadcn/ui 與 TypeScript 組裝的控制面板。透過這套工具，本地的 AI 代理可以直接將動畫指令寫入 public/lottie.json，並透過開發伺服器進行即時的熱重載（Hot Reload）預覽。

下面先放實際的成果展示錄影：

專案 GitHub 倉庫（按這裡前往）

安裝與環境設定

Text-To-Lottie 提供便捷的本地安裝指令，你可以直接透過 npm 技能管理工具將其添加至開發環境。

1. 添加技能 (npx skills)

在終端機中執行以下指令以安裝 diffusionstudio/lottie 技能：

bash

npx skills add diffusionstudio/lottie

在終端機中執行技能添加指令，完成 diffusionstudio/lottie 的拉取

在安裝過程中，一路按下 Enter 確認預設選項即可。安裝完成後，可透過 ls -la 指令檢查 .agents/skills/text-to-lottie 目錄，確保相關檔案已正確寫入。

一路確認安裝，最後透過 ls -la 驗證 skills 檔案是否存在

使用 AI Agent 生成 Lottie 動畫

安裝好技能後，即可直接向支援 Skills 的 AI 本地代理（如 Claude Code、Codex 或 Antigravity）發送描述性的 Prompt 來生成動畫。

以下是一個實測生成金融風格 K 線圖動畫的 Prompt 範例：

A premium fintech Lottie of a transparent-background candlestick chart with 350 real TSLA-style red/green candles revealing rapidly left to right; each slim candle grows vertically into its OHLC body and matching-color wick, with tight spacing, natural clustered volatility, no grid or labels, and a single parent camera group that briefly holds then pans smoothly with ease-out motion across the forming market trend in a 150-frame, 30 FPS composition.

向本地 AI 代理輸入精確的動畫規格 Prompt，讓代理自動編寫並輸出動畫 JSON

本地啟動與成果驗收

當 AI 代理生成好 lottie.json 後，便可以執行本地開發伺服器進行驗收。

1. 手動複製與依賴安裝

在手動設定的場景下，可以安裝專案依賴。由於 Skia 播放器需要 CanvasKit 的 WebAssembly 支援，專案在執行 npm install 時，會透過 postinstall 腳本（scripts/copy-canvaskit.mjs）自動將 Wasm 二進位檔案從 node_modules 複製至 /public 目錄下。

bash

# 安裝依賴（會自動將 CanvasKit wasm 複製至 public 目錄）
npm install

# 啟動本地開發伺服器
npm run dev

2. 即時效果預覽

啟動開發伺服器後，點擊終端機輸出的本地 URL（預設為 http://localhost:3000），即可直接在瀏覽器中看到剛剛 AI 代理所生成的精美 Lottie 動畫成果。

執行 npm run dev 後點進本地網址，即可在畫面上流暢播放由 AI 輸出的向量動畫

為什麼這項技術值得關注

零設計工具依賴：開發者只需使用結構化文字描述，就能透過 LLM 生成符合 Lottie 規格的向量動畫，不再需要經過 After Effects 等軟體二次匯出。
高效能的 Web 渲染：利用 Skia CanvasKit (Skottie) 進行 GPU 加速渲染，其渲染效率與畫面精緻度明顯優於傳統的 Lottie-Web (SVG) 渲染方式。
極佳的開發反饋迴圈：AI 代理直接修改 public/lottie.json 檔案，本地開發伺服器隨即自動刷新畫面，實現「描述即所得」的極速網頁微互動設計。