我平常一直會找一些能幫助設計師完成視覺效果的工具。
最近看到一個叫做 BRIK 的網站，第一眼只覺得：這個效果也太酷了。
我用它做了一個動態字體。文字會在畫面裡漂浮，沿著某種路徑移動，看起來有點混亂，但又不是毫無規則地亂跑。
原本我以為它只是另一個輸入 Prompt、幫你生成動畫的 AI 工具。
實際操作之後，我發現它真正吸引我的地方，不是「可以生成動畫」，而是生成之後，還能繼續調整很多細節。
它不是只給你一段做好的動畫
很多 AI 視覺工具的使用方式是：輸入一句話，等待它生成，喜歡就用，不喜歡就重新生成。
這種方式確實很快，但對視覺畫面比較有要求的人來說，常常會遇到一個問題：
結果看起來差不多，卻沒有辦法準確控制。
可能只是想讓字再小一點、移動慢一點、彼此不要靠得那麼近，最後卻只能重新寫 Prompt，再賭一次 AI 能不能理解。
BRIK 不太一樣。
我這次做的漂浮字體，產生之後還能繼續調整：
- 字體大小
- 字體之間的間距
- 漂浮的程度
- 畫面受到干擾的程度
- 整體看起來有多規則或多混亂
而且不是只給一、兩個簡單選項，每個方向都有不少參數可以繼續微調。
這讓我想到 Adobe Illustrator。
Illustrator 不會替你決定畫面最後應該長什麼樣子，但它會把需要的工具交給你，讓你調整大小、距離、位置、顏色與各種視覺細節。
BRIK 給我的感覺也有點像這樣。
AI 先幫你做出一個可以運作的動態效果，接下來，你再像操作設計工具一樣，把它調成自己要的樣子。
可以把它想成「動態視覺界的 Webflow」
如果要用一個設計師比較熟悉的工具來比喻，我覺得 BRIK 有點像動態視覺界的 Webflow。
Webflow 把原本藏在 HTML、CSS 與 JavaScript 裡面的網站設定，變成設計師可以操作的視覺介面。
設計師不需要每次都直接修改程式碼，也可以調整版面、間距、字體、尺寸與互動效果。
BRIK 做的事情有點類似，只是它處理的不是整個網站，而是動態視覺與 creative coding。
像是：
- 動態字體
- 粒子效果
- 互動式圖片
- 3D 視覺
- 動態 Logo
- 網站 Scroll 效果
- WebGL 互動
- 網站 Hero 動畫
以前可能需要寫 JavaScript、Shader 或其他動畫程式，BRIK 把這些技術放到後面，讓使用者在前面用 Prompt 和控制器調整結果。
所以它不是 Webflow 的替代品，也不是完整的網站製作工具。
比較準確的理解是：
BRIK 把 Webflow 的 no-code 控制邏輯，搬到了動態設計與 creative coding。
你可以在 BRIK 做出動態視覺，再把它使用在 Webflow 或其他網站裡。
以前我會去 CodePen 找效果
在看到 BRIK 之前，如果我想在網站上加入這類前端視覺效果，我通常會先去 CodePen 找。
CodePen 上有很多設計師和前端工程師，用 HTML、CSS、JavaScript 做出來的視覺實驗。
如果找到接近的效果，我會先拿到程式碼，再交給 Claude 或 Codex，透過對話修改裡面的文字、數值和視覺設定，最後想辦法放進自己的網站。
這套方法不是不能用。
而且對懂一點前端、願意處理程式碼的人來說，CodePen 加上 AI，其實可以做到非常多事情。
問題是，即使已經找到接近的效果，後面還是要經過幾個步驟：
- 找出控制效果的程式碼在哪裡。
- 把程式碼和想修改的需求交給 AI。
- 等 AI 修改。
- 預覽結果。
- 不對的話，再回去描述一次。
- 確認修改沒有破壞其他地方。
BRIK 把其中一部分流程，直接變成可以操作的控制面板。
你不需要每調整一次字距，就重新跟 AI 對話；也不需要先理解哪一段 JavaScript 控制混亂程度。
直接移動滑桿，就能看到畫面改變。
這是我覺得它最直覺的地方。
BRIK 不一定比較強，但使用方式更直接
我不會直接說 BRIK 一定比 CodePen 加 Claude 或 Codex 更強。
如果你已經很熟悉原本的工作流程，知道怎麼找 CodePen 範例，也習慣讓 AI 幫你修改程式碼，那套方法依然很有彈性。
BRIK 的差別主要是直覺。
它把原本需要透過程式碼或對話修改的設定，整理成文字輸入、滑桿、選單、顏色與開關。
最後要不要改用 BRIK，還是要看兩件事：
- 願不願意改變原本的使用習慣
- 預算能不能接受
因為 BRIK 雖然有免費方案，但 Code 與 Embed 輸出需要訂閱。
所以它不一定適合每個人，但如果你不想一直處理程式碼，或是希望更快看見不同參數的視覺變化，它就很有吸引力。
對視覺有要求的人，控制權比生成速度更重要
我覺得 BRIK 特別適合對畫面有要求的人。
因為「能不能生成」和「能不能調成我要的樣子」，其實是兩件不同的事。
現在 AI 做出一個看起來很厲害的動畫，已經沒有那麼困難。
真正困難的是：
- 能不能符合品牌個性？
- 字和字之間的距離對不對？
- 動畫會不會太快？
- 畫面是不是太混亂？
- 主體還看不看得清楚？
- 換成另一個尺寸後，效果還能不能成立？
如果一個工具只會生成，卻不能調整，設計師最後還是很難把它放進真正的專案。
BRIK 比較有意思的地方，是它沒有只停在生成。
它把生成的結果變成一個可以持續控制的 Tool。你可以改變參數，產生不同版本，而不是每一次都從頭再來。
這也是為什麼我覺得它比較像設計工具，而不只是 AI 動畫產生器。
我最想把它用在網站 Hero
如果之後要把 BRIK 用在實際專案，我第一個想到的是靜態網站的 Hero。
Hero 就是進入網站後，第一眼看到的區域。
對官方網站、作品集或品牌視覺網站來說，Hero 不只是放一個標題和按鈕，它通常也負責傳達整個網站的第一印象。
如果只是一般資訊型網站，可能不需要很複雜的動畫。
但有些網站賣的就是風格、創意與視覺能力，例如：
- 品牌官方網站
- 設計師作品集
- 創意工作室網站
- 活動或產品形象網站
- 強調品牌視覺的 Landing Page
這些網站如果能在第一屏放進一個有質感的動態效果，確實比較容易抓住注意力。
以前要做這種 Hero，可能需要設計師先提出方向，再找前端工程師把效果寫出來。
現在至少可以先用 BRIK，把腦中模糊的動態想法做成一個看得見、可以操作的版本。
不管最後是直接使用，還是拿去跟工程師討論，它都能縮短「腦中想法」到「實際畫面」之間的距離。
BRIK 可以輸出什麼？
我在介面裡看到的輸出主要分成三類：
- 圖片
- 影片
- Code
根據 BRIK 官方輸出文件，圖片支援 PNG、JPEG，也能調整輸出倍率；影片支援 MP4、WebM，並能設定時間、FPS 與品質。
Code 的部分需要付費方案，目前官方文件列出的形式是：
- 自包含的 HTML
- iframe Embed
這代表除了把效果輸出成圖片或影片，也能讓動態效果真的在網站裡運作。
不過 BRIK 不是完整網站製作工具，它比較像是替網站產生一個動態視覺模組。
你還是需要 Webflow、WordPress 或其他網站系統，負責完整的版面、內容與發布。
哪些人可能會喜歡 BRIK？
以我第一次操作的感覺，我認為它比較適合這幾類人：
1. 不會寫程式的視覺設計師
有動態或互動想法，但不知道怎麼用 JavaScript、WebGL 或 Shader 實現，可以先從 BRIK 的 Prompt 或 Gallery 開始。
2. 對畫面細節有要求的人
不滿足於 AI 丟出來的第一版，希望能自己調整字距、尺寸、速度、混亂程度與畫面行為。
3. 想替網站增加記憶點的人
尤其是官方網站、作品集與品牌視覺網站，想在 Hero 加入更吸引人的動態畫面。
4. 想快速驗證視覺想法的人
還不確定一個效果值不值得正式開發，可以先做出可操作版本，再決定下一步。
5. 習慣視覺介面勝過程式碼的人
如果你喜歡 Webflow、Illustrator 這種看得到設定、調整後能立即看到結果的工作方式，應該會比較容易理解 BRIK。
我的第一次使用感想
第一次用完 BRIK，我最直接的感想就是：好用。
不是因為它能一鍵生成很炫的動畫，而是生成之後，仍然把控制權留給使用者。
對我來說，真正有價值的 AI 設計工具，不是替你做完所有決定，而是先幫你越過技術門檻，接著讓你繼續加入自己的判斷。
BRIK 現在給我的感覺就是這樣。
它有點像動態視覺界的 Webflow，也有點像一套由 AI 幫你建立工具的 Illustrator。
如果你本來就會去 CodePen 找視覺效果，再用 Claude 或 Codex 修改程式碼，BRIK 提供的是另一種更直覺的工作方式。
如果你不會寫程式，但一直想替作品集、品牌網站或官方網站加入更有記憶點的動態 Hero，它值得自己打開來試試看。
你可以先到 BRIK 官網 玩玩看。覺得這篇對身邊的設計師有用，也可以先收藏或分享給他。
我也會繼續在免費社群 The AI tool lab 整理這類能幫助一個人更快做出成品的 AI 工具與實際做法。