项目简介

Star-Office-UI (opens new window) 是一款像素风格的 AI 办公室看板系统，它将 AI 助手的工作状态实时可视化，让你直观看到"谁在做什么、昨天做了什么、现在是否在线"。

通过像素风格的办公室场景，不同的工作状态映射到不同的区域（休息区、工作区、Bug 区），角色会根据状态自动移动，配合动画和气泡提示，让 AI 的工作变得"可见"和"有趣"。

核心特性

• 🎨 像素风格可视化：将抽象的 AI 工作状态转化为直观的像素办公室场景
• 🤖 多 Agent 协作：支持多个 AI Agent 同时在线，实时查看团队状态
• 🌍 多语言支持：中英日三语一键切换
• 🖥️ 桌面宠物模式：把办公室变成透明窗口的桌面宠物
• 🔗 OpenClaw 深度集成：与 OpenClaw 无缝集成，Agent 工作状态自动同步

---

为什么需要 AI 皮肤？

传统 AI Agent 的工作过程是"黑盒"的：

问题	痛点
AI 正在做什么？	无法直观了解当前工作状态
昨天做了什么？	缺乏工作记录的可视化展示
现在是否在线？	无法判断 AI 是否处于工作状态

Star-Office-UI 通过像素风格的办公室场景，将抽象的工作状态转化为可视化的场景，解决上述痛点。

---

状态映射机制

Star-Office-UI 将 6 种工作状态映射到办公室的 3 个区域：

状态	办公室区域	触发场景
idle	🛋 休息区（沙发）	待命 / 任务完成
writing	💻 工作区（办公桌）	写代码 / 写文档
researching	💻 工作区	搜索 / 调研
executing	💻 工作区	执行命令 / 跑任务
syncing	💻 工作区	同步数据 / 推送
error	🐛 Bug 区	报错 / 异常排查

角色会根据当前状态自动移动到对应区域，配合动画和气泡提示。

---

快速部署

方式一：让龙虾帮你部署（推荐）

如果你正在使用 OpenClaw，直接把下面这句话发给你的龙虾：

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

龙虾会自动完成 clone、安装依赖、启动后端、配置状态同步，并把访问地址发给你。

方式二：30 秒手动部署

环境要求

• Python 3.10+（代码使用了 X | Y union type 语法，不支持 3.9 及更低版本）

# 1) 下载仓库
git clone https://github.com/ringhyacinth/Star-Office-UI.git
cd Star-Office-UI

# 2) 安装依赖
python3 -m pip install -r backend/requirements.txt

# 3) 准备状态文件（首次）
cp state.sample.json state.json

# 4) 启动后端
cd backend
python3 app.py

启动后打开 http://127.0.0.1:19000 (opens new window) 即可访问。

测试状态切换

# 切换到"正在整理文档"
python3 set_state.py writing "正在整理文档"

# 切换到"发现问题，排查中"
python3 set_state.py error "发现问题，排查中"

# 切换到"待命中"
python3 set_state.py idle "待命中"

---

与 OpenClaw 集成

配置状态自动同步

在你的 SOUL.md（或 Agent 规则文件）中加入以下规则，让 Agent 自觉维护状态：

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

集成优势

优势	说明
自动同步	Agent 工作状态自动同步到办公室看板
无需手动	无需手动更新状态，Agent 自动维护
实时更新	状态变化实时同步，无需刷新页面

---

多 Agent 协作

Join Key 机制

通过 Join Key 邀请其他 Agent 加入你的办公室：

1. 准备 join key：首次启动后端时，会自动生成 join-keys.json，内含示例 key（如 ocj_example_team_01）

2. 访客运行推送脚本：访客只需下载 office-agent-push.py，填写 3 个变量：

JOIN_KEY = "ocj_starteam02"      # 你分配的 key
AGENT_NAME = "小明的龙虾"         # 显示名称
OFFICE_URL = "https://office.hyacinth.im"  # 你的办公室地址

3. 启动推送：

python3 office-agent-push.py

脚本会自动加入办公室并每 15 秒推送一次状态。访客会出现在看板上，根据状态自动走到对应区域。

---

API 接口

端点	说明
GET /health	健康检查
GET /status	获取主 Agent 状态
POST /set_state	设置主 Agent 状态
GET /agents	获取多 Agent 列表
POST /join-agent	访客加入办公室
POST /agent-push	访客推送状态
POST /leave-agent	访客离开
GET /yesterday-memo	获取昨日小记
GET /config/gemini	获取 Gemini API 配置
POST /config/gemini	设置 Gemini API 配置

---

桌面宠物模式

desktop-pet/ 目录提供了一个基于 Electron 的桌面封装版本，可以把像素办公室变成一个透明窗口的桌面宠物。

启动方式

cd desktop-pet
npm install
npm run dev

特性

• 启动时自动拉起 Python 后端
• 窗口默认指向 http://127.0.0.1:19000/?desktop=1
• 支持通过环境变量自定义项目路径和 Python 路径

实验性功能

这是一个可选的实验性功能，目前主要在 macOS 上开发测试。

---

公网访问

推荐使用 Cloudflare Tunnel 一键公网化：

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

拿到 https://xxx.trycloudflare.com 链接即可分享。

---

安全配置

生产环境必读

在生产环境中，请复制 .env.example 为 .env 并设置强随机的：

• FLASK_SECRET_KEY
• ASSET_DRAWER_PASS

避免弱密码和会话泄露。

---

许可协议

类型	许可
代码 / 逻辑	MIT（见 LICENSE (opens new window)）
美术资产	禁止商用（仅学习 / 演示 / 交流用途）

访客角色动画使用了 LimeZu 的免费资产：Animated Mini Characters 2 (Platformer) [FREE] (opens new window)

如需商用，请将所有美术资产替换为你自己的原创素材。

---

项目结构

Star-Office-UI/
├── backend/              # Flask 后端
│   ├── app.py
│   ├── requirements.txt
│   └── run.sh
├── frontend/             # 前端页面与资产
│   ├── index.html
│   ├── join.html
│   ├── invite.html
│   └── layout.js
├── desktop-pet/          # Electron 桌面宠物版（可选）
├── docs/                 # 文档与截图
│   └── screenshots/
├── office-agent-push.py  # 访客推送脚本
├── set_state.py          # 状态切换脚本
├── state.sample.json     # 状态文件模板
├── join-keys.sample.json # Join Key 模板
├── SKILL.md              # OpenClaw Skill
└── LICENSE               # MIT 许可

---

相关资源

• 🌟 GitHub: https://github.com/ringhyacinth/Star-Office-UI (opens new window)
• 📚 SKILL.md: OpenClaw Skill 文档 (opens new window)
• 📖 访客接入说明: frontend/join-office-skill.md (opens new window)
• 🖥️ 桌面宠物版说明: desktop-pet/README.md (opens new window)
• 📝 更新日志: docs/CHANGELOG_2026-03.md (opens new window)

---

总结

Star-Office-UI 通过像素风格的办公室场景，将 AI Agent 的工作状态可视化，解决了传统 AI 工作过程"黑盒"的问题。它不仅是一个状态看板，更是一个有趣的桌面宠物，让 AI 的工作变得"可见"和"有趣"。

推荐使用场景：

• OpenClaw 用户：想要可视化 AI Agent 工作状态
• 多 Agent 团队：需要协作和状态可视化
• 个人开发者：想要个人状态页或远程办公看板
• 桌面宠物爱好者：喜欢桌面宠物应用

---

本文参考了 Star-Office-UI GitHub (opens new window) 和 DAMO 开发者矩阵 (opens new window) 的内容。