脱プロンプト職人。Claude Codeと自作ツールで実現する「ワークフロー設計型」のエンジニアリング
株式会社FLINTERS / seiya-kobayashi
メンバー / フロントエンドエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
アーキテクチャ
アーキテクチャの意図・工夫
Claude Codeの「Sub-agents」機能は非常に強力ですが、実運用において一つ大きな壁がありました。それは、「複雑なエージェント連携フローの定義(オーケストレーション)」の難しさです。
Claude Code単体でもエージェントは動きますが、「まずは調査エージェントを走らせ、次に承認を求め、分岐条件で実装エージェントとテストエージェントを使い分ける」といった高度な振る舞いを記述しようとすると、複雑なプロンプト管理や設定ファイルの記述が必要となり、ここがエンジニアにとって新たな認知負荷となっていました。
そこで、「Claude Codeが持つ強力な実行エンジン」を、「直感的に操作できるGUI」で包むことでこの課題を解決しようと考え、「Claude Code Workflow Studio」というVS Code拡張機能を自作し、チームに展開しました(一般公開も行っています)。
本ツールはOSSとして公開しています。
IDEへのインストールはこちらから可能です。
- Cursor, Antigravity等: Open VSX Registry
- VS Code: Visual Studio Marketplace
この拡張機能には、以下のような機能があります:
Visual Workflow Editor: Claude Codeの設定ファイルを直接書くのではなく、プログラミング不要のドラッグ&ドロップ操作で、Sub-Agentや条件分岐(If/Switch)、ユーザーへの質問(AskUser)といったノードを繋ぎ合わせ、フローを可視化・構築できるようにしました。
AI-Assisted Refinement: 「挨拶をするフローを作って」「時間を考慮して分岐させて」とチャットで指示するだけで、AIがワークフローの図(ノード配置や接続)を自動で修正してくれる機能を搭載しました。
Slash Command Conversion: GUIで設計したフローは、ワンクリックでClaude Codeが解釈可能なネイティブ形式(.claude/commands や .claude/agents)に変換・出力されます。これにより、「設計はGUI(自作ツール)、実行はCLI(Claude Code)」という役割分担を実現しました。
これにより、「ワークフロー設計はGUI(自作ツール)、実行はCLI(Claude Code)」という役割分担を実現しました。
導入の背景・解決したかった問題
導入背景
ツール導入前の課題
私の所属しているチームではこれまでGitHub Copilotを導入しており、単なる補完だけでなく、チャット機能を使ったコード生成やリファクタリング(編集エージェントとしての利用)も積極的に行っていました。しかし、プロジェクトの規模が拡大するにつれ、「シングルエージェント」であることの限界が顕著になってきました。
コンテキスト汚染による性能低下: 1つのチャットセッションですべてを解決しようとするため、複雑なタスクでは「調査」「実装」「テスト修正」と会話が続くうちにコンテキスト(記憶容量)が溢れ、最初の要件を忘れたり、指示の精度が落ちたりする現象が多発していました。
人間が「マネージャー」にならざるを得ない: Copilotは強力ですが、「まずはドキュメントを調べて」「次にテストを書いて」といったタスクの分解と順序立ては人間が行う必要がありました。結果、AIの手足として人間が常に指示を出し続ける必要があり、思考の割り込みが発生していました。
どのような状態を目指していたか
単一のAIアシスタントではなく、「専門家チーム(Multi-Agent System)」にタスクを丸投げできる状態を目指しました。
具体的には、メインのAIが司令塔となり、必要に応じて「調査担当」「実装担当」「テスト担当」といった専門のサブエージェント(Sub-agents)を呼び出し、それぞれが独立したコンテキストで作業を行うフローです。そこで、このアーキテクチャをCLIツールとして標準実装しており、社内でも利用環境が整いつつあった Claude Code を活用することにしました。
導入の成果
導入から数ヶ月で、私自身の開発スタイルは根本から変わりました。
かつては自ら手を動かしていたコード編集作業の90%以上をAIが完遂するようになり、私の役割は「ゼロからコードを書く」ことから、AIが自律的に作成・テストした成果物に対する 「レビュー」や「仕上げの微修正」のみへと完全にシフト しました。
この変化を支えているのが、Claude Codeの 「Sub-agents(サブエージェント)」機能 です。
これまでは「調査→実装→修正」の各工程で人間が介入する必要がありましたが、現在はメインのAIが自律的に「調査担当」「実装担当」といったサブエージェントを起動し、タスクを分業して進めます。 彼らが裏でドキュメントを読み込み、テストを通るまで試行錯誤を繰り返してくれるため、人間は最終的な「承認ボタン」を押すだけで機能実装が完了するケースが激増しました。
これにより、「複雑な調査をさせるとハルシネーションが起きる」という従来の課題が解消され、実装スピードと品質の両面で劇的な向上が見られています。
導入に向けた社内への説明
上長・チームへの説明
実はClaude Codeの導入承認に関して、私から会社や上長へ働きかける必要は一切ありませんでした。私が「そろそろ活用してみたい」と考え始めた頃には、すでに会社側で導入推進が進められていたからです。
そのため、いわゆる「社内稟議」や「説得」といった導入アクションは行っていません。恵まれた環境のおかげで、私は導入可否の調整ではなく、「現場がいかにスムーズに使いこなすか」という技術的なフィット&ギャップの検証に最初から全力を注ぐことができました。
活用方法
主に、頻繁に行う定型業務の「型」化と自動化に活用しています。
フロントエンド開発における定型的な実装タスク、例えば管理画面へのグラフ追加などを一度この自作拡張機能で「ワークフロー」として定義し、保存します。 例えば、「既存UIコンポーネントの分析 → 追加するグラフ種の選択(円グラフ/棒グラフなど) → 実装Agentによるコンポーネント作成 → ダッシュボードへの配置とStorybook更新」といったパイプラインを視覚的に組んでおくことで、毎回Claude Codeに長いプロンプトを打ち込む手間を排除しました。
一度作ったフローはコマンド一つで呼び出せるため、複雑な手順も「いつもの処理」として瞬時に実行できるようになっています。
よく使う機能
Custom Slash Commands (カスタムスラッシュコマンド): /cost などの標準コマンドも便利ですが、真価を発揮するのは Markdown ファイルで独自の振る舞いを定義できる「カスタムコマンド」機能です。私の自作ツールもこの仕組みを利用しており、GUI で設計した複雑なワークフローを .claude/commands に出力することで、/add-graph のようなシンプルなコマンド一つでマルチエージェント処理を実行できるようにしています。
/compact コマンド: 長時間のセッションでコンテキストが溢れそうになった際、会話の履歴を要約してメモリを解放する機能です。複雑な修正タスクでも、このコマンドのおかげでセッションを途切れさせずに継続できています。
Plan Mode : いきなりコードを書き始めるのではなく、「どのファイルをどう変更するか」という計画案をまず提示してくれるモードです。AIの修正方針にズレがないかを実装前に検知できるため、手戻りを防ぐ重要な機能として重宝しています。
ツールの良い点
Sonnet 4.5による圧倒的な編集精度: バックエンドで動作する最新モデル(Sonnet 4.5)の性能が凄まじく、複雑なリファクタリングや仕様変更も驚くほど高い精度で一発回答してくれます。修正の「手戻り」がほとんど発生しないため、結果として開発スピードが劇的に向上しました。
Unix哲学に基づいた柔軟性: ターミナルで完結するため、既存のシェルスクリプトやパイプ処理と組み合わせやすく、GitコマンドやCIツールとの連携もシームレスです。
Sub-agentsによる自律性: 単なるチャットボットではなく、タスクを自律的に遂行する「エージェント」として機能するため、人間の認知負荷を大幅に下げてくれます。
ツールの課題点
- 設定の複雑さと学習コスト: 高機能な反面、マルチエージェントの挙動定義やカスタムコマンドの作成には、JSONやMarkdownでの複雑な設定記述が求められ、特にCLIベースであるがゆえに直感的な設定が難しい点が課題です。
- 自作ツールによる補完: この「設定のハードル」を下げるために、前述の拡張機能を用意しました。複雑な定義ファイルの記述をGUIに任せることで、CLI本来の軽快さを損なうことなく、直感的に扱えるよう工夫しています。
今後の展望
現在は「人間がGUI(自作ツール)で設計してCLI(Claude Code)で動かす」という個人の生産性向上が主軸ですが、今後はこのワークフロー自体をチームの資産としてより流通させやすくし、チーム全体でのベストプラクティス共有を実現したいと考えています。
その鍵となるのが、現在開発中の 「Slack連携機能」 です。 これは、VS Code上のボタン一つでワークフローをSlackへ直接エクスポートし、Slack上ではタイトルやコメントといったメタデータと共に、ワークフローファイル(JSON)そのものが共有されます。他のメンバーはその共有されたファイル上のボタンをクリックするだけで、即座に自分のVS Code環境へインポートできる機能です。
実は、機能としてはすでにベータ版として実装済みです。 しかし、現時点ではBot tokenをチーム全員で共有して設定する必要があり、セキュリティ管理の観点から実際のチーム運用には乗せられていません。そこで現在は、より安全で実際の業務運用に耐えうる機能にするため、OAuth認証機能の実装を進めています。
この機能が完成すれば、例えば 「チーム共通のCode Review Workflow」 を作成し、Slackで配布することが可能になります。「コードスキャンAgent」が問題を特定し、重要度に応じて適切な修正Agentへパスを渡すフローを可視化して共有することで、メンバー間での作業品質のバラつきを防ぐといった「開発プロセスの標準化」を、チャットで会話するようなカジュアルさで実現したいと考えています。
また、Jiraのチケット起票からPR作成までを自動化するMCP(Model Context Protocol)連携ワークフローの実装など、開発プロセスのさらなる自動化を進めつつ、この拡張機能自体も社外のエンジニアに使っていただけるようブラッシュアップを続けていく予定です。
株式会社FLINTERS / seiya-kobayashi
メンバー / フロントエンドエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
Webアプリ開発のバックエンドからキャリアをスタートし、今はフロンエンドとバックエンドにまたがりを開発しています。 最近はOSS作成者として個人開発も進めています。
よく見られているレビュー
株式会社FLINTERS / seiya-kobayashi
メンバー / フロントエンドエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
Webアプリ開発のバックエンドからキャリ...
レビューしているツール
目次
- アーキテクチャ
- 導入の背景・解決したかった問題
- 活用方法


.png)

