把我的猫咪做成护眼 APP!

· json · rss
Subscribe:

About

最近 X 上一个日本开发者把自家猫咪做成了护眼时钟 Chrome 插件,叫 Cat Gatekeeper,超级可爱!

但是这个插件只能在浏览器里用,而且不能替换猫咪形象,于是博主自己动手做一个,把我家的小毛球做成了 App。

当你连续看屏幕太久,猫猫就会走进屏幕里开始倒计时,温柔但坚定地挡住,提醒你该休息一下眼睛了。

成品 App 已经开源,Mac 和 Windows 都支持,GitHub 即可下载。如果大家想把自己家的宝宝形象放进去,接下来是教程,只需要四步。

Cat Gatekeeper 与 Kitty Screen 效果示例
原版浏览器插件和 Kitty Screen 的效果示例

第一步:准备猫咪参考照片

先收集清晰、高分辨率的猫咪照片。图片模型需要足够多的视觉信息,才能在每一帧里稳定保持同一只猫身份。

建议准备这些照片:

  • 正脸高清近照
  • 左右侧脸
  • 全身站立或行走姿态
  • 坐姿
  • 躺姿或放松姿态
  • 能看清毛色、花纹、爪子、尾巴、眼睛、耳朵形状和毛发长度的细节图

参考图里尽量只出现一只猫。避免使用有其他动物、复杂背景、重滤镜、服装或极端光照的照片。如果你的猫有明显花纹,至少准备一张能清楚看到这些花纹的图。

猫咪参考照片示例
用于保持猫咪身份一致的参考照片

第二步:生成绿幕关键帧

使用支持参考图生图的模型,生成一组按编号排列的关键帧。目标是让你的猫按照项目内置示例动作走位,同时保持自己的外观。

每张图都应该使用纯绿幕背景。保持背景干净,不要地面、阴影、渐变、道具、文字、UI、家具、房间背景或其他动物。背景越纯,后续 FFmpeg 抠像越稳定。

可以直接从 GitHub 里的 prompt 开始改。替换猫咪形象描述时要写清楚你猫的特征,但动作、构图和绿幕约束尽量保持严格。

博主这里用的是 Lynx Agent 生成的。

使用 Lynx Agent 生成猫咪绿幕关键帧
Lynx Agent 中的关键帧生成任务

第三步:生成入场视频和循环视频

使用支持首帧、尾帧或有序关键帧控制的视频生成工具。把关键帧按编号顺序上传,生成一段连续的绿幕猫咪动画。博主这里用的是可灵。

建议视频设置:

  • 16:9 输出
  • 镜头固定
  • 全程保持同一只猫的形象
  • 全程保持均匀的 #00ff00 绿幕背景
  • 动作节奏是缓慢入画、停下,最后稳定挡住屏幕
  • 不要镜头缩放、平移、俯仰、跟随、房间背景、道具、文字、UI、阴影或第二只动物

最终导出两段视频:

  • 第一段是完整入场动画,应该包含猫咪进入画面、移动到目标位置并稳定挡住屏幕的过程。
  • 第二段保留轻微动作,比如呼吸、眨眼或小幅尾巴动作。这样屏保持续显示时不会一直重复完整入场动画。
绿幕猫咪入场与循环视频示例
猫咪绿幕视频生成要求

最后一步:放入 App

博主已经把所有步骤写成了脚本,支持一键导入并生成 App 需要的资源格式。

按照 GitHub 里的 README.md,把生成视频放入项目,然后运行:

npm run videos

这个命令会运行生成脚本。它会读取绿幕视频文件,用 FFmpeg 去掉绿色背景、做绿色溢色处理、检查 alpha 通道,并输出 macOS 和 Windows 平台资源。

如果你只在调某个平台,可以只生成单个平台:

npm run videos -- --platform macos
npm run videos -- --platform windows

然后再运行:

npm run app:build:mac
npm run app:build:windows

稍等片刻,即可拥有自己的小猫桌面。

Kitty Screen 构建结果
构建好的 macOS App

下载与源码

App 下载链接、所有源码、资源和用到的 prompts 全都开源在 GitHub,需要的友友自取,欢迎 Star:

github.com/elliothux/kitty-screen

本 App 的源码和用到的图片资源,都使用 Lynx Agent 生成。

Lynx 是首个具备操作系统级上下文的 AI Agent,能够看见你的屏幕,理解你当前的工作环境,记住你的工作习惯。你不需要告诉它任何上下文,它就能自己主动完成工作。即将上线内测,感兴趣的友友可以蹲蹲。

Kitty Screen GitHub 仓库
项目源码与技术栈

原始小红书笔记