🔧 阿川の電商水電行
為 openclaw 龍蝦打造了一間像素辦公室！實時看它寫代碼、摸魚、修 bug、寫日報，太可愛了吧！
哈囉，大家好！
我是阿星👋
最近我在用 Claude Code 幫我工作，時不時就盯著黑漆漆的終端看，不是很可視化。
然後我發現了一個寶藏開源項目，叫 Star Office UI。
作者用像素風格給 AI 打造了一間小辦公室：
你的 AI 助手會根據當前工作狀態，
自己走到辦公室裡不同的位置——
忙著寫東西、坐著研究、在角落裡調 bug……
它怎麼工作的
AI 助手有不同的工作狀態，狀態對應辦公室裡不同的區域和動畫。
狀態目前有 6 種：
- idle：閒置，待命中
- writing：寫東西，工作區
- researching：研究中
- executing：正在執行任務
- syncing：同步進度中
- error：報 bug 了，去 bug 區
每次 AI 助手切換狀態，它對應的像素角色就會走到新的位置，氣泡裡會顯示它在幹嘛，比如「正在整理文檔」「發現問題，排查中」。
最讓我覺得好玩的是那個「昨日小記」：後端會自動從記憶檔案裡讀取昨天的工作記錄，做基礎脫敏後展示在前端。
你的 AI 助手昨天整體在幹嘛，在辦公室裡一目了然。
五分鐘跑起來
兩種方法：安裝超簡單，全程命令行搞定：
1、IDE 輔助安裝：
最簡單的辦法是打開 cc 或者 antigravity，直接吩咐：
如果你不知道怎麼裝 cc，參考上一篇小白喂飯貼小白秒裝 ClaudeCode 和 CCswitch，世界先進 AI 編程模型隨便切！手把手教程
2、終端命令行安裝：
打開蘋果搜索框，輸入終端，打開終端
拖入一個資料夾，這個資料夾是你自己需要提前隨便起個英文名建好的
然後依次鍵入下面代碼，不要鍵入帶 # 號的😂
# 克隆項目
git clone https://github.com/ringhyacinth/Star-Office-UI.git
cd star-office-ui
# 安裝 Python 依賴
python3 -m pip install -r backend/requirements.txt
# 初始化狀態檔案
cp state.sample.json state.json3、啟動後端效果：
cd backend
python3 app.py
打開 http://127.0.0.1:18791，像素辦公室就出來了。
可以看到它正在運行。
連接到 openclaw
怎麼讓 openclaw 和這個 UI 看板真正連接起來？
需要你寫狀態檔案：1、可以是讓 openclaw（moltbot）寫，找到 moltbot 處理消息的核心代碼（可能在 src/agent/ 或 src/commands/agent.ts）在 agent 開始處理任務時，寫入狀態檔案：
writeFileSync('~/.openclaw/workspace/state.json',
JSON.stringify({state: 'writing', detail: '正在處理', updated_at: new Date()}))在 agent 完成任務時，更新狀態：
writeFileSync('~/.openclaw/workspace/state.json',
JSON.stringify({state: 'idle', detail: '待命中', updated_at: new Date()}))修改 office-agent-push.py 讓它讀取這個檔案（這個已經配置好了）
優點：更符合原始設計，狀態檔案可以被其他工具閱讀
缺點：需要改 moltbot 源碼，每次更新 moltbot 可能需要重新修改
2、也可以是直接監聽日誌，我用的第二種。因為我不想動龍蝦了。
複製 Star Office UI 到項目到你 moltbot 子目錄下
cd /path/to/moltbot
cp -r /path/to/Star-Office-UI apps/star-office-ui啟動狀態監聽腳本
cd apps/star-office-ui
python3 office-log-monitor.py原本的 Star Office UI 項目裡有一個 office-agent-push.py，但那個腳本是通過讀取狀態檔案（state.json）來獲取狀態的。問題是我 moltbot 並沒有寫這個狀態檔案。
所以我寫了新的 office-log-monitor.py，它的工作方式是（你可以把它發給 cc 讓 cc 直接給你寫出一個類似的檔案）：
- 直接監聽 moltbot logs --follow 的輸出
- 解析日誌中的 session state: new=processing 和 new=idle 來判斷工作狀態
- 實時推送到 Star Office UI 的後端
- 整個流程：
- 用戶發消息 → Moltbot 處理任務 → 日誌輸出狀態變化
- ↓
- office-log-monitor.py 監聽日誌
- ↓
- 解析狀態（idle/writing/error）
- ↓
- 推送到 Flask 後端 (18791 端口)
- ↓
- 前端顯示像素小人移動
查看可視化效果
現在你可以用命令行
或者飛書發消息給你的 openclaw 試試
比如我讓它寫 Python 他就會從休息區跑到工作區
# 示例
moltbot agent --message "給我寫個 Python 的 hello world" --session-id test-$(date +%s)然後打開瀏覽器訪問：http://127.0.0.1:18791 就可以看到了
如果你點了離開房間就只剩大海星了
如果你根本沒有 openclaw
我知道裝 openclaw 不容易，很多同學可能太忙了還沒裝
如果你還是想體驗
你可以手動切換狀態試試效果：
cd ~/Downloads/code/clawfeishu/clawdbot-feishu
# 讓小人回到休息區
python3 set_state.py idle "休息一下"它就真的跟大海星休息去了。
如果你鍵入的是 writing 相關的指令，
看板裡的寶石海星主角應該會走到辦公桌位置。
你可以看到，海星已經從中間移到了右邊，
他的狀態是 writing，也就是在給你寫代碼。
讓 bot 從 1 數到 100 的時候
你就會看到大海星先去了辦公桌然後幹完了又回到了休息室。
cd /Users/xingyang/moltbot/apps/star-office-ui && python3 set_state.py writing "正在數數: 1-100" && sleep 2 && for i in {1..100}; do echo "數到 $i"; sleep 0.1; done && python3 set_state.py idle "數完了,休息"
你也可以讓大海星代表自己，
這都很容易，直接跟 cc 說就行了。
ok 我是阿星，
更多 AI 應用，
我們下期再見！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
