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 报错仅靠命令行日志追踪，犹如大海捞针。 既然 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