像素龙虾办公室：实时观察它写代码、摸鱼与修bug

调试 AI 终端时，黑底绿字的界面总少了点直观反馈——可视化几乎是刚需。恰好发现的这款开源小项目「Star Office UI」，用像素风为大型语言模型搭了一座微型办公室。AI 助理会根据工作状态自动穿梭于不同工位：写代码时移到办公区，研究资料时窝在沙发，调试漏洞则溜达至墙角……画面感瞬间拉满。

项目逻辑很直接：AI 助理预设 6 种工作状态，每种状态对应办公室的特定区域与动画。

• idle：空闲待命，在休息区放空
• writing：写文档/代码，位于工作台
• researching：翻阅资料，研究中
• executing：正在执行命令
• syncing：同步进度中
• error：报错，自动跳转到 bug 区

状态切换时，像素角色会实时移动到对应位置，气泡里显示当前动作，例如「正在整理文档」「发现异常，排查中」。最有趣的是「昨日小记」模块：后端自动读取记忆文件中的工作日志，经基础脱敏后渲染在前端页面。只需一眼，就能看清昨天 AI 助理在办公室里的全天动态。

五分钟跑起来

安装极简，全在命令行完成，提供两种途径：

1、IDE 辅助安装

最省力的方式：打开 cc 或 antigravity，直接下达指令即可。

2、终端命令行安装

在 macOS Spotlight 搜索「终端」并打开。首先拖入一个预先建好的英文名文件夹，然后依次执行以下命令（忽略 # 号后的注释）：

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

打开 http://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() }))

任务完成后更新状态：

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

原项目自带的 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)

然后在浏览器中访问 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 下达指令即可。

来源：互联网