Claude Code Workflow Studio：拖拽就能搞定 AI 自动化-IT资源栈

TL;DR

先说重点：你每天要让 AI 干重复的活儿，比如定时爬数据、生成报告、推送消息，以前得写一堆代码。现在有个 VS Code 插件叫 Claude Code Workflow Studio，拖拖拽拽就能把这些流程画出来，甚至直接跟 AI 说”帮我加个判断逻辑”，它就自动给你连好线。

本文用一个真实案例——每天自动推荐菜谱到钉钉——带你看懂这玩意儿怎么用。

为什么需要这个工具？

你想想，平时让 Claude Code 干活，得这么搞：

写一堆 Markdown 文件定义 Agent
手动配置各种参数
调试半天才能跑通
改个逻辑又得重新来一遍

问题来了：这些流程明明就是”先干这个，再干那个，如果怎样就跳到另一个分支”，为啥不能像画流程图一样直接拖出来？

Workflow Studio 就是干这个的。

这玩意儿长啥样？

主界面：像画电路图一样连节点

工作流画布

左边是节点工具箱，右边是画布。你能看到：

基础节点
– Prompt：提示词模板
– Sub-Agent：子任务智能体
– Skill：调用已有技能
– MCP Tool：连接外部工具（数据库、API、浏览器）

控制流节点
– IfElse：二选一分支
– Switch：多路分支（像 switch-case）
– Ask User Question：需要人工决策的地方

画布中间那个复杂的图，就是”每日菜谱推荐系统”的完整逻辑。

核心能力：AI 帮你画图

对话式编辑：说人话就能生成工作流

AI 辅助编辑

看这张图，用户直接说：

“我每天不知道吃啥，帮我搞个自动推荐系统。要求：
– 根据时间推荐早午晚餐
– 记住本周吃过啥，别重复
– 控制卡路里
– 推送到钉钉”

AI 直接给你生成完整工作流：
– 时间检测 → Switch 分支 → 读取记忆 → 生成菜谱 → 写入记忆 → 钉钉推送

这就是 Edit with AI 的狠之处：你不用知道怎么连线，说清楚需求就行。

真实案例：每日菜谱推荐系统

解决的问题

每天中午 11 点，你就开始纠结”吃啥”。这个工作流帮你：

自动判断时段：早餐/午餐/晚餐，推荐不同类型
避免重复：读取本周吃过的菜，不推荐重样的
个性化：上海南方菜系，微辣，控制卡路里
自动推送：生成好直接发到钉钉群

工作流拆解

整个流程分 6 步：

1. 时段检测

节点：time-detector (Sub-Agent)

干啥：调用系统时间，判断现在是早餐（5:00-9:00）、午餐（11:00-13:00）、晚餐（17:00-20:00）还是其他时段

输出：JSON 格式 {"period": "lunch"}

技术细节：用 Haiku 模型 + Bash 工具获取时间，成本低速度快

2. 条件路由

节点：time_router (Switch)

干啥：根据 period 变量分流

period == 'breakfast' → 早餐流程
period == 'lunch' → 午餐流程
period == 'dinner' → 晚餐流程
其他 → 提示”现在不是用餐时间”

为啥用 Switch 不用 IfElse：三个以上分支，Switch 比嵌套 IfElse 清晰

3. 记忆读取

节点：memory-reader (Sub-Agent)

干啥：读取本地 memory.md 文件，提取本周已吃菜品列表

文件格式：

- 2026-01-01 午餐: 宫保鸡丁
- 2026-01-02 晚餐: 清蒸鲈鱼

作用：生成菜谱时会约束”避免本周已吃菜品”

4. 菜谱生成

节点：recipe-gen (Sub-Agent)

干啥：结合口味偏好、地域约束、记忆信息生成定制菜谱

约束条件：
– 地域：上海南方菜系
– 口味：微辣
– 营养目标：
– 早餐：高蛋白易消化
– 午餐：营养均衡
– 晚餐：低卡路里

模型选择：Sonnet（生成质量高）

5. 记忆写入

节点：memory-writer (Sub-Agent)

干啥：把新生成的菜谱追加到 memory.md

特殊逻辑：如果是周一，先清空文件内容（开启新一周记录）

技术实现：用 Write/Edit 工具操作本地文件

6. 钉钉推送

节点：dingtalk-push (Sub-Agent)

干啥：调用钉钉 Webhook 发送消息

技术细节：
– 用 Bash 工具执行 curl 命令
– Webhook 地址从环境变量 DINGTALK_WEBHOOK 读取（避免硬编码）
– AI 自动把 Markdown 格式转成钉钉消息格式

命令示例：

curl -X POST $DINGTALK_WEBHOOK 
  -H 'Content-Type: application/json' 
  -d '{"msgtype":"markdown","markdown":{"title":"午餐推荐","text":"## 今日推荐n宫保鸡丁"}}'

文件落地：从画布到可执行代码

导出后的目录结构

项目文件结构

画完工作流点”导出”，会生成这些文件：

.claude/agents/：各节点的 Markdown 定义
– time-detector.md
– memory-reader.md
– recipe-gen.md
– memory-writer.md
– dingtalk-push-breakfast.md
– dingtalk-push-lunch.md
– dingtalk-push-dinner.md

.claude/commands/：命令行执行入口
– daily-recipe.md

.vscode/workflows/：工作流 JSON 配置
– 17-3-daily-recipe-recommender.json

怎么执行？

在终端直接运行：

claude-code daily-recipe

工作流会自动按照画布上的逻辑执行，最后把菜谱推送到钉钉。

关键设计细节

为啥要分这么多节点？

单一职责原则：每个节点只干一件事

time-detector 只负责判断时段
memory-reader 只负责读文件
recipe-gen 只负责生成菜谱

好处：
1. 调试方便：哪个环节出错一眼看出来
2. 复用性强：memory-reader 可以用在其他工作流
3. 成本优化：时间检测用 Haiku（便宜），菜谱生成用 Sonnet（质量高）

为啥要记忆管理？

避免重复推荐：没人想连续三天吃宫保鸡丁

技术实现：
– 读取 memory.md 获取历史记录
– 生成时约束”避免本周已吃菜品”
– 写入新记录到文件

周一清空逻辑：每周重置，避免文件无限增长

为啥用环境变量存 Webhook？

安全性：Webhook 地址不能写死在代码里，否则：
1. 提交到 Git 会泄露
2. 换个钉钉群得改代码

最佳实践：

export DINGTALK_WEBHOOK="https://oapi.dingtalk.com/robot/send?access_token=xxx"

工作流运行时自动读取环境变量。

安装与使用

前置要求

VS Code 1.80.0 或更高版本
Claude Code CLI 已安装
MCP 服务器（如果要用外部工具集成）

安装步骤

打开 VS Code 扩展市场
搜索 “Claude Code Workflow Studio”
点击安装

或者从源码安装：

git clone https://github.com/breaking-brake/cc-wf-studio
cd cc-wf-studio
npx vsce package
code --install-extension cc-wf-studio-*.vsix

创建第一个工作流

按 Cmd+Shift+P 打开命令面板
输入 “Claude Code: New Workflow”
在画布上拖拽节点
连接节点
点击”导出”生成文件
在终端运行 claude-code <workflow-name>

进阶技巧

1. 用 AI 快速迭代

不用手动拖节点，直接在 “Edit with AI” 面板说：

“在菜谱生成后加个营养分析节点”
“如果是周末，推荐更丰盛的菜”
“把钉钉推送改成企业微信”

AI 会自动调整工作流。

2. 复用 Skills

如果你已经写了 .claude/skills/nutrition-analyzer.md，直接在画布上拖一个 Skill 节点，选择这个技能就行。

3. MCP 集成示例

连接数据库：
– 节点类型：MCP Tool
– 工具：sqlite MCP 服务器
– 操作：查询用户偏好表

浏览器自动化：
– 节点类型：MCP Tool
– 工具：playwright MCP 服务器
– 操作：爬取美食网站最新菜谱

限制与注意事项

节点数量限制

每个工作流最多 50 个节点。

为啥：太复杂的流程应该拆分成多个工作流，否则调试和维护都是灾难。

语言支持

UI 自动适配 VS Code 语言设置，支持：
– 英文
– 日文
– 韩文
– 简体中文
– 繁体中文

开源协议

AGPL-3.0：你可以修改和分发，但必须开源你的修改。

总结

Workflow Studio 解决了啥问题：
– 不用写代码就能设计复杂 AI 工作流
– AI 辅助编辑，说人话就能生成逻辑
– 可视化调试，一眼看出哪个环节出错
– 导出即可执行，无缝对接 Claude Code CLI

适合谁用：
– 想让 AI 干重复活儿的人
– 不想写一堆配置文件的人
– 需要快速迭代 AI 自动化流程的人

核心理念：

复杂的事情应该画出来，不是写出来。

就这样。

参考链接
– VS Code Marketplace
– Claude Code 官方文档

Claude Code Workflow Studio：拖拽就能搞定 AI 自动化