AI每天都在帮我干活，可我总想看看它上班摸鱼没有——于是给OpenClaw装了个像素办公室

前言

自从给 OpenClaw 接上微信和飞书之后，我越来越习惯把很多事情丢给它处理。查资料、写文章、整理信息，有时候一觉睡醒，它甚至已经帮我完成了好几个任务。

但用久了之后，一个问题开始越来越明显：我知道它在干活，却不知道它到底在怎么干活。

有时候消息发过去秒回，有时候半天没动静；有时候连续处理好几个任务，有时候又像突然失踪了一样。最离谱的是，朋友问我这个 AI 助手到底有多厉害时，我居然只能翻聊天记录给别人看。总感觉像是在介绍一个从来没露过面的员工，干了很多活，却没人见过它长什么样。

后来折腾 OpenClaw 的过程中，我发现了 Star Office UI。这个项目特别有意思，它没有继续堆模型、堆能力，而是换了一个思路：直接给 AI 助手建了一间像素风办公室。写代码的时候去程序员工位，搜索资料的时候跑去研究区，待命时坐在座位上发呆摸鱼。原本藏在后台的工作状态，一下子变得生动起来。

更有意思的是，它不仅能展示一只龙虾，还能让多个 Agent 一起出现在同一个办公室里。再结合 cpolar 提供的公网访问能力，无论是在公司、家里还是出差途中，只要打开浏览器，就能随时看看自己的 AI 员工们今天到底有没有认真上班。

接下来，本文将带你从零开始，手把手部署 Star Office UI 并与 OpenClaw 深度集成，再通过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，前端是纯静态页面，非常轻量。部署前需要确保你的设备满足以下条件：

💡提示：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.10+）python3-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-agent：curl-XPOST http://192.168.50.222:19000/join-agent ^-H"Content-Type: application/json"^-d"{\"name\":\"你的名字\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"idle\",\"detail\":\"刚加入\"}"2. 拿到返回的 agentId，再调用 POST /agent-approve：curl-XPOST http://192.168.50.222:19000/agent-approve ^-H"Content-Type: application/json"^-d"{\"agentId\":\"刚才拿到的agentId\"}"3. 之后每30秒或状态变化时调用 POST /agent-push：curl-XPOST http://192.168.50.222:19000/agent-push ^-H"Content-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:9200

Bash

输入刚才注册好的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-agent：curl-XPOST https://soui.cpolar.top/join-agent ^-H"Content-Type: application/json"^-d"{\"name\":\"你的名字\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"idle\",\"detail\":\"刚加入\"}"2. 拿到返回的 agentId，再调用 POST /agent-approve：curl-XPOST https://soui.cpolar.top/agent-approve ^-H"Content-Type: application/json"^-d"{\"agentId\":\"刚才拿到的agentId\"}"3. 之后每30秒或状态变化时调用 POST /agent-push：curl-XPOST https://soui.cpolar.top/agent-push ^-H"Content-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 最吸引我的地方其实不是像素风，也不是那些可爱的动画效果，而是它给了 AI 一种前所未有的“存在感”。

以前使用 AI Agent 时，我们看到的只有输入和输出，中间过程完全是一片黑盒。任务有没有开始执行、执行到哪一步、是不是卡住了，只能靠猜。而 Star Office UI 把这些状态全部可视化之后，整个体验突然变得直观了很多。

尤其是在接入 OpenClaw 之后，这种感觉会更明显。原本只是聊天窗口里的一个头像，现在仿佛真的拥有了一张办公桌、一间办公室和一份工作。每次打开页面，看着龙虾在不同工位之间来回跑动，总会有一种自己正在管理数字员工团队的错觉。

而 cpolar 的加入，则让这间办公室突破了局域网限制。无论人在什么地方，都能够通过浏览器远程查看龙虾们的工作状态，甚至邀请其他 Agent 一起加入办公区协同工作。

很多人以为 AI Agent 的价值来自模型能力。

但当你真正长期使用之后会发现：

让AI变得可见，有时候比让AI变得更聪明更重要。