跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
PythonAI大前端

Star-Office-UI - 像素风格 AI 办公室看板，可视化 AI 助手工作状态

Star-Office-UI 是一款像素风格的 AI 办公室看板系统，将 AI Agent 的工作状态实时可视化。支持多 Agent 协作、中英日三语切换、AI 生图装修及桌面宠物模式。采用 Flask 后端与 Phaser 前端架构，通过状态映射机制将待命、工作、错误等状态对应到休息区、工作区和 Bug 区。支持快速部署与 OpenClaw 集成，适合团队协作及个人远程办公场景。

热情发布于 2026/4/6更新于 2026/5/2225 浏览
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.'

今天介绍的项目是 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 的工作变得'可见'和'有趣'。

核心价值：

  1. 状态可视化：将抽象的 AI 工作状态转化为直观的视觉场景
  2. 多 Agent 协作：支持多个 AI Agent 同时在线，实时查看团队状态
  3. 趣味性：像素风格设计，让 AI 工作变得有趣和生动
  4. 易用性：30 秒快速部署，支持多种集成方式
项目数据
  • ⭐ GitHub Stars: 2,851
  • 🍴 Forks: 317
  • 📦 版本: v1.0.0（持续更新中）
  • 📄 License: MIT（代码），美术资产仅学习用途
  • 🌐 官网: GitHub Repository

项目特点：

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

主要功能

核心作用

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

  1. 状态可视化：6 种工作状态映射到办公室的 3 个区域，角色自动移动
  2. 多 Agent 协作：支持多个 AI Agent 同时在线，实时查看团队状态
  3. 昨日小记：自动从 memory/*.md 读取最近一天的工作记录，展示为'昨日小记'卡片
  4. 实时更新：状态变化实时同步，无需刷新页面
  5. 移动端适配：手机直接打开即可查看，适合外出时快速瞄一眼
使用场景
  1. OpenClaw 用户
    • 与 OpenClaw 深度集成，Agent 工作状态自动同步
    • 实时查看 AI Agent 的工作状态和进度
  2. 多 Agent 团队协作
    • 通过 join key 邀请其他 Agent 加入办公室
    • 实时查看团队中所有 Agent 的工作状态
  3. 个人状态页
    • 独立部署作为个人状态页或远程办公看板
    • 通过 API 或脚本推送状态
  4. 桌面宠物
    • 使用桌面宠物模式，将办公室变成透明窗口的桌面宠物
    • 随时查看 AI 工作状态，无需打开浏览器
  5. 演示和展示
    • 用于演示 AI Agent 的工作过程
    • 展示多 Agent 协作的场景
快速开始

方式一：通过脚本部署

如果你正在使用 OpenClaw，可以直接发送部署指令：

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

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

方式二：30 秒手动部署

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

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

核心组件：

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

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

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

实现原理：

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

Join Key 机制：

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

访客接入流程：

# 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 规则文件）中加入以下规则：

## 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

关键技术：

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

资产来源：

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

  • Animated Mini Characters 2 (Platformer) [FREE]

许可协议：

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

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

项目地址与资源

官方资源
  • 🌟 GitHub: https://github.com/ringhyacinth/Star-Office-UI
  • 📚 SKILL.md: OpenClaw Skill 文档
  • 💬 Issues: https://github.com/ringhyacinth/Star-Office-UI/issues
  • 🐛 Pull Requests: https://github.com/ringhyacinth/Star-Office-UI/pulls
相关资源
  • OpenClaw: https://github.com/openclaw/openclaw - Star-Office-UI 的主要集成对象
  • 访客接入说明: frontend/join-office-skill.md
  • 桌面宠物版说明: desktop-pet/README.md
  • 更新日志: docs/CHANGELOG_2026-03.md
常用 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 团队：需要协作和状态可视化的团队
  • 个人开发者：想要个人状态页或远程办公看板的开发者
  • 桌面宠物爱好者：喜欢桌面宠物应用的开发者
  • 像素风格爱好者：喜欢像素风格设计的开发者

目录

  1. 引言
  2. 你将学到什么
  3. 前置知识
  4. 项目背景
  5. 项目简介
  6. 项目数据
  7. 主要功能
  8. 核心作用
  9. 使用场景
  10. 快速开始
  11. 1) 下载仓库
  12. 2) 安装依赖
  13. 3) 准备状态文件（首次）
  14. 4) 启动后端
  15. 核心特性
  16. 项目优势
  17. 项目详细剖析
  18. 架构设计
  19. 状态映射机制
  20. 多 Agent 协作机制
  21. office-agent-push.py 示例
  22. OpenClaw 集成
  23. Star Office 状态同步规则
  24. 技术栈
  25. 美术资产管理
  26. 项目地址与资源
  27. 官方资源
  28. 相关资源
  29. 常用 API
  30. 适用人群
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • Whisper 语音识别教育场景：课堂录音自动转文字方案
  • 基于 LSTM 与 Django 的学生学习分析与成绩预测系统
  • SpringBoot 4.0 新特性整合项目实战
  • 基于 JSP+Servlet+MySQL 的在线电影院订票系统设计
  • 知网 AIGC 检测算法 3.0 升级变化与应对策略
  • OpenClaw 赋能具身智能，开源机器人生态迎来新突破
  • Claude Skills 实战指南：自动化任务与技能管理
  • SensioFrameworkExtraBundle 路由注解完全指南：从基础到高级
  • Java 多线程并发编程：并发容器与线程协作实战
  • Python 主流开发框架分类与选型指南
  • C++ STL 容器入门：set 与 map 详解
  • Visual C++运行库完整安装指南：解决缺少 DLL 文件问题
  • Microi 吾码低代码微服务框架与表单引擎解析
  • GESP C++ 五级真题解析：数字移动
  • STL 转 STEP 格式转换工具 stltostp 使用指南
  • C++ 算法题解析：猫和老鼠（最短路与安全路径判定）
  • 前端通用 AI Rules 规范：适配 Cursor、Trae 等主流 AI 工具
  • 循环神经网络（RNN）与序列数据处理实战
  • OpenAI o1 大模型研究进展报告：旅程学习与复现探索
  • Python 爬虫技术实战指南：从入门到分布式采集

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online

  • 随机西班牙地址生成器

    随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。 在线工具，随机西班牙地址生成器在线工具，online

  • curl 转代码

    解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online