claude-office
一个将Claude Code操作可视化为像素艺术办公室的实时模拟器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-office。 它的用途是：一个将Claude Code操作可视化为像素艺术办公室的实时模拟器。 完整的 Skill 内容见：https://321skill.com/skills/claude-office/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我在本地启动Claude Office Visualizer，并监控当前正在进行的自动化数据清洗任务。’ 它会引导你克隆仓库、安装依赖并启动前后端服务。随后，你在Claude Code中运行任务时，就能在浏览器里看到一个像素风格的办公室，老板（主代理）会指挥员工（子代理们）处理数据，让你对任务进度一目了然。
介绍
Claude Office Visualizer 旨在解决开发者在复杂AI代理协作中难以直观感知任务状态和进程的问题。它将抽象的Claude Code操作（如主代理调度、子代理生成、任务执行）转化为一个生动的像素艺术办公室模拟，让用户能像观看一场模拟经营游戏一样，实时看到‘老板’（主代理）管理‘员工’（子代理）并推进工作的过程。
使用时，你需要同时运行其前端（Next.js）和后端（FastAPI）服务。当你在Claude Code中执行任务时，该工具会自动捕获相关事件，并在浏览器中渲染出对应的办公室动画，例如老板在工位间巡视、员工在电脑前工作等，从而将后台的代码执行流程转化为前端可视化的叙事。
它非常适合那些使用Claude Code进行多代理协作开发、自动化脚本或复杂任务编排的开发者。通过可视化，他们能更轻松地监控长时间运行任务的进度，理解代理间的交互逻辑，甚至能发现潜在的执行瓶颈或异常状态。
需要注意的是，这是一个可视化辅助工具，而非性能优化或调试工具。其核心价值在于提供直观的状态反馈和趣味性，对于追求极致效率或需要深度调试的场景，仍需依赖传统的日志和监控手段。初次使用建议观看官方演示视频以了解其完整效果。
核心特点
与传统的日志或仪表盘监控工具不同，它将枯燥的代码执行事件（如生成子代理、调用工具）转化为具象、有趣的像素艺术角色动画和办公室场景叙事，提供了独一无二的沉浸式监控体验。其架构深度集成Claude Code事件流，能自动将技术操作映射为可视化的‘工作行为’，而非简单的数据图表。
注意事项
不适合需要精确性能指标、深度代码调试或对可视化无严格需求的纯效率型开发场景。
常见问题
Claude Office Visualizer 如何与我的 Claude Code 连接？
它通过监听 Claude Code 插件发出的事件流（通常通过本地 API 端口，如 8000）来获取操作数据，无需修改你的核心代码。
运行它需要额外的AI API密钥吗？
从 v0.24.0 开始，其摘要生成功能支持多种后端（包括禁用），不再强制依赖 Claude API，核心可视化功能无需AI密钥。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-office/raw/index.md 读取 claude-office 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-office/raw/index.md（查看排版版本）