讓 AI 看懂動態：Motion Prompt 視覺提示詞教學

30 秒看重點

數量及分類依官方目錄；五欄需求與三組練習為 TempEDU 教學整理。[2]

語言怎麼選

圖庫介面與複製提示詞目前以日文、英文提供；GitHub 的部分分類已有繁體中文名稱對照，可先看 動態手法繁中清單。有繁中對照，不代表整個網站與所有規格都已完成繁中化。[8]

請根據我貼上的 Motion Prompt 參考內容，協助我寫出可執行的製作需求。
來源：https://showheyohtaki.github.io/motion-prompt/

請先整理五個欄位：
1. 用途與交付形式。
2. 要改變的文字、物件或介面區塊。
3. 效果名稱、編號與可對照的描述。
4. 開始時間、持續時間、方向、幅度或觸發條件。
5. 必須保留的尺寸、文字、配色與其他限制。

若我另外指定的時間或尺寸與範例不同，以我的需求為準，並列出調整處。
請清楚區分來源已寫明的內容與你的建議，不要把猜測當成原始規格。
若無法讀取網址，請告訴我需要補貼哪一段；先不要假裝已讀取。
完成後先給一份簡短製作規格，再依我使用的工具提出下一步。

我的作品需求：〔填入用途、主題與預計使用的工具〕
我複製的 Motion Prompt 內容：〔貼在這裡〕

複製後，有一件事要檢查

單項原始提示詞可能要求保留參考程式的時序與幅度。你若要改成自己的影片長度，記得明確寫「以下需求優先，請調整參數」，讓 AI 知道哪些可以改。本文三組練習都採這個寫法。

請製作一個可在瀏覽器播放的 5 秒課程片頭，交付完整 HTML、CSS 與必要的 JavaScript，並提供重播按鈕。

參考：Motion Prompt #005 Mask reveal
範例：https://showheyohtaki.github.io/motion-prompt/#005
規格與參考碼：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/005.txt

請採用文字從遮罩邊界後方浮現的手法。以下時間與畫面需求優先於原範例，請列出調整處：
・畫面比例 16:9，參考尺寸 1920×1080，能等比例縮放。
・標題固定為「讓 AI 成為你的工作助理」。
・副標固定為「從一項重複工作開始」。
・深藍背景、白色主標、淺藍副標；繁體中文。
・第 0.2 秒開始，主標在 0.8 秒內由下往上揭露。
・副標在第 1.1 秒出現；完整文字至少保留到第 4.2 秒。
・最後 0.8 秒平順淡出，總長 5 秒。
・揭露過程使用遮罩；完整顯示時文字不得超出畫面或被邊界裁切，不可變形，四周保留安全邊距。
・重播按鈕放在動畫畫布外；減少動態效果模式改為直接顯示完整標題。

先列出時間表，再提供實作。若環境能預覽，請實際檢查；若不能，請列出我應如何驗收。

怎麼驗收

先關掉聲音看一次：標題能否完整讀完？副標是否過早離開？把畫面縮到手機寬度後，文字有沒有碰到邊緣？需要修改時，一次只改一個條件。

請製作一個繁體中文課程介紹頁的獨立 HTML 預覽，主題為「企業 AI 工作術」。內容請標示為示範，費用、日期與報名網址保留待填，不要虛構。

參考兩種效果：
1. Motion Prompt #074 Fade-in on scroll
   https://showheyohtaki.github.io/motion-prompt/#074
2. Motion Prompt #052 Accordion
   https://showheyohtaki.github.io/motion-prompt/#052

以下是本次需求，時間及幅度可與原範例不同：
・包含課程介紹、學習重點、適合對象、常見問題、報名資訊。
・課程內容區塊第一次進入視窗時，由下方 24px 平順淡入，持續 0.6 秒，只播放一次。
・常見問題用可操作的摺疊區塊，支援鍵盤，能辨識目前展開狀態。
・報名資訊直接顯示，閱讀不應依賴看完動畫。
・白底、藍色重點、充足留白；手機上不得橫向溢出。
・尊重 prefers-reduced-motion；選擇減少動態效果時，直接顯示內容。
・JavaScript 無法執行時，重要文字仍應可閱讀。
・請交付實際可操作的網頁元件，並檢查按鈕與鍵盤操作。

請先說明結構，再交付完整程式與驗收方式。這次只建立預覽檔，不部署到正式網站。

參考畫面與正式元件的差別

官方範例用 Canvas 2D 展示視覺，真正的網頁還需要文字結構、點擊、鍵盤與狀態管理。減少動態效果可透過使用者偏好設定配合實作；本文把它列為製作需求，方便在驗收時一起檢查。[8] [10]

請替一支咖啡杯產品短片撰寫鏡頭提示詞，提供繁體中文與英文兩版。

參考：Motion Prompt #027 Dolly in
https://showheyohtaki.github.io/motion-prompt/#027

本次目標：
・6 秒、16:9 的單一連續鏡頭。
・白色陶瓷咖啡杯放在木桌中央，背景是柔和的咖啡館環境。
・攝影機緩慢、平順地向杯子移動，從包含桌面的中景靠近到杯身特寫。
・使用向前移動機位的運鏡，維持焦距；讓前後景的相對關係自然改變。
・杯子位置、把手方向與外型保持一致，無新增標誌或文字。
・自然柔光，不旋轉、不突然加速、不加入額外切鏡。

上述秒數與場景是我的設定，不必照搬原範例。
請先用一句話確認鏡頭移動方式，再給精簡提示詞，最後列出三項審片重點。
若工具有秒數或畫面比例限制，請指出可行替代設定，不要宣稱一定能精準遵循。

判斷結果時看什麼

觀察杯子是否變形、把手是否改方向，以及背景與主體的相對位置是否合理。把失敗描述成可觀察的問題，例如「第 3 秒杯口變形」，比再加一串風格形容詞更容易修改。

npx skills add showheyohtaki/motion-prompt

請開啟 motion-prompt 圖庫，先顯示適合影片片頭的範例，讓我挑選。
請等待我選好並送回參考，再根據我提供的文字、尺寸與時間製作。
如果目前環境沒有安裝這個技能，或不能建立選項接收流程，請說明限制，改告訴我如何使用 Copy picks 手動貼回。

什麼時候值得安裝

經常讓 AI 編輯網頁、影片專案，或每次都要挑選多個效果的人，可以考慮技能流程。偶爾找一次靈感、寫一段分鏡或與設計師溝通，直接使用圖庫就能開始。

延伸學習

想把視覺想法變成完整的製作需求，可以接著練習腳本與任務交辦：

• AI 短影音企劃實戰：做出可拍攝的 30 秒腳本與分鏡
• 提示詞技巧：從提問到任務交辦的 AI 協作指南

也可以搭配閱讀：AI 剪旅遊影片：用 Claude、Codex 整理素材與製作短片

前往課程清單

本文重點

1. 先看視覺範例、認出效果名稱，再把需求交給 AI。
2. 免安裝可用複製提示詞；技能接收流程適合經常製作專案的人。
3. 用途、主體、效果、時間幅度與保留條件，讓需求更容易驗收。
4. 作品品質仍要靠你判斷可讀性、動作合理性與使用情境。

想一想

下一次想對 AI 說「再有質感一點」時，你能否改成一個效果名稱，再補上一個可以檢查的條件？

資料來源

1. Motion Prompt 官方網站：動態圖庫、單項詳情與複製操作：網站。
2. 官方即時目錄：本文查核版本 1.495bd9fdec，168 項、7 類：catalog.json。
3. 官方 motion 分類：Mask reveal 等動態手法：英文名稱清單 · 005 規格與參考碼。
4. 官方 lp 分類：Fade-in on scroll 等網頁效果：網頁效果清單。
5. 官方 ui 分類：Accordion 等介面元件：UI 元件清單。
6. 官方 camera 分類：Dolly in 與 Zoom in：運鏡與轉場清單。
7. 作者 GitHub README：使用方式、技能安裝與環境需求：使用方式 · 技能說明。
8. 官方格式及語言文件：Canvas 2D、語言供應範圍：FORMAT.md · 動態手法繁中清單。
9. 專案授權與第三方內容的範圍：MIT License · 第三方聲明。
10. MDN Web Docs：prefers-reduced-motion 使用者偏好：技術說明。

資料與介面查核日期：2026 年 10 月 28 日。功能與數量可能隨專案更新；本文情境提示詞及圖解為 TempEDU 教學整理，封面為 AI 生成概念圖。