如果你平时用 Claude Code 做自动化任务，却觉得写配置文件、拼工作流逻辑太麻烦，那这个 VS Code 插件绝对能让你眼前一亮。它把原本需要手动写代码 / 配置的 Claude Code 工作流，变成了 “拖拽节点画图” 的可视化操作，不用懂复杂编程，也能快速搭出专业的 AI 自动化流程。

项目简介：

cc-wf-studio 是一款 专为 Claude Code 设计的 VS Code 可视化工作流编辑器，核心就是 “让 AI 自动化流程设计变简单”。

Claude Code 是 Anthropic 官方的 CLI 工具，能让 AI 代理执行代码审查、数据处理、工具调用这些任务，但传统用法需要手动写配置文件、定义工作流逻辑，门槛不低。而这个插件相当于给 Claude Code 加了个 “可视化画板”—— 你不用写一行代码，只要把 “提示词”“子代理”“条件判断” 这些节点拖到画布上，连上线，就能搭出完整的自动化流程。

而且它超安全：除了需要联网的 MCP 工具（比如调用远程 api），所有编辑、生成操作都在本地 VS Code 里运行，不会把你的配置、隐私数据传到云端。界面还能自动跟着 VS Code 的语言设置切换，支持简体中文、繁体中文、日语、韩语等 5 种语言，不用手动调语言。

功能特色：

这个插件的亮点全在 “实用、好上手”，每一个功能都瞄准了 Claude Code 用户的痛点：

1. 拖拽式可视化编辑：像画流程图一样搭工作流

左边是 “节点面板”，右边是 “画布”，中间是各种功能节点，比如：

• 基础节点：提示词模板（可加变量）、子代理（执行特定 AI 任务）；
• 控制流节点：if/else 二分分支、Switch 多分支、询问用户（让用户做选择）；
• 集成节点：Skill（调用 Claude Code 技能）、MCP 工具（调用外部工具）。

你要做的就是：把节点拖到画布，点击节点设置参数（比如给提示词节点填内容、给 if/else 节点设判断条件），再用线把节点连起来，一个自动化流程就成了。比如想做 “PR 代码审查”，直接拖 “获取 PR 详情”“代码质量分析”“条件判断” 这几个节点，连好顺序，不用写一行配置。

2. AI 辅助设计：说句话就能生成 / 修改工作流

懒得自己拖拽节点？点击工具栏的 “Edit with AI”，用自然语言描述你想要的工作流，AI 会自动帮你画好节点、连好逻辑。比如直接输入：

“1. 用 GitHub MCP 工具获取 PR 详情；2. 按代码行数分小型（<100 行）、中型（100-500 行）、大型（>500 行）审查；3. 有问题就通知用户，没问题就自动请求批准”

AI 会立刻生成完整的可运行工作流，甚至还能帮你优化细节 —— 比如后续补充 “加个错误处理节点，万一获取 PR 失败就重试”，AI 会直接在原有流程上修改，不用重新画。

3. 支持 Skill 和 MCP 工具：能调用外部能力，还能复用技能

• 复用 Skill：如果你之前写过 Claude Code 技能（比如 “PDF 文本提取”“数据统计分析”），可以直接通过 “Skill 节点” 调用，不用重复写逻辑；还能分 “个人技能”（自己用）和 “项目技能”（团队共享），协作超方便。
• 调用 MCP 工具：通过 “MCP 节点” 能直接对接外部工具，比如用 Playwright 操控浏览器、调用数据库查数据、连接云端 API，让工作流的能力不局限于 AI 本身。

4. 一键导出，直接运行：不用手动转格式

画好的工作流，点击 “导出” 就能自动生成 Claude Code 能直接识别的 .claude/agents/（子代理定义）和 .claude/commands/（命令文件），不用自己手动调整格式。导出后打开终端，敲个命令就能运行整个工作流，比如 claude run 代码审查工作流，AI 就会按你设计的流程自动干活。

5. 团队协作：能通过 Slack 共享工作流

支持把工作流一键分享到 Slack 频道，还会生成预览卡片和导入链接 —— 同事点开链接就能直接导入自己的 VS Code，不用手动传文件、同步配置，团队协作效率直接拉满（这个功能目前是测试版，但很好用）。

6. 细节贴心：本地运行 + 多语言支持

• 本地安全：所有核心操作都在本地，不用担心配置泄露；只有调用远程 MCP 工具时才需要联网，而且会明确提示；
• 多语言适配：界面自动跟着 VS Code 语言走，比如你的 VS Code 是中文，插件的按钮、节点名称、提示信息就全是中文，不用适应英文界面；
• 错误处理清晰：如果节点配置错了、连接有问题，会实时显示错误提示，比如 “这个参数必填”“节点没连输出”，新手也能快速排查。

应用场景：

不管是个人高效干活，还是团队协作，这个工具都能派上用场，核心场景包括：

1. 开发者：自动化代码相关流程

• PR 代码审查：自动获取 PR 详情、按规模分档审查、检测代码质量和安全漏洞、生成修复建议，最后通知开发者或自动批准，不用手动点链接、翻代码；
• 代码部署前检查：搭建 “拉取代码→运行测试→扫描漏洞→生成部署报告→询问是否部署” 的工作流，一键完成部署前所有步骤，减少手动操作失误；
• 文档自动生成：写代码后，自动提取注释、分析功能，生成 API 文档或使用说明，还能导出成 Markdown 格式。

2. 办公 / 数据处理：批量搞定重复任务

• 文档处理：搭建 “接收 PDF 文件→提取文本→按需求总结 / 翻译 / 分析→生成 Excel 报告” 的工作流，比如批量处理合同、简历，不用手动打开每个文件；
• 数据统计：自动从数据库拉取数据→调用统计 Skill 分析→生成可视化图表→发送给相关人员，比如每周自动生成销售报表，不用重复写查询语句；
• 邮件 / 通知自动化：比如 “检测到新的客户咨询→提取关键信息→分发给对应负责人→发送自动回复”，不用手动转发邮件、记录信息。

3. 团队协作：标准化工作流程

• 需求评审流程：搭建 “接收需求文档→子代理分析合理性→团队成员投票→生成评审报告→决定是否立项” 的工作流，让需求评审有固定流程，不用反复沟通；
• 测试流程自动化：“获取测试用例→调用自动化测试工具→记录测试结果→有错误就通知测试人员→无错误就标记通过”，标准化测试步骤，提高测试效率；
• 技能共享：团队共同维护 “项目技能库”（比如 “接口测试技能”“数据格式转换技能”），新人直接拖拽调用，不用从零学习。

4. 新手用户：不用懂代码也能玩 Claude Code

如果觉得 Claude Code 的 CLI 命令、配置文件太难上手，用这个插件就能快速入门 —— 通过拖拽和 AI 辅助，不用懂编程逻辑，也能搭建出专业的 AI 自动化流程，慢慢熟悉 Claude Code 的核心功能。

快速上手：

1. 前置要求

• 安装 VS Code（任意版本都支持）；
• 安装 Claude Code CLI：打开终端，输入 npm install -g @anthropic-ai/claude-code，安装后输入 claude --version 验证是否成功。

2. 安装插件

• 打开 VS Code，按 Ctrl+Shift+X（或 Cmd+Shift+X）打开扩展面板；
• 搜索 “Claude Code Workflow Studio”，点击 “安装”；
• 也可以从源码安装：克隆仓库 git clone https://github.com/breaking-brake/cc-wf-studio.git，安装依赖后打包成 .vsix 文件，再通过 VS Code 的 “从 VSIX 安装” 功能导入。

3. 开始搭建工作流

• 打开编辑器：按 Ctrl+Shift+P（或 Cmd+Shift+P），输入 “Claude Code Workflow Studio: Open Editor”，回车后会打开空白画布；
• 新手引导：第一次打开会自动弹出交互式教程，跟着步骤学 “拖拽节点、连接、配置参数”，5 分钟就能上手；
• 搭建测试：拖一个 “提示词节点”（填 “请输入要查询的网站 URL”），再拖一个 “MCP 节点”（选 Playwright 浏览器工具，配置 “打开 URL 并截图”），连起来后导出，运行命令就能看到 AI 自动打开浏览器、截图的效果。

总结：

如果你是 Claude Code 用户，不管是个人用还是团队用，这个插件都能帮你省大量时间 —— 不用再写繁琐的配置文件，不用纠结工作流逻辑怎么拼，拖拽 + AI 辅助就能快速搞定；如果你是 VS Code 重度用户，想让 AI 自动化更 “可视化、简单化”，也值得试试。

它的核心价值不是 “炫技”，而是 “降低门槛、提高效率”：让不懂编程的人也能做 AI 自动化，让懂编程的人不用在重复工作上浪费时间。而且项目开源免费（基于 AGPL-3.0 协议），还在持续更新功能，后续可能会支持更多节点类型和协作方式，值得关注。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4899