AI 吉祥物動畫教學：用角色設定與狀態提示詞，做出會回應操作的品牌角色
AI 吉祥物動畫教學從角色個性、表情表到待機、成功與錯誤狀態，提供可修改的提示詞與檢查方法。以 X 原作者的 ChatGPT 與 Claude 工作流為起點，說明如何保留品牌外觀、處理動作中斷，並在手機與減少動態模式下驗收。
AI 吉祥物動畫教學可以先從產品裡一個很小的時刻開始。使用者完成任務時，一個短暫的表情，就能讓原本普通的成功訊息更有個性。
但一直跳動的角色，也會讓讀取和錯誤畫面更難使用。當角色搶走注意力，使用者反而看不到下一個操作，動畫就失去原本的用途。
César Álvarez 在 X 原始教學 分享，先設定角色，再用 ChatGPT 協助產出形象，接著讓 Claude 把動作做成能放進產品的程式。重點是角色能回應狀態，而不只是一張會動的插畫。
這適合想建立品牌辨識的小團隊，先從待機與成功兩種動作起步。本文以自行撰寫的範例示範需求怎麼說明，並沒有宣稱生成角色一定能提升留存或轉換。
在挑顏色之前，要先決定角色在產品裡做什麼，後面的造型與動作才會有共同方向。
AI 吉祥物動畫先定義什麼？讓角色有一份清楚的情緒工作
角色先負責一種明確的情緒，例如陪伴、鼓勵或解釋，才容易形成一致的個性。若同時要求它可愛、專業、搞笑又有威嚴，工具就必須自行決定哪些特質應該出現。
可以先寫下產品做什麼，再找一種能讓人快速聯想到用途的物件。記帳產品可能用收納盒，閱讀產品可能用書籤，這些只是設計方向，不代表物件本身就能建立品牌。
接著定義角色遇到不同事件時的態度。任務成功時是安靜點頭，還是興奮歡呼？使用者尚未開始時是耐心等待，還是給一個小提示？這些決定比眼睛要多大更早影響動作。
把個性寫成能觀察的行為
「溫暖」很難直接驗收，可以改成「成功時短暫抬頭微笑，之後回到原來位置」。這樣美術與動畫都知道要做什麼，也能看出結果是不是太誇張。
同樣地，「有精神」可以落在站姿與反應速度，不必等於整個角色不停彈跳。當動作的起因來自使用者操作，觀眾比較容易理解它為什麼出現。
先寫一段簡短的人物設定，固定物種或物件、身體輪廓、主色、表情習慣與最重要的一個特徵。之後每次改圖，都把這段帶回來，而不是憑印象重新描述。
這個階段也可以列出不適合的情緒。例如錯誤畫面中的角色可以表示困惑，但不應責怪使用者；等待時可以安靜陪伴，但不需要用生氣的表情催促操作。
人物設定清楚後，再建立一張能比較的表情表。否則每次都單獨生成一張漂亮圖，很容易累積成五個彼此相似、卻不是同一個的角色。
用角色表固定外觀：先看剪影，再看表情與小尺寸
第一版造型應在小尺寸下仍能辨識，因此輪廓與色塊比細碎裝飾重要。原作者也強調簡單外觀與明確個性，因為這些特徵比較容易在後續動作中維持。
先做正面站姿，再做相同大小的中性、開心、思考與困惑表情。把所有版本排在同一頁，檢查眼睛距離、身體比例與標誌性物件是否一致。
以下是本站自行撰寫的生圖需求範例，應換成自己的品牌設定。它是設計起點，並不是對工具產出品質的保證。
請設計一個用於［產品用途］的原創吉祥物。
角色是［物件或動物］，個性是［一種情緒任務］。
固定特徵：［輪廓］、［兩至三種主色］、［一個辨識物件］。
先做一張角色表：正面中性、開心、思考、困惑，各格身體比例相同。
風格使用清楚色塊與簡單輪廓，放到小尺寸仍要能分辨表情。
請保留平整背景，方便我檢查邊緣。先不要加入產品介面或文字。
透明背景不是角色品質的終點
如果需要透明背景，要查看實際輸出的透明資訊，而不是只看起來像棋盤格。把圖片分別放在淺色與深色底上，能看出白邊、殘留陰影和被誤刪的細節。
但透明圖只能解決放置問題，無法自動把角色變成可控制的動畫。若想讓眼睛、手臂與身體分別動，還需要拆成圖層或重新建立可調整的圖形結構。
對簡單角色，可以考慮使用 SVG。依 MDN 的 SVG 文件，這種向量圖形以形狀與座標描述畫面，適合縮放，也能把不同部位分別處理。
選擇圖層、向量或其他方式時，先看接下來要做的動作。只需要輕微呼吸，可以整體縮放；需要手臂揮動，就要讓手臂有自己的位置和旋轉中心，不能等動畫完成才想起這個需求。
造型確認後，把批准的角色表留下，再進入動作設計。這份表會成為每個狀態共同的外觀依據。
用狀態提示詞安排動作：待機、成功與錯誤各做一件事
把動畫分成狀態，角色就能跟著產品事件回應。狀態是產品當下正在發生的事情，例如等待輸入、正在處理、操作成功或需要重試，每一種都應有不同但相容的表現。
待機只需要很小的動作，成功可以短暫放大反應，錯誤則應把注意力留給說明文字。這樣使用者就算不看角色，也不會失去操作資訊。
可以先用下面的動作表作為第一輪需求，再依產品調整。表裡的動作是本站設計起點，應透過實際預覽決定是否合適。
| 狀態 | 動作目的 | 第一版動作範例 |
|---|---|---|
| 待機 | 讓角色像在場 | 輕微呼吸，偶爾眨眼 |
| 處理中 | 表示任務仍在進行 | 看向任務區域，動作幅度小 |
| 成功 | 讓操作得到回應 | 一次短促點頭，再回待機 |
| 錯誤 | 保持友善並讓出注意力 | 皺眉或歪頭，停止大幅移動 |
表裡最重要的是每種狀態的工作不同。若所有狀態都用同一種跳躍，角色雖然很熱鬧，使用者卻無法從動作分辨結果。
提示詞要寫起點、過程與結束位置
只寫「開心地跳一下」會留下很多選擇，像是跳多高、在空中多久、落地後是否回到原位。把這些寫清楚，工具才知道要讓哪些東西保持固定。
請依已批准角色表，製作「成功」狀態。
起點：角色維持原本大小、位置與面向。
過程：收到成功事件後抬頭微笑，身體做一次小幅上提，落回原位。
結束：表情逐漸回到中性，再接回待機。全程保留原來輪廓與配色。
先提供可預覽版本與調整入口，讓我能修改速度和幅度。
同時提供不播放移動、只改表情的版本。
先把兩個狀態做好，再增加第三個。因為真正需要驗收的不只是單段動作，還包括它們如何切換，狀態愈多，可能出現的交接也愈多。
延伸閱讀：Claude 動畫提示詞怎麼寫？拆解 UI 變形、節奏與無縫循環
當每段動作都有清楚的起點與落點，下一步就能檢查使用者突然改變操作時，角色會不會跳到奇怪的位置。
動作突然被打斷怎麼辦？把切換規則與產品事件一起驗收
角色必須接受操作可能比動畫更快結束，因此中斷規則應和動作一起設計。使用者按下取消時，不該為了等角色跳完，才讓介面恢復可用。
先讓「正在處理」切到「成功」，再測「正在處理」切到「錯誤」，觀察位置、大小與表情是否平順。若每段都從自己的預設位置起跑，切換時就可能突然瞬移。
可以要求所有狀態共用同一個外框與基準點。基準點就是角色在畫面中固定對齊的位置，像是腳底或身體中心，這樣每次變換表情時比較不會連整張圖一起晃動。
減少動態模式要保留什麼？
少動一點仍然需要傳達結果，因此可以用表情、色塊或文字回應操作。MDN 的 prefers-reduced-motion 說明 提供偵測使用者減少動態偏好的方式，實際支援應在產品環境中測試。
這不是把所有回應關掉，而是把大幅位移、縮放或持續循環改成更安靜的呈現。成功訊息仍要清楚，錯誤原因也仍要完整，不能只有角色不動之後，整個頁面就看不出發生什麼。
如果角色旁邊有可按的重試按鈕，讓按鈕保持穩定位置。角色移動可以服務情緒，但按鈕跟著跳動會讓人難以點選，尤其在手機上更容易造成困擾。
若頁面會同時顯示多個角色，也要檢查整體干擾程度。單一動作看起來很溫和，不代表五個區塊同時呼吸、眨眼和搖晃仍然舒服。
這些測試過後，才適合讓角色出現在更多場景，因為同一個中斷問題若被複製到每個頁面，之後會更難逐一修正。
吉祥物動畫怎麼交付？保留角色來源、可調參數與狀態對照
交付要讓其他人知道什麼事件會觸發什麼動作，而不只拿到一個漂亮預覽。這樣工程、設計與內容團隊才能沿用同一個角色，而不必每次重新猜測個性。
把角色表、原始圖層或向量檔、動畫程式與狀態清單放在一起。再記下可調整的幅度、速度與循環方式，讓後續改動有清楚入口，不會改一個參數卻影響全部動作。
產品截圖也應保留一份，標出角色在不同螢幕大小的位置。尤其要看小螢幕時角色是否擋住表單、訊息或操作，避免桌面預覽正常，手機卻沒有足夠空間。
常見失敗要從哪裡修？
角色每次看起來不一樣，先回到造型表找差異。動作太飄，先調整上升與落地的時間。成功後一直重播，先修觸發條件，而不是重新設計角色。
如果所有問題都用「再可愛一點」回饋，工具可能一次改眼睛、比例和節奏，原本已確認的品牌辨識也會消失。因此，指明一個看得見的問題，通常比同時改整體感覺更容易保留成果。
最後請第一次接觸產品的人完成一個操作，觀察他是否理解結果，角色是否讓流程更好跟。這個測試能驗證當下體驗，若要評估長期留存，還需要另外設計觀察，不能靠喜歡角色的留言推論。
可以先把角色放在一個成功畫面，確認它既能被辨識，也不擋住下一步，再逐步擴充到等待與空白狀態。這樣每增加一個動作，都有明確的產品用途可以檢查。
練習一個「儲存成功」狀態：讓角色回應事件，不搶走操作
可以把第一個角色動畫放在儲存完成的時刻，因為成功事件有清楚的觸發點。以下是本站設計的產品情境，目標是說明怎麼寫需求，沒有聲稱任何真實產品已採用這套設定。
畫面原本有一個穩定的儲存按鈕，角色在旁邊待機。使用者按下後，介面先顯示正在處理，等真正收到儲存成功的結果，角色才微笑點頭，旁邊文字顯示已完成。
這個順序很重要，因為按下按鈕不等於資料已存好。如果角色在請求還沒完成時就慶祝，使用者可能誤以為可以離開，後續失敗也會讓情緒和實際狀態矛盾。
因此，需求裡要把「點擊」與「成功回應」分成兩件事。動畫只接成功事件，處理中的狀態維持安靜，若失敗則讓角色回到困惑表情，同時保留明確的重試文字。
連續點擊時，角色應該怎麼反應？
讓測試者快速按幾次，觀察角色會不會把同一段動作疊在一起。若身體不斷變大或位置逐次偏移，表示動作沒有從共同狀態計算，需要先處理觸發與重置。
可以要求成功動作每次只播放一次，結束後回到待機。如果新的事件在上一段還沒結束時到來，先決定是重新開始、接續完成，還是忽略重複事件，不要讓工具自行選擇。
再測一次從成功立刻切到下一個任務，確認角色不會停在半空。這能看出狀態之間是否共用相同基準點，也能發現表情和身體是否被不同時間控制。
不看角色，也要知道結果
把角色暫時隱藏，確認成功文字與下一步仍然清楚。這個測試能避免團隊把必要資訊全部藏進表情，讓看不出表情或不喜歡動態的使用者失去操作依據。
最後改用小螢幕，檢查角色是否擋住儲存按鈕，並測試減少動態版本。若靜態表情也能讓人理解狀態，動畫就有了可以退回的簡單方案。
把這個事件對照表和角色表一起交付，接手的人就能知道動作是收到哪個產品結果才播放。之後增加其他頁面時，也能沿用同一個事件邏輯，而不是只複製一段會跳的圖。
延伸閱讀：Rive CLI 教學：讓 AI 做可互動動畫，從預覽、版本管理到網站驗收
AI 吉祥物動畫 FAQ
可以直接參考知名品牌吉祥物嗎？
可以分析它如何表達情緒，但不要把他人的角色換色就當作自己的原創。設計需求應回到自己的產品用途、輪廓與個性，素材使用也需確認相應權利。
一定要輸出影片嗎？
不一定。需要回應產品事件時，程式或可互動動畫通常更方便控制。若只做社群展示，可以另外輸出影片，但仍保留原始專案方便修改。
為什麼要先做兩個狀態？
因為兩段動作的交接，比單段看起來順更接近真實使用。先確認待機與成功之間切得回去，再增加其他狀態，較容易找到問題來源。
