我最近 vibe code 了一個(gè) macOS 菜單欄小工具：摸摸魚計(jì)時(shí)器，功能就是統(tǒng)計(jì)你一天里花在「非主力 App」上的時(shí)間，最后濃縮成菜單欄上的一個(gè)數(shù)字——「摸魚率 ??」。

更多案例：

最早的 demo 用 Cursor 一天就做出來了，讓 ChatGPT 設(shè)計(jì)一個(gè) app icon 的時(shí)候他發(fā)揮了一下創(chuàng)造力，給我搞了一條丑萌丑萌的 3D 小魚。本著 vibe 的精神，我索性不糾結(jié)「專業(yè)不專業(yè)」，而是把這條魚當(dāng)成起點(diǎn)，順著感覺一路往下做：UI 里加上海鮮圖標(biāo)，官網(wǎng)上添幾條魚在游，宣傳物料也嘗試了類似的氛圍感。

ChatGPT 生成的第一版圖標(biāo)，確定了「魚+時(shí)鐘」這個(gè)組合

某種程度上，這條魚就成了這個(gè)項(xiàng)目的精神內(nèi)核——不追求精確的效率數(shù)據(jù)，而是帶著一點(diǎn)自嘲、一點(diǎn)可愛，提醒你「今天是不是又摸太多魚了？」。相比那些正襟危坐的效率工具，我更想做一只陪你一起晃悠的小伙伴，于是一個(gè)小工具的 UI 和網(wǎng)頁設(shè)計(jì)，變成了「怎么養(yǎng)出一群 AI 魚」的故事。

二、Flora：一次意外的邂逅

很巧，公司里老板讓我去調(diào)研一下 Flora—— 一款「面向設(shè)計(jì)師的結(jié)點(diǎn)式 AI 生成工具」。當(dāng)時(shí)還沒給報(bào)銷，既然花了錢，不用就虧！我順手把 GPT 生成的那條丑萌小魚扔進(jìn)去試了一下。

說實(shí)話，F(xiàn)lora 的本質(zhì)也還是大模型，只是把原本的 prompt 對(duì)話換成了更直觀的節(jié)點(diǎn)拖拉交互，理論上它不比 ChatGPT 或 Midjourney 更「聰明」。但 Flora 在某些地方的確做了優(yōu)化，尤其是風(fēng)格統(tǒng)一性這一塊很好掌控，我用一條魚當(dāng)起點(diǎn)生成不同的變體，然后互相參考，出來的效果挺協(xié)調(diào)；體感上，連連線條的這種設(shè)計(jì)過程比在 ChatGPT 里反復(fù)調(diào) prompt 和加參考圖片要輕松且可控得多。

當(dāng)然，這也可能是因?yàn)槲疫x的 3D 可愛風(fēng)格本身就比較常見，AI 更容易學(xué)和延展了。

做到最后，我已經(jīng)在 Flora 里養(yǎng)出了一整個(gè)「海鮮市場(chǎng)」，官網(wǎng)、app UI 里的魚魚們和其他素材，乃至網(wǎng)頁布局樣式的整體結(jié)構(gòu)和靈感幾乎是都從這里孵化出來的：

別看線條很亂，但這個(gè)選取提示詞和參考的方式還是很方便的

最終用到軟件里十個(gè)「摸魚等級(jí)」的海鮮圖標(biāo)們：

另外，app 的主圖標(biāo)我也順勢(shì)做了點(diǎn)調(diào)整：原本 GPT 給的魚有點(diǎn)太普通，為了讓顏色更跳、也更容易被記住，我直接把小丑魚搬了過來，結(jié)果朋友看了笑說：

你這不是 Nemo 嘛？Nemo = 你摸

好像還真挺符合「摸魚」的精神內(nèi)核的哈哈哈哈哈哈。只是考慮到西半球最強(qiáng)法務(wù)的戰(zhàn)斗力，還是保留了一些不同——比如去掉眼白、身體更扁，體態(tài)也更憨：

三、Midjourney：另一個(gè)機(jī)緣巧合

AI 的迭代速度快到讓人喘不過氣，我折騰這條小魚的那幾天，Midjourney 剛好上線了「首尾幀動(dòng)畫」功能。

原本我已經(jīng)很久沒續(xù)費(fèi) MJ 了，但抱著一路 vibe 的心態(tài)，又半推半就交了月費(fèi)來試試看。靜態(tài)小魚們丟進(jìn) MJ 生成的循環(huán)動(dòng)畫，效果還挺驚喜的，首尾銜接很自然，正好適合做成官網(wǎng)里那些裝飾性的小魚：

當(dāng)然這都是百里挑一成功的了，跑視頻跑出不可控結(jié)果的概率肯定比靜態(tài)圖大多了，下面這些失敗的案例反正能讓我想起劉慈欣的小說《天使時(shí)代》哈哈哈哈：

更掉 san 值的內(nèi)容我就不放進(jìn)來了哈哈哈哈

而且因?yàn)橐曨l確實(shí)比較費(fèi)錢，MJ 基礎(chǔ)套餐 10 刀分分鐘用完了，追加了幾次余額還是扛不住，所以也有幾個(gè)是用了通義萬相，兩者在這個(gè)單項(xiàng)能力上我感覺差不太多，很多文章和教程都在比較這些 AI 工具生成內(nèi)容的質(zhì)量，但是說實(shí)話從個(gè)體角度我完全體會(huì)不到這里的細(xì)微差別，基本都在抽卡，抽到大獎(jiǎng)的幾率都差不太多，除了多試我也沒太好的辦法。

四、DaVinci Resolve：第一次脫離 Ae

魚的造型有了，動(dòng)也動(dòng)起來了，接下來就要解決現(xiàn)實(shí)問題：透明背景怎么處理？

我不想所有內(nèi)容懟一起做個(gè)視頻墊在官網(wǎng)底下，所以必須把這些動(dòng)畫給搞出透明背景來，分別做時(shí)長(zhǎng)不一樣的動(dòng)畫，如果上重一點(diǎn)的方案比如 Rive 啥的可能有完美解，但我還是想用自己最熟悉的 CSS 實(shí)現(xiàn)出來（雖然一路在提 vibe，但是此處還是路徑依賴了，只能說明我是多么熱愛 CSS 啊 ），所以只能硬導(dǎo)帶透明背景的視頻。

一路嘗試下來，感覺在 2025 年這個(gè) GIF 已經(jīng) 38 歲、應(yīng)該被大廠開除兩遍的時(shí)間點(diǎn)上，要搞個(gè)帶 alpha 通道、壓縮率可以接受、多瀏覽器可以兼容的方案還是不那么容易，sigh。

比起瀏覽器里的實(shí)現(xiàn)，其實(shí)視頻摳圖本身還是選擇蠻多的，一開始想偷懶，用剪映的摳像，結(jié)果效果不理想，Ae 的摳像我用過很絲滑，但實(shí)在不想給 Adobe 交錢了所以就試了試免費(fèi)版本的 DaVinci Resolve。

第一次用達(dá)芬奇的過程肯定伴隨著瘋狂翻教程，但效果出奇好。畢竟是個(gè)影視行業(yè)的專業(yè)工具，它的摳像和 Ae 一樣一鍵就能讓人滿意，最后用到網(wǎng)頁里的素材視頻的制作流程大概是這樣的：

1. Flora 里先生成一堆透明底的小魚圖標(biāo)，我手動(dòng)加上綠幕背景
2. 丟進(jìn) Midjourney 或 通義萬相，用它們做出首尾循環(huán)的動(dòng)畫
3. 再把這些帶綠幕的動(dòng)畫放進(jìn) DaVinci Resolve，去掉背景導(dǎo)出帶 alpha 通道的視頻
4. 最后用 FFmpeg 導(dǎo)出瀏覽器支持的格式放進(jìn)網(wǎng)頁
5. 進(jìn)一步加上 CSS 動(dòng)畫讓他們徹底動(dòng)起來

視頻格式有點(diǎn)兒糾結(jié)，一直到最后其實(shí)也沒有很完美的解，一開始是用的 WebP，雖然兼容性很好，但壓縮比真的不夠理想，一個(gè)頁面下來哪怕抽幀一半也得花掉 6-7MB。后來轉(zhuǎn)向 WebM + HEVC 以及 AVIF，很可惜，雖然這些格式的普通動(dòng)畫版本支持率還可以，但一旦帶上 alpha 通道就很擰巴了，Safari 只支持 HEVC、Chrome 只支持 WebM 和 AVIF、手機(jī)端 Safari 和桌面相同但微信的 webview 里直接視頻整個(gè)不現(xiàn)實(shí)，而安卓的機(jī)器就更隨機(jī)了……

好在摸摸魚也只是 macOS 的 app，手機(jī)端本來也沒法完成下載，所以最后采用了這樣的方法：一個(gè)< video>標(biāo)簽里兩個(gè) < source>，一個(gè)是給 Safari 準(zhǔn)備的 HEVC 格式，一個(gè)是給 Chrome 準(zhǔn)備的 WebM 格式，至于其他……那我就偷懶了，比如手機(jī)瀏覽器豎屏和微信打開分別是這樣：

最后看到這群 AI 小魚在官網(wǎng)里悠閑游動(dòng)的時(shí)候，心里還是有種奇妙的成就感，放在多年以前我不敢想自己能做這樣的東西，這些 3D 可愛風(fēng)格的東西我把控不了，骨骼動(dòng)畫我也不會(huì)。AI 的幫忙確實(shí)解決了很多創(chuàng)作者從零到一的問題，不光是 vibe coding，vibe designing 也是一樣。

五、發(fā)布視頻：人工痕跡最重的部分

摸摸魚從建文件夾到發(fā)布差不多正好一個(gè)月，但其中有一整周，我都卡在了發(fā)布視頻上。

以前我剪視頻用剪映、做動(dòng)效用 Ae。但畢竟嘗試了達(dá)芬奇做摳圖了，這次想試試全新的工作流，于是硬著頭皮繼續(xù)學(xué)了一下達(dá)芬奇。剛打開軟件的那一刻整個(gè)人是懵的：動(dòng)畫曲線在哪里調(diào)？Fusion 是什么東西？怎么扣像還要先加效果蒙層？

雖然 Ae 也沒多好用，但以前那種「在一條時(shí)間軸里戳戳戳」的模式我已經(jīng)很習(xí)慣了。憑良心講，假如我從來沒熟悉過 Ae 完全從 0 開始學(xué)起的話還是達(dá)芬奇更直觀一些。當(dāng)然我也知道 Ae 和達(dá)芬奇本來就不是完全的競(jìng)品。

發(fā)布視頻的 BGM 來自 Suno.ai 的生成，對(duì)于這種短小的發(fā)布視頻來說音樂還是蠻重要的，我也是先生成了這個(gè)快節(jié)奏又有點(diǎn)兒俏皮的 BGM 之后才想到要用快閃的風(fēng)格來踩節(jié)奏完全跟音樂走。為了這個(gè)精準(zhǔn)的節(jié)奏，我這個(gè)達(dá)芬奇新手還是做得蠻艱難的，很多動(dòng)畫曲線我也懶得去 Fusion 里搞，就拖現(xiàn)成的效果。

雖然這個(gè)過程上手了一個(gè)新軟件，但現(xiàn)在讓我回頭去選的話也許我會(huì)老老實(shí)實(shí)給 Adobe 交錢 好在最后的效果我還是比較滿意的，尤其開頭這個(gè)用通義萬相做的小魚從 app icon 游到右上角的動(dòng)畫過程~

六、成本算一算

這些魚從出生到能游起來，花的錢其實(shí)也不少，簡(jiǎn)單算一算：

1. Midjourney：60 刀（10 刀基礎(chǔ)訂閱費(fèi)再加一些額外的 fast hours）
2. FloraFauna.ai：40 刀（2 個(gè)月訂閱費(fèi)）
3. Suno：10 刀（其實(shí)免費(fèi)額度很夠用，但音樂商用的話必須訂閱）

合計(jì)人民幣不到 1000，基本上被 app 發(fā)布后大家的打賞 cover 掉了，不算虧哈哈哈哈。

收個(gè)尾：Vibe Designing 的可能性

回頭看這次折騰，從一條 AI 隨便畫出來的「丑萌小魚」開始，到一整套 UI 圖標(biāo)，再到官網(wǎng)里自由游動(dòng)的透明小魚動(dòng)畫，過程充滿了各種偶然、試探和不完美。很多時(shí)候我并不是在按照設(shè)計(jì)流程走，或者說我自始至終都沒有一個(gè)嚴(yán)格的設(shè)計(jì)稿在 Figma 里，而是跟著當(dāng)下的靈感和工具的反饋一步步探索。

多年大廠工作經(jīng)驗(yàn)告訴我，這些 UI 和網(wǎng)頁的稿子如果當(dāng)做一個(gè) KV 來嚴(yán)肅設(shè)計(jì)的話可能是沒法過稿的，但我一個(gè)其實(shí)都沒怎么摸過 3D 軟件也沒動(dòng)畫經(jīng)驗(yàn)，自己也不是做運(yùn)營(yíng)設(shè)計(jì)的的半門外漢能做成這樣，還是非常滿意了~

這大概就是所謂的 vibe designing：

1. 核心不在于「設(shè)計(jì)多完美」，而在于一種輕量、好玩的態(tài)度
2. 不用從零到一全部自己手搓，而是學(xué)會(huì)和 AI 合作
3. 把模型生成的素材，加上一點(diǎn)點(diǎn)手工的「人味」，就能產(chǎn)出意料之外的東西
4. 允許偶然性，甚至擁抱那些「怪異的結(jié)果」，它們讓過程更有趣，也常常帶來新靈感

在效率工具的語境里，「摸魚」常常是個(gè)貶義詞，好像浪費(fèi)了時(shí)間，但我覺得摸魚本身就是一種對(duì)嚴(yán)肅的溫柔反抗：不是要變成最強(qiáng)的生產(chǎn)力機(jī)器，而是要在間隙里找到自己的節(jié)奏。

所以這個(gè)小項(xiàng)目最后呈現(xiàn)出來的，不僅是一個(gè)能在菜單欄提醒你別摸太久魚的工具，更像是我和幾條 AI 魚共同完成的一次小小實(shí)驗(yàn)。有時(shí)候跟著 vibe 走，結(jié)果未必完美，但過程本身就很值得。

摸摸魚計(jì)時(shí)器官網(wǎng)：MoMoYu.app

（友情提示：在桌面端 Safari 或 Chrome 里看更完整??）