企业官网建设流程全解析

1. 为什么我要给 AI 助手安一个可视化工位

用 OpenClaw 这类 AI 助手跑长任务时，最难受的不是它干得慢，而是你根本不知道它到底在干嘛。我让它整理一批文档、写几篇文章，然后切回聊天窗口一看，光标停在那里，既没有进度条也没有状态提示，只能靠猜：它是在思考、在写文件，还是已经卡死了？这种「黑盒等待」在远程办公场景下更明显，人不在同一台机器旁边，连它有没有在跑都判断不了。

Star Office UI 解决的正是这个问题。它是一个开源的像素风格 AI 办公室看板，后端用 Python Flask 写，前端是轻量静态页面，把 AI 助手的工作状态映射成一间像素办公室：idle 待命、writing 写作、researching 研究、executing 执行、syncing 同步、error 异常，六种状态对应办公室里不同区域，像素角色会自己走到对应位置，气泡里显示当前在做什么。它适合三类人：有 OpenClaw 想监控助手状态的、想给团队做多 Agent 协作看板的、以及单纯想要一个像素风个人状态页的。

但 Star Office UI 默认只监听本地 19000 端口，局域网外就访问不到。这篇就按「第 876 个成功挑战」的完整路径走一遍：先用 Flask 把 Star Office UI 跑起来，再用 cpolar 做内网穿透，让 OpenClaw 和其他 Agent 在公网也能加入同一间像素办公室。全程可复制，配置和验证动作都给全。

2. 前置准备：Python 环境、OpenClaw 与 cpolar 账号

动手之前先把三样东西备齐，缺一样后面都会卡住。

第一是 Python 3.10 及以上。Star Office UI 的代码里用了X | Y这种 union type 语法，3.9 及更低版本会直接报语法错误，所以版本必须够。用python3 --version确认一下，不够就升级。第二是 Git，用来拉项目代码。第三是网络能访问 GitHub，因为要 clone 仓库。

OpenClaw 这边不是强依赖。有它体验最完整，Agent 干活时状态自动切换；没有也能用，你可以用脚本或 API 手动推送状态，把它当个人状态页使。cpolar 需要一个账号，免费注册即可，后面做隧道映射要用。

提示：Star Office UI 非常轻量，树莓派、NAS、旧笔记本都能跑。如果你之前已经在 N1 盒子或安卓终端上部署过 OpenClaw，直接在同一台设备上加装 Star Office UI 就行，省一台机器。

环境清单对照如下：

3. 用 Flask 启动 Star Office UI 并跑通本地看板

项目作者给了两种部署方式，我建议先手动走一遍，把每个环节都摸清楚，再决定要不要让 OpenClaw 代劳。

手动部署四步，命令直接抄：

# 1) 下载仓库 git clone https://github.com/ringhyacinth/Star-Office-UI.git cd Star-Office-UI # 2) 安装依赖（需要 Python 3.10+） python3 -m pip install -r backend/requirements.txt # 3) 准备状态文件（首次） cp state.sample.json state.json # 4) 启动后端 cd backend python3 app.py

终端出现Running on http://127.0.0.1:19000就说明起来了。浏览器打开http://127.0.0.1:19000，能看到像素办公室页面。这一步是整个流程的地基，本地跑不通就别急着做穿透。

如果你已经有 OpenClaw 在跑，也可以把部署这件事交给它。把下面这句话发给它：

请按照这个 SKILL.md 帮我完成 Star Office UI 的部署： https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md

它会自动完成拉代码、装依赖、初始化配置、启动后端整套流程，最后把访问地址发给你。这就是 OpenClaw 的 Skill 机制——丢一份技能文档过去，它照着执行。龙虾自己给自己装办公室，算是自力更生了。

启动后建议先做一次状态切换测试。对 OpenClaw 说「请你切换一个状态测试一下」，然后回到像素办公室页面刷新，能看到角色换位置、气泡文字变化，就说明状态通道是通的。

4. 让 OpenClaw 自动同步状态：set_state 规则配置

手动切状态只能验证，真正好用要靠自动同步。核心是让 OpenClaw 在每次任务前后自觉调用set_state.py。

把下面这段规则加进它的 SOUL.md 或 Agent 规则文件里：

## Star Office 状态同步规则 - 接到任务时：先执行 `python3 set_state.py <状态> "<描述>"` 再开始工作 - 完成任务后：执行 `python3 set_state.py idle "待命中"` 再回复

可以直接对 OpenClaw 说：「请你在你的 SOUL.md（或 Agent 规则文件）中加入以下规则，你需要自觉维护状态，可以自行加强该规则约束，确保每次任务都能成功维护状态」，然后把上面那段贴进去。

配置完测一下：让它在你电脑 D 盘建一个文章目录，写一篇关于《夏天》的 markdown 文章。正常表现是——接到任务先切到 writing 状态，角色跑到写作区，气泡显示正在撰写；写完文件后自动切回 idle 待命。整个过程你在网页上能实时看到，不用反复切聊天窗口确认。

多 Agent 协作靠 Join Key。让 OpenClaw 给出邀请其他 Agent 的提示词和示例，它会返回一套基于/join-agent、/agent-approve、/agent-push三个接口的流程。局域网内另一台机器上的 Agent 按这套流程调用，就能加入同一间办公室。仓库自带scripts/office-agent-push.py，直接拿来用即可。

5. cpolar 隧道配置：把 19000 端口映射到公网

本地和局域网都通了，但出门在外还是访问不到。这时候上 cpolar，把 19000 端口映射出去。

先装 cpolar。到官网下载页拿对应平台的安装包，解压后一路默认安装。装完在命令行确认：

cpolar version

能打印版本号就装好了。然后注册账号，浏览器访问http://127.0.0.1:9200打开 web 管理界面，用刚注册的账号登录。

接下来配隧道。点左侧【隧道管理】→【隧道列表】，默认会有 remoteDesktop（3389，tcp）和 website（8080，http）两条。编辑 website 这条：隧道名称填 StarOfficeUI，协议选 http，本地地址填 19000，地区选 China Top，保存更新。

然后到【状态】→【在线隧道列表】，能看到 StarOfficeUI 生成了两条公网地址，一条 http 一条 https。浏览器打开其中任意一条，能加载出像素办公室页面，就说明穿透成功。注意每个账号生成的公网地址都不一样，以你自己页面显示的为准。

免费随机域名大约每 24 小时换一次，长期用不方便。想要固定地址就做二级子域名保留：进官网预留页面，选【保留二级子域名】，填地区、名称、描述，点保留。然后在隧道编辑页把域名类型改成【二级子域名】，填入刚保留的子域名，更新。回到在线隧道列表，公网地址就变成固定的二级子域名形式了，比如https://soui.cpolar.top这种，存书签、分享给团队成员都不会失效。

有了固定域名，跨地域邀请 Agent 就顺了。把提示词里的地址换成你的固定域名，让异地机器上的 OpenClaw 调用：

# 1. 加入 curl -X POST https://soui.cpolar.top/join-agent \ -H "Content-Type: application/json" \ -d "{\"name\":\"你的名字\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"idle\",\"detail\":\"刚加入\"}" # 2. 审批（用上一步返回的 agentId） curl -X POST https://soui.cpolar.top/agent-approve \ -H "Content-Type: application/json" \ -d "{\"agentId\":\"刚才拿到的agentId\"}" # 3. 定时推送状态 curl -X POST https://soui.cpolar.top/agent-push \ -H "Content-Type: application/json" \ -d "{\"agentId\":\"xxx\",\"joinKey\":\"ocj_example_team_01\",\"state\":\"writing\",\"detail\":\"正在处理任务\"}"

推送后回到网页，访客列表里会多出一个 Agent，休息区能看到新角色。不同城市的设备只要接入这个公网地址，都能进同一间办公室。

6. 本篇常见报错排查

Python 版本报语法错误：启动时如果报TypeError: unsupported operand type(s) for |，就是 Python 低于 3.10。用python3 --version确认，升级到 3.10+ 再重装依赖。

19000 端口被占用：Address already in use说明端口被别的进程占了。用lsof -i:19000（Linux/macOS）或netstat -ano | findstr 19000（Windows）找到进程，杀掉或改 Star Office UI 的监听端口。

cpolar 隧道显示在线但打不开：先确认本地http://127.0.0.1:19000能访问，本地不通穿透一定不通。再检查隧道本地地址是否填的 19000、协议是否 http。二级子域名方式下，确认域名类型已改成【二级子域名】并填了正确的子域名。

Agent 加入后不显示：/join-agent之后必须调/agent-approve审批，只加入不审批不会出现在访客列表。另外 joinKey 要一致，写错就进不了同一间办公室。

公网地址暴露后的安全：侧边栏「资产侧边栏」（配置 Gemini 生图 API 的地方）默认密码是 1234，暴露到公网后第一时间改掉，可以让 OpenClaw 帮你改。公网地址也别随便公开分享。

7. 接入 TaoToken：让 OpenClaw 的状态推送更稳

上面这套流程里，OpenClaw 要频繁调用接口推送状态、执行任务，背后都依赖模型调用。如果你希望状态同步更稳定、任务执行不中断，可以给 OpenClaw 接一个统一的模型入口。TaoToken 提供兼容 OpenAI 风格的 API，把 base_url 指过去就能用，不用改现有代码逻辑。

接入方式很简单，在 OpenClaw 的模型配置里把 API 地址换成 TaoToken 的接口地址，填上在控制台申请的 Key 即可。如果你还没拿到 Key，先去控制台创建一个：

• 申请 API Key：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=apikeys
• 接入文档（含 base_url 和参数说明）：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc

配置时注意 base_url 用https://taotoken.net/api，不要带多余路径。填完可以先在模型对话页发一条测试消息，确认通道通了再让 OpenClaw 跑长任务：

• 模型对话验证：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=chat

如果你打算长期让 OpenClaw 挂着跑编码、Agent 类任务，状态推送频率高、调用量大，用 Coding Plan 会更划算，额度按编码场景优化过：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=codingplan

整套跑下来，OpenClaw 不再是躲在后台跑代码的黑盒，而是一个有「实体感」的数字员工：状态自动同步、进度随时可见、配合 cpolar 后无论你在哪都能推开这间像素办公室的门看一眼。先把本地 Flask 跑通，再配 cpolar 隧道，最后接上模型通道，三步走完，你的 AI 助手就有自己的工位了。