你可能也試過對 AI 說：
「幫我做得高級一點。」
「加一些厲害的動畫。」
結果不是太普通，就是每個東西都在亂飛。
問題通常不是 AI 不會做，而是「高級」、「有質感」、「很酷」都不是能直接執行的動畫指令。AI 不知道你要動哪個元素、何時開始、移動多遠，也不知道成品最後要放進 React、Astro 還是 Webflow。
把這些條件講清楚，不只比較容易得到接近腦中畫面的第一版，也能減少自己反覆修改，或與外包來回確認的時間。
這篇整理 12 個常用詞，並把它們翻成可以直接放進 Prompt 的語言。它們不全是動畫技術：有些用來交代網站用途、有些指定開發環境，有些則負責動畫效果與無障礙限制。
先記住這個 Prompt 公式
【環境】＋【網站用途】＋【技術】＋【觸發方式】＋【元素／效果】＋【限制】
完整範例：
用 React 製作攝影作品集。使用 GSAP ScrollTrigger，當使用者往下捲動時，讓作品圖片產生輕微視差，標題逐字淡入；支援手機版與
prefers-reduced-motion。
使用時可以照這個順序：
- 先決定成品要放在哪個環境。
- 再選網站用途與動畫對象。
- 描述何時觸發、產生什麼效果。
- 最後補上手機版、效能與 Reduced Motion 等限制。
- 第一次只選一個主要動作，做對後再加下一個。
12 個關鍵字的快速地圖
- Portfolio：告訴 AI「我要做什麼網站」。
- React／Vue／Astro／Webflow：告訴 AI「程式最後要放在哪裡」。
- Text Animation／SVG Animation：告訴 AI「什麼東西要動」。
- Scroll Animation／UI Interactions：告訴 AI「什麼時候動、操作後怎麼回應」。
- Three.js／WebGL：告訴 AI「要使用哪一層圖形技術」。
- Reduced Motion：告訴 AI「如何照顧不適合大量動態的使用者」。
第一部分：先交代網站用途
01｜Portfolio：先說清楚你在做作品集
Portfolio 是網站用途，不是動畫技術。輸入這個詞，是在告訴 AI：網站的重點是作品、個人介紹、服務與聯絡方式，而不是購物流程或複雜後台。
它適合設計師、攝影師、接案者、創作者、個人品牌與求職作品集，也會影響頁面的資訊順序、作品呈現方式、CTA 與導覽結構。
可直接複製：
幫我製作一個攝影 Portfolio。首頁先展示代表作品，再放 About、Services 與 Contact。版面以作品為主，不要讓動畫搶走照片的注意力。
常見誤區是只輸入「Portfolio」，卻沒有說作品類型。攝影、UI 設計、建築與程式作品集，需要的版面完全不同。
第二部分：指定開發環境
02｜React：需要可重複使用的互動元件
React 適合元件化、狀態較多或互動較複雜的介面。當你輸入 React，AI 應該回傳 JSX／TSX 元件，而不是一整份只能貼進靜態頁面的 HTML。
它適合 Web App、產品介面、互動工具，以及需要重複使用的動畫元件。Prompt 裡最好補上 function component、props、動畫初始化與 cleanup。
可直接複製：
請把這個進場效果做成可重複使用的 React function component。使用 ref 指向元素，元件卸載時清除 GSAP 動畫與 ScrollTrigger，避免重複註冊。
03｜Vue：希望輸出 Vue 單檔元件
Vue 的 Single-File Component 通常把 template、script 與 style 放在同一個 .vue 檔案。指定 Vue，可以避免 AI 回傳 React 語法或無法直接放入專案的程式。
如果是 Vue／Nuxt 專案，還要補充 Vue 版本、是否使用 script setup、動畫何時 mounted，以及離開時如何清除。
可直接複製：
請使用 Vue 3 Composition API 與 script setup，做成單一 .vue 元件。元件 mounted 後啟動動畫，unmounted 時移除事件與動畫實例。
04｜Astro：內容網站只在需要時加入互動
Astro 元件預設在伺服器端或建置時轉成 HTML，不會自動把元件 JavaScript 全部送到瀏覽器。需要動畫時，要說清楚使用一般 script，或加入需要在客戶端執行的互動元件。
它適合內容網站、部落格、作品集、品牌官網與重視載入速度的頁面。Prompt 裡要指定輸出 .astro 元件、互動腳本放在哪裡，以及是否需要 client island。
可直接複製：
請做成 Astro 元件。靜態內容維持零客戶端 JavaScript；只有作品區的 ScrollTrigger 動畫在瀏覽器端初始化，並在 script 中完成設定。
05｜Webflow：需要可以貼進 Embed 的版本
Webflow 使用 Code Embed 時，通常需要可直接貼上的 HTML、style 與 script，而不是 React 專案。部分 script 效果要在預覽或發布後才會真正執行。
Prompt 裡要交代：不要輸出 html、head、body 外層標籤；並標出程式要貼進 Embed、頁面 head 或 body 結尾的哪個位置。
可直接複製：
請提供可貼進 Webflow Code Embed 的版本，只使用 HTML、CSS 與 JavaScript。不要加入 html、head、body 外層標籤，並註明 GSAP CDN 與初始化程式應放在哪裡。
第三部分：指定動畫對象
06｜Text Animation：文字要怎麼進場
Text Animation 可以再拆成逐字、逐詞、逐行、遮罩揭露、打亂重組與 stagger。只說「文字動畫」仍然太模糊，最好把拆分單位、方向、時間與順序一起說出來。
常用詞包括 character、word、line、split、reveal、mask、stagger、scramble。
它適合 Hero 標題、章節標題、數字資訊與短句。長篇正文不要每一段都做拆字動畫。
可直接複製：
將主標題按照「每一行」拆分。進入畫面時，每行從下方 32px 移到原位並淡入，間隔 80ms，使用平順的 ease-out；不要使用彈跳。
07｜SVG Animation：Logo、線條與路徑怎麼動
SVG 是向量圖形。常見動畫包括描邊出現、沿路徑移動、圖形變形與 Logo 組裝。AI 必須知道 SVG 的 path 結構，才能做出可靠效果。
常用詞包括 stroke draw、path、motion path、morph、viewBox。適合用在 Logo、圖示、地圖路徑、流程線與裝飾性線稿。
可直接複製：
讓 SVG Logo 的 path 產生手寫描邊效果。先設定 stroke-dasharray 與 stroke-dashoffset，再用 GSAP 由不可見繪製到完整；動畫結束後保持最終狀態。
第四部分：說明觸發與互動
08｜Scroll Animation：動畫跟著頁面捲動
Scroll Animation 不只代表「捲到時播放」。你可以指定元素進入視窗時觸發、固定區塊、讓進度跟著捲動，或在離開時復原。
常用詞包括 trigger、start、end、pin、scrub、parallax、reveal、snap：
- pin：把元素固定在畫面某個位置。
- scrub：動畫進度與捲動距離同步。
- parallax：不同元素以不同速度移動，產生深度感。
- reveal：元素進入指定位置時出現。
可直接複製：
使用 GSAP ScrollTrigger。當作品區頂端到達視窗 75% 時開始；圖片從 1.04 倍回到 1 倍並淡入。scrub 設為 0.8，不要 pin，手機版取消視差。
09｜UI Interactions：操作之後介面怎麼回應
UI Interactions 是使用者 hover、click、drag、focus、open 或切換頁面時的回饋。重點不是讓介面一直動，而是讓使用者知道「我碰到什麼、剛才發生什麼」。
常用詞包括 hover、click、drag、focus、menu transition、page transition、micro-interaction。適合按鈕、選單、卡片、圖片預覽、游標與頁面切換。
可直接複製：
滑鼠移到作品卡片時，圖片在 500ms 內放大到 1.03，標題向上移動 8px；游標離開後平滑回到原位。鍵盤 focus 時提供相同的可見回饋。
第五部分：選擇 3D 與圖形技術
10｜Three.js：比較容易操作的 3D 工具
Three.js 幫你處理場景、相機、燈光、材質、貼圖與 3D 物件。當你要的是產品模型、粒子場景、相機運動或 3D 空間，可以先輸入 Three.js。
Prompt 裡要補充模型格式、相機角度、燈光、滑鼠互動、載入狀態、手機降級方案與效能限制。
可直接複製：
使用 Three.js 載入 GLB 產品模型。相機保持固定，模型跟著滑鼠位置緩慢旋轉，最大角度 8 度；手機版只保留自動慢速旋轉，載入前顯示靜態封面。
11｜WebGL：更底層的 GPU 圖形技術
WebGL 是瀏覽器中的圖形 API，可透過 GPU 繪製高效能 2D 與 3D 圖形。它適合 Shader、圖片扭曲、液態轉場與大量粒子，但開發與除錯成本通常比 Three.js 高。
先問自己：如果 Three.js 或 CSS 已經能完成，就不一定需要直接寫 WebGL。
可直接複製：
使用 WebGL fragment shader 製作圖片切換。切換時產生輕微水平波紋，持續 700ms；限制 device pixel ratio，低效能裝置改用一般淡入淡出。
第六部分：不要漏掉無障礙與限制
12｜Reduced Motion：為不適合大量動態的人保留另一條路
Reduced Motion 是無障礙需求，不是風格。使用者可能在系統中設定減少動態，網站可以透過 prefers-reduced-motion 偵測，減少或替換非必要動畫。
應該優先減少大幅縮放、快速平移、長距離視差、持續旋轉與無法停止的背景動態。
不一定要刪掉所有動畫。必要的狀態回饋與理解內容所需的動畫可以保留，但幅度要更小、更直接。
可直接複製：
請支援 prefers-reduced-motion。當使用者選擇 reduce 時，停用 parallax、scrub 與大幅位移，改成 200ms 的 opacity 淡入；所有內容在沒有動畫時仍須完整可見。
六個完整 Prompt 範例
範例 1｜攝影作品集的捲動進場
使用 React 製作攝影 Portfolio。使用 GSAP ScrollTrigger，當作品圖片進入視窗 80% 時，由下方 24px 移到原位並淡入，作品之間 stagger 100ms。手機版取消位移，只保留淡入；支援 prefers-reduced-motion。
範例 2｜產品頁的文字 Hero
使用 Astro 製作產品介紹頁。將 Hero 主標題依「每一行」拆分，每行由遮罩下方 reveal，間隔 90ms。動畫只播放一次，頁面載入後 300ms 開始；不要使用彈跳或旋轉。
範例 3｜SVG Logo 描邊
使用 SVG 與 GSAP 製作 Logo 描邊動畫。依 path 順序逐段繪製，總長度 1.4 秒；描邊完成後填色淡入。動畫結束後保持完整 Logo，Reduced Motion 模式直接顯示最終狀態。
範例 4｜作品卡片 Hover
製作可貼進 Webflow Code Embed 的卡片互動。Hover 時圖片放大到 1.03、標題上移 8px、箭頭淡入；離開時以 450ms 回復。不要改變卡片尺寸，避免版面跳動。
範例 5｜3D 商品展示
使用 Three.js 載入 GLB 模型，建立柔和環境光與一盞主光。模型依滑鼠位置最多旋轉 8 度，停止操作後緩慢回正。提供 loading、錯誤狀態、手機降級與靜態圖片 fallback。
範例 6｜品牌頁的固定敘事區
使用 Vue 3 與 GSAP ScrollTrigger。當敘事區進入畫面後 pin 住標題，接下來三張圖片隨捲動依序淡入；總捲動距離為 250vh。元件卸載時清除 ScrollTrigger，手機版改成普通直向內容。
送出 Prompt 前的檢查表
- 我有說明成品要放在 React、Vue、Astro、Webflow 或一般 HTML 嗎？
- 我有說明這是 Portfolio、產品頁、活動頁或其他網站嗎？
- 我有說清楚哪個元素要動嗎？
- 我有說明動畫由載入、捲動、hover、click 還是 drag 觸發嗎？
- 我有提供方向、距離、時間、順序或 easing 嗎？
- 我有指定手機版要保留、簡化或取消哪些效果嗎？
- 我有要求 Reduced Motion 與無動畫 fallback 嗎？
- 我有要求 AI 告訴我程式放在哪裡、如何初始化與如何清除嗎？
五個最常見的錯誤
- 只寫「高級」、「炫」、「有科技感」，沒有可執行的動作。
- 一次要求十種動畫，卻沒有主次與出現順序。
- 沒有說開發環境，導致 AI 回傳錯誤格式。
- 只描述畫面，不描述觸發時機與結束狀態。
- 只顧桌面效果，沒有手機、效能與 Reduced Motion。
最後，先從一個效果開始
最有效的方式，不是一次寫出完美 Prompt。
先選一個元素、一個觸發方式與一個動作，讓 AI 做出第一版；看見結果後，再精確修改距離、速度、順序與限制。
AI 會做，但你要先知道怎麼描述。
這些關鍵字不是一次寫出完美成品的答案。它們只是讓第一版更接近需求；真正的差異，仍然來自看見結果之後的測試與修正。