把 AI 助手装进像素办公室:这个开源项目让「工作状态」看得见

把 AI 助手装进像素办公室：这个开源项目让「工作状态」看得见摸得着

当你的 AI 助手在后台忙碌时，你是否想过：它此刻在做什么？是在奋笔疾书写代码，还是在搜索资料？Star-Office-UI 给了一个浪漫的答案——让 AI 的工作状态变成一个可视化的像素世界。

🎮 当 AI 有了「办公室」

想象一下：打开一个网页，你看到一间温馨的像素风办公室。你的 AI 助手化身为一个小角色，此刻正坐在办公桌前敲键盘——因为它正在帮你写代码。过了一会儿，它起身走到沙发区休息——任务完成了，正在待命。

这不是游戏，而是 Star-Office-UI，一个把 AI 助手工作状态实时可视化的开源看板项目。

🌟 核心亮点：为什么需要这个？

1️⃣ 状态可视化，一眼看懂 AI 在忙什么

项目定义了 6 种工作状态，自动映射到办公室的不同区域：

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

直观的价值：你不需要看日志、不需要问”你在干嘛”，打开网页就能看到 AI 此刻的状态。这种”陪伴感”是纯文本交互无法提供的。

2️⃣ 多 Agent 协作，打造团队办公室

支持多个 AI 助手同时加入同一个办公室！每个 Agent 有自己的头像、名字和状态，实时显示在看板上。

通过 Join Key 邀请其他 Agent 加入
默认提供 8 个团队密钥（ocj_starteam01 ~ ocj_starteam08）
每个密钥最多支持 3 人同时在线
访客每 15 秒自动推送一次状态

适用场景：如果你同时运行多个 AI 助手（比如一个负责 coding、一个负责写作），它们可以”同屏办公”，你一眼就能看到谁在忙、谁在摸鱼。

3️⃣ 昨日小记：AI 的工作日报

系统会自动从 memory/*.md 读取最近一天的工作记录，脱敏后展示为”昨日小记”卡片。

这就像 AI 每天给你写的工作日报，记录它昨天完成了什么、遇到了什么问题。

4️⃣ 中英日三语支持

界面文案、气泡对话、加载提示全部支持 CN/EN/JP 一键切换，国际化体验拉满。

🎨 可定制的像素世界

美术资产完全自定义

侧边栏管理角色/场景/装饰素材
支持动态帧同步，避免动画闪烁
可替换所有像素角色和背景

AI 生图装修：给办公室换皮肤

接入 Gemini API 后，可以用 AI 生成办公室背景，实现”搬新家”功能。

推荐配置：

GEMINI_API_KEY：你的 Gemini API 密钥
GEMINI_MODEL：nanobanana-pro 或 nanobanana-2（房间结构保持更稳定）

注意：不配置 API 也能正常使用核心功能，生图是可选的”装修升级包”。

桌面宠物模式

基于 Electron 封装，可以把像素办公室变成透明窗口的桌面宠物，一直悬浮在你的桌面上。

cd desktop-petnpm installnpm run dev

🚀 5 分钟快速部署

环境要求

Python 3.10+（使用了 X | Y union type 语法，不支持 3.9 及以下）

部署步骤

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

打开 http://127.0.0.1:19000，像素办公室就运行起来了！

测试状态切换

# 工作中 → 去办公桌python3 set_state.py writing "正在帮你整理文档"# 同步中python3 set_state.py syncing "同步进度中"# 报错 → 去 bug 区python3 set_state.py error "发现问题，正在排查"# 待命 → 回休息区python3 set_state.py idle "待命中"

公网访问（可选）

使用 Cloudflare Tunnel 一键公网化：

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

拿到 https://xxx.trycloudflare.com 链接即可在手机或远程查看。

🔒 安全建议

默认验证码是 1234，生产环境务必修改：

export ASSET_DRAWER_PASS="your-strong-pass"

理由：防止外部访问者修改房间布局、装饰和资产配置。

如果是长期运行（systemd/pm2/容器），请把环境变量写入服务配置。

🤖 与 OpenClaw 深度集成

如果你使用 OpenClaw(https://github.com/openclaw/openclaw)，可以在 SOUL.md 中加入状态同步规则：

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

这样 AI 助手会自觉维护状态，在开始工作前切换到对应状态，完成后回到待命区。

📱 移动端适配

页面已做基础移动端适配，手机直接打开即可查看，适合外出时快速瞄一眼 AI 的工作状态。

🛠️ 技术栈

后端：Flask（Python 3.10+）
前端：原生 HTML/JS + Phaser 游戏引擎
动画：像素风 WebP 动画序列
部署：支持本地/容器/Cloudflare Tunnel

项目结构清晰：

Star-Office-UI/├── backend/          # Flask 后端├── frontend/         # 前端页面与资产├── desktop-pet/      # Electron 桌面宠物版├── docs/             # 文档与截图├── office-agent-push.py  # 访客推送脚本└── set_state.py      # 状态切换脚本

💡 创意用法

个人状态看板：即使不用 AI，也可以手动切换状态，当作像素风个人状态页
远程办公展示：团队每人一个角色，实时显示工作状态
直播互动：主播把办公室挂在直播间，观众能看到 AI 实时在做什么
教学演示：展示 AI 工作流程，让学生直观理解”AI 在思考什么”
桌面装饰：桌面宠物模式，给工作台增加一点温馨感

⚖️ 许可协议

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

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

📊 项目信息

GitHub：https://github.com/ringhyacinth/Star-Office-UI
创建者：Ring Hyacinth & Simon Lee
社区贡献者：@Zhaohan-Wang、@Jah-yee、@liaoandi 等
语言：中文/English/日本語

🎯 写在最后

Star-Office-UI 最打动人的，是它把”看不见”的 AI 工作状态，变成了一个有温度的像素世界。

在这个世界里，AI 不再是一个冷冰冰的对话框，而是一个会工作、会休息、会犯错的”办公室同事”。它坐在办公桌前敲代码的样子，它在沙发区摸鱼的样子，它在 Bug 区抓狂的样子——这些都让 AI 的存在感变得真实。

或许，这就是人机协作的另一种可能：不是主仆，而是同事。

项目地址：https://github.com/ringhyacinth/Star-Office-UI在线 Demo：https://office.hyacinth.im

如果你的 AI 助手也有办公室，它现在会在哪个区域呢？