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

我用 Claude Code 搭多 Agent 工作流，总有种“盲飞”的感觉

最近一段时间，越来越多的工作流被搬到了 Claude Code 的 Agent Teams 上。

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

理论上的设想很丰满——定义一批 agents，让它们各司其职，通过 Agent 工具互相调度，Claude 自动并行或串行执行，最后汇总结果。听起来挺高效，对吧？ 但真正动手去搭的时候，问题很快就浮出水面了。 首先是配置文件太散。每个 agent 是一个 ~/.claude/agents/ 下的 Markdown 文件，workflow 是 YAML，skill 又是另一批文件，settings 还有 JSON。想改个协作模式，得同时动好几个文件，稍不留神就会漏掉某个依赖关系。 其次是流程关系完全不直观。谁调度谁？谁等谁的结果？Dispatch、Report、Sync、Roundtrip，这四种边类型文档里写得明明白白，可一旦搭起复杂流程，脑子里得一直维护一张隐形的 DAG 图，相当费劲。 再者就是调试效率低。一条 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/.md，格式与手写完全一致。

3. 项目工作区

左侧是项目导航区：当前项目的 agents、skills、workflows、memories 一眼就能看全。 这里有一个特别的设计——CLAUDE.md 自动同步。每次保存 workflow，studio 会自动把工作流定义同步写入 CLAUDE.md。这样一来，Claude Code 打开同一个项目时，agent 团队结构可以直接使用，不需要手动同步。

4. AI 智能生成

这个功能确实有点厉害。 在 Generate 面板里，直接用自然语言描述你想要的工作流，比如：“我需要一个代码审查流程，先由架构师分配任务，然后三个审查员并行审查，最后汇总结果”。点击 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 做的事情仅仅是：读取目录里的文件，渲染成可视化界面，然后把用户的操作写回对应的文件。 这个设计带来了几个明显的好处： - **无锁定**：随时可以用任何文本编辑器直接改文件，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