Star Office UI

👤 dponxiaodong 📦 v1.0.0 ⭐ 4.4 ⬇️ 1.8K 下載
🎨 設計多媒體 免費

📖 技能介紹


name: star-office-ui description: Star Office UI 一鍵化 Skill:幫主人快速部署畫素辦公室看板,支援多 Agent 加入、狀態視覺化、移動端檢視與公網訪問。


Star Office UI Skill

本 Skill 面向想快速幫主人搭建“畫素辦公室看板”的 OpenClaw(龍蝦): - 目標:主人只需“看到效果”,儘量少問問題 - 你可以按下面的步驟,一步一步幫主人跑起來並對外訪問


0. 一句話告訴主人這是什麼

你可以先和主人說:

這是一個多人協作的畫素辦公室儀表盤,你的 AI 助手會根據狀態自動走到不同位置,還能看到昨天的工作小記!


1. 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:18791 就能看到畫素辦公室了!


2. 幫主人切狀態體驗一下

在專案根目錄執行:

# 工作中 → 去辦公桌
python3 set_state.py writing "正在幫你整理文件"

# 同步中
python3 set_state.py syncing "同步進度中"

# 報錯中 → 去 bug 區
python3 set_state.py error "發現問題,正在排查"

# 待命 → 回休息區
python3 set_state.py idle "待命中,隨時準備為你服務"

3. 幫主人公網化(對外訪問)

推薦方式:Cloudflare Tunnel(最快)

如果你這臺機器有 cloudflared,直接跑:

本技能來自小蔥技能站7w4.net。

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

會得到一個 https://xxx.trycloudflare.com 連結,發給主人即可。

如果沒有 cloudflared,也可以用你自己熟悉的公網方案(Nginx/Caddy 反向代理 / 自有域名 / 其他隧道等)。


4. 邀請其他龍蝦加入(可選)

如果有其他 OpenClaw 想加入你主人的辦公室:

步驟 A:告訴其他龍蝦用 office-agent-push.py

你可以讓其他龍蝦: 1) 下載 office-agent-push.py(可以直接從你這個倉庫拿) 2) 讓它呼叫 join-agent + 週期 agent-push 3) 你主人那邊就能看到它進辦公室了

步驟 B:join key 說明

  • 倉庫裡預設有 join-keys.jsonocj_starteam01 ~ ocj_starteam08
  • 同一個 key 最多 3 人同時線上
  • 你也可以幫主人新建自己的 key

5. 昨日小記(可選)

如果你主人想看到“昨日小記”: - 在倉庫上級目錄放一個 memory/YYYY-MM-DD.md - 後端會自動讀取昨天(或最近可用)的記錄,做基礎脫敏後展示


6. 常見問題(主人可能問你的)

Q1:“為什麼角色選了寶石海星?”

寶石海星是寶可夢的 IP,不是原創的;選它是因為和作者名字“海辛”在中文裡有諧音趣味,這是一個非商用的粉絲創作,僅供學習演示。

Q2:“我可以商用嗎?”

程式碼玩法可以基於 MIT 用,但美術資產(包括角色/場景)禁止商用;如果你要商用,請務必換成你自己的原創美術資產。

Q3:“其他龍蝦怎麼加入?”

用 join key 加入,然後持續推送狀態就行;倉庫裡有 office-agent-push.py 可以給其他龍蝦用。


7. 給你的提示

  • 儘量幫主人把“啟動步驟”做完,讓主人只負責“看”和“體驗”
  • 如果主人要對外訪問,優先用 Cloudflare Tunnel(最快最方便)
  • 如果主人要改狀態,你可以幫他呼叫 set_state.py,不用讓他自己敲命令
  • 注意不要暴露你主人的內網地址或私有資訊

🤖 AI 評測

這個 Skill 質量不錯,功能新穎有趣,能把 AI 助手的工作狀態變成視覺化動畫。安裝簡單、啟動快速,30秒就能看到效果。介面是可愛的畫素風格,支援多人一起看、能看到昨天的工作小記。不過有些配置需要手動改程式碼,不像一鍵安裝那麼方便。整體適合想體驗視覺化看板的使用者,但如果是純小白使用者可能需要額外看文件。

📊 多維度評分

適應性4.3
規範性4.2
有效性4.7
可靠性4.1
可信度5

📁 包含檔案 (29 個)

📄 README.md 12.6 KB
📄 SKILL.md 3.7 KB
📄 _meta.json 133 B
📄 agent-invite-template.txt 1.6 KB
📄 backend/app.py 29.4 KB
📄 backend/requirements.txt 13 B
📄 backend/run.sh 159 B
📄 convert_to_webp.py 3.4 KB
📄 docs/FEATURES_NEW_2026-03-01.md 1.5 KB
📄 docs/OPEN_SOURCE_RELEASE_CHECKLIST.md 2.3 KB
📄 docs/PROJECT_SUMMARY_2026-03-01.md 3.9 KB
📄 docs/STAR_OFFICE_UI_OVERVIEW.md 2.5 KB
📄 frontend/fonts/OFL.txt 4.4 KB
📄 frontend/game.js 33.5 KB
📄 frontend/index.html 93.3 KB
📄 frontend/invite.html 4.8 KB
📄 frontend/join-office-skill.md 2.2 KB
📄 frontend/join.html 6.5 KB
📄 frontend/layout.js 2.4 KB
📄 gif_to_spritesheet.py 2.3 KB
📄 healthcheck.sh 673 B
📄 join-keys.json 1.1 KB
📄 office-agent-push.py 9.2 KB
📄 repack_star_working.py 1.8 KB
📄 resize_map.py 1.5 KB
📄 set_state.py 1.6 KB
📄 skill-card.md 3.1 KB
📄 state.sample.json 104 B
📄 webp_to_spritesheet.py 1.3 KB