cc-wf-studio：AI Agent 工具实践指南

面对实际交付，我看cc-wf-studio的重点不在星标，而在这项能力：CC 工作流程工作室， breaking-brake/cc-wf-studio。一旦进入软件开发环节，依赖、接口和异常处理往往比主路径更影响采用会直接影响交付，这也是我最关心的风险。试跑可以从在隔离分支完成一个可回滚的小任务开始，并把安装步骤、接口契约、测试结果和错误信息写进验收记录。我的判断是，它更适合需要可检查开发流程而非单次演示的工程师；若眼下没有这类需求，先保留观察即可。

CC工作流程工作室

你用视觉来思考。 AI在.md中思考。 CC Workflow Studio 两者都可以使用。

在画布上设计工作流程。导出为 Markdown 您的 AI 代理已经理解。不再需要立即猜测。

Why CC 工作流程工作室？ - 扬声器甲板 Link

支持的代理

注意： 除 Claude Code 之外的代理需要从工具栏的 更多 菜单激活。

也可以在没有 VSCode 的情况下使用它

VSCode 扩展是最符合人体工程学的编辑器，但它不是唯一的入口点。相同的 workflow.json 驱动 CLI 和 MCP 服务器 - 选择适合情况的接口。

flowchart LR
    Wf(["workflow.json"])

    subgraph IDE[" VSCode Extension"]
        Canvas["React Flow canvas
+ editor + Slack share"]
    end

    subgraph Mcp[" MCP Server"]
        AIClient["Claude Code,
MCP Inspector, ..."]
        McpServer["@cc-wf-studio/mcp
(stdio: <code>ccwf-mcp</code>)"]
        AIClient --> McpServer
    end

    subgraph Cli[" CLI"]
        CliBin["@cc-wf-studio/cli
(<code>ccwf render | validate | export | run | preview | canvas | mcp</code>)"]
    end

    Wf <-->|edit| Canvas
    Wf <-->|read / write| McpServer
    Wf <-->|read / write| CliBin

    Canvas -.->|writes skills + agents| Output["Agent skills on disk
(.claude/, .codex/, .cursor/, ...)"]
    McpServer -.-> Output
    CliBin -.-> Output

不存在“VSCode-only”路径：您在画布中绘制的工作流程与 ccwf preview 将在浏览器中呈现的文件相同，并且外部克劳德代码可以通过 MCP 编辑相同的文件。

✨ 使用 AI 编辑：AI 代理（Claude Code、GitHub Copilot 等）通过 MCP Server 通过自然语言创建工作流程

▶ 直接从编辑器运行工作流程 – 查看正在运行的 AI 自动化 instantly

主要特点

可视化工作流程编辑器 - 直观的拖放画布，无需代码即可设计 AI 代理编排

代理工程 - 使用子代理编排、代理技能和 MCP 工具集成来设计多代理工作流程 - 代理工程的构建块

✨ 使用 AI 进行编辑 - 通过对话 AI 迭代改进工作流程 - 通过自然语言反馈请求更改、添加功能或完善逻辑

⚡ 一键导出并运行 - 将工作流程导出为即用格式并直接从编辑器运行

如何使用

启动扩展

• 单击编辑器右上角的图标
• 或者：命令面板 (Cmd+Shift+P) → “CC Workflow Studio：打开编辑器”

创建工作流程

• 从面板中添加节点并配置其设置，或使用 编辑和 AI。

保存和加载

• 单击工具栏中的“保存”按钮，将工作流程存储为 .vscode/workflows/*.json
• 单击工具栏中的“加载”按钮可打开保存的 .json 工作流程

导出并运行

• 单击工具栏中的“导出”按钮，创建 .md 斜线命令或代理技能（在 AI 编码代理中使用 /workflow-name）
• 单击工具栏中的“运行”按钮，直接在 AI 编码代理中运行工作流程

使用 AI 进行编辑

• 单击工具栏中的“使用 AI 编辑”按钮，使用自然语言生成或优化工作流程
• 使用 MCP 服务器进行本机：单击“使用 AI 进行编辑”面板中的 AI 代理按钮以启动本机 AI 编辑。 MCP 服务器在后台自动启动。

sequenceDiagram
    actor User
    box VS Code (CC Workflow Studio)
        participant UI as Editor UI
        participant MCP as MCP Server
    end
    participant Agent as AI Agent

    User->>UI: Click agent button
    UI->>MCP: Auto start server
    UI->>Agent: Launch with editing skill

    loop AI edits workflow
        Agent->>MCP: get_workflow
        MCP-->>Agent: workflow JSON
        Agent->>MCP: apply_workflow
        MCP->>UI: Update canvas
    end

使用示例

即将推出 - 示例工作流程和教程正在开发中。