Motion Prompt 實測：動畫都有名字，用自己的資料做出跳動圖表
想請 AI 做動畫卻不知道怎麼說？我用 Motion Prompt 把自己的時間紀錄做成跳動圖表，再把挑好的 9 個動畫詞存成一個連結，指令原文都附上。
⏱️ 一分鐘教你一個 AI 工具技巧｜第 21 集 · 看全系列 ›
更新時間：2026.11.11（依 2026.11 實測與網站首頁核對撰寫）
Motion Prompt 是一個動畫詞彙網站，網站列出 192 種動畫，每一種都有名字和可以複製的提示詞，想請 AI 做動畫時，可以直接用名字和提示詞交代。
這篇用我自己的資料做出一個跳動的圖表，再把挑好的 9 個動畫詞存成一個連結。以下是我 2026.11 的實際操作，你可以用同樣的做法拿自己的資料試試。第一次聽到 Motion Prompt 的話，可以先看第 20 集的介紹篇 Reel。
📱 這系列的 Reel 都在 IG｜@pinkjhs.life，下一集不漏接 立即追蹤 IG ›💡 快速摘要（TL;DR｜2026.11 實測）
- 這是什麼：Motion Prompt 是 @showheyohtaki 做的動畫詞彙網站（MIT 授權）；每個動畫都有名字、動態示意和可以複製的提示詞。
- 怎麼開始：打開網站，點一個效果，按 Copy prompt，貼給 Claude。網站另外提供「Install as a skill」的裝法，我這次沒用。
- 我做的：在提示詞後面接上我自己 10 月的時間紀錄，加兩行要求（Count-up 和 Stagger），做出總時數跳到 175.3 h、10 根長條由左到右升起的動畫。
- 存起來：9 個詞各按一次 Pick，再按 Copy link，得到一個連結；下次點開，這 9 個已經選好。連結只記住選了哪幾個。
- 試過的環境：Claude（Sonnet 5.5）；其他 AI 沒試。
✍️ 真人實測宣告
本文根據作者 2026.11 的操作錄影與截圖撰寫，示範資料是作者自己 10 月的時間紀錄；截圖裡網站自己的範例數字（例如 2,283）不是實測。作者只用 Claude 試過，其他 AI 沒試。
📑 快速導覽目錄
- 🧩 ① 怎麼開始：開網站，點效果，Copy prompt
- 📋 ② 指令懶人包：2 段直接複製
- ✨ ③ 效果展示：我的資料跳上去，9 個詞存成一個連結
- ❓ 常見問題 FAQ
- ⏱️ 一分鐘版
- 💡 結語：先挑名字，再交代資料
🧩 ① 怎麼開始：開網站，點效果，Copy prompt
這個網站不用安裝，打開就能用，網址是 showheyohtaki.github.io/motion-prompt。網站右上角有 JA、EN 兩種介面可以切換（見 FAQ 第 2 題）。
第 1 步：打開網站，點一個效果
首頁第一屏是標題和安裝說明，往下是一整面效果卡片，每張卡片有編號、英文名和日文名，右上角有一顆 Pick 鈕。我這次先點的是 Count-up（#007），因為我想讓一個數字跳上去。
圖說：網站首頁的效果卡片，每張有編號、英文名與日文名，右上角是 Pick 鈕。卡片上的 548 是網站的範例數字，不是我的資料。
第 2 步：按 Copy prompt
點進卡片會跳出詳細頁，右邊紅色的按鈕就是 Copy prompt，按下去，整段提示詞就複製好了。詳細頁上還有 Copy code、View code 和一個 Pick 勾選框，這次我只用到 Copy prompt 和 Pick。
圖說：Count-up（#007）的詳細頁，右邊紅色按鈕是 Copy prompt。畫面上的 2,283、1,280 是網站的範例數字，不是我的資料。
第 3 步：貼給 Claude
把複製好的提示詞貼進 Claude 的對話框，在後面接上自己的要求和資料（下一章有我貼的原文）。複製出來的提示詞是英文的，結尾有一句 Keep the shapes, timing and easing values of the reference implementation as they are, and change only the text, colours and assets to fit what I am making.，意思是參考實作的形狀、時間和緩動照原樣保留，只換成我要做的文字、顏色和素材，所以我們要補的就是「換成什麼」。我只用 Claude 試過，其他 AI 沒試。
網站另外提供的裝法
網站首頁還有一塊「Install as a skill」，給的指令是 npx skills add showheyohtaki/motion-prompt。這個裝法我這次沒用，沒有實測，所以不寫步驟（見 FAQ 第 4 題）。
怎麼確認成功：貼給 Claude 之後，它做出一個會動的畫面，數字真的往上跳，就是成功了，成果見 ③ 效果展示。
📋 ② 指令懶人包：2 段直接複製
指令 1 貼在 Claude 的對話框，指令 2 是一個網址，貼在瀏覽器的網址列。把【 】換成自己的內容。
指令 1：接在 Copy prompt 後面的要求
先貼上網站的 Copy prompt，再把下面這幾段接在後面。這是我實際貼的，原文照放：
用 Count-up，把下面的總時數從 0 跳到 175.3，1.5 秒，最後慢慢停下來，標籤寫「已分類的活動時數（不含睡眠）」。
再用 Stagger 讓下面 10 個 Tag 的長條由左到右依序升起，每根間隔 0.08 秒。
做成一個 HTML，用 Canvas 2D，畫面只依時間決定。
資料（單位：小時）：「資料」後面我接的是 10 個 Tag 的時數，每個 Tag 是「名稱 數字」，中間用斜線隔開。這兩行要求的分工是：Count-up 管上面那個大數字，Stagger 管下面那排長條，兩個動畫詞一起交代。
換成你自己的資料，可以這樣改：
用 Count-up，把下面的總數從 0 跳到【你的總數】，1.5 秒，最後慢慢停下來，標籤寫「【你的標籤】」。
再用 Stagger 讓下面【幾】個【項目】的長條由左到右依序升起，每根間隔 0.08 秒。
做成一個 HTML，用 Canvas 2D，畫面只依時間決定。
資料（單位：【你的單位】）：【項目一】 【數字】 / 【項目二】 【數字】 / 【項目三】 【數字】指令 2：把挑好的詞存成連結
在網站每個想留的效果按 Pick，頁面下方會出現已選清單，按 Copy link to this selection 就會複製一個連結。我挑的 9 個詞，連結長這樣，直接貼進瀏覽器就能打開：
https://showheyohtaki.github.io/motion-prompt/?pick=002,125,126,001,006,007,003,005,123按下 Pick 之後，卡片外框會變紅、右上角變成 Picked。下面這張只是示範選取狀態，卡片不是我挑的那 9 個。
圖說：按下 Pick 後，卡片外框變紅、右上角變成 Picked。這張是示範選取狀態，卡片不是我挑的那 9 個。
按 Copy link to this selection 之後得到的連結，pick= 後面是 9 個編號，順序跟我按 Pick 的順序一樣：
圖說：Copy link 得到的連結，pick= 後面是我選的 9 個詞的編號。
✨ ③ 效果展示：我的資料跳上去，9 個詞存成一個連結
我的資料：總時數跳上去，10 根長條依序升起
我把自己 2026 年 10 月的時間紀錄貼進去，加上指令 1 那兩行要求。Claude 做出來的畫面是：上面的大數字從 0 一路跳到 175.3 h，下面 10 根長條由左到右依序升起。1.5 秒和 0.08 秒都是我在指令裡寫的，我沒有另外量過畫面實際花多久。
圖說：Claude 做出來的畫面，擷自我的螢幕錄影，資料是我 2026.10 的時間紀錄。長條下方的名稱列已裁掉。
我挑的 9 個動畫詞
下面是我按 Pick 挑的 9 個詞，白話是我照網站每個效果的說明整理的。這 9 個只是我自己挑的，網站其他的詞我沒有逐一試。
| 順序 | 名稱 | 白話 |
|---|---|---|
| 01 | Stagger | 一個接一個出現 |
| 02 | Pulse | 像心跳一樣一縮一放 |
| 03 | Motion path | 沿著路線移動 |
| 04 | Pop-in | 彈一下跳出來 |
| 05 | Typewriter | 一個字一個字打出來 |
| 06 | Count-up | 數字往上跳 |
| 07 | Burst | 往四周迸開 |
| 08 | Mask reveal | 從邊線後面升起來 |
| 09 | Bounce | 掉下來越彈越低 |
打開連結：9 個都選好了
把指令 2 的連結貼進瀏覽器打開，頁面下方的選取列直接寫著 9 picked，Stagger、Pulse、Motion path 到 Bounce 依序排好，不用再一個一個重選。
圖說：打開連結後，選取列顯示 9 picked，按我按 Pick 的順序排好。
❓ 常見問題 FAQ
網站要錢嗎？
網站首頁標示的授權是 MIT。價格的部分，我看到的首頁資訊沒有寫，所以這篇不回答要不要付費。
看不懂英文或日文怎麼辦？
網站本身只有 EN 和 JA 兩種介面，右上角可以切換，沒有中文介面。我有用瀏覽器內建的翻譯看過中文版面。複製出來的提示詞是英文，貼給 Claude 的時候我沒有改，只在後面加上我的中文要求。
Pick 連結會記住什麼？
我實測看到的是：連結網址裡 pick= 後面只有編號（我的是 002,125,126,001,006,007,003,005,123），打開之後網站依這些編號把對應的詞標成已選，順序跟我按 Pick 的順序一樣。它記的是選了哪幾個，連結裡沒有我的資料，也沒有我寫的指令。選取列另有一個選填的備註欄，我沒用。
Skill 的裝法我可以用嗎？
網站首頁有「Install as a skill」，給的指令是 npx skills add showheyohtaki/motion-prompt，旁邊寫裝好之後對 AI 說 open the motion-prompt library，就會開出圖庫。這個裝法我這次沒用，沒有實測，所以不寫步驟，也不保證在你的環境能跑。這篇全程用的是複製提示詞貼給 Claude。
一定要用 Claude 嗎？
我是用 Claude，輸入框右下角寫的是 Sonnet 5.5。其他 AI 我沒試過，不寫。我是把網站的提示詞整段貼進去，在後面接上我的要求和資料。
長條上的數字為什麼一直在變？
我看到的是：長條升起的過程中，上面的數字會先顯示中間值，最後才停在我貼的數字。我的指令裡沒有要求它這樣做，所以不確定能不能關掉，要不要它只顯示最後的數字，可以自己在指令裡加一句試試，我沒試。
做出來的是影片檔嗎？
不是。我請它做成一個 HTML（指令的第三行），看到的是網頁上的動畫。我是用螢幕錄影把它錄下來，才放進 Reel；你要放進影片或貼文，也得自己錄。
⏱️ 一分鐘版
一分鐘看怎麼用自己的資料做出跳動圖表，再用 Pick 一次挑好 9 個動畫詞、存成一個連結。
【待補：Reel 嵌入，發布後補】
⏱️ 本系列「一分鐘教你一個 AI 工具技巧」
- 前導集：Claude Chat 跟 Cowork 合併了
- 第 1 集：IG 貼文圖字體一致性
- 第 2 集：Reels 加動畫實測：Claude 六輪改稿，全用講的
- 第 3 集：Claude Code 必裝 3 個 MCP
- 第 4 集：複製自己的聲音
- 第 5 集：一支 Reel 背後用了 5 個 AI 工具（整理在 AI 工作流入口頁）
- 第 6 集：Claude 必裝 3 個 Skill
- 第 7 集：Claude 模型怎麼選最省
- 第 8 集：讓網頁變好看的 2 個 Skill
- 第 9 集：生日月優惠信一次整理
- 第 10 集：Claude 儀表板
- 第 11 集：Claude 寫 Python 畫 Reels 動畫
- 第 12 集：信用卡帳單整理成一張表
- 第 14 集：Archify 自動畫系統架構圖
- 第 15 集：DESIGN.md 把網頁換成 Airbnb、Spotify、Nike 風
- 第 16 集：Graphify 讓 Claude 讀完專案畫出一張知識圖
- 第 17 集：Claude 聊很長，先存這 3 招內建指令
- 第 18 集：Diagram Design 一句話畫圖實測
- 第 19 集：Claude 改程式，先存這 3 招：/plan、/verify、/rewind
- 第 21 集：Motion Prompt 用自己的資料做跳動圖表（本篇）
👉 看全系列
💡 結語：先挑名字，再交代資料
整件事只有三步：開網站點一個效果、按 Copy prompt 貼給 Claude 並接上自己的資料和要求，最後把挑好的詞按 Pick 存成連結。下次想做動畫，打開連結，挑好的詞都在。
Motion Prompt by @showheyohtaki（MIT）
遇到這類問題，問 AI 就對了。
這個系列每一集的完整整理，都收在 AI 工作流入口頁。
💡 延伸閱讀：
👉 Opus 5.5 加動畫實測：Claude 寫 Python 畫 Reels 動畫
👉 系統圖不用自己拉框框｜Diagram Design 一句話畫圖實測
