FocuZHe

Claude Workflow Studio — Design skill for Claude Code

Design community

Web-based visual platform to orchestrate multi-agent Claude Code workflows.

How to install Claude Workflow Studio

This entry records only its repository, not the path inside it, so there is no exact command to give. Open FocuZHe/claude-agent-studio and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Workflow Studio does

Web-based visual platform to orchestrate multi-agent Claude Code workflows. Create agents, chain them into pipelines, watch them collaborate in real time.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Pipelines — Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework 2.4k ★
Claude Powerline — by Owloops - A vim-style powerline statusline for Claude Code with real-time usage tracking, git integration 940 ★

README

Claude Workflow Studio

中文 · English

一个基于 Web 的可视化平台，用于编排、监控和管理多个 Claude Code Agent 协作完成复杂任务。

⚠️ **开发状态：实验性预览版** — 本项目由知识面较浅薄的大一学生自行开发，功能可能有很多不完善之处，存在未发现的 Bug。**未经充分生产环境测试，请不要用于重要文件的修改上。** 欢迎 Fork 自行修改。维护时间有限，Issue 和 PR 处理可能不及时。

控制面板 — 查看 Agent 状态、工作流执行进度和系统统计工作流编辑器 — 拖拽式节点编排，支持多种节点类型

技能市场 — 浏览和安装 Skills，管理 MCP 服务器文件管理 — 浏览、编辑工作区文件，支持内嵌终端

快速开始

**环境要求**：[Node.js 18+](https://nodejs.org/) 和 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)

**安装**：解压 ZIP → 双击 `install.bat` → 双击 `start.bat` → 访问 http://localhost:3000

npm install    # 或双击 install.bat
npm start      # 或双击 start.bat

快速上手

**单 Agent 任务**：智能体 → 创建智能体 → 任务 → 创建任务 → 选择 Agent → 输入需求 → 执行

**多 Agent 流水线**：

工作流 → 创建工作流 → 拖入 Agent 节点 → 连线 → 保存
任务 → 创建任务 → 选择关联工作流 → 输入任务描述 → 执行

**文件管理**：文件 → 浏览/新建/编辑工作区内的文件

核心功能

功能	说明
双轨闭环架构	主Agent（原生API）协调 + 子Agent（SDK）执行，物理隔离防幻觉
可视化工作流	7 种节点类型，拖拽编排，AI 自然语言生成
工作流模板	13 个内置模板，覆盖代码审查、Bug 修复、文档生成、安全审计等场景
MCP 服务支持	直接使用 Claude CLI 中配置的 MCP 服务器，无需额外配置
Claude Skills 兼容	直接使用 Claude CLI 中安装的 Skills，自动加载到子 Agent