当前位置：首页 > news >正文

【GitHub项目推荐--CC Workflow Studio：可视化 AI 工作流编辑器】⭐⭐⭐⭐⭐

news 2026/5/12 0:50:54

简介

CC Workflow Studio 是一个运行在 Visual Studio Code 内的可视化编辑器，专为设计复杂的 AI Agent 工作流而生。它解决了传统文本配置 AI 自动化流程时不够直观、难以调试的问题。通过拖拽式界面，开发者可以轻松构建包含子 Agent 编排、条件分支、MCP 工具调用等逻辑的复杂流程，并支持通过自然语言对话（Edit with AI）来迭代优化设计。该工具原生支持导出为 Claude Code、GitHub Copilot 及 OpenAI Codex 等主流 AI 编程平台的格式，实现“设计即运行”。

主要功能

可视化拖拽编辑：提供直观的节点画布，支持添加 Prompt、Sub-Agent、Skill、MCP Tool、Conditional Logic 等节点，通过连线定义执行顺序。
AI 辅助编辑：无需手动调整 JSON，直接通过自然语言描述需求（如“添加一个安全检查步骤”），AI 会自动修改工作流结构。
多平台导出：一键导出为.claude/agents/（Claude Code）、.github/prompts/（GitHub Copilot Chat）、.github/skills/（GitHub Copilot CLI）或.codex/skills/（OpenAI Codex CLI）格式。
即时运行：内置运行器，可在编辑器中直接启动工作流，实时查看执行日志和结果，方便调试。
复杂逻辑支持：内置 If/Else、Switch 等条件节点，支持基于上下文变量进行动态路由，实现多 Agent 协作。

安装与配置

安装方式

VSCode 扩展市场安装：在 VSCode 扩展面板搜索CC Workflow Studio，点击安装。
手动安装：从 GitHub Releases 下载.vsix文件，在 VSCode 中使用Extensions: Install from VSIX...命令安装。

前置依赖

Claude Code CLI：如需运行或导出 Claude 格式，需在系统 PATH 中安装claudeCLI 并登录账户。
Node.js：仅当从源码构建时需要。

如何使用

启动编辑器：点击 VSCode 右上角工具栏的 CC Workflow Studio 图标，或使用命令面板（Ctrl+Shift+P）输入CC Workflow Studio: Open Editor。
构建工作流：
- 从左侧面板拖拽节点（如 Start、Prompt、MCP Tool）到画布。
- 连接节点输出端口到输入端口，定义流向。
- 选中节点，在右侧属性面板配置具体内容（如 Prompt 文本、MCP 工具参数）。
AI 优化：点击工具栏“Edit with AI”按钮，输入如“将这个流程改为先检查代码风格再检查安全”的指令，AI 会自动重构节点。
运行与导出：
- 运行：点击“Run”按钮，底部终端将显示执行过程。
- 导出：点击“Export”按钮，选择目标平台（Claude/Copilot/Codex），文件将自动生成在项目对应目录。

应用场景实例

实例 1：智能 PR 代码审查流水线

场景：开发团队希望对新提交的 Pull Request 进行自动化深度审查。

工作流设计：创建一个包含多个子 Agent 的流程。起始节点触发后，首先调用 MCP 工具（如 GitHub MCP）获取 PR 的代码差异；随后通过条件分支节点，根据文件类型（如.py或.js）路由到不同的专家 Agent（Python 安全审查员、JavaScript 性能审查员）；每个子 Agent 执行专项分析后，结果汇聚到汇总节点，生成一份综合审查报告并发送到 Slack 频道。整个过程在画布上清晰可见，逻辑一目了然。

实例 2：多模态内容生成与发布

场景：自媒体运营需要根据热点新闻生成文案、配图并发布。

工作流设计：设计一个串行流程。第一步，使用联网搜索工具获取最新热点摘要；第二步，调用文案生成 Agent 撰写微博文案；第三步，调用图像生成 MCP 工具（如 Midjourney）根据文案生成配图；第四步，添加人工审核节点（User Input），等待运营确认；第五步，确认后调用微博 API 工具发布内容。利用可视化界面可以轻松设置“如果审核不通过则跳回文案修改节点”的循环逻辑。

实例 3：本地项目知识库问答增强

场景：开发者希望 Claude 能结合项目文档回答技术问题。

工作流设计：构建一个检索增强生成（RAG）流程。用户输入问题后，工作流先调用文件系统 MCP 工具检索项目docs/目录下的相关文档片段，然后将检索结果作为上下文注入到主 Prompt 中，最后让 Claude 生成基于项目上下文的精准答案。通过画布可以直观调整检索的 Top-K 参数和上下文拼接策略。