我做了一个 Claude Code 多 Agent 工作流的可视化编排平台

我做了一个 Claude Code 多 Agent 工作流的可视化编排平台

痛点：用 Claude Code 跑多 Agent 像在盲飞

我最近把不少工作流都搬到了 Claude Code 的 Agent Teams 上。

理论上很美好------定义一批 agents，各司其职，通过 Agent 工具互相调度，Claude 自动并行或串行执行，最后汇总结果。

但实际操作起来，有几个问题很快就冒出来了：

1. 配置文件太散

每个 agent 都是 ~/.claude/agents/ 下一个 Markdown 文件，workflow 是 YAML，skill 又是另一批文件，settings 还有 JSON。改一个协作模式，要同时动好几个文件，稍不注意就漏掉某个关系。

2. 流程关系不直观

谁调度谁？谁等谁的结果？Dispatch/Report/Sync/Roundtrip 这四种边类型文档里都有说明，但实际搭复杂流程的时候，脑子里要一直维护一张隐形的 DAG 图，很费劲。

3. 调试效率低

一条 workflow 跑起来，哪个节点卡了，哪个 agent 报错了，靠命令行日志来 trace 基本是大海捞针。

于是我就想：既然 Claude Code 本质上只是读 ~/.claude/ 下的文件，那我能不能做一个 GUI，把这些文件的编辑和管理可视化掉？

这就是 claude-studio 的来历。

---

产品介绍：claude-studio

claude-studio 是 Claude Code Agent Teams 的可视化编排平台。

一句话定义它的本质：

claude-studio（设计）→ ~/.claude/（文件）→ Claude Code（运行）

它不是 Claude Code 的替代品，也不是一个新的运行时。它只是 ~/.claude/ 目录的一个 GUI 编辑器。你在 studio 里做的一切，最终都落地为 Markdown 和 YAML 文件------Claude Code 原样读取，零额外依赖。

安装只需要一行命令：

npx claude-code-studio

---

核心功能演示

1. 可视化 DAG 工作流编辑器

这是我觉得最有价值的功能。

画布上可以拖拽 agent 节点，用 4 种边类型连线，清楚地表达 agent 之间的协作关系：

边类型	样式	用途
Dispatch	实线灰色	任务指派、执行依赖
Report	虚线青色	结果回报、反馈
Sync	点线紫色	平行协作、信息同步
Roundtrip	实线青绿双向箭头	双向指派+回报

搭一个「Code Review 流水线」的 workflow，完整流程一眼看清：Commander 指派 → Reviewer 并行执行 → 结果回报 → Commander 汇总。

不再需要在脑子里维护那张隐形的图了。

2. Agent 节点编辑

点击画布上的 agent 节点，右侧面板直接编辑：

• System prompt：Monaco Editor 内嵌，语法高亮，支持 Markdown 预览
• 绑定 Skill：从左侧 skill 列表拖拽到节点，即时生效
• 绑定 MCP：同理，把需要的 MCP tool 挂到这个 agent 上
• 9 个内置模板：planner、tdd-guide、code-reviewer、security-reviewer 等常用角色开箱即用

创建的每个 agent 自动保存为 .claude/agents/<name>.md，格式与手写完全一致。

3. 项目工作区

左侧是项目导航区：当前项目的 agents、skills、workflows、memories 一目了然。

这里有个我很喜欢的设计------CLAUDE.md 自动同步 。每次保存 workflow，studio 会自动把工作流定义同步写入 CLAUDE.md，这样 Claude Code 打开同一个项目时，agent 团队结构直接可用，不需要手动同步。

4. AI 智能生成

这个功能挺 magic 的。

在 Generate 面板里用自然语言描述你想要的工作流，比如：

「带安全检查的 Code Review 流水线，包含 planner、reviewer 和 security 三个角色」

点击 Generate，claude-studio 在后台调用 claude -p，输出一个完整的 DAG------agents、edges、skills、checkpoints 全部到位。生成之后你可以在画布上继续可视化微调。

对于快速搭原型来说，这个功能省了很多时间。

5. 执行引擎与 Checkpoint

Workflow 搭好直接点 Run，studio 按拓扑序执行各节点，实时展示每个 agent 的运行状态。

如果某个节点设置了 Checkpoint，执行到那里会暂停，等待人工审批------适合需要人在循环里的流程（比如「发布前确认」）。

6. 深色 / 浅色主题

支持深色、浅色、跟随系统三种模式，Monaco Editor 也会跟着切换配色。

---

架构设计

┌─────────────────────────────────┐
│  GUI (React + React Flow v12)   │
├─────────────────────────────────┤
│  Next.js API Routes             │
├─────────────────────────────────┤
│  ~/.claude/ (source of truth)   │
├─────────────────────────────────┤
│  Claude Code (runtime)          │
└─────────────────────────────────┘

技术栈：Next.js · React Flow v12 · Monaco Editor · TypeScript · Tailwind CSS · Lucide Icons

核心设计原则只有一条：claude-studio 不拥有任何数据。

所有数据的 source of truth 是 ~/.claude/ 目录。studio 做的事情只是：

1. 读取目录里的文件，渲染成可视化界面
2. 把用户的操作写回对应的文件

这个设计带来几个好处：

• 无锁定：随时可以用任何文本编辑器直接改文件，studio 里的视图自动更新
• 无运行时依赖：studio 只在设计阶段用，Claude Code 执行时完全不依赖 studio
• 格式兼容：生成的文件格式与手写完全一致，不引入任何私有格式

你在 studio 中创建的内容与文件系统的对应关系：

在 studio 中创建	保存为	Claude Code 识别为
Agent	.claude/agents/name.md	Agent 定义（可通过 Agent 工具调度）
Skill	.claude/skills/name.md	斜杠命令（/skill-name）
Workflow	.claude/workflows/name.yaml	团队编排蓝图
CLAUDE.md 编辑	CLAUDE.md	项目指令
Settings	.claude/settings.json	MCP 服务器、Hook、权限

---

快速上手

启动：

npx claude-code-studio

默认在 http://localhost:3100 启动。自定义端口：

npx claude-code-studio --port 3200

基本流程：

1. 打开项目目录（指向任何有 .claude/ 的目录，或新建）
2. 在 Agents 面板创建 agent（从模板或 AI 生成）
3. 在 Workflows 面板拖拽 agent 到画布，连接边
4. 绑定 Skill 和 MCP
5. Run 执行，查看实时状态
6. 用 Claude Code 打开同一目录，agent/skill/workflow 即刻可用

项目配置：

MCP 服务器、Hook、权限等都可以在 Settings 面板可视化配置，不需要手写 JSON。

---

总结

claude-studio 解决的核心问题是：把 Claude Code 多 Agent 工作流的配置管理从「文件散落在目录里」变成「可视化的图」。

它不改变 Claude Code 的执行机制，不引入新的运行时，只是让配置过程更直观、更少出错。

对于已经在用 Claude Code Agent Teams 的人，直接 npx claude-code-studio 试一下就知道有没有用。

对于还没试过多 Agent 协作的人，可以用 claude-studio 快速搭一个 workflow 原型，熟悉这套模式。

GitHub：androidZzT/claude-studio

npm：npx claude-code-studio

有问题或建议欢迎在 GitHub 开 issue，或者评论区聊。

---

如果你在用 Claude Code，也欢迎看看我做的另一个工具 cc-statistics------专门追踪 Claude Code / Gemini CLI / Codex / Cursor 的 token 消耗和费用统计，全本地，零依赖。