FlowCraft – メタプロンプトをグラフで可視化し、グラフベースの実行プロンプトに変換するツール

こんにちは。

Claude Code や Codex の Plan モードで作った長い計画をより簡単にレビューし、
AI に渡すために作った FlowCraft Task Studio を共有します。

長いメタプロンプトをそのまま渡すと、どの作業が先なのか、何を並列で処理できるのか、
特定のサブエージェントに作業が偏りすぎていないかを把握しにくいことがあります。

私は FlowCraft を、グラフエンジニアリングの考え方から着想を得て作りました。
計画を作業ノードと依存関係に分け、作業順序と並列構造を目で確認し、補完できるようにしたツールです。

🧩 どんな機能がありますか？

• メタプロンプトを FlowCraft 用の作業 JSON に変換する LLM 設計プロンプトの生成
• 作業ノードの追加・移動・複製・削除と、ノード間の接続関係の直接編集
• 作業ごとの担当、入力、成果物、完了条件、ファイル範囲の編集
• 過剰に多いサブエージェントや、1つの作業に集中したボトルネックのレビュー
• Codex や Claude Code に渡す Markdown 作業指示書の生成
• 全体の作業フローを画像としてコピー

サブエージェントが単に時間がかかっている場合と、実際に停止している場合も区別するようにしました。
元の計画、Markdown 指示書、ノード画像をまとめて渡す Codex スキルを提供します。

🚂 どのように使いますか？

1. Codex や Claude Code の Plan モードで作った計画を FlowCraft に貼り付けます。
2. FlowCraft が作成した LLM 用の設計プロンプトを GPT や Claude に渡します。（Codex や Claude Code に直接渡しても構いません。）
3. 返された JSON を FlowCraft に貼り付け、作業フローを確認・修正します。
4. 完成した Markdown 作業指示書とノード画像を Codex や Claude Code に渡します。

もう少し簡単に使いたい場合は、GitHub に含まれている flowcraft-codex-handoff スキルを Codex に登録することもできます。
スキルを登録したあと、Plan モードで作った計画を渡すと、次の3つが一度に準備されます。

• 既存計画のメタプロンプト原文
• グラフ構造を反映した Markdown 作業指示書
• 作業ノードと依存関係を示す SVG 画像

アプリ上でノードと接続関係を直接確認・修正したいときは FlowCraft の画面を使い、
素早く Codex に渡したいときはスキルを使う、という形です。

FlowCraft 自体は AI を実行したり API を呼び出したりしません。
インストールせずにまず試してみたい方は下記の Netlify デモを使ってみてもよいですし、
コードと一緒に提供されている Codex スキルを見てみたい方は GitHub を確認してください。

Netlify デモ: https://flowtaskstudio.netlify.app
GitHub: https://github.com/sleeplesshan/flowcraft-task-studio

マルチエージェント作業を設計するときにグラフ可視化が実際に役立つのか、
作業分配やプロンプト構造でさらに補強すべき点があるのか、さまざまなご意見をいただけるとありがたいです！