$ code --install-extension breaking-brake.cc-wf-studio copy
왜 필요한가?
Claude Code·Cursor·Copilot 같은 에이전트에 복잡한 멀티스텝 워크플로를 시키려면, .claude/agents/나 .cursor/skills/ 같은 디렉토리에 Markdown 파일을 직접 작성해야 합니다. 서브 에이전트 호출 순서·도구 결합·분기 조건을 텍스트로만 표현하다 보면 전체 흐름을 한눈에 보기 어렵고, 사소한 변경에도 여러 파일을 동시에 수정해야 합니다.
CC Workflow Studio는 캔버스 위에서 노드와 연결선으로 워크플로를 설계한 뒤, 한 번의 클릭으로 각 에이전트가 이해하는 Markdown 포맷으로 내보냅니다.
주요 기능
-
비주얼 워크플로 에디터
드래그앤드롭 캔버스에서 노드·연결선·서브 에이전트·MCP 도구를 배치해 워크플로를 설계합니다. 설계 파일은
.vscode/workflows/*.json에 저장됩니다. -
Edit with AI
익스텐션 실행 시 자동으로 기동되는 MCP 서버를 통해, 자연어로 워크플로를 수정합니다. 에이전트가 워크플로 파일을 직접 편집하는 것도 가능합니다.
-
원클릭 내보내기·실행
설계한 워크플로를 각 에이전트가 이해하는 Markdown 형식으로 내보내거나, 에디터에서 곧바로 실행할 수 있습니다.
-
멀티 에이전트 오케스트레이션
서브 에이전트를 다른 에이전트가 호출하는 멀티 에이전트 워크플로를 캔버스에서 직접 표현합니다.
에이전트별 내보내기 경로
| 에이전트 | 내보내기 위치 |
|---|---|
| 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/ |
사용 방법
- VS Code 우측 상단의 익스텐션 아이콘을 클릭하거나, Command Palette에서
CC Workflow Studio: Open Editor를 실행합니다. - 캔버스에 노드를 추가하고 설정을 구성합니다.
- 설계 파일이
.vscode/workflows/*.json으로 저장됩니다. - 대상 에이전트 포맷으로
.md내보내기 또는 에디터에서 직접 실행합니다. - 자연어로 수정하려면 ‘Edit with AI’를 사용합니다(MCP 서버 경유).
알아두면 좋은 점
- VS Code 익스텐션으로 배포되며, GitHub 리포의
homepage필드가 OpenVSX 등록 페이지를 가리킵니다. VS Code Marketplace와 OpenVSX 양쪽에 등록돼 있습니다. - 설치수 출처: 본 페이지의 ⬇ 7.4k는 VS Code Marketplace 기준 설치수입니다(claude.com/plugins에는 미등록).
- 라이선스 주의: AGPL-3.0-or-later. 수정·내부 도구로의 통합은 자유지만, 네트워크 서비스로 변형 배포 시 소스 공개 의무가 따릅니다.
- Claude Code와의 정합: 내보내기 산출물이
.claude/agents/·.claude/commands/에 들어가므로, Claude Code가 곧바로 인식합니다. - Anthropic 공식 아님: 커뮤니티 프로젝트입니다(GitHub
breaking-brake/cc-wf-studio).