claudekit / tools / cc-wf-studio
[ Tool · Claude Code Utilities ]

CC Workflow Studio

Design workflows on a canvas in VS Code and export them as Markdown your AI agent already understands — skills, commands, and agents for Claude Code, Cursor, Copilot, and more. An MCP server runs in the background so you can refine workflows in natural language with 'Edit with AI'.

breaking-brake/cc-wf-studio ·updated
$ code --install-extension breaking-brake.cc-wf-studio copy

What it does

Driving Claude Code, Cursor, or Copilot through a complex multi-step workflow usually means hand-writing Markdown files into folders like .claude/agents/ or .cursor/skills/. Sub-agent dispatch, tool composition, and branching all live in prose, which makes the overall flow hard to see at a glance and any small change tends to ripple across multiple files.

CC Workflow Studio lets you lay out the workflow as nodes and connections on a canvas, then exports the design — with one click — into the exact Markdown format each agent already understands.

Features

  • Visual workflow editor

    Drag-and-drop canvas for nodes, connections, sub-agents, and MCP tools. Designs are saved to .vscode/workflows/*.json.

  • Edit with AI

    An MCP server starts in the background when the extension launches, so you can refine a workflow in natural language — or let an agent edit the workflow file directly.

  • One-click export and run

    Export the design as Markdown ready for the target agent, or run it from the editor without leaving VS Code.

  • Multi-agent orchestration

    Sub-agents invoked by other agents are first-class on the canvas, so the orchestration shape is visible instead of buried in prose.

Supported agents and export paths

AgentExport location
Claude Code.claude/agents/, .claude/commands/
Cursor.cursor/agents/, .cursor/skills/
GitHub Copilot Chat.github/prompts/
GitHub Copilot CLI.github/skills/
OpenAI Codex CLI.codex/skills/
Roo Code.roo/skills/
Gemini CLI.gemini/skills/
Antigravity.agent/skills/

Quick start

  1. Click the extension icon in the top-right of VS Code, or open the Command Palette and run CC Workflow Studio: Open Editor.
  2. Add nodes to the canvas and configure their settings.
  3. The design is saved to .vscode/workflows/*.json.
  4. Export to .md for the target agent, or run it directly from the editor.
  5. To refine in natural language, use ‘Edit with AI’ (routes through the embedded MCP server).

Notes

  • VS Code extension, published to both the VS Code Marketplace and OpenVSX. The GitHub homepage field points to the OpenVSX listing.
  • Installs source: the ⬇ 7.4k figure on this page is the VS Code Marketplace install count (the extension is not listed on claude.com/plugins).
  • License: AGPL-3.0-or-later. Modification and internal use are fine, but redistributing a modified version as a network service triggers source-availability obligations.
  • Claude Code fit: exports land in .claude/agents/ and .claude/commands/, so Claude Code picks them up directly.
  • Not an Anthropic product: community project (breaking-brake/cc-wf-studio).
§ 6

See also

same category · curated
[01]
[Tool] Herdr · A terminal-native agent multiplexer in a single Rust binary. Herdr combines tmux-style session persistence and pane splits with agent awareness — a sidebar that shows whether each pane's agent is idle, working, blocked, or done — for Claude Code and other CLI agents. The direct Claude Code integration (`herdr integration install claude`) adds full state detection, semantic state forwarding over a local socket API, and agent-session restoration after a server restart.
tool · claudekit.io / tools / herdr
[02]
[Skill] Find Skills · A meta-skill that activates when users ask "how do I do X" or "is there a skill that can…", then searches the open agent skills ecosystem and walks the user through installation.
tool · claudekit.io / tools / find-skills
[03]
[Plugin] Caveman · why use many token when few token do trick — a Claude Code skill that cuts output tokens by ~65-75% by talking like caveman.
tool · claudekit.io / tools / caveman
§ 7

Frequently Asked Questions

frequently asked
§ 7.1
What is CC Workflow Studio?
A VS Code extension for designing AI agent workflows on a drag-and-drop canvas and exporting them as Markdown formats (skills, commands, agents) that Claude Code, Cursor, Copilot, and other agents understand.
§ 7.2
Which agents does it work with?
Claude Code (`.claude/agents/`, `.claude/commands/`), Cursor (`.cursor/agents/`, `.cursor/skills/`), GitHub Copilot Chat (`.github/prompts/`) and Copilot CLI (`.github/skills/`), OpenAI Codex CLI, Roo Code, Gemini CLI, and Antigravity.
§ 7.3
How do I install it?
Search 'CC Workflow Studio' in the VS Code Marketplace, or run `code --install-extension breaking-brake.cc-wf-studio` from the CLI. The same extension is also available on OpenVSX.
§ 7.4
What's the license and pricing?
GNU Affero General Public License v3.0 (AGPL-3.0-or-later). Modifications redistributed as a network service must be made available under the same license.
§ 7.5
How does 'Edit with AI' work?
An MCP server starts automatically when the extension launches. It exposes the workflow to the agent so you can refine it in natural language, or let an agent edit the workflow file directly.