CC Workflow Studio 解析与落地方案

一、项目介绍

1.1 一句话定位

"You think visually. AI thinks in .md. CC Workflow Studio speaks both."

你用画布思考，AI 用 Markdown 思考，CC Workflow Studio 在两者之间做翻译。

CC Workflow Studio 是一款基于 VS Code 扩展 形态发布的「AI 编码 Agent 可视化工作流编排器 」。它把过去散落在 CLAUDE.md、slash commands、sub-agents、MCP tools、skills 中的"提示词工程"工作，重新组织成一张可拖拽、可导出、可执行的有向流程图。

简单一句话理解：它把 Claude Code / Copilot / Codex CLI / Cursor / Gemini CLI 等 AI 编码助手的"提示词与编排"，从"在终端里靠脑子背"变成"在画布上拖来拖去"。

1.2 它解决了什么痛点

传统 AI 编码助手痛点	CC Workflow Studio 的解法
Prompt 散落在记忆里，重复输入、不可复用	流程节点持久化为 `*.json`，团队可共享
多步任务靠手敲，缺乏分支/循环/审批控制	画布上原生支持条件分支、Sub-Agent、循环节点
多 Agent（Claude/Copilot/Codex/Cursor）切换上下文成本高	一份流程图，一键导出到不同 Agent 对应的目录格式
流程难以调试、难以回放	可"Run from Editor"直接在 VS Code 内回放执行
新人上手 Claude Code 门槛高（CLAUDE.md、skills、hooks......）	可视化节点 + 自然语言"Edit with AI"自动生成流程

1.3 支持的 AI 编码 Agent 矩阵

Agent	导出目录
Claude Code	`.claude/agents/` `.claude/commands/`
GitHub Copilot Chat	`.github/prompts/`
GitHub Copilot CLI	`.github/skills/`
OpenAI Codex CLI	`.codex/skills/`
Roo Code	`.roo/skills/`
Gemini CLI	`.gemini/skills/`
Antigravity（Google）	`.agent/skills/`
Cursor	`.cursor/agents/` `.cursor/skills/`

这意味着：一次设计、多端导出，是它最大的工程价值之一。

二、核心理念

2.1 三个核心抽象

Visual Canvas 可视化画布
Markdown 中间表示
Agent 原生执行格式
Claude Code
Copilot
Cursor
Codex CLI

画布（Canvas）：人类思维友好，所见即所得
Markdown（中间产物）：AI 友好，跨 Agent 通用
导出格式（Slash Command / Skill / Agent）：Agent 原生可执行

2.2 关键设计哲学

Agentic Engineering 优先：把"Sub-Agent 编排 + Agent Skills + MCP Tools"作为三大原子能力
本地优先（Local-first） ：所有流程文件都是工作区内的 .vscode/workflows/*.json，可 Git 化、可 PR 化
AI-Native 编辑：通过内置的 MCP Server，让 Claude Code 自身能"编辑自己即将执行的工作流"，形成闭环

三、工作原理与架构

3.1 整体架构

运行时与工具
AI Agent 层
VS Code 宿主进程
Editor UI

React Flow 画布
Workflow Store

.vscode/workflows
内置 MCP Server
多端格式生成器

Exporter
Claude Code
Copilot
Codex CLI
Cursor
Sub-Agent 节点
Agent Skills
MCP / Bash / Web

3.2 "Edit with AI"闭环时序

Claude Code MCP Server 画布 UI Claude Code MCP Server 画布 UI loop [AI 迭代修改工作流] 开发者点击"Edit with AI"并输入需求自动启动 MCP Server 启动 Agent 并注入 editing skill get_workflow（读取当前流程 JSON）返回流程 JSON 推理 + 生成新流程结构 apply_workflow（写回新结构）实时刷新画布审阅 ->> Save ->> Export ->> Run 开发者

3.3 节点体系（20+ 类型）

节点类别	代表节点	作用
入口/出口	Start / End	流程起止
提示词	Prompt	自然语言指令
智能体	Sub-Agent	调用专门角色（如 reviewer、tester）
技能	Agent Skill	条件式加载领域知识
工具	MCP Tool	调用外部能力（GitHub、DB、浏览器）
控制流	Condition / Router / Loop	分支、路由、循环
人工	Approval / Human-in-the-loop	人工审批节点
IO	File Read/Write、Shell Exec	与代码库交互

3.4 导出产物的本质

以 Claude Code 为例，画布中的一条流水线最终会被翻译为：

复制代码

.claude/
├── commands/
│   └── pr-review.md            # 可在 CC 中使用 /pr-review 调起
└── agents/
    ├── code-reviewer.md         # Sub-Agent 角色卡
    └── test-writer.md

所以"工作流"在 AI 侧的真身，仍然是 Markdown------这一点决定了它能优雅地融入 Git、Code Review、CI 等既有研发体系。

四、工作模式

4.1 四种主要工作模式

模式一

可视化设计模式
模式二

AI 共创模式
模式三

导出复用模式
模式四

编辑器内运行模式

模式一：可视化设计（Designer Mode）

用户从节点面板拖拽节点，连线，配置参数
适合：流程清晰、规则明确、有标准化诉求的团队

模式二：AI 共创（Edit-with-AI Mode）

用户用自然语言描述（如"做一个 PR 审查流程，先取 PR 内容，再按代码行数分流"）
AI 通过 MCP Server 直接在画布上构建/迭代节点
适合：从 0 到 1、原型阶段、个人开发者快速试验

模式三：导出复用（Export Mode）

一键导出为 .md，提交到 Git
团队成员只需 git pull 即可在自己的 Claude Code 中 /workflow-name 触发
适合：组织级 SOP 沉淀

模式四：编辑器内执行（Run-in-Editor Mode）

在 VS Code 内直接点 "Run" 按钮，调用 Agent 运行整条流水线
实时观测执行轨迹、Token、产物
适合：调试、演示、单次任务自动化

4.2 与传统 Workflow 工具对比

维度	n8n / Dify	CC Workflow Studio
部署形态	在线/自建服务	VS Code 扩展，零部署
主要受众	业务自动化、低代码	AI 编码场景下的研发
输出物	在平台内执行	输出 Markdown，由 Agent 执行
灵活性	节点固定	节点是 Prompt+Skill+MCP 组合
协作方式	平台账号	Git/PR，研发友好

五、典型应用场景与落地案例

5.1 应用场景全景

CC Workflow Studio 应用场景
研发效能
质量保障
运维与发布
团队协作 SOP
业务侧自动化
需求->代码自动生成
代码重构流水线
跨端迁移如 RN->Flutter
PR 自动审查
单测覆盖补齐
安全扫描+修复
Release Note 生成
CI 失败诊断
依赖升级流
新人 Onboarding
Code Review 规范
Bug 复盘模板化
小哥/客服话术生成
运营文案多端发布

5.2 官方/社区典型落地案例

案例 A：PR 代码审查工作流（官方示例）

来源：项目主页 README / CSDN 案例文章

业务诉求：研发提交 PR 后，希望自动完成"取 PR -> 风险评级 -> 不同深度审查 -> 生成报告 -> 通知人工审批"全过程。

画布结构：
< 50 行
50-500 行
> 500 行
高
低
PR 触发
MCP: GitHub 获取 PR diff
代码行数判断
轻量审查 Sub-Agent
标准审查 Sub-Agent
资深架构师 Sub-Agent
生成报告
风险等级
人工审批节点
自动通过并评论
结束

收益：

大 PR 不再被一刀切的 Prompt 草草处理
不同体量自动匹配不同算力 / 模型层级（Haiku / Sonnet / Opus）
审查规则可被全团队复用

案例 B：Bug 修复闭环（社区流传度最高）

失败
通过
读取异常堆栈
Skill: 框架领域知识
Sub-Agent: 定位 root cause
生成补丁草稿
Skill: 单测生成
Shell: 跑测试
生成 PR + 复盘文档

亮点：带反馈循环，测试不通过自动回到根因分析节点。

案例 C：从 PRD 到任务卡的需求拆解流水线

（受 Claude Taskmaster、claude-task-master 启发）

复制代码

PRD.md → 解析与抽取 → 任务分解（Opus 规划） → 任务卡 JSON → 自动建 Issue → 生成 CLAUDE.md 任务清单

适合长沙团队场景：需求拆解 + 奖励模型 、小哥智能助手 、跨端重构等大模型项目的"任务化"沉淀。

案例 D：VSCode 插件本身的"自举"开发

仓库本身有 .claude/skills、.specify、.roo 多套配置
项目作者用 CC Workflow Studio 自身来开发 CC Workflow Studio
这是一个非常好的"Dogfooding"参考样本

六、可落地的设计方案（建议方案）

目标：在我们现有"小哥智能助手 / 跨端重构 / Harness Engineering"等大模型项目中，引入 CC Workflow Studio 作为统一的 AI 工作流编排层，把零散的 Prompt 与 Skill 沉淀为团队级资产。

6.1 落地总体架构

能力平台
团队代码仓库
本地开发环境
导出同步
导出同步
导出同步
VSCode 工作流编辑器
智能编码代理
本地流程配置文件
技能库
指令库
子代理库
流程文档
知识库RAG
内部服务网关
智能评测体系

6.2 分阶段落地路线

阶段一

POC 验证

2 周
阶段二

团队试点

4 周
阶段三

平台对接

6 周
阶段四

组织级沉淀

持续

阶段一：POC 验证（2 周）

任务	输出物	负责人
在 1 台开发机安装 cc-wf-studio	安装手册	个人
用画布复现 1 条 PR 审查流	`pr-review.json` + 导出 `.md`	1 人
评估与 JoyCode/内部 Agent 的兼容性	兼容性报告	1 人

验收标准 ：可在 Claude Code 中通过 /pr-review 一键执行。

阶段二：团队试点（4 周）

选 2 个核心场景进行规模化复制：

小哥智能助手 - 话术生成流水线
- 入参：用户问题 + 历史对话
- 节点：知识库检索 → 多角色生成 → 合规审查 → 输出
跨端重构 - 原生转 Flutter
- 节点：源码分析 → 控件映射 Skill → 代码生成 Sub-Agent → 单测自动生成 → diff 报告

每条流水线必须沉淀：流程图 + json + 导出 md + README + 一条 demo 视频。

阶段三：平台对接（6 周）

关键工程项：

自研内部 MCP Server ，封装：
- JIRA：拉取需求、创建任务
- GitLab：PR、Issue、Pipeline
- 知识库：RAG 检索接口
- 评测平台：调用奖励模型评分
统一节点库（Internal Node Pack）
- 自定义 Skill：合规检查、敏感词、京东风格代码规范
- 自定义 Sub-Agent：架构师 / 测试工程师 / 文档工程师 / PMO
CI 流水线集成
- 提交 PR 时自动触发 .claude/commands/pr-review.md 进行预审

阶段四：组织级沉淀（持续）

建立 "工作流市场"内部站点 ：所有团队的 *.json 流程可检索、可一键克隆
与 Harness Engineering 思路结合：把每条流程看作一份"实验装置"，可观测、可度量、可持续优化
与 奖励模型 串联：每次工作流执行结果回流，反哺模型迭代

6.3 关键设计决策（建议）

决策点	建议	理由
工作流文件存放	仓库内 `.vscode/workflows/` + Git 跟踪	可 Review、可回滚
Skill 与 Sub-Agent 命名规范	`{域}_{动作}.md`，如 `flutter_refactor.md`	便于检索与复用
多 Agent 兼容	默认产出 Claude Code 与 Cursor 双格式	兼顾团队不同偏好
敏感操作	强制 Approval 节点（部署、删库、对外发布）	风险可控
度量指标	工作流执行次数 / 成功率 / 节省工时 / token 成本	可量化 ROI
协议风险	AGPL-3.0，不建议直接二次分发修改版	走"使用 + 自研扩展"路线

6.4 一份示例工作流：京东研发场景"需求 -> 代码 -> 评测"全链路

校验失败
校验通过
是
否
需求触发
MCP拉取需求详情
京东研发规范校验
PRD解析拆解
任务执行调度
智能代码生成
自动生成单测
测试+Lint校验
创建GitLab MR
AI自动代码审查
奖励模型智能评分
评分达标？
人工最终审核
流程结束合并上线

6.5 风险与对策

风险	影响	对策
AGPL-3.0 协议传染	法务风险	仅作为使用方，不二次分发；自定义节点放独立私仓
与内部 IDE/JoyCode 兼容性	落地受限	POC 阶段优先验证 MCP Server 是否互通
工作流爆炸式增长难维护	管理成本	建立 owner 制 + 季度治理
模型成本失控	财务风险	节点级 token 预算 + 模型分级（Haiku 默认 / Opus 关键节点）
安全合规	信息泄漏	内网部署 MCP，禁用外网 MCP；敏感节点必须 Approval

七、结语

CC Workflow Studio 的本质，是把 "AI 编码 Agent 的提示词工程" 这件原本极其依赖个人经验的事，工程化、可视化、资产化了。

对长沙团队当下的几条主线（小哥智能助手 / 跨端重构 / Harness Engineering / 自动化 AI 开发）而言，它最大的价值不是"又一个工具"，而是提供了一个统一的载体------让我们把过去散落在文档、脑子里、Prompt 备忘里的"研发流水线 know-how"，凝固为团队可复用、可演进的资产。

画布是给人看的，Markdown 是给 AI 看的，而工作流，是给团队世代相传的。