“主人，你该休息了！”我做了个熊猫插件，比你的闹钟还凶

大家好，我是冷逸。

最近，我搓了一个防沉迷应用panda-gatekeeper，中文名叫「熊猫监督员」。当你在网上冲浪太久时，会有一只熊猫跑出来，告诉你“主人，你该休息了”，并强制霸占你的屏幕。

给大家看下体验视频。

不管你是在逛X、ChatGPT，还是Github、HuggingFace，它都能强制霸屏。而且，每个网站是单独计算时间。

支持Chrome、Firefox、Edge等浏览器插件使用，应用仅2M，非常便捷，非常流畅。

本项目基于日本开发者@zokuzoku的「cat-gatekeeper」项目进行二开，并做了全面汉化，新增加了一些有趣的功能。

项目已开源，欢迎大家Star。

开源地址：

https://github.com/lengyi2030/panda-gatekeeper

拆解项目

给大家简单介绍下这个项目的开发思路。

我是用的Claude Code+Step Plan，得益于阶跃星辰Step Plan的多模型能力，所以开发起来很快，大概就半天时间搞定。

Coding Plan，大家应该订阅过很多了。但大多数只能接一个模型，如果你要切换模型，得再手动输ANTHROPIC_BASE_URL、AUTH_TOKEN、MODEL三段命令，或者在CC-Swith里切，就很麻烦。

而Step Plan是我见过有点不一样的coding plan，它不只是接入单一模型，而是提供了一个统一入口，可以在不同任务中调用不同能力的模型，一个Plan，多个model。

对我这个边写代码、边改素材、边生成语音的项目来说，这种“一套配置，多种能力”的体验会顺很多。

这里面，最值得推荐的是step-router-v1这个模型名称，它是一个可以智能路由各个模型的模型。

比如step-3.5-flash、DeepSeek-V4-Pro，它可以根据任务智能路由。所以，一般无脑就选这个模型。

如果你是Windows用户，直接在你的终端里输这段命令就行：

setx ANTHROPIC_MODEL "step-router-v1"

配置好Claude Code的模型后，接下来就是具体的开发环节了。

1）先clone仓库

@zokuzoku 已经把项目开源放在了Github上。

我们先让CC把项目下载下来，直接跟他说：

帮我把这个项目https://github.com/zokuzoku/cat-gatekeeper 下载到xx文件夹。

2）准备素材

原项目是一个猫咪霸屏，我想换成熊猫，并给它新增加一些功能。

我们问一下CC，需要准备哪些素材。

CC告诉我，有3个图标和2个动画视频需要替换。

图标，这个简单，直接让step-image-edit-2模型生成png图片，它帮我把尺寸都做好了，我直接裁剪就行。

提示词：用同一个熊猫主体，设计3个png图标，尺寸分别是：16x16px、48x48px、128x128px

视频，我们随便找家模型生成一段就行。

提示词：纯黑背景（网站素材），固定镜头，一只熊猫从画面左侧走过来，做着一些有趣的动作，霸占着整个画面。

需要注意，大多数视频模型生成的都是mp4格式的视频，要把它放到网页上，我们得做压缩，转成专为网页服务的Webm格式。

通常，都是用格式转换神器FFmpeg来做。

可以直接命令行输入：

ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus output.webm

当然，如果你对代码比较恐惧，也可以直接告诉你的CC：

用FFmpeg把xx视频转为Webm格式。

3）二次开发

素材都准备好后，接下来就进行二次开发。

我整理了一下我的二开需求，直接发给CC。

文件夹xxxx放了一个浏览器插件项目，请对这个项目进行二次开发，角色换成熊猫，素材我已经放在assets文件夹了。 要求： 1、刷新频率的时间可以由用户定制。 2、提供测试入口，用浏览器打开即可测试。 3、素材仅用neko1，循环播放。 4、给应用增加语音提醒功能。用stepaudio-2.5-tts模型生成一段audio，配音文字为“主人，你该休息了。听话，现在就离开工位，去喝杯水，看下风景，多走动走动，这是命令”，模拟熊猫憨态可掬的形象生成一段语音内置到应用里。 5、我需要放在Github上，重写README.md，中英日三种语言。

从理解整个项目，到新增需求，再到修改代码，CC很快就完成了开发。包括新增的audio，也是直接由Step Plan生成。

我们来测试一下。

功能上基本都完成了，但还有几个细节需要修改，继续提需求。

测试发现几点问题，请修复： 1、所有界面语言，请改成中文。 2、删掉“主人，你该休息了”的文字框，语音提醒需要保留。 3、去掉数字的灰底框，只保留倒计时数字。

再次修改后，就基本没有什么问题了。

我们直接放到浏览器的插件里，来实机测试一下，也是没有问题的，它会到点准时提醒。

4）插件使用流程

那我们该如何使用这个插件呢。

目前，我还没来得及时间上传到chrome应用商店。

大家可以到Github上下载这个仓库，然后让浏览器加载这个程序进行使用。

可以在终端输入这段命令，克隆本仓库：

git clone https://github.com/lengyi2030/panda-gatekeeper.git

也可以直接让你的Claude Code、OpenClaw、Hermes等Agent帮你下载。

项目地址：https://github.com/lengyi2030/panda-gatekeeper

对了，大家记得帮我在Github上点点star，感恩(´ᴗ`ʃƪ)

如果你打不开Github，也可以直接给我回关键词【熊猫】，下载压缩包。

下载后，在你的浏览器里，找到「拓展程序」入口。

chrome浏览器直接输：chrome://extensions

先在右上角打开「开发者模式」，然后在左上角点「加载未打包的拓展程序」，把panda-gatekeeper文件夹直接加载到chrome浏览器里。

然后，就可以使用了。

整个体验下来，Step Plan这一套多模型能力确实有点东西。

既能干Agent任务，也能搞语音应用，甚至连图片生成-编辑模型它也有，全都打包在这一个Plan里。

一个Plan，多个model。

我订阅的是99的Plus版本，每5小时可以调用400次Prompt*（约6000次模型调用）。像我上面这个项目，大概一共也就200次模型调用。

开放平台：platform.stepfun.com

用起来，完全不虚，速度也很快。

不得不说，现在的Coding Plan选择，真是越来越多了。

剩下的，就看你的创意能不能匹配了。