大家好，我是冷逸。

最近，我搓了一個防沉迷應用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選擇，真是越來越多了。

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