一次 vibe designing 实验：我如何从零开始设计「摸鱼计时器」

这篇内容记录了一位开发者如何利用多款AI工具，从零开始设计并实现了一款名为“摸摸鱼计时器”的macOS小工具。整个项目围绕“vibe designing”的理念展开，即不追求完美，而是拥抱偶然性和趣味性。通过使用ChatGPT、Flora、Midjourney等AI工具生成图标、动画和网页素材，并结合手工调整，最终将一个简单的想法变成了一个具有独特风格和趣味性的产品。这不仅展示了AI在辅助个人创作中的巨大潜力，也体现了对“效率至上”文化的一种温柔反思。

一条丑萌小鱼引发的 Vibe Designing

项目的起点是一个用于统计“摸鱼”时间的macOS菜单栏小工具。在让ChatGPT设计图标时，AI意外生成了一条丑萌的3D小鱼，这一定下了整个项目的基调。开发者决定放弃追求“专业”的设计，而是顺着这条鱼的感觉，将它发展为项目的精神内核。

某种程度上，这条鱼就成了这个项目的精神内核——不追求精确的效率数据，而是带着一点自嘲、一点可爱，提醒你「今天是不是又摸太多鱼了？」。

相比于严肃的效率工具，这个项目的目标是成为一个陪伴用户的有趣伙伴。于是，一个简单的工具设计，演变成了一个“如何养出一群AI鱼”的故事。

探索 AI 工具链：从静态到动态

为了将“丑萌小鱼”的概念系统化，开发者使用了一系列AI工具，将静态图标扩展为丰富的动态素材。

• Flora：孵化海鲜市场

  Flora是一款节点式的AI生成工具。开发者将ChatGPT生成的小鱼作为基础，利用Flora生成了大量风格统一的变体。这种方式相比反复调整提示词，在保持风格一致性上更轻松、更可控。最终，应用内的十个“摸鱼等级”图标和官网素材，几乎都诞生于此。

• Midjourney：让小鱼动起来

  借助Midjourney新上线的“首尾帧动画”功能，静态的小鱼图标被制作成了无缝循环的动画，非常适合用作官网的装饰元素。当然，这个过程充满了不确定性，成功的结果都是“百里挑一”，失败的案例则充满了怪诞的趣味。由于视频生成非常消耗资源，开发者也尝试了“通义万相”作为补充，认为两者在抽卡概率上体验相似。

技术挑战：让小鱼在网页中游动

有了动画素材后，如何让它们以透明背景的形式在网页中流畅播放，成了一个技术难题。开发者希望使用CSS实现灵活的布局，而不是简单地将视频作为背景。

最终的实现流程如下：

• 在Flora中生成带绿色背景的小鱼图标。
• 将图片导入Midjourney或通义万相，生成循环动画。
• 使用免费且专业的视频软件 DaVinci Resolve 进行抠像，其效果与付费的Ae相当。
• 导出带透明通道的视频，并用FFmpeg转换为浏览器支持的格式。

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

视频格式的选择也颇费周折，最终采用了在一个 <video> 标签内提供两种格式的方案，分别适配Safari（HEVC格式）和Chrome（WebM格式），以此解决了主流桌面浏览器的兼容性问题。

最后的点睛之笔与成本核算

项目的发布视频是人工痕迹最重的部分。背景音乐由Suno.ai生成，其快节奏的风格启发了视频快闪的剪辑思路。为了实现音乐与画面的精准卡点，开发者现学了DaVinci Resolve的剪辑和动效功能。

整个项目的AI工具花费明细如下：

• Midjourney： 60美元
• FloraFauna.ai： 40美元
• Suno： 10美元
• 合计： 不到1000元人民币

什么是 Vibe Designing？

这次从一条AI小鱼开始的创作之旅，完美诠释了“vibe designing”的理念。它并非严格的设计流程，而是跟着灵感和工具的反馈逐步探索。

这种设计方式的核心在于：

• 轻量好玩： 核心不在于追求设计的完美，而在于一种轻松、有趣的态度。
• 人机协作： 不必事事从零手搓，而是学会与AI合作，利用其能力。
• 拥抱偶然： 允许甚至接纳那些“怪异”的生成结果，它们常常是新灵感的来源。
• 注入人味： 在AI生成的素材上加入一点手工调整，就能产出意料之外的独特作品。

在推崇效率的当下，“摸鱼”常被视为负面行为。但这个项目本身就是一种温柔的反抗，提醒我们在追求生产力的间隙，也要找到属于自己的节奏。跟着感觉走，过程本身就充满了价值。