给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、终端命令行安装：

打开苹果搜索框，输入终端，打开终端

拖入一个文件夹，这个文件夹是你自己需要提前随便起个英文名建好的

然后依次键入下面代码，不要键入带带#号的😂

bash 复制代码

#克隆项目
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.json

3、启动后端效果：

bash 复制代码

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 开始处理任务时，写入状态文件：

less 复制代码

writeFileSync('~/.openclaw/workspace/state.json', 
  JSON.stringify({state: 'writing', detail: '正在处理', updated_at: new Date()}))

在 agent 完成任务时，更新状态：

less 复制代码

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子目录下

bash 复制代码

cd /path/to/moltbot
cp -r /path/to/Star-Office-UI apps/star-office-ui

启动状态监听脚本

bash 复制代码

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他就会从休息区跑到工作区

bash 复制代码

# 示例
moltbot agent --message "给我写个 Python 的 hello world" --session-id test-$(date +%s)

然后打开浏览器访问：http://127.0.0.1:18791 就可以看到了

如果你点了离开房间就只剩大海星了

如果你根本没有openclaw

我知道装openclaw不容易，很多同学可能太忙了还没装

如果你还是想体验

你可以手动切换状态试试效果：

bash 复制代码

cd ~/Downloads/code/clawfeishu/clawdbot-feishu

# 让小人回到休息区
python3 set_state.py idle "休息一下"

它就真的跟大海星休息去了。

如果你键入的是writing相关的指令，

看板里的宝石海星主角应该会走到办公桌位置。

你可以看到，海星已经从中间移到了右边，

他的状态是writing，也就是在给你写代码。

让bot从1数到100的时候

你就会看到大海星先去了办公桌然后干完了又回到了休息室。

bash 复制代码

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应用，

我们下期再见！