司素浏览器
61.24M · 2026-02-07
这是"一天一个开源项目"系列的第14篇文章。今天带你了解的项目是 CC Workflow Studio（GitHub）。
在AI辅助编程的世界里，我们经常需要设计复杂的工作流：多个子Agent协作、条件分支、循环处理、MCP工具调用等。传统的文本配置方式虽然灵活，但不够直观，难以快速理解和修改。CC Workflow Studio 提供了一个可视化的拖拽式编辑器，让你像画流程图一样设计AI工作流，还支持AI辅助编辑，让复杂的工作流设计变得简单直观。
为什么选择这个项目？
CC Workflow Studio 是一个可视化AI工作流编辑器，专为设计复杂的AI Agent工作流而打造。它提供了一个直观的拖拽式界面，让开发者能够通过图形化方式设计、编辑和优化AI自动化工作流，然后一键导出到 Claude Code、GitHub Copilot 或 OpenAI Codex 等平台使用。
项目解决的核心问题：
面向的用户群体：
作者：breaking-brake
项目发展历程：
CC Workflow Studio 的核心作用是通过可视化编辑器设计和管理AI工作流，主要功能包括：
设计PR代码审查工作流
/pr-review 命令触发创建多Agent协作流程
优化现有工作流
.claude 配置文件跨平台工作流迁移
学习和理解工作流
VS Code 扩展市场
OpenVSX（开源VS Code扩展市场）
.vsix 文件方式一：点击图标
方式二：命令面板
Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）添加节点
连接节点
配置节点
保存工作流
.vscode/workflows/*.json导出工作流
可视化拖拽编辑
AI辅助编辑（Edit with AI）
多平台导出支持
.claude/agents/ 和 .claude/commands/.github/prompts/.github/skills/.codex/skills/子Agent编排
条件分支和循环
MCP工具集成
一键运行测试
工作流版本管理
| 对比项 | CC Workflow Studio | 文本配置 | 其他可视化工具 |
|---|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ 拖拽式编辑 | ⭐⭐ 需要手写配置 | ⭐⭐⭐ 中等 |
| 可视化 | ⭐⭐⭐⭐⭐ 图形化界面 | ⭐ 纯文本 | ⭐⭐⭐⭐ 图形化 |
| AI辅助 | ⭐⭐⭐⭐⭐ 内置AI编辑 | ⭐ 无 | ⭐⭐ 部分支持 |
| 多平台支持 | ⭐⭐⭐⭐⭐ 4种格式 | ⭐⭐ 单一格式 | ⭐⭐⭐ 2-3种格式 |
| 学习曲线 | ⭐⭐⭐⭐ 较低 | ⭐⭐ 需要学习语法 | ⭐⭐⭐ 中等 |
| 调试能力 | ⭐⭐⭐⭐⭐ 一键运行 | ⭐⭐ 手动测试 | ⭐⭐⭐ 部分支持 |
为什么选择这个项目？
CC Workflow Studio 采用现代化的前端架构，基于 VS Code Extension API 和 React Flow 构建。
VS Code Extension 主程序
React Flow 可视化引擎
工作流引擎
导出转换器
工作流以JSON格式存储，包含以下核心结构：
{
"nodes": [
{
"id": "node-1",
"type": "agent",
"data": {
"name": "代码审查Agent",
"description": "审查代码质量和安全性",
"prompt": "...",
"tools": [...]
},
"position": { "x": 100, "y": 100 }
}
],
"edges": [
{
"id": "edge-1",
"source": "node-1",
"target": "node-2",
"type": "default"
}
],
"viewport": {
"x": 0,
"y": 0,
"zoom": 1
}
}
CC Workflow Studio 使用 React Flow 作为可视化引擎，这是一个专门用于构建节点图的React库。
节点类型系统：
// 支持的节点类型
type NodeType =
| 'agent' // Agent节点
| 'condition' // 条件判断节点
| 'action' // 动作节点
| 'mcp-tool' // MCP工具节点
| 'input' // 输入节点
| 'output'; // 输出节点
节点渲染：
连接处理：
AI辅助编辑是 CC Workflow Studio 的核心创新功能，让用户可以通过自然语言对话来改进工作流。
工作流程：
用户输入需求
AI理解需求
生成改进方案
应用修改
AI提供者支持：
CC Workflow Studio 支持将可视化工作流导出为多种格式，适配不同的AI编程平台。
导出流程：
工作流验证
格式转换
文件生成
Claude Code 导出示例：
# .claude/agents/code-review-agent.md
## Agent: 代码审查Agent
### Description
审查代码质量和安全性
### Steps
1. 分析代码结构
2. 检查安全问题
3. 评估代码质量
4. 生成审查报告
### Tools
- file-reader
- security-scanner
GitHub Copilot 导出示例：
# .github/prompts/code-review.yml
name: Code Review
description: 审查代码质量和安全性
steps:
- name: Analyze Code
action: analyze
- name: Check Security
action: security-scan
CC Workflow Studio 支持创建多个子Agent，并编排它们之间的协作关系。
子Agent设计：
协作模式：
顺序执行
并行执行
条件分支
实现示例：
{
"nodes": [
{
"id": "designer",
"type": "agent",
"data": { "name": "架构设计师" }
},
{
"id": "developer",
"type": "agent",
"data": { "name": "代码开发者" }
},
{
"id": "condition",
"type": "condition",
"data": { "condition": "needs_refactor" }
}
],
"edges": [
{ "source": "designer", "target": "condition" },
{ "source": "condition", "target": "developer", "condition": "true" }
]
}
CC Workflow Studio 支持扩展自定义节点类型，开发者可以：
定义节点组件
注册节点类型
实现节点逻辑
CC Workflow Studio 支持集成 MCP（Model Context Protocol）工具，扩展AI的能力边界。
集成方式：
发现MCP服务器
工具节点
数据流转
CC Workflow Studio 特别适合以下开发者：
AI工具使用者
团队协作开发者
工作流设计者
学习研究者
使用建议：
欢迎来我中的个人主页找到更多有用的知识和有趣的产品
