Transitions.dev：Vibe Coding 時代，動效是產品質感的槓桿

這篇 Threads 分享 Transitions.dev。它表面上是一個動效範例網站，但真正值得記錄的是：Vibe Coding 讓大家都能快速做出產品後，差距會回到細節、動效、節奏與質感。

Transitions.dev 的定位是「Essential transitions for web apps」，提供可以 copy/paste 到專案裡的常見轉場：card resize、number pop-in、notification badge、text state swap、menu dropdown、modal、panel reveal、page forward/back、icon swap 等。

Threads 原文說得準：Vibe Coding 做出來的東西很容易生硬。AI 會把功能做出來，會排版，會套 Tailwind，但常常缺少微互動：狀態切換太硬、modal 太突然、數字更新沒有節奏、卡片 resize 沒有空間感。這些不是核心功能，卻是使用者感覺「這產品有沒有質感」的來源。

值得注意的是作者提供 Agent Skill：

npx skills add jakubantalik/transitions-dev

也就是把動效品味包成 agent 可用的技能。這代表前端設計資產正在從 component library 進一步變成 skill library：不只是給人複製程式碼，而是讓 Codex / Claude Code 在生成 UI 時直接套用一套設計判斷。

對 BigIntTech 的實務啟發：以後用 AI 做 demo 或 MVP，不要只驗收「功能有沒有跑」，應加一條質感驗收：狀態切換、loading、錯誤提示、modal、列表新增刪除、數字變化是否有合理轉場。這些小地方會大幅拉開 vibe-coded prototype 和可交付產品的差距。

我的判斷：Transitions.dev 不是大工具，但它代表一種趨勢：設計品味會被封裝成 Agent Skill。未來高水準前端不是靠 prompt 裡寫「make it beautiful」，而是讓 agent 載入具體的 motion pattern、spacing rule、component taste，降低 AI 生硬感。

來源：

• Threads：https://www.threads.com/@ray.realms/post/DXwO0UiksjX
• Transitions.dev：https://transitions.dev/