動態收藏 Motion Library 是什麼？怎麼用？複製 AI 提示詞請 Claude 製作網頁動畫！教學

如果你用 AI 做過網頁，應該遇過這種情況：想讓標題有一點進場效果、按鈕碰到滑鼠時動一下，卻不知道該怎麼描述。最後只好告訴 AI「做得有質感一點」，然後等AI自己想像。

動態收藏 Motion Library 是一個可以預覽網頁動態效果、複製 AI 提示詞的網站。你可以先看效果，再把「提示詞」複製貼上自己的 AI 工具裡，補上文字、用途與製作需求。它解決的不是「幫你剪影片」，而是「幫你把想要的網頁動作說清楚」。參考：Motion Library 動態收藏 。

如果你還沒看過 動態收藏 Motion Library 這個網站，你可以看看，本篇文章也會有完整教學。

動態收藏 Motion Library 是什麼？

本篇介紹的是由 Hannah 整理的 Motion Library「動態收藏」，網址為 kittenjam-motion-library.vercel.app。截至本文撰寫時，頁面顯示收錄 327 種效果；數量後面會繼續更新。

它比較像一本可以先看畫面的動效參考目錄。你看到某個喜歡的效果，可以取得外觀與提示詞，再讓 AI 依照自己的需求實作。

Motion Library 可以拿來做什麼？

不必一開始就做整頁華麗特效。先挑一個真的需要動的地方，通常比較容易看出有沒有幫助。

例如，你可以從這幾種需求開始：

• 活動介紹頁：讓主標題依序出現，接著呈現活動資訊。
• 個人作品集：替作品圖片加上揭露或放大效果，讓重點更清楚。
• 網站按鈕：加入滑鼠移入、按下之後的視覺回饋。
• 長篇介紹頁：讓區塊在讀者捲到時出現，而不是讓所有內容全部擠在一起。

Motion Library 免費嗎？需要註冊嗎？

目前網站可直接開啟瀏覽，不需要先登入或付款才能使用。查核時的介面也提供搜尋、預覽與複製提示詞按鈕。

不過，網站的瀏覽功能和你後續使用的 AI 工具，是兩件事。你可以直接複製「動態收藏 Motion Library」網站上的提示詞，然後請 AI 工具直接製作看看。

Motion Library 怎麼用？完整操作教學

▼點擊下方連結前往「動態收藏 Motion Library」官方網站，你會看到網站上收藏了非常多動畫。

▼「動態收藏 Motion Library」網站上提供了文字輸入框，我們可以直接修改要顯示動畫的文字。另外上方也有提供各種分類可以讓我們選擇

▼選好自己要的文字動畫之後，動畫下方可以複製提示詞，複製之後就可以直接使用。

▼複製提示詞之後，我們可以直接用 AI 工具，幫我們生成 HTML 動畫，例如我個人使用的是 Claude ，將提示詞複製貼上之後，它就會幫我們製作。

▼使用 AI 工具（例如 ChatGPT / Claude）製作完 HTML 動畫之後，點擊右上角「…」按鈕就能直接下載 。

以上就是使用「Motion Library 動態收藏」的完整介紹。

科技兔有製作一隻教學影片，可以點擊下方連結觀看。

總結

Motion Library 動態收藏最實用的地方，是先讓你看到動作，再用描述把需求交給 AI。對正在做個人網站、活動頁或介面設計的人來說，它可以直接讓你知道要輸入怎樣的提示詞。有需要的人可以用用看。