你甩了一条指令给 AI——"帮我查明天天气，整理到日报里"——然后盯着聊天窗口的"正在输入…"干等了三分钟。它在搜索？在写？还是挂了？你不知道。

有人给这个问题做了一个特别有意思的解——给 AI 助手盖了一间像素办公室。接到任务走去工位，闲下来溜回休息区摸鱼，出错了还会冒汗说"啊哦…"。像素版的外卖骑手实时地图，只不过追踪的是你的 AI。

它叫 Star Office UI，200 多行代码、Flask + Phaser，2026 年 2 月底刚在 GitHub 上开源，Star 数已经过 250。

项目地址：https://github.com/ringhyacinth/Star-Office-UI

读完这篇你能拿走：它解决了什么问题、200 行代码怎么做到的、20 分钟从零跑通的完整步骤，以及一个更值得想的问题——AI 是不是不应该只住在聊天框里。

你的 AI 助手，其实是个"隐形打工人"

如果你用过 OpenClaw 或者类似的自托管 AI Agent，你大概知道这种感觉：

你在 Telegram 里甩一句"帮我查一下明天天气，整理到日报里"，然后……就没有然后了。你盯着聊天窗口，等一条回复。它在搜索？在写？还是卡住了？你不知道。

就像给一个远程同事发了条消息，对方既没有"已读"，也没有"正在输入"——你只能干等。

Star Office UI 解决的，就是这个"黑盒感"。

它把 AI 助手的工作状态映射到一个可视化的像素小办公室里：

AI 状态像素办公室里的表现

idle（待命）小人在休息区晃悠，气泡冒出"摸鱼中…""有没有新任务？"

writing（写作）小人走到办公桌前，气泡写着"这个要记下来"

researching（搜索）小人在工位上，"让我搜一下""找到线索了"

executing（执行）小人冲刺模式，"冲鸭！""马上搞定"

syncing（同步）小人在休息区，"备份备份""安全第一"

error（出错）小人在休息区，气泡变成"啊哦…""让我看看"

小人还会眨眼，走路时微微颠簸，偶尔冒出随机气泡。整套动画用 Phaser 游戏引擎实现，跑在浏览器里，手机打开就能看。

200 行代码的"办公室模拟器"

这个项目的技术栈简单到离谱：

• 后端：一个 Flask 应用，不到 100 行，干两件事——提供前端页面、返回当前状态的 JSON

• 前端：一个 HTML 文件 + Phaser.js CDN，233 行搞定全部动画和状态轮询

• 状态文件：一个 state.json，所有魔法的中枢

架构一句话说完：

AI 助手写 state.json → Flask 读 state.json → 前端每 2 秒轮询 /status → Phaser 渲染动画

没有数据库，没有 WebSocket，没有构建流程。就是文件读写加一个 HTTP 接口。

但在这么简单的底子上，有几个设计挺巧的。

状态自动过期。后端有个 auto-idle 机制：如果一个"工作状态"（writing / researching / executing）超过 25 秒没更新，自动回退到 idle。就算 AI 进程挂了、脚本崩了，小人也不会永远卡在办公桌前——它会自己溜回休息区。

说白了——哪个打工人会一直坐在工位上不动？

气泡文案有"人味"。每个状态都配了一组随机气泡文案。不是冷冰冰的 Status: researching，而是"让我搜一下""找到线索了""这个有意思"。待命时会说"摸鱼中…""咖啡真好喝"。

这些文案看起来是小事，但它把一个状态监控面板变成了一个有性格的角色。你不再是在看一个仪表盘，你是在看你的 AI 同事上班。

角色完全用代码画的。小人没有用任何图片资源——一个 12×12 的橙色方块当身体，两个 3×3 的白色小方块当眼白，里面各点一个 1×1 的黑色像素当瞳孔。闭眼时把白色方块换成黑色横线，就实现了眨眼动画。十来行代码，就是全部的"美术资源"。

20 分钟从零到"同事上班"

你需要

• Python 3.9+

• 一张 800×600 的像素风办公室背景图

背景图怎么来？最省事的办法：用任意一个 AI 图片生成工具，输入 "top-down pixel art office room, 800x600, cozy, warm lighting"，出来的图直接能用。也可以去 http://itch.io 找免费像素素材包——搜 "office tileset" 一堆。

跑起来

1. 克隆项目

git clone https://github.com/ringhyacinth/Star-Office-UI.git

cd Star-Office-UI

2. 装依赖（就一个 Flask）

pip install flask

3. 把你的背景图放进去

800×600 PNG → frontend/office_bg.png

4. 启动

cd backend

python app.py

打开 http://127.0.0.1:18791，你应该能看到一间像素办公室和一只小橙人。如果看到白屏，八成是背景图路径没放对——检查 frontend/office_bg.png 是不是在。

让小人动起来

python set_state.py writing "正在帮你写日报..."

python set_state.py idle "等待新任务"

python set_state.py researching "在查最新的 AI 论文..."

每次执行，小人就会移动到对应区域，气泡和底部状态栏也会跟着变化。

手机远程监工

装个 cloudflared，一行命令开公网隧道：

cloudflared tunnel --url http://127.0.0.1:18791

它会给你一个 https://xxx.trycloudflare.com 的地址。手机打开就能看，随时随地监工你的 AI 同事。

安全提示：quick tunnel 的 URL 任何人都能访问。detail 字段里别写敏感信息（比如文件路径、API Key）。如果要长期使用，建议给 /status 接口加一个简单的 token 校验。

让龙虾真正"住进去"

上面是通用玩法——任何能写 state.json 的程序都能驱动这间办公室。但如果你用的是 OpenClaw，还能更进一步。

这个项目本身就是 OpenClaw 社区的产物——作者 ringhyacinth 把它作为 OpenClaw 的一个 Skill（插件）发布。集成方式很直接——让 OpenClaw 在执行不同任务阶段时，调用 set_state.py 更新状态：

• 收到用户指令 → set_state.py researching "在分析你的需求..."

• 开始写文件 → set_state.py writing "正在写代码..."

• 执行终端命令 → set_state.py executing "跑测试中..."

• 任务完成 → set_state.py idle "搞定了，等你下一条指令"

这样一来，你的 OpenClaw 小龙虾就不再是一个隐形的后台进程，而是一个有工位、有表情、有动态的同事。你看着它在像素办公桌前忙碌，偶尔冒出一句"冲鸭！"，然后收到一条 Telegram 消息："日报已整理完毕。"

这个体验差距，就是"用工具"和"跟同事协作"的差距。

看看大家的"办公室"长什么样

00:39

00:29

00:40

为什么这件"小事"值得认真聊

你可能会想：不就是个状态监控面板换了张皮吗？

对，从功能上看，它和一个返回 JSON 的 API 没有本质区别。但从体验上看，它做对了一件被绝大多数 AI 产品忽略的事——让 AI 有存在感。

现在的 AI 产品有一个通病：AI 只在你需要它的时候出现，其他时间完全消失。你提问，它回答，对话结束，它就不存在了。这让 AI 永远停留在"工具"的定位上——用完即弃，没有陪伴感，也没有信任积累。

Star Office UI 给出了一种不同的思路：即使你没有在跟 AI 对话，它也在"那里"。待命时在休息区喝咖啡，接到任务后走到办公桌前开干。

这不是拟人化的噱头，而是在解决一个真实问题：异步任务场景下的信任感。

当 AI 替你跑一个需要 5 分钟的任务时，你要么焦虑地等着，要么假装不在意地去做别的事。但如果你能"看到"它正在忙，看到它的状态在变化，甚至看到它偶尔冒出一句"再检查一遍"——你的焦虑会降低，你对它的信任会提高。

外卖 APP 让你看骑手实时位置，不是因为你真的关心他在哪条路上——而是看到小图标在动，你就不焦虑了。Star Office UI 做的是同一件事：把"在处理中"从一行冰冷的文字，变成一个你能"看见"的过程。

其实这个思路并不孤立。你可能还记得 2018 年火遍朋友圈的《旅行青蛙》——你的蛙出门了，你不知道它去了哪，但打开 APP 能看到桌上的行李变了、新明信片到了。旅行青蛙靠的是"不确定感 + 惊喜"，Star Office UI 靠的是"确定感 + 实时反馈"——路径相反，但都在做同一件事：让一个你看不到的过程，变得"有东西可看"。

AI 工具圈更是如此。2024 年亮相的 Devin（AI 软件工程师）用的也不是聊天框，而是一个任务面板——你能看到它在哪个文件、执行到哪一步、遇到了什么问题。Cursor 的 Agent 模式跑多步任务时，也会实时展示当前动作和进度条。

它们都在回答同一个问题——当 AI 越来越能干活的时候，我们需要什么样的 UI 来跟它协作？

聊天框天然适合"问答"，不适合"协作"。你不会用微信群来管理一个项目——但你可能会用一个看板、一个共享文档、一个 Notion 页面。绝大多数 AI 产品经理还在卷聊天框的排版和多模态输入，但也许真正该问的问题是：AI 是不是根本就不应该只住在聊天框里？

当 AI 从"聊天助手"进化到"能干活的同事"时，也许它需要的不是更大的聊天窗口，而是一个工位——一个你随时能瞄一眼、知道它在干嘛的地方。

Star Office UI 用最轻量的方式——一个 JSON 文件加两百来行前后端代码——给出了一个有趣的答案。

说句实话

这个项目有明显的局限：

• 强依赖 Phaser 全量加载——对低端设备不友好，首屏体积偏大

• Agent 状态映射靠手动配置——接入新 Agent 需要自己写适配层，没有通用协议

• 只支持单 Agent 视图——如果你有多个 Agent 协同，目前还没有多角色同屏方案

• 像素资产缺乏主题扩展——默认只有一套像素风，想换风格得自己画

简单说：它是一个 demo 级别的概念验证，不是开箱即用的产品。适合折腾、不适合直接丢进生产环境。