一天一个开源项目（第43篇）：Star-Office-UI - 像素风格的 AI 办公室看板，让 AI 助手的工作状态可视化

引言

"A pixel office for your OpenClaw: turn invisible work states into a cozy little space with characters, daily notes, and guest agents."

这是「一天一个开源项目」系列的第 43 篇文章。今天介绍的项目是 Star-Office-UI （GitHub）。

AI Agent 的工作状态通常是"看不见"的------你不知道它正在做什么、昨天做了什么、现在是否在线。Star-Office-UI 是一款像素风格的 AI 办公室看板系统 ，它将 AI 助手的工作状态实时可视化，让你直观看到"谁在做什么、昨天做了什么、现在是否在线"。通过像素风格的办公室场景，不同的工作状态映射到不同的区域（休息区、工作区、Bug 区），角色会根据状态自动移动，配合动画和气泡提示，让 AI 的工作变得"可见"和"有趣"。支持多 Agent 协作 、中英日三语 、AI 生图装修 、桌面宠物模式 ，与 OpenClaw 深度集成时体验最佳，也可以独立部署作为状态看板使用。

为什么值得看？

🎨 像素风格可视化：将抽象的 AI 工作状态转化为直观的像素办公室场景
🤖 多 Agent 协作：支持多个 AI Agent 同时在线，实时查看多人状态
🌍 多语言支持：中英日三语一键切换，界面文案、气泡、加载提示全部联动
🎨 AI 生图装修：接入 Gemini API，用 AI 给办公室换背景
🖥️ 桌面宠物模式：基于 Tauri 的桌面封装，把办公室变成透明窗口的桌面宠物
🔗 OpenClaw 深度集成：与 OpenClaw 无缝集成，Agent 工作状态自动同步

你将学到什么

Star-Office-UI 的核心定位：如何将 AI 工作状态可视化
状态映射机制：6 种工作状态如何映射到办公室的 3 个区域
多 Agent 协作：如何通过 join key 邀请其他 Agent 加入办公室
部署与集成：快速部署方法和与 OpenClaw 的集成方式
技术架构：Flask 后端、Phaser 前端、Tauri 桌面版的实现
美术资产管理：像素风格资产的来源、许可和使用规范

前置知识

了解 AI Agent 的基本概念（OpenClaw、多 Agent 协作）
了解 Web 开发 基础知识（Flask、前端框架）
了解 像素风格游戏 的基本概念（可选）
了解 状态管理 的基本概念（状态切换、状态同步）

项目背景

项目简介

Star-Office-UI 是一款像素风格的 AI 办公室看板系统 ，旨在解决 AI Agent 工作状态"看不见"的问题。传统 AI Agent 的工作过程是黑盒的，用户无法直观了解 Agent 当前在做什么、昨天做了什么、现在是否在线。Star-Office-UI 通过像素风格的办公室场景，将抽象的工作状态转化为可视化的场景：

休息区（沙发）：Agent 待命或任务完成时的状态
工作区（办公桌）：Agent 正在工作时的状态（写代码、写文档、搜索、执行任务等）
Bug 区：Agent 遇到错误或异常时的状态

角色会根据当前状态自动移动到对应区域，配合动画和气泡提示，让 AI 的工作变得"可见"和"有趣"。

核心价值：

状态可视化：将抽象的 AI 工作状态转化为直观的视觉场景
多 Agent 协作：支持多个 AI Agent 同时在线，实时查看团队状态
趣味性：像素风格设计，让 AI 工作变得有趣和生动
易用性：30 秒快速部署，支持多种集成方式

作者/团队介绍

Star-Office-UI 由 Ring Hyacinth 与 Simon Lee 共同创建（co-created project），并与社区开发者（@Zhaohan-Wang、@Jah-yee、@liaoandi）一起持续维护和共建。

作者：Ring Hyacinth、Simon Lee
背景：AI Agent 和可视化领域的创新者
项目创建时间：2026 年 3 月

项目数据

⭐ GitHub Stars: 2,851
🍴 Forks: 317
📦 版本: v1.0.0（持续更新中）
📄 License: MIT（代码），美术资产仅学习用途
🌐 官网 : GitHub Repository

项目特点：

开源免费：代码采用 MIT 许可证，可自由使用和修改
活跃维护：项目持续更新，社区活跃
创新设计：像素风格可视化，让 AI 工作变得有趣

主要功能

核心作用

Star-Office-UI 的核心作用是将 AI Agent 的工作状态可视化，通过像素风格的办公室场景，让用户直观了解 AI 的工作状态：

状态可视化：6 种工作状态映射到办公室的 3 个区域，角色自动移动
多 Agent 协作：支持多个 AI Agent 同时在线，实时查看团队状态
昨日小记 ：自动从 memory/*.md 读取最近一天的工作记录，展示为"昨日小记"卡片
实时更新：状态变化实时同步，无需刷新页面
移动端适配：手机直接打开即可查看，适合外出时快速瞄一眼

使用场景

OpenClaw 用户
- 与 OpenClaw 深度集成，Agent 工作状态自动同步
- 实时查看 AI Agent 的工作状态和进度
多 Agent 团队协作
- 通过 join key 邀请其他 Agent 加入办公室
- 实时查看团队中所有 Agent 的工作状态
个人状态页
- 独立部署作为个人状态页或远程办公看板
- 通过 API 或脚本推送状态
桌面宠物
- 使用桌面宠物模式，将办公室变成透明窗口的桌面宠物
- 随时查看 AI 工作状态，无需打开浏览器
演示和展示
- 用于演示 AI Agent 的工作过程
- 展示多 Agent 协作的场景

快速开始

方式一：让龙虾帮你部署（推荐给 OpenClaw 用户）

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

ruby 复制代码

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

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

方式二：30 秒手动部署

bash 复制代码

# 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，然后试试切状态：

bash 复制代码

python3 set_state.py writing "正在整理文档"
python3 set_state.py error "发现问题，排查中"
python3 set_state.py idle "待命中"

核心特性

状态可视化
- 6 种状态 ：idle（待命）、writing（写代码/文档）、researching（搜索/调研）、executing（执行任务）、syncing（同步数据）、error（错误）
- 3 个区域：休息区（沙发）、工作区（办公桌）、Bug 区
- 自动映射：状态自动映射到对应区域，角色自动移动
- 动画效果：角色移动动画和气泡提示
多 Agent 协作
- Join Key 机制：通过 join key 邀请其他 Agent 加入办公室
- 实时同步：多个 Agent 的状态实时同步，无需刷新
- 并发控制：每个 key 默认支持最多 3 人同时在线
- 访客推送 ：访客通过 office-agent-push.py 脚本推送状态
多语言支持
- 中英日三语：CN / EN / JP 一键切换
- 全面联动：界面文案、气泡、加载提示全部联动
- 国际化：支持多语言环境下的使用
AI 生图装修
- Gemini API 集成：接入 Gemini API，用 AI 给办公室换背景
- 可选功能：不接入 API 也能正常使用核心功能
- 自定义背景：通过 AI 生成个性化的办公室背景
桌面宠物模式
- Tauri 封装：基于 Tauri 的桌面封装版本
- 透明窗口：把办公室变成透明窗口的桌面宠物
- 自动启动：启动时自动拉起 Python 后端
- 跨平台：主要在 macOS 上开发测试，支持跨平台
安全加固
- 侧边栏密码保护：侧边栏管理功能需要密码保护
- 弱密码拦截：生产环境弱密码拦截
- Session Cookie 加固：会话 Cookie 安全加固
- 环境变量配置 ：通过 .env 文件配置敏感信息
昨日小记
- 自动读取 ：自动从 memory/*.md 读取最近一天的工作记录
- 脱敏处理：敏感信息自动脱敏
- 卡片展示：以"昨日小记"卡片的形式展示
灵活公网访问
- Cloudflare Tunnel：推荐使用 Cloudflare Tunnel 一键公网化
- 自有域名：支持自有域名和反向代理
- 移动端适配：手机直接打开即可查看
美术资产自定义
- 侧边栏管理：侧边栏管理角色 / 场景 / 装饰素材
- 动态帧同步：支持动态帧同步，避免闪烁
- 资产替换：支持自定义美术资产

项目优势

对比项	Star-Office-UI	传统状态页	其他可视化工具
可视化方式	✅ 像素风格场景	⚠️ 文字/图表	⚠️ 图表/仪表盘
多 Agent 支持	✅ 原生支持	❌ 不支持	⚠️ 部分支持
OpenClaw 集成	✅ 深度集成	❌ 无集成	❌ 无集成
桌面宠物	✅ Tauri 桌面版	❌ 无	❌ 无
AI 生图	✅ Gemini API	❌ 无	❌ 无
多语言	✅ 中英日三语	⚠️ 单一语言	⚠️ 部分支持
部署难度	✅ 30 秒快速部署	⚠️ 需要配置	⚠️ 需要配置

为什么选择 Star-Office-UI？

创新可视化：像素风格设计，让 AI 工作状态变得有趣和直观
OpenClaw 深度集成：与 OpenClaw 无缝集成，Agent 工作状态自动同步
多 Agent 协作：原生支持多 Agent 协作，实时查看团队状态
快速部署：30 秒快速部署，支持多种集成方式
桌面宠物：独特的桌面宠物模式，随时查看 AI 工作状态
开源免费：代码采用 MIT 许可证，可自由使用和修改

项目详细剖析

架构设计

Star-Office-UI 采用 前后端分离 的架构设计：

后端（backend/）：基于 Flask 的后端服务，提供 API 接口和状态管理
前端（frontend/）：基于 Phaser 的前端页面，实现像素风格的办公室场景
桌面宠物（desktop-pet/）：基于 Tauri 的桌面封装版本（可选）

核心组件：

状态管理模块：负责 Agent 状态的存储、更新和同步
多 Agent 协作模块：处理 join key、访客加入、状态推送等
前端渲染引擎：基于 Phaser 的像素风格场景渲染
AI 生图模块：集成 Gemini API，实现 AI 生图装修功能
桌面宠物模块：Tauri 封装，实现透明窗口的桌面宠物

状态映射机制

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

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

实现原理：

状态更新 ：通过 set_state.py 脚本或 API 接口更新状态
状态存储 ：状态存储在 state.json 文件中
前端轮询：前端定期轮询后端 API，获取最新状态
角色移动：根据状态变化，角色自动移动到对应区域
动画效果：角色移动时播放移动动画，显示气泡提示

多 Agent 协作机制

Join Key 机制：

生成 Join Key ：首次启动后端时，自动生成 join-keys.json 文件
分配 Key ：为每个团队分配一个 join key（例如 ocj_example_team_01）
访客加入 ：访客通过 office-agent-push.py 脚本，使用 join key 加入办公室
状态推送：访客每 15 秒推送一次状态，更新到办公室看板
并发控制：每个 key 默认支持最多 3 人同时在线

访客接入流程：

python 复制代码

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

python3 office-agent-push.py

OpenClaw 集成

状态自动同步：

在 OpenClaw 的 SOUL.md（或 Agent 规则文件）中加入以下规则：

markdown 复制代码

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

集成优势：

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

技术栈

根据项目结构分析，Star-Office-UI 的技术栈包括：

后端：Flask（Python Web 框架）
前端：Phaser（2D 游戏框架）、HTML/CSS/JavaScript
桌面宠物：Tauri（Rust + Web 前端）
状态管理：JSON 文件存储
API 接口：RESTful API

关键技术：

Phaser 游戏引擎：用于渲染像素风格的办公室场景
Flask 后端服务：提供 API 接口和状态管理
Tauri 桌面封装：实现跨平台的桌面宠物应用
WebSocket/轮询：实现实时状态同步

美术资产管理

资产来源：

访客角色动画使用了 LimeZu 的免费资产：

Animated Mini Characters 2 (Platformer) [FREE]

许可协议：

美术资产：禁止商用（仅学习 / 演示 / 交流用途）
代码 / 逻辑：MIT（见 LICENSE）

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

项目地址与资源

官方资源

🌟 GitHub : github.com/ringhyacint...
📚 SKILL.md : OpenClaw Skill 文档
💬 Issues : github.com/ringhyacint...
🐛 Pull Requests : github.com/ringhyacint...

常用 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 配置

适用人群

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

欢迎来我中的个人主页找到更多有用的知识和有趣的产品