🔱 Poseidon Flow

ウェブサイトのページ構成・遷移フローをビジュアルに設計するツール。
ページをノードとして配置し、AI生成・Figmaエクスポート・Mermaid出力まで一貫して行えます。

クイックスタート

npx poseidon-flow@latest

ブラウザで http://localhost:7437 が自動的に開きます。

機能一覧

| 機能 | 説明 | |------|------| | キャンバス編集 | ページをノードとして配置、矢印で遷移を接続 | | ページ詳細 | 各ページにコンポーネント・パス・プロンプトを設定 | | AIワイヤーフレーム生成 | Claude API でページのHTMLワイヤーフレームを自動生成 | | AIデザイン生成 | DESIGN.md をもとにリアルなHTMLデザインを生成 | | Figmaエクスポート | ワイヤーフレーム・デザインをFigmaファイルへ直接送信 | | Mermaidエクスポート | サイトマップ・ページ構成・フロー図を .mmd 形式で出力 | | インポート | Mermaid ファイルからキャンバスを復元 | | MCP サーバー | Claude Code からプロジェクト情報を読み書き | | Undo / Redo | Cmd+Z / Cmd+Shift+Z |

Claude Code との連携（MCP）

セットアップ

~/.claude/settings.json に追加：

{
  "mcpServers": {
    "poseidon-flow": {
      "command": "npx",
      "args": ["poseidon-flow", "--mcp"]
    }
  }
}

プロジェクトローカルに設定する場合は .mcp.json：

{
  "mcpServers": {
    "poseidon-flow": {
      "command": "npx",
      "args": ["poseidon-flow", "--mcp"]
    }
  }
}

利用可能な MCP ツール

| ツール | 説明 | |--------|------| | list_pages | 全ページの一覧を取得 | | get_page | ページの詳細情報を取得（プロンプト・コンポーネント等） | | get_project_summary | プロジェクト全体の概要（全ページ・遷移・デザインシステム） | | get_design_md | DESIGN.md の内容を取得 | | set_wireframe_html | ページのワイヤーフレームHTMLを設定 | | set_generated_html | ページの生成デザインHTMLを設定 |

Claude への指示例

poseidon-flow の brd-home ページのワイヤーフレームを生成して set_wireframe_html で保存してください。

get_project_summary でサイト構成を確認して、各ページのHTMLを順番に生成してください。

Figma 連携

注意: Figma連携は Figma MCP の OAuth トークンを使用します。現在、トークンの読み取りは Claude Code の認証情報ファイル（~/.claude/.credentials.json）のみに対応しています。Claude Code 以外のAIエージェントをお使いの場合は、Figmaへの送信ボタンはご利用いただけません。

事前準備

1. Claude Code で Figma MCP に接続する

Claude Code のチャットで：

/mcp

→ Figma を選択してOAuth認証を完了させます。

認証が成功すると、トークンが ~/.claude/.credentials.json に保存されます。
poseidon-flow はこのトークンを自動的に読み取るため、追加設定は不要です。

2. Chrome / Chromium がインストールされていること

以下のパスを自動検出します：

• /opt/google/chrome/chrome
• /usr/bin/google-chrome
• /usr/bin/chromium
• /usr/bin/chromium-browser
• macOS: Google Chrome.app

任意のパスを使う場合は環境変数で指定：

CHROME_PATH=/path/to/chrome npx poseidon-flow@latest

使い方

1. poseidon-flow でプレビューページを開く
2. 右上の 「Figmaに送る ▾」 ボタンをクリック
3. File Key を入力（FigmaのURLから自動抽出も可能）
   • 例: https://www.figma.com/design/AbCdEfG123/... → AbCdEfG123
4. 送信先を選択：
   • 新規ページ — 既存ファイルに新しいページとして追加
   • nodeId指定 — 特定のフレーム位置に追加（例: 1234:567）
5. 送信 をクリック

処理の流れ：

Figmaトークン確認 → captureId取得 → Chromeでページキャプチャ → Figmaへ送信 → 完了URLを表示

Figma 再接続

トークンの期限が切れた場合は Claude Code で再接続：

/mcp → Figma を選択して再認証

他のAIエージェントからFigmaへ送る

Claude Code 以外のAIエージェント（Cursor、Copilot等）でも、以下の流れでFigmaへ送ることができます：

1. poseidon-flow MCP でページ情報を取得

   list_pages でページ一覧を確認
   get_page でプレビューURLを取得

2. そのエージェント自身のFigma MCP を使ってFigmaに送信

   プレビューURL: http://localhost:7437/preview/wireframe/{pageId}/content
                  http://localhost:7437/preview/design/{pageId}/content

   例（AIへの指示）：

   poseidon-flow の brd-home ページ（URL: http://localhost:7437/preview/wireframe/brd-home/content）を
   Figma の generate_figma_design ツールで fileKey=AbCdEfG123 に送ってください。

UIのボタンは Claude Code 専用ですが、MCPツール経由であればどのAIエージェントからでも同等の操作が可能です。

AI 生成機能

必要な環境変数

export AI_API_KEY=sk-ant-...
# または
export ANTHROPIC_API_KEY=sk-ant-...

ワイヤーフレーム生成

ページ詳細パネルの 「Generate Wireframe」 ボタン → Claude がページ定義をもとにHTMLワイヤーフレームを自動生成します。

デザイン生成

DESIGN.md にデザインシステムを記述しておくと、ブランドカラー・フォント・コンポーネントスタイルが生成結果に反映されます。

Refero Styles から目的のUIに合ったDESIGN.mdを取得して貼り付けるだけで機能します。

プロジェクトの保存

プロジェクトは ~/.poseidon-flow/projects/ に JSON 形式で自動保存されます。

| 操作 | 方法 | |------|------| | 保存 | ツールバー → プロジェクト名を入力して保存 | | 読み込み | ツールバー → プロジェクト一覧から選択 | | エクスポート | Mermaid形式 (.mmd) またはZIPでダウンロード | | インポート | Mermaidファイルをドラッグ＆ドロップまたはファイル選択 |

技術スタック

• サーバー — Node.js (ESM)、MCP SDK
• フロントエンド — React 19 + TypeScript + Vite
• 状態管理 — Zustand
• レイアウト — ELK.js
• ダイアグラム — Mermaid
• Figma連携 — puppeteer-core + Figma MCP API

ライセンス

MIT