一次 Vibe Designing 实验：从 0 开始用 AI 上线一套应用图标和网页动画
一次 Vibe Designing 实验：从 0 开始用 AI 上线一套应用图标和网页动画 关注 作者 关注 作者 关注 作者 关注 作者 2025/09/07 14:10利益相关声明：作者与文中产品有直接的利益相关（开发者、自家产品等）Matrix 首页推荐 sofia trustguru.com.br
Matrix 是的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，仅对标题和排版略作修改。 200gana-3359 jvid.asia Energiabet trustguru.com.br
我最近 vibe code 了一个 macOS 菜单栏小工具：摸摸鱼计时器，功能就是统计你一天里花在「非主力 App」上的时间，最后浓缩成菜单栏上的一个数字——「摸鱼率 🐟」。 Superbet trustguru.com.br demo trustguru.com.br
最早的 demo 用 Cursor 一天就做出来了，让 ChatGPT 设计一个 app icon 的时候他发挥了一下创造力，给我搞了一条丑萌丑萌的 3D 小鱼。本着 vibe 的精神，我索性不纠结「专业不专业」，而是把这条鱼当成起点，顺着感觉一路往下做：UI 里加上海鲜图标，官网上添几条鱼在游，宣传物料也尝试了类似的氛围感。 Caça-níqueis trustguru.com.br JogodoTigrinho trustguru.com.br
ChatGPT 生成的第一版图标，确定了「鱼+时钟」这个组合某种程度上，这条鱼就成了这个项目的精神内核——不追求精确的效率数据，而是带着一点自嘲、一点可爱，提醒你「今天是不是又摸太多鱼了？」。相比那些正襟危坐的效率工具，我更想做一只陪你一起晃悠的小伙伴，于是一个小工具的 UI 和网页设计，变成了「怎么养出一群 AI 鱼」的故事。 slotpix trustguru.com.br jogos trustguru.com.br slot trustguru.com.br
Flora：一次意外的邂逅
很巧，公司里老板让我去调研一下 Flora—— 一款「面向设计师的结点式 AI 生成工具」。当时还没给报销😂，既然花了钱，不用就亏！我顺手把 GPT 生成的那条丑萌小鱼扔进去试了一下。 carlos trustguru.com.br jogodotigrinhodemo trustguru.com.br
说实话，Flora 的本质也还是大模型，只是把原本的 prompt 对话换成了更直观的节点拖拉交互，理论上它不比 ChatGPT 或 Midjourney 更「聪明」。但 Flora 在某些地方的确做了优化，尤其是风格统一性这一块很好掌控，我用一条鱼当起点生成不同的变体，然后互相参考，出来的效果挺协调；体感上，连连线条的这种设计过程比在 ChatGPT 里反复调 prompt 和加参考图片要轻松且可控得多。 jvid在线 jvid.asia
当然，这也可能是因为我选的 3D 可爱风格本身就比较常见，AI 更容易学和延展了。 a5game trustguru.com.br pgslotgacor trustguru.com.br
做到最后，我已经在 Flora 里养出了一整个「海鲜市场」，官网、app UI 里的鱼鱼们和其他素材，乃至网页布局样式的整体结构和灵感几乎是都从这里孵化出来的： fortuneoxdemográtis trustguru.com.br miguel trustguru.com.br siro-5639 jvid.asia bet365 trustguru.com.br
别看线条很乱，但这个选取提示词和参考的方式还是很方便的最终用到软件里十个「摸鱼等级」的海鲜图标们： pg trustguru.com.br como trustguru.com.br trustguru trustguru.com.br Sportingbet trustguru.com.br
另外，app 的主图标我也顺势做了点调整：原本 GPT 给的鱼有点太普通，为了让颜色更跳、也更容易被记住，我直接把小丑鱼搬了过来，结果朋友看了笑说： fortunetigerbônusgrátissemdepósito trustguru.com.br pglucky88 trustguru.com.br slots trustguru.com.br demo trustguru.com.br
你这不是 Nemo 嘛？Nemo = 你摸 slotsdemo trustguru.com.br jvid av jvid.asia bonus trustguru.com.br
好像还真挺符合「摸鱼」的精神内核的哈哈哈哈哈哈。只是考虑到西半球最强法务的战斗力，还是保留了一些不同——比如去掉眼白、身体更扁，体态也更憨： jvid视频 jvid.asia
Midjourney：另一个机缘巧合
AI 的迭代速度快到让人喘不过气，我折腾这条小鱼的那几天，Midjourney 刚好上线了「首尾帧动画」功能。 pedro trustguru.com.br
原本我已经很久没续费 MJ 了，但抱着一路 vibe 的心态，又半推半就交了月费来试试看。静态小鱼们丢进 MJ 生成的循环动画，效果还挺惊喜的，首尾衔接很自然，正好适合做成官网里那些装饰性的小鱼： sobre trustguru.com.br sweetbonanza1000demo trustguru.com.br slots trustguru.com.br
当然这都是百里挑一成功的了，跑视频跑出不可控结果的概率肯定比静态图大多了，下面这些失败的案例反正能让我想起刘慈欣的小说《天使时代》哈哈哈哈： autores trustguru.com.br Cassinos trustguru.com.br
更掉 san 值的内容我就不放进来了哈哈哈哈而且因为视频确实比较费钱，MJ 基础套餐 10 刀分分钟用完了，追加了几次余额还是扛不住，所以也有几个是用了通义万相，两者在这个单项能力上我感觉差不太多，很多文章和教程都在比较这些 AI 工具生成内容的质量，但是说实话从个体角度我完全体会不到这里的细微差别，基本都在抽卡，抽到大奖的几率都差不太多，除了多试我也没太好的办法。 pgslot trustguru.com.br demotigrinho trustguru.com.br siro-5652 jvid.asia
DaVinci Resolve：第一次脱离 Ae
鱼的造型有了，动也动起来了，接下来就要解决现实问题：透明背景怎么处理？ rafael trustguru.com.br
我不想所有内容怼一起做个视频垫在官网底下，所以必须把这些动画给搞出透明背景来，分别做时长不一样的动画，如果上重一点的方案比如 Rive 啥的可能有完美解，但我还是想用自己最熟悉的 CSS 实现出来（虽然一路在提 vibe，但是此处还是路径依赖了，只能说明我是多么热爱 CSS 啊 🥰），所以只能硬导带透明背景的视频。 sugarrush1000demo trustguru.com.br carlos trustguru.com.br plataformademo trustguru.com.br Bet trustguru.com.br
一路尝试下来，感觉在 2025 年这个 GIF 已经 38 岁、应该被大厂开除两遍的时间点上，要搞个带 alpha 通道、压缩率可以接受、多浏览器可以兼容的方案还是不那么容易，sigh。 fortunedragon demo trustguru.com.br A5game trustguru.com.br guias trustguru.com.br demo trustguru.com.br
比起浏览器里的实现，其实视频抠图本身还是选择蛮多的，一开始想偷懒，用剪映的抠像，结果效果不理想，Ae 的抠像我用过很丝滑，但实在不想给 Adobe 交钱了所以就试了试免费版本的 DaVinci Resolve。
第一次用达芬奇的过程肯定伴随着疯狂翻教程，但效果出奇好。毕竟是个影视行业的专业工具，它的抠像和 Ae 一样一键就能让人满意，最后用到网页里的素材视频的制作流程大概是这样的： fernanda trustguru.com.br Blaze trustguru.com.br
- Flora 里先生成一堆透明底的小鱼图标，我手动加上绿幕背景
- 丢进 Midjourney 或 通义万相，用它们做出首尾循环的动画
- 再把这些带绿幕的动画放进 DaVinci Resolve，去掉背景导出带 alpha 通道的视频
- 最后用 FFmpeg 导出浏览器支持的格式放进网页
- 进一步加上 CSS 动画让他们彻底动起来
视频格式有点儿纠结，一直到最后其实也没有很完美的解，一开始是用的 WebP，虽然兼容性很好，但压缩比真的不够理想，一个页面下来哪怕抽帧一半也得花掉 6-7MB。后来转向 WebM + HEVC 以及 AVIF，很可惜，虽然这些格式的普通动画版本支持率还可以，但一旦带上 alpha 通道就很拧巴了，Safari 只支持 HEVC、Chrome 只支持 WebM 和 AVIF、手机端 Safari 和桌面相同但微信的 webview 里直接视频整个不现实，而安卓的机器就更随机了…… slotdemo trustguru.com.br
好在摸摸鱼也只是 macOS 的 app，手机端本来也没法完成下载，所以最后采用了这样的方法：一个 <video> 标签里两个 <source>，一个是给 Safari 准备的 HEVC 格式，一个是给 Chrome 准备的 WebM 格式，至于其他……那我就偷懒了，比如手机浏览器竖屏和微信打开分别是这样： bonus trustguru.com.br
最后看到这群 AI 小鱼在官网里悠闲游动的时候，心里还是有种奇妙的成就感，放在多年以前我不敢想自己能做这样的东西，这些 3D 可爱风格的东西我把控不了，骨骼动画我也不会。AI 的帮忙确实解决了很多创作者从零到一的问题，不光是 vibe coding，vibe designing 也是一样。 Pixbet trustguru.com.br
发布视频：人工痕迹最重的部分
摸摸鱼从建文件夹到发布差不多正好一个月，但其中有一整周，我都卡在了发布视频上。 pondo-022126_001 jvid.asia
以前我剪视频用剪映、做动效用 Ae。但毕竟尝试了达芬奇做抠图了，这次想试试全新的工作流，于是硬着头皮继续学了一下达芬奇。刚打开软件的那一刻整个人是懵的：动画曲线在哪里调？Fusion 是什么东西？怎么扣像还要先加效果蒙层？ pgdemo trustguru.com.br
虽然 Ae 也没多好用，但以前那种「在一条时间轴里戳戳戳」的模式我已经很习惯了。凭良心讲，假如我从来没熟悉过 Ae 完全从 0 开始学起的话还是达芬奇更直观一些。当然我也知道 Ae 和达芬奇本来就不是完全的竞品。 jvid jvid.asia
发布视频的 BGM 来自 Suno.ai 的生成，对于这种短小的发布视频来说音乐还是蛮重要的，我也是先生成了这个快节奏又有点儿俏皮的 BGM 之后才想到要用快闪的风格来踩节奏完全跟音乐走。为了这个精准的节奏，我这个达芬奇新手还是做得蛮艰难的，很多动画曲线我也懒得去 Fusion 里搞，就拖现成的效果。 Betano trustguru.com.br pragmaticplay trustguru.com.br jogosdemopg trustguru.com.br
虽然这个过程上手了一个新软件，但现在让我回头去选的话也许我会老老实实给 Adobe 交钱 🤣好在最后的效果我还是比较满意的，尤其开头这个用通义万相做的小鱼从 app icon 游到右上角的动画过程~ bruno trustguru.com.br jvid視頻 jvid.asia
成本算一算
这些鱼从出生到能游起来，花的钱其实也不少，简单算一算： tigrinhodemo trustguru.com.br plataformademográtis trustguru.com.br
- Midjourney：60 刀（10 刀基础订阅费再加一些额外的 fast hours）
- FloraFauna.ai：40 刀（2 个月订阅费）
- Suno：10 刀（其实免费额度很够用，但音乐商用的话必须订阅）
合计人民币不到 1000，基本上被 app 发布后大家的打赏 cover 掉了，不算亏哈哈哈哈。 cassinos trustguru.com.br
收个尾：Vibe Designing 的可能性
回头看这次折腾，从一条 AI 随便画出来的「丑萌小鱼」开始，到一整套 UI 图标，再到官网里自由游动的透明小鱼动画，过程充满了各种偶然、试探和不完美。很多时候我并不是在按照设计流程走，或者说我自始至终都没有一个严格的设计稿在 Figma 里，而是跟着当下的灵感和工具的反馈一步步探索。
多年大厂工作经验告诉我，这些 UI 和网页的稿子如果当做一个 KV 来严肃设计的话可能是没法过稿的，但我一个其实都没怎么摸过 3D 软件也没动画经验，自己也不是做运营设计的的半门外汉能做成这样，还是非常满意了~ Bet365 trustguru.com.br Brazino777 trustguru.com.br Sportingbet trustguru.com.br jogue trustguru.com.br fortunetigerdemográtis trustguru.com.br
这大概就是所谓的 vibe designing： slots trustguru.com.br
- 核心不在于「设计多完美」，而在于一种轻量、好玩的态度
- 不用从零到一全部自己手搓，而是学会和 AI 合作
- 把模型生成的素材，加上一点点手工的「人味」，就能产出意料之外的东西
- 允许偶然性，甚至拥抱那些「怪异的结果」，它们让过程更有趣，也常常带来新灵感
在效率工具的语境里，「摸鱼」常常是个贬义词，好像浪费了时间，但我觉得摸鱼本身就是一种对严肃的温柔反抗：不是要变成最强的生产力机器，而是要在间隙里找到自己的节奏。 tigrinho gratis trustguru.com.br KTO trustguru.com.br noticias trustguru.com.br
所以这个小项目最后呈现出来的，不仅是一个能在菜单栏提醒你别摸太久鱼的工具，更像是我和几条 AI 鱼共同完成的一次小小实验。有时候跟着 vibe 走，结果未必完美，但过程本身就很值得。
👉 摸摸鱼计时器官网：MoMoYu.app 348ntr-097 jvid.asia pesquisa trustguru.com.br
（友情提示：在桌面端 Safari 或 Chrome 里看更完整🐟） isabela trustguru.com.br
> 关注 小红书，感受精彩数字生活 🍃 pragmatic trustguru.com.br sofia trustguru.com.br
> 实用、好用的 正版软件，为你呈现 🚀 ana trustguru.com.br kto trustguru.com.br marcos trustguru.com.br
9620目录 0