使い方ガイド

🚀 起動方法

ターミナルで以下のコマンドを実行するだけです。Node.js が入っていれば追加インストールは不要です。

npx poseidon-flow@latest

ブラウザが自動で開かない場合は http://localhost:7437 にアクセスしてください。

🖥 画面の見方

📄 ページの追加・編集・削除

ページを追加する

ページを編集する

キャンバス上のページノードをクリックすると、右パネルに編集フォームが表示されます。ページ名・パス・プロンプト（AI 生成ヒント）・コンポーネントを自由に変更できます。プロンプト欄は箇条書き形式で入力します（1行1項目）。

ページを複製する

ページを選択した状態で Cmd + D（Windows: Ctrl + D）は現在未実装です。複製はツールバーの「＋ ページ追加」で新規ページを追加し、右パネルで内容を編集する方法で対応してください。

ページを削除する

削除したいページを選択して Delete または Backspace を押します。複数選択してまとめて削除することも可能です。

🔗 ページの接続（遷移を作る）

ページ間の遷移（矢印）を作るには、ノードの端にあるハンドルをドラッグします。

遷移（矢印）を削除するには、矢印をクリックして選択し、Delete を押します。

🖱 キャンバスの操作

☑️ 複数選択

複数のページをまとめて移動・削除したいときに使います。

🧩 コンポーネント

各ページにどんな UI 要素が含まれるかを自由に記録できます。ページの設計書として活用できます。

ページタイプ・認証フラグ

右パネルではコンポーネントの他に、ページのタイプと認証要否も設定できます。

🔒 ロック機能

コンポーネントとページの両方にロックをかけられます。

📁 プロジェクト管理

複数のサイト設計を名前付きで保存・切り替えできます。ツールバーのプロジェクトボタン（◫ 無題 ▼）をクリックして操作します。

プロジェクトを保存する

プロジェクトを切り替える

プロジェクト一覧から名前をクリックすると、その設計に切り替わります。現在のプロジェクトは ● で示されます。

ディレクトリの関連付け

各プロジェクトにローカルディレクトリパスを設定できます。どのコードベースに対応する設計かを記録しておくのに便利です。

📋 サンプル展開

ツールバーの「◈ サンプル ▾」をクリックすると、業種別サンプルのドロップダウンが開きます。7種類のサンプルから選んで読み込めます。

EC サイトサンプルのページ構成

ECサイトには全購買フローが含まれます（26ページ・37遷移）：

Poseidon Flow の操作感をつかむための出発点として活用してください。

📤 エクスポート

ツールバーの「⇣ Export / Import」ボタンからモーダルが開きます。Mermaid プレビュー・AI ブリーフ・書き出し・読み込みが一画面で行えます。

Mermaid タブ（sitemap / pages / flows）

書き出しボタン

Mermaid の使い方例

エクスポートした .mmd ファイルの内容を GitHub の Markdown に貼り付けると図として表示されます：

```mermaid
graph TD
  Home --> 商品一覧
  商品一覧 --> 商品詳細
  商品詳細 --> カート
  カート --> 購入完了
```

📥 インポート

以前エクスポートした JSON ファイルや Mermaid ファイルを読み込んで、続きから作業できます。

⌨️ キーボードショートカット

🤖 AI ワイヤーフレーム / デザイン生成

ワイヤーフレームやデザインを自動生成できます。生成方法は2通りあります。

方法 1 — 右パネルのボタンから生成

方法 2 — Claude Code（MCP）に依頼する

MCP を設定した Claude Code のチャットに話しかけて一括生成できます。

get_project_summary でサイト構成を確認して、
各ページの HTML ワイヤーフレームを順番に生成して
set_wireframe_html で保存してください。

デザイン生成（DESIGN.md）

「⇣ Export / Import」モーダルの「AI」タブからデザインシステム定義（DESIGN.md）を記述しておくと、ブランドカラー・フォント・コンポーネントスタイルが反映されたリアルな HTML デザインを Claude Code に生成してもらえます。

AI ブリーフパネル（🤖 ブリーフ）

ツールバーの「🤖 ブリーフ」ボタンを押すと、プロジェクト全体の構成を Markdown 形式でまとめたブリーフを生成・コピーできます。Claude などの AI チャットにそのまま貼り付けて使えます。

🎨 Figma エクスポート

生成したワイヤーフレームやデザインを Figma ファイルへ直接送信できます。

Claude Code から使う（推奨）

UI の「Figmaに送る」ボタンは Claude Code の Figma MCP 認証情報（~/.claude/.credentials.json）を利用します。

他の AI エージェントから使う（Cursor / Copilot など）

「Figmaに送る」ボタンは Claude Code 専用ですが、poseidon-flow MCP + お使いの AI の Figma MCP を組み合わせることで同等の操作が可能です。

プレビュー 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 に送ってください。

🔌 MCP 連携（Claude Code / AI エージェント）

Poseidon Flow は MCP（Model Context Protocol）サーバーを内蔵しています。AI エージェントと接続することで、プロジェクトのページ情報を読み書きしたり、AI がワイヤーフレームを自動生成して保存することができます。

セットアップ — グローバル設定

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

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

セットアップ — プロジェクトローカル設定

プロジェクトルートに .mcp.json を作成：

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

使えるツール一覧

AI への指示例