為什麼代碼動畫再次勝過 GIF

Google 在 2026 年推動代碼原生視覺元素，並非要淘汰設計師，而是為了直接從提示詞交付體積小、無限解析度的資源。Gemini 3.1 等級的模型可以輸出有效的 SVG 標記，並嵌入 CSS 或 SMIL 動畫。由於結果是數學運算而非像素，單一檔案即可從手機圖示縮放至主視覺區塊，無需重新匯出。

本教學將帶領你在 MidassAI Chat 上完成三個漸進式專案——无需 Figma 時間軸、无需 After Effects，在貼上最終代碼片段前也无需本地 IDE。

適合對象

正在製作微互動的原型前端開發人員
需要為登陸頁面製作輕量載入圖示與圖示的行銷人員
建立互動式圖表（物理、化學、流程圖）的教育工作者
受夠了在其他速度很快的網站上出現 2 MB GIF 載入圖示的人

在 MidassAI Chat 上試用 Gemini 3

輸入提示前：防止輸出低質內容的三個限制

請務必在第一則訊息中包含以下內容：

輸出格式：「僅返回原始 SVG 代碼，以 <svg 開頭並以 </svg> 結尾。不要 Markdown 代碼框。」
動畫引擎：「在 SVG 內的 <style> 區塊中使用 CSS @keyframes」（若你需要僅限 SMIL 的嵌入，則改為「使用 <animateTransform>」）。
視口：「viewBox=0 0 100 100」，width/height=100%，preserveAspectRatio=xMidYMid meet。」

若缺少 #1，你將在 CMS 編輯器中與 Markdown 包裝器搏鬥。若缺少 #2，模型有時會選擇不一致的動畫 API。若缺少 #3，響應式佈局在手機上會破裂。

專案 1：三點載入旋轉圖示（初級）

開啟 MidassAI Chat 並發送：

撰寫一個單一的自包含 SVG 載入指示器：三個圓圈排成一行，錯落彈跳動畫，1.2 秒循環，顏色 #4F46E5 / #6366F1 / #818CF8。僅輸出原始 SVG。在 SVG 內包含 CSS keyframes。viewBox 0 0 120 40。

60 秒內驗證：

將輸出複製到空白 .html 檔案的 <body> 內。
在 Chrome 中開啟——動畫應順暢循環。
檢查檔案大小——預期低於 3 KB。

常見修正： 若圓圈頂部被裁切，回覆：「將 viewBox 高度增加 20% 並將彈跳幅度減少 15%。」

專案 2：互動按鈕懸停狀態（中級）

目標：SVG 圖示在懸停時變形描邊顏色——純 CSS，无需 JavaScript。

提示詞範本：

建立一個 SVG 圖示（24×24 邏輯大小，可縮放）的對話氣泡。透過 SVG 內的 CSS 在 :hover 時，於 200ms ease-out 內將描邊從 #64748B 过渡到 #2563EB。包含 role="img" 和 <title>Chat</title>。僅輸出原始 SVG。

將其貼入網站的圖示插槽或內嵌於 HTML 中。由於懸停是由 CSS 驅動，它適用於靜態頁面和大多數 CMS HTML 區塊。

陷阱： 某些安全過濾機制會剝離 <style> 標籤。若你的 CMS 剝離樣式，請在後續請求中要求 Gemini「將動畫移至每個元素的内聯 style 屬性」。

專案 3：帶有觸發器的教育模擬（高級）

受使用 Gemini 製作互動式圖表的化學和物理教育工作者啟發，建立一個單檔模擬：

生成一個單檔互動式 SVG，說明一個簡單的狀態機：Idle → Loading → Success。在 <foreignObject> 內包含一個標註為「Run」的 <button>。點擊時，在 2 秒內將進度弧線從 0° 動畫化至 360°，然後顯示綠色勾號。使用透過 SVG 內 <script> 中的最小内聯 JS 切換的 CSS 類別（CDATA 包裝）。僅輸出 SVG 文件。

測試清單：

按鈕點擊每個循環僅觸發一次
第二次點擊時動畫乾淨重置
無外部資源或字體

若 <foreignObject> 在你的目標平台中失敗，請要求 Gemini「將 foreignObject 按鈕替換為使用 href='#run' 和 :target CSS 偽類別的 <a> 觸發器」。

迭代循環：專業人士如何无需重來即可優化

將每個回覆視為一個版本，而非廢棄物：

貼上當前的 SVG。
描述一個視覺變更（「更慢的緩動」、「扁平設計，無漸層」）。
詢問：「返回完整更新的 SVG；保留 viewBox 和無障礙標題。」

當你錨定座標時（「將中心圓點從 (50,50) 移至 (50,45)」），Gemini 3 能很好地處理空間編輯。

Gemini 3.1 與舊模型在 SVG 任務上的對比

舊模型經常：

輸出損壞的 XML（未閉合的路徑）
錯誤地混合 HTML 和 SVG 命名空間
使用已棄用的 SMIL 動畫且無 fallback

Gemini 3.1 等級的輸出通常在現代瀏覽器中首次嘗試即可渲染載入器和圖示任務——但在你的嵌入環境中（WordPress、Notion、電子郵件客戶端會積極剝離腳本）始終需要驗證。

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

上線前的生產檢查清單

透過 W3C SVG validator 或同等工具運行輸出
在 Safari + Chrome 中測試（CSS 動畫計時略有不同）
確認 CMS 不會剝離 <style> / <script>
添加 prefers-reduced-motion 媒體查詢——要求 Gemini 在後續請求中生成此內容
根據組織政策註明 AI 輔助資產

何時不應使用此工作流程

在以下情況下跳过 AI 生成的 SVG 動畫：

品牌指南要求鎖定的設計系統組件
你需要與 Figma 中已有的複雜緩動曲線進行 Lottie 整合
目標環境是電子郵件（SVG 支援不一致）

對於行銷網站、文件入口網站和內部工具，提示詞到 SVG 仍然是從想法到嵌入的最快路徑之一。

下一步

即時運行專案 1，將旋轉圖示貼入你的測試頁面，然後迭代品牌顏色。MidassAI Chat 在瀏覽器中提供 Gemini 3 等級的代碼生成——无需 AI Studio 專案設置。

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

分鐘內完成 SVG 動畫：Gemini 3.1 教學