Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
我最近 vibe code 了一个 macOS 菜单栏小工具：摸摸鱼计时器，功能就是统计你一天里花在「非主力 App」上的时间，最后浓缩成菜单栏上的一个数字——「摸鱼率 🐟」。
最早的 demo 用 Cursor 一天就做出来了，让 ChatGPT 设计一个 app icon 的时候他发挥了一下创造力，给我搞了一条丑萌丑萌的 3D 小鱼。本着 vibe 的精神，我索性不纠结「专业不专业」，而是把这条鱼当成起点，顺着感觉一路往下做：UI 里加上海鲜图标，官网上添几条鱼在游，宣传物料也尝试了类似的氛围感。
某种程度上，这条鱼就成了这个项目的精神内核——不追求精确的效率数据，而是带着一点自嘲、一点可爱，提醒你「今天是不是又摸太多鱼了？」。相比那些正襟危坐的效率工具，我更想做一只陪你一起晃悠的小伙伴，于是一个小工具的 UI 和网页设计，变成了「怎么养出一群 AI 鱼」的故事。
很巧，公司里老板让我去调研一下 Flora—— 一款「面向设计师的结点式 AI 生成工具」。当时还没给报销😂，既然花了钱，不用就亏！我顺手把 GPT 生成的那条丑萌小鱼扔进去试了一下。
说实话，Flora 的本质也还是大模型，只是把原本的 prompt 对话换成了更直观的节点拖拉交互，理论上它不比 ChatGPT 或 Midjourney 更「聪明」。但 Flora 在某些地方的确做了优化，尤其是风格统一性这一块很好掌控，我用一条鱼当起点生成不同的变体，然后互相参考，出来的效果挺协调；体感上，连连线条的这种设计过程比在 ChatGPT 里反复调 prompt 和加参考图片要轻松且可控得多。
当然，这也可能是因为我选的 3D 可爱风格本身就比较常见，AI 更容易学和延展了。
做到最后，我已经在 Flora 里养出了一整个「海鲜市场」，官网、app UI 里的鱼鱼们和其他素材，乃至网页布局样式的整体结构和灵感几乎是都从这里孵化出来的：
最终用到软件里十个「摸鱼等级」的海鲜图标们：
另外，app 的主图标我也顺势做了点调整：原本 GPT 给的鱼有点太普通，为了让颜色更跳、也更容易被记住，我直接把小丑鱼搬了过来，结果朋友看了笑说：
你这不是 Nemo 嘛？Nemo = 你摸
好像还真挺符合「摸鱼」的精神内核的哈哈哈哈哈哈。只是考虑到西半球最强法务的战斗力，还是保留了一些不同——比如去掉眼白、身体更扁，体态也更憨：
AI 的迭代速度快到让人喘不过气，我折腾这条小鱼的那几天，Midjourney 刚好上线了「首尾帧动画」功能。
原本我已经很久没续费 MJ 了，但抱着一路 vibe 的心态，又半推半就交了月费来试试看。静态小鱼们丢进 MJ 生成的循环动画，效果还挺惊喜的，首尾衔接很自然，正好适合做成官网里那些装饰性的小鱼：
当然这都是百里挑一成功的了，跑视频跑出不可控结果的概率肯定比静态图大多了，下面这些失败的案例反正能让我想起刘慈欣的小说《天使时代》哈哈哈哈：
而且因为视频确实比较费钱，MJ 基础套餐 10 刀分分钟用完了，追加了几次余额还是扛不住，所以也有几个是用了通义万相，两者在这个单项能力上我感觉差不太多，很多文章和教程都在比较这些 AI 工具生成内容的质量，但是说实话从个体角度我完全体会不到这里的细微差别，基本都在抽卡，抽到大奖的几率都差不太多，除了多试我也没太好的办法。
鱼的造型有了，动也动起来了，接下来就要解决现实问题：透明背景怎么处理？
我不想所有内容怼一起做个视频垫在官网底下，所以必须把这些动画给搞出透明背景来，分别做时长不一样的动画，如果上重一点的方案比如 Rive 啥的可能有完美解，但我还是想用自己最熟悉的 CSS 实现出来（虽然一路在提 vibe，但是此处还是路径依赖了，只能说明我是多么热爱 CSS 啊 🥰），所以只能硬导带透明背景的视频。
一路尝试下来，感觉在 2025 年这个 GIF 已经 38 岁、应该被大厂开除两遍的时间点上，要搞个带 alpha 通道、压缩率可以接受、多浏览器可以兼容的方案还是不那么容易，sigh。
比起浏览器里的实现，其实视频抠图本身还是选择蛮多的，一开始想偷懒，用剪映的抠像，结果效果不理想，Ae 的抠像我用过很丝滑，但实在不想给 Adobe 交钱了所以就试了试免费版本的 DaVinci Resolve。
第一次用达芬奇的过程肯定伴随着疯狂翻教程，但效果出奇好。毕竟是个影视行业的专业工具，它的抠像和 Ae 一样一键就能让人满意，最后用到网页里的素材视频的制作流程大概是这样的：
视频格式有点儿纠结，一直到最后其实也没有很完美的解，一开始是用的 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 游到右上角的动画过程~
这些鱼从出生到能游起来，花的钱其实也不少，简单算一算：
合计人民币不到 1000，基本上被 app 发布后大家的打赏 cover 掉了，不算亏哈哈哈哈。
回头看这次折腾，从一条 AI 随便画出来的「丑萌小鱼」开始，到一整套 UI 图标，再到官网里自由游动的透明小鱼动画，过程充满了各种偶然、试探和不完美。很多时候我并不是在按照设计流程走，或者说我自始至终都没有一个严格的设计稿在 Figma 里，而是跟着当下的灵感和工具的反馈一步步探索。
多年大厂工作经验告诉我，这些 UI 和网页的稿子如果当做一个 KV 来严肃设计的话可能是没法过稿的，但我一个其实都没怎么摸过 3D 软件也没动画经验，自己也不是做运营设计的的半门外汉能做成这样，还是非常满意了~
这大概就是所谓的 vibe designing：
在效率工具的语境里，「摸鱼」常常是个贬义词，好像浪费了时间，但我觉得摸鱼本身就是一种对严肃的温柔反抗：不是要变成最强的生产力机器，而是要在间隙里找到自己的节奏。
所以这个小项目最后呈现出来的，不仅是一个能在菜单栏提醒你别摸太久鱼的工具，更像是我和几条 AI 鱼共同完成的一次小小实验。有时候跟着 vibe 走，结果未必完美，但过程本身就很值得。
👉 摸摸鱼计时器官网：MoMoYu.app
（友情提示：在桌面端 Safari 或 Chrome 里看更完整🐟）
> 关注 少数派小红书，感受精彩数字生活 🍃
> 实用、好用的 正版软件，少数派为你呈现 🚀
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。