用 CC Workflow Studio 在画布上设计 Agent 工作流

多步骤的 Agent 工作流成也提示词文本、败也提示词文本：一长篇 markdown，谁也看不清它的结构。CC Workflow Studio 是一个 5k 星的项目，它把工作流放上画布——你用可视化方式设计，它导出的却是你的 AI Agent 本来就理解的 markdown。正如 README 所说："You think visually. AI thinks in .md. CC Workflow Studio speaks both."（人看图，AI 读 .md，它两种都懂。）

为什么这个 Skill 重要

编辑器是一个面向 Agent 编排的拖拽画布：子代理编排、Agent skill 和 MCP 工具集成是文档写明的构建单元。工作流保存为 .vscode/workflows/*.json，一键导出就能把这个文件变成 .md 斜杠命令或 Agent skill——然后在你的 AI 编码 Agent 里以 /workflow-name 调用。README 的表格记录了 8 个 Agent 导出目标：Claude Code（.claude/agents/、.claude/commands/）、GitHub Copilot Chat（.github/prompts/）、GitHub Copilot CLI（.github/skills/）、OpenAI Codex CLI（.codex/skills/）、Zoo Code（.roo/skills/）、Gemini CLI（.gemini/skills/）、Antigravity（.agent/skills/）和 Cursor（.cursor/agents/、.cursor/skills/）。Claude Code 是原生路径；README 说明其他 Agent 需要从工具栏的 More 菜单激活。

同一个 workflow.json 驱动三种界面：VS Code 画布、CLI 和 MCP 服务器。README 明确表示不存在"仅 VS Code"的路径——你画的工作流，和 ccwf preview 在浏览器里渲染的是同一个文件，和外部 Agent 通过 MCP 编辑的也是同一个文件。

安装

扩展从 VS Code 市场安装：

code --install-extension breaking-brake.cc-wf-studio

CLI 是终端入口——render、validate、export、run、preview、canvas、mcp 子命令，可用于 CI、SSH 或 Codespaces：

npx @cc-wf-studio/cli --help

MCP 服务器（@cc-wf-studio/mcp，stdio 方式，命令 ccwf-mcp）让外部 AI 客户端读写工作流；把它加进你的 MCP 客户端 .mcp.json 即可。注意许可协议的差异：VS Code 扩展是 AGPL-3.0，而 npm 库（@cc-wf-studio/core、@cc-wf-studio/cli、@cc-wf-studio/mcp）是 MIT。

实战：从画布到斜杠命令

从工具栏图标或命令面板（Cmd+Shift+P → "CC Workflow Studio: Open Editor"）打开编辑器，从面板添加节点并配置它们。保存会写入 .vscode/workflows/*.json；Export 生成 .md 斜杠命令或 Agent skill；Run 直接在你的 AI 编码 Agent 里执行工作流。

走 AI 辅助路线时，点击 Edit with AI 并在面板里选择一个 Agent——MCP 服务器会在幕后自动启动，Agent 通过 get_workflow 和 apply_workflow 编辑你的工作流，画布实时更新：

帮我把这个工作流加一个代码评审节点：PR 描述先由一个子代理总结，然后另一个子代理检查测试覆盖，最后汇总成一条评论。

技巧

• 把画布当作唯一事实来源，每次改动后重新导出——导出的 .md 是 workflow.json 的构建产物。
• 提交前在终端里校验：ccwf validate 不打开 VS Code 也能检查文件。
• README 的受支持 Agent 表格是导出路径的权威来源；换 Agent 时，重新确认那个 Agent 读取哪些目录。
• 非 Claude Code 目标在你从工具栏 More 菜单激活之前保持休眠——README 的说明里写明了这一点。
• 仓库的"Usage Examples"章节标注为"coming soon"，所以把你的第一个工作流当作原创设计，而不是可以照抄的现成范例。

何时不用这个 Skill

如果你的工作流已经是稳定不变、从不需要修改的 markdown，画布只会增加一道构建工序而带不来清晰度。如果你完全在终端里工作，CLI 覆盖 render、validate、export、run、preview 和 canvas——但拖拽编辑本身是 VS Code 扩展的职责。

查看 排行榜 了解更多 skill。