不到1000元，从零开始用AI上线一个摸鱼率计时器

我最近 vibe code 了一个 macOS 菜单栏小工具：摸摸鱼计时器，功能就是统计你一天里花在「非主力 App」上的时间，最后浓缩成菜单栏上的一个数字——「摸鱼率 🐟」。

更多案例：

最早的 demo 用 Cursor 一天就做出来了，让 ChatGPT 设计一个 app icon 的时候他发挥了一下创造力，给我搞了一条丑萌丑萌的 3D 小鱼。本着 vibe 的精神，我索性不纠结「专业不专业」，而是把这条鱼当成起点，顺着感觉一路往下做：UI 里加上海鲜图标，官网上添几条鱼在游，宣传物料也尝试了类似的氛围感。

ChatGPT 生成的第一版图标，确定了「鱼+时钟」这个组合

某种程度上，这条鱼就成了这个项目的精神内核——不追求精确的效率数据，而是带着一点自嘲、一点可爱，提醒你「今天是不是又摸太多鱼了？」。相比那些正襟危坐的效率工具，我更想做一只陪你一起晃悠的小伙伴，于是一个小工具的 UI 和网页设计，变成了「怎么养出一群 AI 鱼」的故事。

二、Flora：一次意外的邂逅

很巧，公司里老板让我去调研一下 Flora—— 一款「面向设计师的结点式 AI 生成工具」。当时还没给报销，既然花了钱，不用就亏！我顺手把 GPT 生成的那条丑萌小鱼扔进去试了一下。

说实话，Flora 的本质也还是大模型，只是把原本的 prompt 对话换成了更直观的节点拖拉交互，理论上它不比 ChatGPT 或 Midjourney 更「聪明」。但 Flora 在某些地方的确做了优化，尤其是风格统一性这一块很好掌控，我用一条鱼当起点生成不同的变体，然后互相参考，出来的效果挺协调；体感上，连连线条的这种设计过程比在 ChatGPT 里反复调 prompt 和加参考图片要轻松且可控得多。

当然，这也可能是因为我选的 3D 可爱风格本身就比较常见，AI 更容易学和延展了。

做到最后，我已经在 Flora 里养出了一整个「海鲜市场」，官网、app UI 里的鱼鱼们和其他素材，乃至网页布局样式的整体结构和灵感几乎是都从这里孵化出来的：

别看线条很乱，但这个选取提示词和参考的方式还是很方便的

最终用到软件里十个「摸鱼等级」的海鲜图标们：

另外，app 的主图标我也顺势做了点调整：原本 GPT 给的鱼有点太普通，为了让颜色更跳、也更容易被记住，我直接把小丑鱼搬了过来，结果朋友看了笑说：

你这不是 Nemo 嘛？Nemo = 你摸

好像还真挺符合「摸鱼」的精神内核的哈哈哈哈哈哈。只是考虑到西半球最强法务的战斗力，还是保留了一些不同——比如去掉眼白、身体更扁，体态也更憨：

三、Midjourney：另一个机缘巧合

AI 的迭代速度快到让人喘不过气，我折腾这条小鱼的那几天，Midjourney 刚好上线了「首尾帧动画」功能。

原本我已经很久没续费 MJ 了，但抱着一路 vibe 的心态，又半推半就交了月费来试试看。静态小鱼们丢进 MJ 生成的循环动画，效果还挺惊喜的，首尾衔接很自然，正好适合做成官网里那些装饰性的小鱼：

当然这都是百里挑一成功的了，跑视频跑出不可控结果的概率肯定比静态图大多了，下面这些失败的案例反正能让我想起刘慈欣的小说《天使时代》哈哈哈哈：

更掉 san 值的内容我就不放进来了哈哈哈哈

而且因为视频确实比较费钱，MJ 基础套餐 10 刀分分钟用完了，追加了几次余额还是扛不住，所以也有几个是用了通义万相，两者在这个单项能力上我感觉差不太多，很多文章和教程都在比较这些 AI 工具生成内容的质量，但是说实话从个体角度我完全体会不到这里的细微差别，基本都在抽卡，抽到大奖的几率都差不太多，除了多试我也没太好的办法。

四、DaVinci Resolve：第一次脱离 Ae

鱼的造型有了，动也动起来了，接下来就要解决现实问题：透明背景怎么处理？

我不想所有内容怼一起做个视频垫在官网底下，所以必须把这些动画给搞出透明背景来，分别做时长不一样的动画，如果上重一点的方案比如 Rive 啥的可能有完美解，但我还是想用自己最熟悉的 CSS 实现出来（虽然一路在提 vibe，但是此处还是路径依赖了，只能说明我是多么热爱 CSS 啊 ），所以只能硬导带透明背景的视频。

一路尝试下来，感觉在 2025 年这个 GIF 已经 38 岁、应该被大厂开除两遍的时间点上，要搞个带 alpha 通道、压缩率可以接受、多浏览器可以兼容的方案还是不那么容易，sigh。

比起浏览器里的实现，其实视频抠图本身还是选择蛮多的，一开始想偷懒，用剪映的抠像，结果效果不理想，Ae 的抠像我用过很丝滑，但实在不想给 Adobe 交钱了所以就试了试免费版本的 DaVinci Resolve。

第一次用达芬奇的过程肯定伴随着疯狂翻教程，但效果出奇好。毕竟是个影视行业的专业工具，它的抠像和 Ae 一样一键就能让人满意，最后用到网页里的素材视频的制作流程大概是这样的：

1. Flora 里先生成一堆透明底的小鱼图标，我手动加上绿幕背景
2. 丢进 Midjourney 或 通义万相，用它们做出首尾循环的动画
3. 再把这些带绿幕的动画放进 DaVinci Resolve，去掉背景导出带 alpha 通道的视频
4. 最后用 FFmpeg 导出浏览器支持的格式放进网页
5. 进一步加上 CSS 动画让他们彻底动起来

视频格式有点儿纠结，一直到最后其实也没有很完美的解，一开始是用的 WebP，虽然兼容性很好，但压缩比真的不够理想，一个页面下来哪怕抽帧一半也得花掉 6-7MB。后来转向 WebM + HEVC 以及 AVIF，很可惜，虽然这些格式的普通动画版本支持率还可以，但一旦带上 alpha 通道就很拧巴了，Safari 只支持 HEVC、Chrome 只支持 WebM 和 AVIF、手机端 Safari 和桌面相同但微信的 webview 里直接视频整个不现实，而安卓的机器就更随机了……

好在摸摸鱼也只是 macOS 的 app，手机端本来也没法完成下载，所以最后采用了这样的方法：一个< video>标签里两个 < source>，一个是给 Safari 准备的 HEVC 格式，一个是给 Chrome 准备的 WebM 格式，至于其他……那我就偷懒了，比如手机浏览器竖屏和微信打开分别是这样：

最后看到这群 AI 小鱼在官网里悠闲游动的时候，心里还是有种奇妙的成就感，放在多年以前我不敢想自己能做这样的东西，这些 3D 可爱风格的东西我把控不了，骨骼动画我也不会。AI 的帮忙确实解决了很多创作者从零到一的问题，不光是 vibe coding，vibe designing 也是一样。

五、发布视频：人工痕迹最重的部分

摸摸鱼从建文件夹到发布差不多正好一个月，但其中有一整周，我都卡在了发布视频上。

以前我剪视频用剪映、做动效用 Ae。但毕竟尝试了达芬奇做抠图了，这次想试试全新的工作流，于是硬着头皮继续学了一下达芬奇。刚打开软件的那一刻整个人是懵的：动画曲线在哪里调？Fusion 是什么东西？怎么扣像还要先加效果蒙层？

虽然 Ae 也没多好用，但以前那种「在一条时间轴里戳戳戳」的模式我已经很习惯了。凭良心讲，假如我从来没熟悉过 Ae 完全从 0 开始学起的话还是达芬奇更直观一些。当然我也知道 Ae 和达芬奇本来就不是完全的竞品。

发布视频的 BGM 来自 Suno.ai 的生成，对于这种短小的发布视频来说音乐还是蛮重要的，我也是先生成了这个快节奏又有点儿俏皮的 BGM 之后才想到要用快闪的风格来踩节奏完全跟音乐走。为了这个精准的节奏，我这个达芬奇新手还是做得蛮艰难的，很多动画曲线我也懒得去 Fusion 里搞，就拖现成的效果。

虽然这个过程上手了一个新软件，但现在让我回头去选的话也许我会老老实实给 Adobe 交钱 好在最后的效果我还是比较满意的，尤其开头这个用通义万相做的小鱼从 app icon 游到右上角的动画过程~

六、成本算一算

这些鱼从出生到能游起来，花的钱其实也不少，简单算一算：

1. Midjourney：60 刀（10 刀基础订阅费再加一些额外的 fast hours）
2. FloraFauna.ai：40 刀（2 个月订阅费）
3. Suno：10 刀（其实免费额度很够用，但音乐商用的话必须订阅）

合计人民币不到 1000，基本上被 app 发布后大家的打赏 cover 掉了，不算亏哈哈哈哈。

收个尾：Vibe Designing 的可能性

回头看这次折腾，从一条 AI 随便画出来的「丑萌小鱼」开始，到一整套 UI 图标，再到官网里自由游动的透明小鱼动画，过程充满了各种偶然、试探和不完美。很多时候我并不是在按照设计流程走，或者说我自始至终都没有一个严格的设计稿在 Figma 里，而是跟着当下的灵感和工具的反馈一步步探索。

多年大厂工作经验告诉我，这些 UI 和网页的稿子如果当做一个 KV 来严肃设计的话可能是没法过稿的，但我一个其实都没怎么摸过 3D 软件也没动画经验，自己也不是做运营设计的的半门外汉能做成这样，还是非常满意了~

这大概就是所谓的 vibe designing：

1. 核心不在于「设计多完美」，而在于一种轻量、好玩的态度
2. 不用从零到一全部自己手搓，而是学会和 AI 合作
3. 把模型生成的素材，加上一点点手工的「人味」，就能产出意料之外的东西
4. 允许偶然性，甚至拥抱那些「怪异的结果」，它们让过程更有趣，也常常带来新灵感

在效率工具的语境里，「摸鱼」常常是个贬义词，好像浪费了时间，但我觉得摸鱼本身就是一种对严肃的温柔反抗：不是要变成最强的生产力机器，而是要在间隙里找到自己的节奏。

所以这个小项目最后呈现出来的，不仅是一个能在菜单栏提醒你别摸太久鱼的工具，更像是我和几条 AI 鱼共同完成的一次小小实验。有时候跟着 vibe 走，结果未必完美，但过程本身就很值得。

摸摸鱼计时器官网：MoMoYu.app

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