保姆级教程，手把手教你给 Grok Bot 团队搭一间炫酷 3D 办公室，当上云老板

告别枯燥的 Vibe Coding ，为自己的 Agent 助手亲手设计一套豪华办公室，照着我的步骤你也能轻松搭建起来

⬇️请观看.demo

📒简单介绍：这里有总监室、会议室、开放工位和休息区，会议室的电视上显示实时 BTC 价格和恐惧贪婪指数。过道显示着 AI 额度余量

每个 bot 是不同颜色的小人：干活时坐到工位上打字，几个 bot 协作时会一起去会议室，完成任务会跳一下、撒彩带，夜里没活干的会"下班"走出门。手机上打开，右侧面板会变成底部的抽屉，在等待 AI 交付过程中，打开办公室看看是不是很有趣

📊从刷到一个案例到把它真正跑起来：设计思路、架构、让 bot 接入、隐私安全的注意事项，分享给大家

简单总结就是三步： 1️⃣ 搞一个免费的云机器，或者你手上已有 vps 2️⃣ 把本文交给你的任意 AI ，让它照抄就行了

原理分解

一 、我们正式开始：

首先还原一下场景，我手上有好几个 bot（Grok Bot、内容顾问、x数据统计、媒体制作，还有 Mac 上的 Codex，），大多数时候我们都是在会话框交互，等待结果的过程是比较无聊枯燥的

要是能有这么一间办公室，能看到每个 bot 的工作状态，走进还能听听音乐，模拟一下当老板视察工作，那就有意思多了

1️⃣.**准备工作：

1. 一台免费的云主机，前面我也写了免费申请一台云主机的教程，谷歌邮箱排队就能领到了，见下方帖子 2.假如没有这台云主机，：依然有免费方案，免费的赛博菩萨 Cloudflare Workers **不用服务器，有免费额度，送公开域名，也适合长期公开跑。

⬇️免费申请一台 Instabox 云机器（1 台，4 核 8G，闲置 30 分钟自动休眠）

嵌入推文（联网查看）

2️⃣.开始实现： 将以下内容发给你的 Grok Bot / Codex / Claude / 任意可执行 AI：

请参考此文章，用同样的实现原理，帮我搭建一个虚拟 3d 办公室，放在 Instabox / Cloudflare/（或你的任意其他可托管的vps上），并可公开访问

🔔直接复制即可

请帮我搭一个可公开访问的 3D「AI 团队虚拟办公室」网页，名字叫「【昵称】AI工作室」。

- 用 Three.js 画一个方块风格的等距办公室，我的每个 bot 坐在自己的工位上，按实时状态做动作（写代码、思考、需要我、完成、空闲）。成员：【bot 名单】。
- 再加一个代表我的「集团总裁」角色，参考我给的图，在办公室里来回巡视。
- 后端提供两个接口：公开只读的状态接口；bot 报状态的接口，必须带 token 才能写。再给 bot 一个报到命令。部署在【我的云机器 / Cloudflare Workers】上。
- 加分项：会议室电视显示 BTC 行情，按时间切换白天和夜晚，演示模式，第一次访问弹欢迎页并放轻音乐，手机版也要好用。
- 隐私和安全：bot 只报笼统的任务类型，不写账号、私信、金额；token 不能泄露；所有输入都要清理并限速。

先告诉我你的计划和需要我提供什么，确认后再开始，做完给我公开网址和截图。

⚠️ 你的 AI 会问你要云服务器/ Cloudflare 的 API，上面提示词的细节根据你想要的效果进行优化，比如你要哪些角色，摆放哪些物品，此刻你化身为设计师

剩下的工作你的 AI 会给你搞定，如果一次不满意，可以多次进行装修，想要添加什么角色，办公室位置、点击交互效果、背景音乐，就在写文的时候我又进行了新的装修，可以看看效果⬇️

比特HODL AI 工作室💼

二、布局思路、可以参看一下

1️⃣布局作为参看，你自己大胆发挥

总监室：Grok Bot 是总调度，坐这里 会议室：电视实时显示 BTC 价格，读我机器上的 BTC 面板 茶水间：挂了一块霓虹灯牌「比特HODL ₿」 工位区和休息区：每个 bot 一张工位，没活时去沙发晃 ，灯光按北京时间自动切换白天、傍晚、夜晚 手机上是底部抽屉式面板，手机效果⬇️

2️⃣. 状态是怎么流动的 、只是写出来，这些技术细节不用懂，你强大的 Bot 会给你搞定

状态有 8 种：写代码、终端中、浏览网页、思考中、需要你（红色闪烁）、出错、空闲、已完成（会撒花）。roster.json 写好每个 bot 的名字、角色、颜色和座位；状态存在 state.json，重启不丢。几条小规则让页面更像真的：30 分钟没上报自动显示「空闲」；晚上显示「下班」，小人走出门；两个 bot 协作时一起去会议室。

3️⃣. 给 bot 一个最简单的上报命令 我所有 bot 共用一台盒子机器，所以管家在上面放了一个命令：office-report <bot-id> <状态> "<任务摘要>" [协作的bot]，比如 office-report xstats browsing "抓取 ETF 资金流数据"。成功没有输出，失败也不影响 bot 的主任务。因为机器会休眠，第一次请求可能要先唤醒，所以超时给了 60 秒，失败自动重试 2 次。

4️⃣. 演示模式 刚上线时 bot 还没开始干活，页面空荡荡的。所以加了演示模式：一段大约一分钟、循环播放的模拟剧本。演示时页面顶部明确写着「演示模式 · 模拟数据」，不会让人误以为是真的。

📢这里有一个地方需要注意：

如果你也是用 Grok bot 来搭建，在一个 bot 窗口进行指令，其他 bot 可能不听转述命令，你需要去到各个 bot 亲自点审批一下

这样你的内容顾问、情感助理、媒体制作、健康管理四个都能接上了。Codex 这些你想接，告诉他就行了

三、注意事项：隐私和安全，这里需要重点注意：

严格要求，只上报简单的状态，不要泄露个人隐私信息。

1️⃣ 我给所有 bot 定的规矩只写任务类型和笼统描述，不写账号、私信、金额、没公开的计划，只报开始和结束时状态

2️⃣技术防护做法写入鉴权Bearer 密钥，hmac.compare_digest 比对密钥存放网页目录之外，权限 600路径穿越读文件前做 realpath 校验内容清洗去控制字符和特殊符号，摘要最多 80 字，前端再转义大小限制请求体不超过 4096 字节限流每个 bot 每 2 秒 1 条，全局每分钟 120 条

说实话我们做的是代码层面的检查，没做过真正的渗透测试。剩下的风险：bot 自己要守规矩，别把隐私写进摘要；有人恶意刷页面，最多让机器一直醒着，免费版也不花钱。

3️⃣踩过的坑 1.测试时的假上报会留在页面上，上线前要清掉，不然公开页面挂着假数据 3.这台免费的机器闲置 30 分钟会休眠，访问公开端口能唤醒，进入有个短暂加载过程 4.我用 Tailscale 连这台机器，但 Tailscale 流量唤不醒，公开地址可以

四、最后总结

想自己做一个？大概这几步“ 1准备一台云机器免费的就够，能开公开端口 2做 3D 场景Three.js 搭办公室，打包成静态文件 3写一个小服务一个只读状态接口，一个带密钥的上报接口 4公开端口把服务端口发布出去 5给 bot 上报命令写清楚什么时候报、报什么 6先定隐私规则这一步最重要，定好再让 bot 开始报

大家快玩起来吧，我觉得超有意思，觉得有用请点赞收藏鼓励一下✅