最近在终端里使用 Claude Code 进行开发时,面对黑乎乎的界面总感觉少了点什么——视觉反馈不够直观。正巧发现了一个很有意思的开源项目,叫做 Star Office UI。开发者用像素风格为 AI 助手打造了一间迷你办公室,视觉效果很有代入感:AI 助手会根据当前工作状态,自动移动到办公室的不同位置——忙着写代码、坐着研究、或者在角落里调试 bug……画面感十足。
这个项目的工作原理其实很直观:AI 助手拥有多个工作状态,每个状态对应办公室的不同区域和动画效果。目前总共设有 6 种状态:
- idle:空闲,待机中
- writing:写作中,位于工作区
- researching:调研中
- executing:任务执行中
- syncing:同步进度中
- error:遇到错误,前往 bug 区
每当 AI 助手切换状态,对应的像素角色就会移动到新位置,气泡框中会显示当前活动内容,比如「正在整理文档」「发现问题,排查中」。最有趣的设计是「昨日小记」:后端会自动从记忆文件中读取前一天的工作记录,完成基础脱敏后展示在前端。你的 AI 助手昨天整体在忙什么,在办公室里一目了然。
五分钟快速上手
安装过程非常简单,全程通过命令行即可完成,有两种方式:
1、IDE 辅助安装
最简单的方法是打开 cc 或者 antigra vity,直接执行指令即可。
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.json
3、启动后端效果
cd backend
python3 app.py
打开 https://127.0.0.1:18791,像素办公室就呈现出来了,可以看到它正在运行。
连接到 openclaw
如何让 openclaw 和这个 UI 看板真正联动起来?这里有两种方式:
第一种:直接写入状态文件。可以让 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 可能需要重新修改。
第二种:直接监听日志。这个方案更推荐,因为不需要改动龙虾。复制 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。它的工作方式是:直接监听 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)
然后打开浏览器访问 https://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 说就行。
