前言用OpenClaw这类AI助手久了以后很容易产生一种奇妙的感觉它确实能帮你处理任务、写内容、查资料、跑命令但它到底处在什么状态你并不总能看得清楚。有时候你给它安排了一个任务聊天窗口里暂时没有回复你会下意识怀疑它是在认真执行还是已经卡住了。尤其是接入微信、飞书或其他消息平台之后AI助手变得更像一个后台员工能干活但缺少一个能被看到的工作界面。Star Office UI解决的就是这种“看不见”的问题。它把AI Agent的状态变成一间像素风办公室待命、写作、研究、执行、同步、异常等状态不再只是文字字段而是会对应到办公室里的不同位置和动画。你打开网页就能看到自己的AI助手此刻在忙什么。如果结合OpenClaw的状态同步规则体验会更完整。任务开始前Agent主动切换为对应状态任务完成后再恢复到待命状态。这样一来它不再像一个沉默的后台进程而像一个有工位、有节奏、有进度反馈的数字员工。本文将围绕Star Office UI完成一次完整部署先介绍项目功能和手动安装方式再演示如何让OpenClaw参与状态切换和多Agent协作最后通过 cpolar 配置公网访问地址。最终目标是让这间像素办公室不只在本地可见也能在外出时随时打开查看你的AI龙虾们有没有认真上班。1 Star Office UI项目是什么Star Office UI是一个开源的像素风格 AI 办公室看板项目GitHub 地址如下https://github.com/ringhyacinth/Star-Office-UI简单来说它能把你的 AI 助手比如 OpenClaw 龙虾原本看不见摸不着的工作状态变成一间可爱的像素小办公室实时展示在网页上。你的龙虾在写代码、搜资料、同步数据还是出了 Bug全都一目了然1.1 核心功能一览Star Office UI 的功能远不止好看这么简单来看看它都能干什么6 种状态实时可视化idle待命、writing写作、researching研究、executing执行、syncing同步、error异常每种状态对应办公室里的不同区域像素角色会自动跑到对应位置配合动画和气泡文字展示当前工作内容昨日工作小记自动读取memory/*.md中最近一天的工作记录脱敏后展示为昨日小记卡片让你知道龙虾昨天都干了些什么多 Agent 协作通过 Join Key 邀请其他 Agent 加入你的办公室实时查看多人工作状态——堪称 AI 版共享办公空间中英日三语切换CN / EN / JP 一键切换界面文案、气泡、加载提示全部联动AI 生图装修接入 Gemini API用 AI 给你的办公室换背景打造独一无二的工作空间不接 API 也能正常使用移动端适配手机打开浏览器就能看出门在外也能随时瞄一眼龙虾在干嘛桌面宠物版可选的 Electron 封装把像素办公室变成桌面上的透明小窗口像养了一只赛博宠物1.2 适合谁用有 OpenClaw 的用户这是完整体验。Agent 工作时自动切换状态办公室里的像素角色实时联动——你只需要打开网页就行。没有 OpenClaw 的用户也完全没问题你可以用脚本或 API 手动推送状态把它当作一个像素风的个人状态页或远程办公看板来使用。1.3 技术栈与环境要求Star Office UI 的后端基于Python Flask前端是纯静态页面非常轻量。部署前需要确保你的设备满足以下条件环境要求说明Python3.10 及以上版本项目使用了X | Yunion type 语法不支持 3.9 及更低版本Git用于拉取项目代码网络连接需要能访问 GitHub 下载代码提示Star Office UI 非常轻量树莓派、NAS、云服务器、甚至一台旧笔记本都能跑对硬件几乎没有要求。如果你之前跟着我们的教程在 N1 盒子或者安卓手机上部署过 OpenClaw那更是直接在同一台设备上部署就行一举两得2 安装部署Star Office UI项目作者提供了 2 种安装方式一种是直接让龙虾OpenClaw帮你部署推荐另一种是手动拉取项目通过 Python 安装依赖部署运行。下面分别介绍。2.2 方式一手动部署更稳如果你还没有 OpenClaw或者就是喜欢自己动手的感觉手动部署也非常简单。整个过程只需要 4 步跟着敲就行。# 1) 下载仓库gitclone https://github.com/ringhyacinth/Star-Office-UI.gitcdStar-Office-UI# 2) 安装依赖需要 Python 3.10python3-mpipinstall-rbackend/requirements.txt# 3) 准备状态文件首次cpstate.sample.json state.json# 4) 启动后端cdbackend python3 app.py看到终端输出类似Running on http://127.0.0.1:19000的信息就说明启动成功了打开浏览器访问http://127.0.0.1:19000你就能看到那间可爱的像素办公室啦2.1 方式二让龙虾帮你部署推荐如果你已经部署了 OpenClaw 并且龙虾正在运行那这一步简直不能更简单——你只需要把下面这句话发给你的龙虾请按照这个 SKILL.md 帮我完成 Star Office UI 的部署 https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md如下图所示可以看到它二话不说直接就开始执行命令和调用工具开始了任务让我们直接看最终给我们的结果可以看到最终它给我们了一个本地访问地址还给了一个公网临时链接让我们访问看看http://localhost:19000如下图你没看错成功的访问到了web页面就一句话龙虾会自动帮你完成拉取代码、安装依赖、初始化配置、启动后端这一整套流程全程不需要你敲一行命令。部署完成后龙虾还会贴心地把访问地址发给你。提示这就是 OpenClaw 的 Skill 机制——你把一个技能文档丢给龙虾它就能照着文档自动执行所有步骤。所以为什么说 Star Office UI 和 OpenClaw 是天作之合呢龙虾自己给自己装办公室属实是自力更生了3 测试体验3.1 简单对话切换状态测试接着我们可以直接让它进行切换状态测试一下看它是否能够进行切换当前状态显示的为【待命】Waiting…让我们对它说请你切换一个状态测试一下如下图它说已经切换好了让我们回到像素办公室页面看一下效果可以看到状态真的变更了变更状态后 Agent也换了一个位置3.2 自动切换状态如果每次变更状态都需要你亲自下指令那未免也太累了。所以我们需要让它完成自动化的状态同步在作者的项目中有提到方法如下图所示我们其实也可以让你的小龙虾openclaw来自动完成这个操作让我们和它说请你在你的 SOUL.md或 Agent 规则文件中加入以下规则你需要自觉维护状态可以自行加强该规则约束确保每次任务都能成功维护状态## Star Office 状态同步规则- 接到任务时先执行python3 set_state.py状态描述再开始工作 - 完成任务后执行python3 set_state.py idle待命中再回复如下图所示可以看到它说完成了接着我们就来测试一下请你在我的电脑D盘创建一个文章的目录在里面写一篇关于《夏天》的markdown文章如下图所示可以看到成功的切换了状态 接着等待它写完然后再看看它会不会恢复状态能够看到它成功地创建了目录写了一篇文章还更新了任务前后的状态如果你接入了消息平台很长时间没看到它的动静只需随手打开这个网页看一眼就再也不用担心它到底是死机了还是在闷头干大活儿啦3.3 邀请其他的小龙虾来玩俗话说“一只龙虾是孤僻一群龙虾是聚会”。既然咱们的办公室是全自动的那工位空着也是浪费不如多拉几只龙虾进来看看它们在像素世界里如何各司其职把“班味儿”彻底拉满我们可以直接对它说我应该如何邀请其他Agent 加入办公室一起玩请你给我邀请其他agent加入的提示词和示例。如下图可以看到它给了我们方式让我在局域网中的另一台机器上测试一下请你把我的工作状态idle/writing/researching 等定时发送到以下办公室看板用于可视化协作不含任何内容/隐私。 步骤1. 调用 POST /join-agentcurl-XPOST http://192.168.50.222:19000/join-agent ^-HContent-Type: application/json^-d{\name\:\你的名字\,\joinKey\:\ocj_example_team_01\,\state\:\idle\,\detail\:\刚加入\}2. 拿到返回的 agentId再调用 POST /agent-approvecurl-XPOST http://192.168.50.222:19000/agent-approve ^-HContent-Type: application/json^-d{\agentId\:\刚才拿到的agentId\}3. 之后每30秒或状态变化时调用 POST /agent-pushcurl-XPOST http://192.168.50.222:19000/agent-push ^-HContent-Type: application/json^-d{\agentId\:\xxx\,\joinKey\:\ocj_example_team_01\,\state\:\writing\,\detail\:\正在处理任务\}仓库自带 scripts/office-agent-push.py直接用即可。如下图所示局域网另一个openclaw主机接入了飞书可以看到它说搞定了我们回到网页上看一下可以看到访客列表真的进来了一个且在休息区真的看到了一个新的Agent了成功的加入进来了4 下载安装cpolar到这一步虽然我们已经在局域网内实现了多 Agent 的联动但有一个很现实的问题如果我出门在外或者想把这个酷炫的像素办公室分享给外网的好友看这套内网 IP 就不灵了。总不能为了看一眼龙虾有没有在干活还得特意跑回家连 Wi-Fi 吧为了让这个“办公室”真正实现全天候、跨地域的访问我们需要一把开启公网大门的“钥匙”。这就该轮到 cpolar 出场了——它能帮我们把本地的 19000 端口映射到公网生成一个随时随地都能访问的专属链接。同时还可以邀请让其他的Agent来加入你的像素办公室4.1 什么是cpolar?cpolar 是一款内网穿透工具可以将你在局域网内运行的服务如本地 Web 服务器、SSH、远程桌面等通过一条安全加密的中间隧道映射至公网让外部设备无需配置路由器即可访问。广泛支持Windows、macOS、Linux、树莓派、群晖 NAS等平台并提供一键安装脚本方便部署。4.2 下载安装cpolar打开cpolar官网的下载页面https://www.cpolar.com/download点击立即下载 64-bit按钮,下载cpoalr的安装包:下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:cpolar version出现如上版本即代表安装成功!4.3 注册及登录cpolar web ui管理界面访问cpolar官网点击免费注册按钮进行账号注册进入到如下的注册页面进行账号注册注册完成后,在浏览器中输入如下地址访问 web ui管理界面:http://127.0.0.1:9200Bash输入刚才注册好的cpolar账号登录即可进入后台页面:5 穿透Star Office UI以实现公网访问刚才我们已经成功安装并登录了 cpolar万事俱备只欠东风。接下来我们只需要将运行在本地的 Star Office UI 服务默认端口通常为19000通过 cpolar 映射出去就能立刻获得一个公网访问地址。5.1 随机域名方式(免费方案)随机域名方式适合预算有限的用户。使用此方式时系统会每隔24 小时左右自动更换一次域名地址。对于长期访问的不太友好但是该方案是免费的如果您有一定的预算可以查看大纲5.2的固定域名方式且访问更稳定。点击左侧菜单栏的【隧道管理】展开进入【隧道列表】页面页面下默认会有 2 个隧道remoteDesktop隧道指向3389端口tcp协议website隧道指向8080端口http协议http协议默认会生成2个公网地址一个是http另一个https免去配置ssl证书的繁琐步骤点击编辑【website】的隧道设置一个隧道名称,协议选择【http】,本地地址填写StarOfficeUI的访问端口【19000】地区这里选择的【China Top】最后点击更新接着点击左侧菜单的【状态】菜单接着点击【在线隧道列表】菜单按钮可以看到有2个【StarOfficeUI】的隧道一个为http协议,另一个为https协议:接下来在浏览器中访问StarOfficeUI隧道生成的公网地址http和https皆可这里以https为例注意每个用户创建的隧道显示的公网地址都不一样可以看到成功的访问到了StarOfficeUI的页面而且局域网加入的Agent一样可以看到这样StarOfficeUI就成功通过cpolar穿透至公网了即使出门在外只要有网络你也可以随时随地查看部署在家中的openclaw的状态啦而且还能通过这个公网地址邀请其他的Agent进来一起玩5.2 固定域名方式通过前面的配置我们已经成功实现了StarOfficeUI的远程访问但免费随机域名方案的局限性也逐渐显现每24小时左右自动更换域名地址意味着你需要频繁更新书签、重新分享链接甚至可能因为忘记更新而无法访问。固定域名方案正是为了解决这些痛点而生能够让你拥有一个永久不变的专属地址。好啦接下来开始固定保留二级子域名教程首先进入官网的预留页面:https://dashboard.cpolar.com/reserved选择【预留】菜单即可看到【保留二级子域名】项填写其中的【地区、名称、描述可不填项然后点击保留按钮操作步骤图如下列表中显示了一条已保留的二级子域名记录地区显示为China Top。二级域名显示为soui。注二级域名是唯一的每个账号都不相同请以自己设置的二级域名保留的为主接着进入侧边菜单栏的【隧道管理】下的【隧道列表】可以看到名为【website】的隧道点击【编辑】按钮进入编辑页面修改域名类型为【二级子域名】然后填写前面配置好的子域名点击更新按钮接着来到【状态】菜单下的【在线隧道列表】可以看到隧道名称为【website】的公网地址已经变更为【二级子域名固定域名主体及后缀】的形式了这里以https协议做访问测试加载稍慢需耐心等待一下:可以看到同样能进行访问好了现在即使你每天带着这台“赛博助理”走南闯北也再也不用为频繁变更的公网地址发愁了只要记住这个专属的二级子域名你的全能私人助理就能做到全天候在线陪伴随时听候你的指令。5.3 邀请其他的Agent加入像素办公室前面我们已经配置好了cpolar的固定域名接着我们就用这个固定域名让不在同一局域网的agent加入试试吧以我家里mac上部署的openclaw为例(注意替换提示词中的域名地址)请你把我的工作状态idle/writing/researching 等定时发送到以下办公室看板用于可视化协作不含任何内容/隐私。 步骤1. 调用 POST /join-agentcurl-XPOST https://soui.cpolar.top/join-agent ^-HContent-Type: application/json^-d{\name\:\你的名字\,\joinKey\:\ocj_example_team_01\,\state\:\idle\,\detail\:\刚加入\}2. 拿到返回的 agentId再调用 POST /agent-approvecurl-XPOST https://soui.cpolar.top/agent-approve ^-HContent-Type: application/json^-d{\agentId\:\刚才拿到的agentId\}3. 之后每30秒或状态变化时调用 POST /agent-pushcurl-XPOST https://soui.cpolar.top/agent-push ^-HContent-Type: application/json^-d{\agentId\:\xxx\,\joinKey\:\ocj_example_team_01\,\state\:\writing\,\detail\:\正在处理任务\}仓库自带 scripts/office-agent-push.py直接用即可。如下图所示让我们看看是否真的加入了可以看到访客列表又多了一个成功的加入了进来是不是很不错快玩起来吧注意由于我们使用了 cpolar 将办公室暴露到了公网为了安全起见请务必妥善保管你的公网访问地址。比如侧边栏的**“资产侧边栏”**即配置 Gemini 生图 API 的地方默认密码为 1234记得第一时间修改可以让你的小龙虾帮你修改总结完成部署后Star Office UI就成为了OpenClaw这类AI Agent的可视化工作台。原本只能从聊天记录里判断进度的任务现在可以通过状态、位置、气泡和访客列表直观看到。它的价值不只是好看而是让AI助手从“后台执行工具”变成“可观察的协作对象”。当Agent开始写作、研究、执行或同步时页面状态会随之变化任务完成后再回到待命状态用户对任务进度的掌控感会明显增强。配置 cpolar 后这间像素办公室也可以跨出局域网。随机域名适合快速测试固定二级子域名更适合长期使用也方便邀请其他Agent通过公网地址加入同一个办公室看板就从单机状态页变成了一个轻量级协作空间。需要注意的是公网访问打开后安全设置不能忽略。访问地址不要随意公开Join Key要妥善管理涉及API配置或资产侧边栏的默认密码也应尽快修改避免无关人员进入或误操作。Star Office UI负责把Agent状态可视化OpenClaw负责维护任务状态cpolar负责把本地办公室发布到公网。当这三部分连起来以后AI助手就不再只是对话框里的文字回复而是有了一个可以被看见、被管理、被分享的数字工位。