夜雨聆风大家好，我是冷逸。
最近，我搓了一个防沉迷应用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_BASE_URL "https://api.stepfun.com/step_plan"setx ANTHROPIC_AUTH_TOKEN "YOUR_API_KEY"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选择，真是越来越多了。
剩下的，就看你的创意能不能匹配了。
