兰 亭 墨 苑

标题 *

URL 别名 *

内容 * (支持 Markdown 格式) 你甩了一条指令给 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 级别的概念验证，不是开箱即用的产品。 适合折腾、不适合直接丢进生产环境。 总结 还记得开头的场景吗？你给 AI 甩了一条指令，然后盯着"正在输入…"干等三分钟——不知道它在搜索、在写、还是挂了。 Star Office UI 用 200 行代码做了一件事：把那三分钟的焦虑，变成了一只小橙人跑去工位敲键盘的画面。像素版的外卖骑手地图，只不过追踪的是你的 AI。 它的核心价值不在代码量，而在于一个洞察——AI 的工作状态不应该是一个 JSON，而应该是一个"人"在做事的画面。 如果你在用 OpenClaw 或者任何自托管 AI Agent，花 20 分钟跑起来试试。下次它替你干活的时候，你不用再盯着聊天窗口干等，而是看着一只小橙人在像素办公桌前忙碌，偶尔冒出一句： "冲鸭！" 然后你会发现，你对它的感觉变了。它不再是一个工具，而是一个——虽然只有 12×12 像素——但确实在"上班"的同事。 谁适合试？在用自托管 Agent、爱折腾前端的开发者，以及想给 AI 加个"面子"的产品经理。如果你只用 ChatGPT 网页版——先收藏，等它有一天支持插件的时候再来。 最后留一个问题：你觉得给 AI 弄一间像素办公室是正经事，还是纯粹浪费像素？ 评论区聊聊。 引用清单 来源 类型 URL Star Office UI 项目源码 https://github.com/ringhyacinth/Star-Office-UI Phaser 3 游戏引擎 https://phaser.io/phaser3 Cloudflare Quick Tunnels 公网隧道 https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/ OpenClaw AI Agent 平台 https://github.com/openclaw/openclaw http://itch.io Pixel Art Assets 素材资源 https://itch.io/game-assets/tag-pixel-art Devin (Cognition) AI 工程师 https://devin.ai/ 旅行青蛙 Wikipedia 游戏百科 https://zh.wikipedia.org/wiki/旅行青蛙

配图 (可多选)

标签