最近我在折腾 AI 编程工作流------你想让 Claude Code 自动做 PR 审查，或者让好几个 Agent 分工协作，最后发现最麻烦的不是写提示词，而是把这一整套流程用 JSON / Markdown 配出来。
文本配置有个通病：能跑，但肉眼基本看不懂。改个分支要翻半天括号，想跟同事解释"这个流程干嘛的"，对着一屏幕缩进只能干瞪眼。
所以看到 CC Workflow Studio 这个项目时，我第一反应是：终于有人把"画流程图"那套体验搬过来了。它是个 VS Code 插件 VS Code Extension：VS Code 的插件，装完就能在编辑器里直接用，核心就一件事------把 AI 工作流画出来，而不是写出来 。
先说清楚：它是干嘛的
一句话版：一个给 AI Agent 工作流用的"可视化流程图编辑器"。你在画布上拖节点、连线条，设计完点一下就能导出成 Claude Code、GitHub Copilot、OpenAI Codex 等平台能直接用的格式。
它想解决的是几个很实在的痛点：
- 工作流配置靠手搓 JSON / Markdown，写完自己都懒得看第二眼；
- 想改现有流程，得在文本里找位置、对括号，容易改崩；
- 多 Agent 协作、条件分支这种逻辑，纯文本里特别绕；
- 同一个流程想换平台用（比如从 Claude Code 换到 Copilot），格式不通用，得重写。
作者把它自己的定位写得挺妙："你用视觉思考，AI 用 .md 思考，这个工具两边都能说。"（原话：You think visually. AI thinks in .md. CC Workflow Studio speaks both.）
我为什么觉得它值得一试
我翻了下它的实现和社区反馈，几个点比较打动我：
1. 画布是真的"画"的，不是换个皮写配置
底层用的是 React Flow React Flow：一个专门画"节点图"的 React 库，就是那种方块用线连起来的画布，很多低代码工具都拿它做。节点能拖、能缩放、能多选，连线带箭头，条件分支还能标 true/false。比起对着一个 JSON 数组脑补流程，这种直观度高太多了。
2. 能"说人话"改流程
它有个 Edit with AI 功能：你直接在对话框里写"加一个代码安全检查的步骤"，它就去改画布上的节点和连线，你确认后生效。这个后面单独讲。
3. 导出覆盖的平台够多
不止 Claude Code。我列个表（数据来自项目 README）：
| 目标平台 | 导出到的目录 |
|---|---|
| Claude Code | .claude/agents/、.claude/commands/ |
| GitHub Copilot Chat | .github/prompts/ |
| GitHub Copilot CLI | .github/skills/ |
| OpenAI Codex CLI | .codex/skills/ |
| Zoo Code（原 Roo Code） | .roo/skills/ |
| Gemini CLI | .gemini/skills/ |
| Antigravity | .agent/skills/ |
| Cursor | .cursor/agents/、.cursor/skills/ |
注意：除了 Claude Code，其他平台要从工具栏的 More 菜单里手动激活。
4. 不只是插件，还有 CLI 和 MCP
除了 VS Code 里点来点去，它也提供了命令行和 MCP 服务器 MCP（Model Context Protocol，模型上下文协议）：让 AI 能统一调用外部工具/数据的接口标准，相当于给 AI 装了一排"USB 接口"，所以可以嵌进你自己的自动化里。
一个具体例子：PR 代码审查流程怎么"画"
光说功能太虚，拿最常见的场景走一遍------用工作流做 Pull Request 代码审查。
你希望一次审查覆盖：代码分析 → 安全检查 → 性能评估 → 出报告。换成以前，这是四段提示词手动串；用 CC Workflow Studio，就是四个节点一字排开，中间加个条件分支（比如"有问题才进报告"）。
画完导出到 Claude Code，就能用 /pr-review 这种斜杠命令触发。同事接手时，看这张图比看配置文件快得多。
说人话改流程：Edit with AI
这是我个人觉得最省事的部分。
传统改法：打开 JSON，找到对应那段，改完祈祷语法没错。CC Workflow Studio 的做法是------点 Edit with AI，在对话框里打字：
"给审查流程加一个依赖漏洞扫描的步骤，放在安全检查之后。"
它会把当前工作流的状态发给 AI（背后其实是启动了它自带的 MCP 服务器，让 Claude Code / Copilot 来改），AI 返回一组修改（加节点、改连线、调配置），画布上实时更新，你确认就保存。
本质上，它把你从"编辑配置文件的打字员"变成"提需求的人"。这对不熟 JSON 的人特别友好。
怎么装、怎么用
装插件（任选一种）
bash
# 方式一：命令行直接装
code --install-extension breaking-brake.cc-wf-studio
# 方式二：VS Code 扩展市场搜 "CC Workflow Studio" 点安装
# 方式三：OpenVSX 下载 .vsix，用 "Install from VSIX" 装不想装插件也能试
bash
# 用 npx 直接跑 CLI，不用本地安装
npx @cc-wf-studio/cli --helpCLI 提供的子命令：
bash
ccwf render | validate | export | run | preview | canvas | mcp打开编辑器
- 右上角点 CC Workflow Studio 图标；
- 或
Cmd+Shift+P（Mac）/Ctrl+Shift+P（Win）→ 输入CC Workflow Studio: Open Editor。
画第一个流程
- 从左边节点面板拖节点到画布（常见类型：Agent、Condition、Action、MCP Tool）；
- 点节点输出口，拖到下一个节点输入口，连起来；
- 点节点打开右侧配置面板，填名称、提示词、参数；
- 点保存，工作流存成
.vscode/workflows/*.json； - 点导出，选目标平台，生成对应格式文件。
工作流文件长啥样
导出的本质是一个 JSON，节点和连线分开存。摘一段核心结构给你看（已精简）：
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 }
}节点类型这块，源码里大致是这么定义的：
typescript
// 支持的节点类型
type NodeType =
| 'agent' // Agent 节点
| 'condition' // 条件判断节点
| 'action' // 动作节点
| 'mcp-tool' // MCP 工具节点
| 'input' // 输入节点
| 'output'; // 输出节点导出到不同平台长什么样
导出不是简单拷贝，而是按平台格式"翻译"一遍。给两个例子。
Claude Code（导出成 Markdown 形式的 Agent 说明书）
markdown
# .claude/agents/code-review-agent.md
## Agent: 代码审查Agent
### Description
审查代码质量和安全性
### Steps
1. 分析代码结构
2. 检查安全问题
3. 评估代码质量
4. 生成审查报告
### Tools
- file-reader
- security-scannerGitHub Copilot（导出成 YAML 形式的 Prompt）
yaml
# .github/prompts/code-review.yml
name: Code Review
description: 审查代码质量和安全性
steps:
- name: Analyze Code
action: analyze
- name: Check Security
action: security-scan进阶：多 Agent 编排、条件分支、循环
如果你要的不是"一条直线"，而是"一队人配合"，这部分要看看。
子 Agent 编排 Sub-Agent（子智能体）：主 Agent 手下的"小弟"，各自负责一段活
支持建多个子 Agent，各自有独立提示词，还能互相传数据。三种协作模式：
- 顺序执行：A 干完把结果交给 B，像流水线；
- 并行执行：几个 Agent 同时干，最后汇总；
- 条件分支：按条件挑不同的 Agent 走，相当于动态路由。
用个比喻：顺序像"工厂装配线"，并行像"几个人同时包饺子分工"，条件分支像"前台看情况决定转给哪个部门"。
子 Agent 协作在 JSON 里就是节点 + 带条件的连线：
json
{
"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" }
]
}条件分支和循环：支持 if-else，也支持循环处理。画布上控制流一眼能看清，不用在文本里数缩进。
MCP 工具集成：已装的 MCP 服务器会被扫出来，每个工具变成一个节点，参数在面板上配，工具的输出还能接别的节点------相当于把外部能力"拖"进流程里。
和纯文本配置比，到底值不值
我做了个粗对比（⭐ 越多越好）：
| 维度 | CC Workflow Studio | 纯文本配置 | 其他可视化工具 |
|---|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ 拖拽即可 | ⭐⭐ 手搓配置 | ⭐⭐⭐ 中等 |
| 可视化 | ⭐⭐⭐⭐⭐ 图形画布 | ⭐ 纯文本 | ⭐⭐⭐⭐ 图形 |
| AI 辅助 | ⭐⭐⭐⭐⭐ 内置对话改 | ⭐ 无 | ⭐⭐ 部分 |
| 多平台 | ⭐⭐⭐⭐⭐ 8 种格式 | ⭐⭐ 单平台 | ⭐⭐⭐ 2--3 种 |
| 上手成本 | ⭐⭐⭐⭐ 较低 | ⭐⭐ 要学语法 | ⭐⭐⭐ 中等 |
| 调试 | ⭐⭐⭐⭐⭐ 一键运行 | ⭐⭐ 手动测 | ⭐⭐⭐ 部分 |
适合谁用
- 正在用 Claude Code / Copilot 的人：想把自己常用的流程固化下来、复用；
- 带团队的：统一团队的 Agent 工作流标准，版本管理也方便（毕竟是 JSON，能进 Git）；
- 要设计多 Agent 协作的：条件分支、并行、子 Agent 这些在画布上比文本好理；
- 想跨平台迁移流程的：一套图导出多处用；
- 想学工作流设计模式的：导入别人的配置，看图比读文档快。
几点客观提醒
说好话也得说实话：
- 协议是 AGPL-3.0 AGPL-3.0：一种开源协议，你改了它的代码也得开源（VS Code 扩展本体；npm 库是 MIT）。只是"用"它设计工作流不受影响，但如果你要改它源码再发布，得注意。
- AI 编辑要接 AI 提供方：Edit with AI 默认走 Claude Code，用 Copilot / Codex 得另外装或配 key，不是开箱就纯离线。
- 社区还在长：GitHub 上 Issues / PR 一直在动，但官方说样例工作流和教程还在补，新手入门可能得自己多摸索。
- 数据上，项目目前 3.4k+ Star、398+ Fork（来源：原文素材；OpenVSX 上最新扩展版本已到 v3.36.0，迭代挺活跃）。
资源地址
- GitHub：
https://github.com/breaking-brake/cc-wf-studio - OpenVSX（开源插件市场）：搜
breaking-brake.cc-wf-studio - CLI 试用：
npx @cc-wf-studio/cli --help
如果你也受够了手搓 Agent 配置，建议直接 npx 跑一下看看画布手感。觉得顺手再装插件不迟------反正不亏。