設計工具收藏：9 個幫介面加分的動效、素材與元件工具
最近看到幾個滿酷的工具，從 UI 動效、音效、玻璃材質，到漸層背景和介面元件都有。先收在一起，之後做網站或產品時可以回來找。
先看你需要什麼
| 工具 | 能做什麼 | 費用與授權 |
|---|---|---|
| Libraries.dev | 邊框光效、液態金屬、AI 等待動畫 | 基礎套件免費、MIT；進階 Studio 付費 |
| UI SFX | 操作、成功、錯誤與處理中的音效 | 音效 CC0、程式碼 MIT |
| Liquid Glass | 玻璃折射、模糊與邊緣高光 | 開源、MIT |
| DialKit | 用控制面板即時調整樣式與動畫 | 可透過 npm 安裝；授權見官方 GitHub |
| ShaderGradient | 自訂會流動的 3D 漸層背景 | 開源、MIT |
| Motion Primitives | 把動效元件加進 React 介面 | 核心專案開源、MIT |
| Grainient | 漸層、顆粒與動態背景素材 | 有免費素材；完整收藏付費，依方案授權 |
| UImaxxing | 產品介面、控制項與動態展示元件 | 作者允許免費使用與修改；勿重新發布整套 |
| 21st.dev | 找多位作者的 UI 元件與模板 | 免費瀏覽、複製有額度；部分內容付費，授權依項目 |
1. Libraries.dev｜幫介面加一點動態
Beam、Orb、Gooey、Metal 和 Image 的效果總覽。先挑需要的效果，再進 playground 調整。 官網截圖與示範
這個網站把幾種滿難自己做的效果包成 React 元件，可以先預覽，再調整成適合產品的樣子。官網
我覺得方便的地方是 Copy prompt。它會把安裝方式、用法與參數一起整理好，貼給 Codex、Claude Code 或 Cursor，就能請它幫忙接進專案。使用方式
基本上需要 React 18 以上；Image 另外需要 three。想調更細，可以用付費的 Studio，即時預覽後匯出設定。
2. UI SFX｜幫操作補上聲音回饋
同一個操作可以換成 12 種聲音風格；先試聽，再決定產品適合哪一種。 官網截圖與示範
UI SFX 整理了 78 種介面事件、12 種聲音風格，共 936 個音效。可以先選「成功」「錯誤」「放下」這類動作，再挑適合產品的聲音個性。
| 使用情境 | 可以找的音效 |
|---|---|
| 送出成功、任務完成 | success／complete |
| 發生錯誤 | error |
| 拖曳後放下 | drop |
| 等待處理 | processing，循環音效要在處理結束時停止 |
它也有商店、聊天、工作流等互動範例，可以直接聽聲音放進操作裡的感覺。這點滿實用，畢竟單獨聽好聽，連續操作時不一定舒服。
要接進網頁可以安裝 npm 套件 uisfx，用事件名稱播放，再切換整套聲音風格。GitHub 與用法
3. Liquid Glass｜把玻璃質感放進網頁
左側調整鏡片尺寸，右側調整折射、色散與邊緣高光，中間直接看結果。 官網截圖與示範
Liquid Glass 是一套 React 玻璃效果元件。除了模糊，還能讓後面的內容產生折射、放大和邊緣色散，看起來像隔著一塊有厚度的玻璃。
可以用在浮動導覽列、通知卡片、開關或滑桿。它提供折射強度、霧化程度、邊緣高光等參數，安裝 @samasante/liquid-glass 後，再把效果接進自己的元件。
有一點要注意：直接折射背後網頁的模式主要支援 Chrome／Edge。Safari、Firefox 要做到折射，需要另外提供要被折射的內容副本；單純包上去會保留霧面、色調與邊緣亮光。官方文件
我會拿它做局部的玻璃細節，尤其是會浮在內容上面的控制項。
4. DialKit｜直接拖拉，調出想要的感覺
Photo Stack 範例：照片位置、縮放、透明度和陰影都能在右側面板調整。 官網截圖與示範
DialKit 可以替正在開發的網頁加一個控制面板，拖拉滑桿就能即時調圓角、間距、顏色、陰影，還有動畫的速度與彈性。
例如 AI 做出的卡片已經差不多了，只是圓角太大、回彈太明顯，就可以自己邊拖邊看。它也有時間軸，能調整動畫片段的順序、長度，或重播比較。
使用前要先把想調整的屬性接到 DialKit，可以請 coding agent 幫忙。調好後再把設定套回正式程式碼，控制面板預設會在正式環境隱藏。使用方式與範例
這個我覺得滿適合設計師。當畫面只差一點感覺時，直接動手調會比來回描述更直覺。
5. ShaderGradient｜自己調一個會流動的漸層
Halo 漸層預覽，底部可以切換形狀、顏色、動態與視角設定。 官網截圖與示範
ShaderGradient 可以調顏色、流動速度、形狀和顆粒感，做出帶有立體起伏的動態漸層。它有 Figma、Framer 和 React 的使用方式；React 也能直接讀取編輯器產生的設定網址。官方文件
我會拿來做首頁主視覺或作品展示的背景。適合想自己調出品牌配色的人，放進網頁後記得測手機效能，也要確認背景動起來時，前面的字還是清楚。
6. Motion Primitives｜把介面的小動作做好
官方提供的介面圖，下方是卡片展示範例。實際轉場與操作效果可以到官網查看。 官方圖片來源
Motion Primitives 是用 Motion 和 Tailwind CSS 做的動效元件集，可以把需要的元件程式碼加進專案，再調整樣式和動畫。像標題進場，就可以先從 Text Effect 開始。安裝文件
我覺得它適合「畫面已經有了，想補一點動態」的時候。設計師可以先挑範例，再請工程師或 AI 接進 React 專案。核心專案是 MIT 授權，但官方仍標示為 beta，使用時要留意更新。GitHub
7. Grainient｜找一張有質感的背景
從素材收藏挑選不同的漸層風格，適合先找配色和背景方向。 官網截圖與示範
Grainient 收了顆粒漸層、平滑漸層、動態背景和 AI 生成素材，也有能即時調整的 Shader Tool。我會先拿它來找文章首圖、簡報或作品集的背景，不用每次都從空白開始。
跟 ShaderGradient 比，我會把這個當成「先挑現成素材」的入口。網站有免費素材，完整收藏則有付費方案；下載前看一下格式和授權，若只是做靜態封面，也不用特別接動畫。官網與方案
8. UImaxxing｜連互動細節一起參考
AI 輸入框的兩種呈現方式，也能順便參考附件、模式切換與送出的配置。 官網截圖與示範
UImaxxing 有 AI 輸入框、聊天紀錄、設定面板、圖表，也有輪播、動態字和 loading。可以直接看互動，複製元件的匯入指令，再透過 shadcn CLI 加進專案。
我覺得值得看的是整套介面的連貫性，卡片、控制項和動畫放在一起，還是同一種風格。很適合做產品原型時參考。不過畫面範例不等於已經接好 AI 或真實資料，功能還是要另外串；作者也說可以免費修改使用，但不要把整套重新發布。作者說明
9. 21st.dev｜找元件，也把範例交給 AI
依分類瀏覽不同作者的元件，先看預覽，再挑適合專案的樣式。 官網截圖與示範
21st.dev 比較像很多作者一起提供的 UI 收藏庫，從按鈕、導覽列到整頁模板都有。看中一個範例，可以複製 prompt 給 coding agent，或用它提供的 shadcn CLI 指令加入專案。
如果還沒決定介面要長怎樣，我會先來這裡找方向。跟單一元件庫相比，選擇多，但也更需要自己統一字體、圓角和動效。瀏覽免費，複製有每日免費額度；更多使用量與部分模板需付費，採用前也要看各項目的授權。官網說明
我會怎麼用？
例如做一個 AI 圖片生成流程：等待時用 Libraries.dev 的 Image 動畫，完成後再用 UI SFX 的 success 音效提醒。
我會先從這種單一流程開始試。動效和聲音都很容易加太多，反而讓人分心。聲音記得提供靜音，狀態也要有文字或畫面提示；動畫則要顧到減少動態效果的設定。聲音設計指南・動效無障礙說明
延伸閱讀
想看液態金屬的細節，可以接著看：