Claude Code Workflow Studio 技术分析

一、概述

1. 简介

Claude Code Workflow Studio 是一个 VSCode 扩展，为 Claude Code 提供可视化工作流编辑器。通过拖拽式界面设计复杂的 AI Agent 工作流，支持条件分支和子 Agent 编排，无需编写代码即可导出为 .claude 格式直接执行。

2. 核心特性

• 可视化工作流编辑器：通过拖拽节点设计 AI 自动化流程
• AI 辅助优化：通过对话式 AI 迭代改进工作流
• 一键导出：生成 .claude/agents/ 和 .claude/commands/ 文件
• Slack 工作流共享：支持团队协作与工作流分享
• 丰富的节点类型：Prompt、Sub-Agent、Skill、MCP、条件分支、用户决策

3. 技术架构

graph TB
    subgraph 前端
        A[VSCode 扩展] --> B[React Flow 画布]
        B --> C[节点面板]
        B --> D[属性配置]
    end

    subgraph 导出格式
        E[.claude/agents/*.md]
        F[.claude/commands/*.md]
    end

    subgraph Claude Code
        G[Claude Code CLI]
    end

    A --> E
    A --> F
    E --> G
    F --> G

4. 项目信息

• 仓库地址：https://github.com/0xSojalSec/cc-wf-studio
• 原始项目：breaking-brake/cc-wf-studio
• 许可证：AGPL-3.0
• 主要语言：TypeScript（96.4%）
• Stars：88
• Forks：14

二、核心功能分析

1. 可视化工作流编辑

A. 节点类型

基础节点：

• Prompt：定义可复用的提示模板，支持 {{variableName}} 语法
• Sub-Agent：配置自主 AI Agent，支持自定义系统提示、工具权限、模型选择

控制流节点：

• IfElse：二元条件分支（True/False）
• Switch：多路条件分支（2-N 个分支）
• AskUserQuestion：用户决策节点（2-4 个选项）

集成节点：

• Skill：集成 Claude Code Skills
• MCP Tool：集成 MCP 协议工具

B. 工作流设计流程

graph LR
    A[选择节点] --> B[配置属性]
    B --> C[连接节点]
    C --> D[保存工作流]
    D --> E[导出 Claude 文件]

2. AI 辅助工作流优化

A. 工作原理

通过对话式 AI 迭代改进工作流：

• 点击 Edit with AI 按钮（ sparkle 图标）
• 输入自然语言请求（最多 2000 字符）
• AI 处理请求并更新工作流
• 支持多轮对话，保持上下文记忆

B. 最佳实践

• 具体：明确指定节点类型和连接关系
• 逐步：每次请求小而专注的更改
• 迭代：从简单开始，通过迭代增加复杂性

C. 错误处理

3. 一键导出功能

A. 导出格式

生成两类文件：

• .claude/agents/*.md：Sub-Agent 定义
• .claude/commands/*.md：SlashCommand 执行文件

B. 国际化支持

自动适配 VSCode 显示语言设置，支持：

• English（默认）
• 日本語
• 한국어
• 简体中文（zh-CN）
• 繁體中文（zh-TW/zh-HK）

4. Skill 节点集成

A. Skill 类型

• Personal Skills：~/.claude/skills/ 个人使用
• Project Skills：.claude/skills/ 团队共享

B. 创建新 Skill

通过可视化编辑器创建：

• Name：小写、支持连字符（如 pdf-analyzer）
• Description：技能功能描述
• Instructions：Markdown 格式的完整指令
• Allowed Tools：可选的工具限制
• Scope：Personal 或 Project

5. MCP Tool 节点集成

A. MCP 协议

MCP（Model Context Protocol）是 Claude Code 的扩展系统，支持集成外部工具和服务。

B. 功能特性

• MCP Server 发现：浏览已配置的 MCP 服务器
• 工具选择：搜索和过滤 MCP 工具
• 参数配置：基于工具架构动态生成表单
• 实时验证：自动参数验证和错误提示

C. 网络依赖

• 本地 MCP 服务器（如文件系统工具）：无需外部网络
• 远程 MCP 服务器（如云 API）：需要外部网络连接

三、使用场景分析

1. 数据分析管道

graph TD
    A[Collect Data Sub-Agent] --> B{Ask User}
    B -->|Statistical| C[Statistical Analysis Sub-Agent]
    B -->|Visual| D[Data Visualization Sub-Agent]
    C --> E[Generate Report Sub-Agent]
    D --> E

2. 代码审查工作流

graph TD
    A[Code Scanner Sub-Agent] --> B{Priority Level?}
    B -->|Critical Only| C[Filter Results Sub-Agent]
    B -->|All Issues| C
    C --> D[Generate Fix Suggestions Sub-Agent]

3. 文档处理流程

graph TD
    A[Upload Document Prompt] --> B[PDF Extractor Skill]
    B --> C{Processing Type?}
    C -->|Summarize| D[Document Processor Skill]
    C -->|Translate| D
    C -->|Analyze| D
    D --> E[Format Results Sub-Agent]

4. Web 自动化流程

graph TD
    A[Input URL Prompt] --> B[Playwright Navigate MCP]
    B --> C{Action Type?}
    C -->|Screenshot| D[Playwright Action MCP]
    C -->|Extract Text| D
    C -->|Click Element| D
    D --> E[Process Results Sub-Agent]

四、技术实现分析

1. 技术栈

• 前端框架：React
• 可视化库：React Flow
• 开发语言：TypeScript
• 构建工具：Vite
• 扩展平台：VSCode Extension API

2. 项目结构

cc-wf-studio/
├── .claude/commands/     # Claude Code 命令定义
├── .github/              # GitHub Actions 配置
├── .specify/             # 规格定义
├── .vscode/              # VSCode 配置
├── contracts/            # 类型契约
├── docs/                 # 文档
├── resources/            # 资源文件（GIF 演示）
├── scripts/              # 构建脚本
├── specs/                # 规格说明
└── src/                  # 源代码
    ├── webview/          # WebView 前端
    └── extension/        # VSCode 扩展

3. 依赖关系

graph TB
    A[cc-wf-studio] --> B[React Flow]
    A --> C[VSCode API]
    A --> D[Claude Code CLI]
    D --> E[MCP Servers]
    D --> F[Skills]

五、安装与使用

1. 安装方式

A. 从源码安装

# 克隆仓库
git clone https://github.com/breaking-brake/cc-wf-studio.git
cd cc-wf-studio

# 安装依赖
npm install
cd src/webview && npm install && cd ../..

# 构建扩展
npm run build

# 打包扩展
npx vsce package

# 安装 .vsix 文件
# 在 VSCode 中: Extensions > ... > Install from VSIX

B. 从 VSCode Marketplace（即将推出）

• 打开 VSCode Extensions（Ctrl+Shift+X / Cmd+Shift+X）
• 搜索 Claude Code Workflow Studio
• 点击 Install

2. 快速开始

A. 打开编辑器

• 按 Ctrl+Shift+P / Cmd+Shift+P
• 输入 Claude Code Workflow Studio: Open Editor
• 按 Enter

B. 交互式教程

首次启动时会自动开始交互式入门教程，支持多语言。

C. 创建工作流

• 添加节点：从左侧面板选择节点类型
• 配置节点：点击节点在右侧面板编辑属性
• 连接节点：从输出端口拖拽到输入端口

D. 保存与导出

• 输入工作流名称
• 点击 Save 保存为 JSON 到 .vscode/workflows/
• 点击 Export 生成 .claude 文件

六、限制与注意事项

1. 功能限制

• 每个工作流最多 50 个节点
• AI 处理超时（默认 90 秒，可配置 30 秒-5 分钟）
• 请求限制 2000 字符
• 对话历史仅在活动会话期间保存

2. 前置要求

• Claude Code CLI 必须已安装并可访问
• MCP 服务器需要先在 Claude Code 中配置

3. 网络依赖

• 扩展本身完全在本地运行
• MCP Tool 节点可能需要网络连接，取决于具体 MCP 服务器配置

七、许可证说明

1. 许可证类型

GNU Affero General Public License v3.0（AGPL-3.0-or-later）

2. 许可证含义

• 可以使用、修改和分发本软件

• 如果修改并部署本软件（包括作为网络服务），必须：

  • 在 AGPL-3.0 下公开修改后的源代码
  • 为与服务交互的用户提供源代码访问权限
• 允许商业使用，但不允许专有修改

八、相关资源

1. 官方资源

• Claude Code：https://claude.com/claude-code
• React Flow：https://reactflow.dev/
• Dify（灵感来源）：https://dify.ai/

2. 社区

• GitHub Stars：88
• Forks：14
• Watchers：2

参考资料

1. GitHub - 0xSojalSec/cc-wf-studio
2. breaking-brake/cc-wf-studio 原始仓库
3. Claude Code 官方文档
4. React Flow 官方网站