Gemini SVG 動畫教學：用自訂 Gem 與 Canvas 製作互動教材

Gemini Canvas 可以把文字需求轉成可操作的網頁原型。對教材而言，真正有價值的不是「AI 畫了一張圖」，而是學生可以拖動滑桿、改變狀態、觀察因果，再把抽象概念和畫面變化連起來。影片示範由地球公轉與季節開始，之後沿用同一個自訂 Gem，製作空間介詞、排序、水循環、植物生長、斜面受力和幾何互動。

Google 在 Gemini 3.1 Pro 官方介紹中，直接列出由文字 prompt 生成網站用 animated SVG 的例子；Google 的 Canvas 說明則把 app、程式碼、預覽、console 和修改流程放在同一個工作區。這篇教學會重現完整操作，同時補上影片沒有展開的 prompt 架構、內容驗證、程式審查、無障礙和分享安全。

一、先理解整個工作流

這個方法把兩類資訊分開：

• 長期不變：角色、語言、輸出格式、互動原則、無障礙、技術限制和驗收方法，保存到自訂 Gem。
• 每次改變：本次主題、學生年級、學習成果、要呈現的變量、控制項、正確答案和視覺風格，寫在當次工作提示。

因此你不必每次貼一大段通用規則，也不應把所有教學內容寫死在 Gem。Gem 是可重用的「製作規格」，Canvas 是本次「設計、生成、測試和修改」空間。

二、開始前：帳戶、模型和資料界線

1. 在桌面瀏覽器登入 gemini.google.com。
2. 確認側邊欄有 Gems，輸入框可選 Canvas；供應會受地區、年齡、帳戶和方案影響。
3. 確認帳戶目前有哪些模型。影片使用 3.1 Pro；若介面名稱改變，以官方產品頁和實際模型選單為準。
4. 用非敏感主題測試，例如公開課程中的地球季節或三角形內角。
5. 先寫低科技版規格：學習成果、正確答案、可改變變量和成功標準。AI 應實作規格，不應替你決定課程內容。

資料界線：不要輸入學生姓名、學號、相片、個別學習需要、評語、家長資料、未公開試題、登入資料或 API key。Google 的 Privacy Hub 說明，Gem 指令、prompt、上傳內容和生成內容都屬 Gemini Apps 可能處理的資料；工作或學校帳戶亦可能有不同條款。

三、建立一個乾淨的自訂 Gem

步驟 1：開啟 Gems 管理頁

在 Gemini 左側選擇 Gems，再按「新增 Gem」。Google 的官方指引提醒，預覽不等於已保存；完成測試後仍要按 Save。

步驟 2：命名，並把用途寫成一句話

名稱只用來辨認工作。說明欄可寫：「把已核對的教學規格轉成可測試的繁體中文互動網頁原型。」不要用含糊名稱，例如「萬能 AI」；亦不要把版本、作者或宣傳字句塞進每個輸出。

步驟 3：貼上可重用的 Gem 指令

Google 建議自訂 Gem 指令可以交代 persona、task、context 和 format。以下是已移除個人歸屬、並加入技術與教學 QA 的繁體中文基線：

# 角色
你是「互動 SVG 教材助理」，協助把已核對的學習內容轉成可操作網頁原型。

# 工作方式
1. 先確認主題、年級、學習成果、正確內容、互動變量和驗收條件。
2. 如關鍵資料不足，先提最多 5 條具體問題，不要自行補造事實。
3. 在 Canvas 建立單頁 HTML；主要教學圖像優先使用 inline SVG。
4. CSS 和 JavaScript 放在同一文件；除非使用者批准，不載入外部 script、font 或 tracker。
5. 提供清楚標題、圖例、操作說明、目前狀態和重設控制。
6. 所有互動支援鍵盤和明顯焦點；不只靠顏色傳意；支援 prefers-reduced-motion。
7. 先列出假設及測試清單，再建立原型；完成後說明如何驗證每個狀態。

# 輸出要求
- 介面與說明使用繁體中文。
- 響應式，桌面與窄螢幕不出現水平溢出。
- SVG 元素使用有意義的分組、標籤及 viewBox。
- 數值、公式、單位和狀態不可憑空編造。
- 不收集個人資料，不嵌入秘密，不自動播放聲音。
- 最後附上：假設、已知限制、驗收步驟、發布前待核對項目。

Gem 指令應該穩定。若某個要求只適用於一課，例如「地球傾斜 23.5 度」或「三角形頂點可拖動」，放在工作提示，不要污染所有後續任務。

步驟 4：把 Canvas 設為預設工具

Canvas 與一般文字回答不同：它提供預覽、Code view、console、選取後要求修改等工作。若帳戶沒有「預設工具」欄，也可在開始對話時由輸入框的 Add files／工具選單選擇 Canvas。

步驟 5：保存並開始對話

按 Save，看到建立成功訊息後選擇「開始對話」。建立完成只代表設定已保存，不代表指令或輸出已通過驗收；第一個任務應使用公開、低風險內容，並把它當成 Gem 的基線測試。

四、用一份可驗收的工作提示啟動 Canvas

影片第一個任務是地球運動、軸傾與季節。不要只寫「做一個地球公轉動畫」；一份可交付提示至少包含七格：

1. 對象：例如香港小學高年級學生。
2. 學習成果：學生完成互動後要能解釋甚麼。
3. 固定事實：已由教師核對的角度、定義、單位和關係。
4. 狀態：月份、季節、位置或階段有哪些離散／連續值。
5. 操作：拖動、播放、暫停、逐步、重設或點擊。
6. 視覺編碼：箭嘴、色帶、標籤和圖例各代表甚麼。
7. 驗收：在每個端點和中間狀態，畫面與數值應如何變化。

地球與季節的工作提示範例

製作一個繁體中文互動教材，對象是小學高年級學生。

學習成果：學生可分辨「地球公轉」「自轉軸傾斜」與季節變化的關係，
並明白季節不是由地球與太陽距離直接造成。

互動：提供 1 月、3 月、6 月、9 月、12 月控制列，亦可播放、暫停和重設。
每次切換時同步更新地球位置、軸方向、日照範圍、北半球季節及簡短解釋。

技術：使用單頁 HTML、inline SVG、CSS 和原生 JavaScript；不要載入外部資源。
加入鍵盤操作、清楚焦點、非顏色圖例及 prefers-reduced-motion。

驗收：列出五個月份的預期畫面狀態，生成後逐一自測並報告限制。

季節示意圖很容易因過度簡化而誤導。除了軸傾角，還要核對北／南半球、日照時間、太陽高度和圖中距離比例；不要讓卡通軌道暗示季節主要源於近日點與遠日點。

選擇 Pro 級模型，再確認 Canvas

Google 在 2026 年 2 月發布 3.1 Pro 時，特別展示它由文字生成網站用 animated SVG 的能力。這是能力例子，不是結果保證。若模型選單只有快速型號，也可以先做低保真原型，再用相同測試清單比較；不要因為名稱有「Pro」就跳過 QA。

五、生成後不要立即發布：先測互動狀態

第一個畫面能顯示，只代表程式成功載入。應按以下順序測試：

1. 初始狀態：預設月份、標籤、圖例和說明一致。
2. 所有端點：控制列的第一與最後值不會越界、消失或顯示上一個狀態。
3. 中間狀態：逐一測 3、6、9、12 月，不只拖到兩端。
4. 連續操作：快速來回拖動、播放後暫停、重設後再操作。
5. 鍵盤：Tab 可到達控制項，方向鍵或 Enter／Space 有合理行為，焦點看得見。
6. 窄螢幕：文字不遮住圖像，控制列不出界，沒有只能滑橫向才看得到的關鍵內容。
7. 減少動態：系統偏好減少動畫時，停用大幅移動或改為逐步切換。

每找到一個錯誤，就用「目前狀態 → 期望狀態 → 重現步驟 → 不可破壞的既有行為」要求 Canvas 修改。例如：「在 12 月狀態，北半球標籤正確但軸方向跟着軌道旋轉；請保持軸在所有月份平行，並重新測 3、6、9、12 月。」

六、重用同一個 Gem，而不是複製上一個成品

完成第一個原型後，可在同一個 Gem 開新對話，輸入另一個主題。重用的是製作規格，不是把上一個 SVG 硬改成新課題。若新任務有不同學習對象或互動邏輯，要在工作提示明確覆寫。

重用前先清理四類殘留：

• 上一課的名詞、數值、色彩和角色。
• 上一課專用公式與狀態。
• 不再適用的年級、語氣和閱讀難度。
• 上一個成品的 ID、event listener 或全域變量名稱。

如果模型總把舊內容帶入新作品，開新對話並保留同一 Gem；不要無限延長同一個 chat。Gem 提供穩定規格，新對話提供乾淨任務脈絡。

七、從多個成品看真正的驗收差異

八、打開 Code view：確認它真的是你要求的交付

Canvas 官方說明提供 Code view、console、recent changes 和選取後要求修改。若要求「SVG 動畫」，至少檢查：

• 主要教學圖是否使用 <svg viewBox="…">，而不是一張不可編輯的點陣圖。
• 控制項有唯一 ID，event listener 不會重複掛載，重設會回到完整初始狀態。
• 沒有未批准的 CDN、analytics、遠端字體、iframe、資料上傳或第三方 script。
• 沒有把 prompt、帳戶資料、API key、token 或內部網址寫進 HTML。
• 動態文字不以 innerHTML 直接插入未可信輸入；使用者文字經安全處理。
• SVG 有合適 viewBox，寬高可響應容器，文字在窄螢幕仍可讀。
• 互動元素有名稱、鍵盤行為和焦點；裝飾元素不會造成多餘讀屏噪音。
• 動畫尊重 prefers-reduced-motion，亦提供暫停／逐步方式理解內容。
• console 沒有錯誤；快速操作、視窗縮放和重設不會造成狀態不同步。

「純 SVG」和「以 SVG 為主要畫面的 HTML app」是兩個不同交付。前者通常要求單一 SVG 可獨立嵌入；後者可由 HTML 控制、CSS 和 JavaScript 包裝。開始前要寫清楚，否則模型可能交出視覺相同但部署方式完全不同的結果。

九、無障礙與教學設計：動畫不是越多越好

• 先因果，後裝飾：每段動畫都要回答「哪個變量改變，哪個結果隨之改變」。
• 可停止：循環或超過數秒的移動提供暫停、重播、逐步和重設。
• 不只靠顏色：用文字、形狀、線型或圖案區分狀態。
• 對比與字級：小標籤在投影和手機都要可讀；避免把大量文字塞進 SVG 固定座標。
• 鍵盤等價：拖動點亦要有方向鍵或數值輸入等替代操作。
• 即時回饋：顯示目前值、單位和狀態，不讓學生只靠猜。
• 避免暈動：不要無必要縮放、旋轉背景或高速視差；尊重系統減少動態設定。
• 錯誤可理解：若輸入超界，說明有效範圍，不要只把按鈕失效。

十、私隱、分享與發布安全

Google 的 Canvas 安全說明提醒，Canvas app 以公開連結分享時，要留意 app 收集和共享的資料。某些多使用者 app 的資料可能讓持有公開連結的人查看或編輯。教學原型應預設不收集資料，若必須保存進度，要另做資料流、權限、保留期和刪除機制評估。

1. 用全新測試帳戶或無登入視窗打開分享連結，確認實際公開範圍。
2. 檢查 app info、資料儲存和 Gemini 功能；不要假設「只有連結的人」等於私人。
3. 移除姓名、電郵、班別、學號、相片、prompt 歷史、API key 和內部 URL。
4. 檢查所有外部請求、下載內容和第三方授權；未知來源的 Canvas app 不輸入敏感資料。
5. 若要放到學校 LMS 或正式網站，先匯出／重建成受版本控制的程式，經測試、內容審批和安全審查再部署。

不要把公開 Canvas 連結當成正式學習系統。它適合原型、示範和協作，但身份、存取控制、數據管治、可用性和長期維護要按正式系統要求另行設計。

十一、常見問題與修正 prompt

一個有效修正 prompt 例子：

目前問題：拖動三角形頂點 B 到接近 A 時，角度顯示 NaN，重設按鈕亦失效。
期望：兩點距離少於 8px 時顯示「請把頂點分開」，保留上一個有效數值；重設恢復預設三角形。
不可破壞：三個頂點仍可用滑鼠和方向鍵移動，正常狀態內角和顯示 180°（容許四捨五入誤差）。
請先說明原因，再修改最小範圍，最後列出 6 個回歸測試並在 Canvas 自測。

十二、發布前最終清單

• 學習成果、對象、正確答案和可操作變量已由學科負責人確認。
• Gem 只保存可重用規則；沒有個人署名、學生資料、秘密或不必要品牌。
• 工作提示包含狀態、控制、視覺編碼、技術格式和驗收條件。
• 已測初始、端點、中間、快速操作、暫停、重設和錯誤狀態。
• 已用獨立方法核對公式、數值、單位、語言和因果關係。
• Code view、console、外部請求、授權和依賴已審查。
• 已測鍵盤、焦點、對比、非顏色提示、減少動態和窄螢幕。
• 沒有學生、員工、客戶或帳戶個人資料；分享範圍以無登入測試確認。
• 正式使用版本已進入版本控制，保留規格、測試結果、審批人和更新日期。
• 頁面清楚標示 AI 協助、已知限制、回報錯誤方式和最後人工審核日期。

結語：把「一句生成」改造成可重複的製作流程

自訂 Gem 的價值，是把角色、格式、安全和驗收方法保存成規格；Canvas 的價值，是讓你在同一處生成、預覽、看程式、修改和測試。Gemini 3.1 Pro 可以快速把文字變成 animated SVG 或互動網頁，但速度不能代替課程設計、事實核對和軟件測試。

最穩妥的做法是：先寫可驗收的教學規格，建立不含個人歸屬的乾淨 Gem，生成一個低風險原型，逐項測狀態和程式，再用同一套規格開新對話處理下一課。這樣得到的不是一批偶然漂亮的動畫，而是一條可審核、可重做、可交接的互動教材製作線。