Loading... # 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. 技术架构 ```mermaid 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. 工作流设计流程 ```mermaid graph LR A[选择节点] --> B[配置属性] B --> C[连接节点] C --> D[保存工作流] D --> E[导出 Claude 文件] ```  ## 2. AI 辅助工作流优化 ### A. 工作原理 通过对话式 AI 迭代改进工作流： - 点击 Edit with AI 按钮（ sparkle 图标） - 输入自然语言请求（最多 2000 字符） - AI 处理请求并更新工作流 - 支持多轮对话，保持上下文记忆 ### B. 最佳实践 - 具体：明确指定节点类型和连接关系 - 逐步：每次请求小而专注的更改 - 迭代：从简单开始，通过迭代增加复杂性 ### C. 错误处理 | 错误码 | 含义 | 解决方案 | |--------|------|----------| | COMMAND_NOT_FOUND | Claude Code CLI 未安装 | 安装 Claude Code CLI | | TIMEOUT | 请求超时 | 简化请求或增加超时时间 | | PARSE_ERROR | AI 输出无法解析 | 重新表述请求 | | VALIDATION_ERROR | 超过 50 个节点限制 | 减少节点或复杂度 | ## 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. 数据分析管道 ```mermaid 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. 代码审查工作流 ```mermaid 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. 文档处理流程 ```mermaid 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 自动化流程 ```mermaid 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. 依赖关系 ```mermaid 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. 从源码安装 ```bash # 克隆仓库 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](https://github.com/0xSojalSec/cc-wf-studio) 2. [breaking-brake/cc-wf-studio 原始仓库](https://github.com/breaking-brake/cc-wf-studio) 3. [Claude Code 官方文档](https://claude.com/claude-code) 4. [React Flow 官方网站](https://reactflow.dev/) 最后修改：2026 年 01 月 19 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏