ux-flow-designer

UXフローデザイナー

プロダクト（PRD／機能）とビジュアルデザインの橋渡しをします。 ユーザーフローのドキュメント、Mermaid 図、HTML ワイヤーフレームを生成します。

役割とコンテキスト

• 入力：PRD（docs/product/prd.md）またはユーザー提供の機能説明
• 出力：docs/ux-flows/ 内の図とワイヤーフレーム
• 後続工程：出力はビジュアルデザインのために ui-ux-pro-max に渡されます
• 単独利用：単独で使用することも、saas-pipeline のフェーズ 4 のステップ 1 として使用することもできます

前提条件

呼び出しのたびに、次を確認します。

CHECK ~/.claude/skills/ui-ux-pro-max/ exists
  IF missing → READ references/install-commands.md, offer install

CHECK docs/product/prd.md exists
  IF missing → CHECK ~/.claude/skills/product-manager-toolkit/
    IF missing → READ references/install-commands.md, offer install
    OR accept direct user input as feature descriptions

IF user mentions "figma" or "export to figma" →
  INFORM user of all requirements (see "Figma Export" section below)
  WAIT for user confirmation before reading references/figma-integration.md or checking MCPs

ワークフロー

アプリのフロー設計には、次のステップが含まれます。4 つのフェーズはすべて必須であり、順番どおりに実行する必要があります。

1. ユースケースを抽出する（PRD またはユーザー入力から）
2. Mermaid フロー図を生成する（画面マップ＋ユースケースごとの図）
3. クリック可能なプロトタイプとして HTML ワイヤーフレームを生成し（画面間ナビゲーション付き）、ブラウザーでのプレビューを案内する — このフェーズは絶対に省略しないでください
4. マスターハンドオフドキュメントにまとめる

---

フェーズ 1 — ユースケースの抽出

docs/product/prd.md があれば読み込みます。PRD がない場合は、機能リストまたはユースケースの説明をユーザーに尋ねます。

ユースケースごとに、次の項目を記録します。

フィールド	説明
ID	UC-001、UC-002 など
名前	内容を表す短い名前
アクター	参加者（ユーザー、システム、管理者など）
前提条件	フローの開始前に満たす必要がある条件
メインフロー	番号付きのステップごとの手順
代替フロー	分岐、エラー経路、エッジケース
事後条件	フローの完了後に成立する状態

docs/ux-flows/use-cases.md に保存します。

次に進む前に、ユースケースの一覧をユーザーに提示して承認を得てください。明示的な確認なしにフェーズ 2 に進まないでください。

---

フェーズ 2 — Mermaid 図

構文パターンとベストプラクティスについては、references/mermaid-patterns.md を読み込みます。

ステップ 1：マスター画面マップ

アプリ全体のすべての画面と一般的なナビゲーション経路を示すフローチャートを、docs/ux-flows/diagrams/screen-map.md に生成します。

ステップ 2：ユースケースごとの図

承認された各ユースケースについて、次の 3 つの図を生成します。

1. フローチャート（graph TD）— 判断ノードを含む画面間ナビゲーション
2. 状態図（stateDiagram-v2）— アプリの状態（読み込み、エラー、成功、アイドルなど）
3. シーケンス図（sequenceDiagram）— HTTP メソッドを含むフロントエンドとバックエンドのやり取り

docs/ux-flows/diagrams/{use-case-id}/ に保存します。

• flow.md — フローチャート
• states.md — 状態図
• sequence.md — シーケンス図

制約：

• 図ごとのノード数は最大 15～20 個
• 複雑すぎる場合はサブフローに分割し、click でリンクするか参照を記載します
• 図全体で一貫したスタイルにするため、classDef を使用します

すべての図とそのリンクを記載したインデックスを、docs/ux-flows/diagrams/INDEX.md に生成します。

---

フェーズ 3 — HTML ワイヤーフレーム（クリック可能なプロトタイプ）

必須：このフェーズをスキップ、要約、または延期してはいけません。このスキルの実行がフェーズ 2 まで進んだ場合、必ずフェーズ 3 まで続けてください。続行するかユーザーに尋ねず、そのまま実行してください。

ステップ 1：HTML ファイルを生成する

フローチャートで特定した画面ごとに、assets/wireframe-template.html をベーステンプレートとして HTML ファイルを生成します。

要件：

• 自己完結型：CSS はインラインのみとし、外部依存は使用しません
• モバイルファースト：ビューポート幅は 375px
• ワイヤーフレームの外観：グレー（背景は #f5f5f5）、破線の枠線（#ccc）、プレースホルダーテキスト（#666）
• テンプレートの CSS クラスを使用します：.wf-header、.wf-input、.wf-button、.wf-card、.wf-nav、.wf-list-item、.wf-tab-bar、.wf-icon-placeholder、.wf-link、.wf-back
• フッターのメタデータに画面名と関連するユースケースを含めます

ステップ 2：画面間のナビゲーションを追加する

各ワイヤーフレームから、<a href="target.html" class="wf-link"> を使って他の画面へリンクします。これにより、JavaScript を使わず、どのブラウザーでも移動できるクリック可能なプロトタイプになります。

ナビゲーションのルール：

• 論理的に画面遷移するボタン：<a href="target.html" class="wf-link"><div class="wf-button">Label</div></a> で囲みます
• タブバー：各タブを、その画面を指す <a class="wf-link"> にします。タブバーを共有するすべての画面で、タブバーの構成を統一します
• 戻るボタン：.wf-nav バーに <a href="previous.html" class="wf-link wf-back">&larr; Back</a> を配置します
• タップ可能なリスト項目：<a href="detail.html" class="wf-link"><div class="wf-list-item">...</div></a> で囲みます
• タップ可能なカード：<a href="target.html" class="wf-link"><div class="wf-card">...</div></a> で囲みます
• 行き止まりを作らない：各画面に、少なくとも 1 つの遷移先リンク（戻るボタン、タブバー、またはアクションボタン）を設けます
• JavaScript を使わない：純粋な HTML の <a> ナビゲーションのみを使用します。onclick、フォーム送信、JavaScript は使用しません

ステップ 3：保存してインデックスを生成する

すべてのワイヤーフレームを docs/ux-flows/wireframes/ に保存します。

docs/ux-flows/wireframes/INDEX.md に一覧を生成します：

列	説明
画面名	人が読んでわかる名前
ファイルリンク	.html ファイルへの相対リンク
関連するユースケース	UC-ID
主な要素	画面上の主要コンポーネント
遷移先リンク	この画面からリンクする画面の一覧

ステップ 4：ブラウザーでのプレビューを提案する

すべてのワイヤーフレームを生成したら、ブラウザーでメインの開始画面を開くことを提案します：

• Chrome DevTools MCP が利用可能な場合：navigate_page を使ってファイルを開きます
• 代替手段：Bash から open docs/ux-flows/wireframes/{entry-screen}.html を実行します

ユーザーから依頼されるのを待たず、先回りしてプレビューを提案してください。

---

フェーズ 4 — 統合と引き継ぎ

マスタードキュメント docs/ux-flows/UX-FLOWS.md を生成します：

# UX Flows — [App Name]

## Master Screen Map
Link to screen-map.md

## Screen Inventory
| Screen | Purpose | Wireframe | Use Cases |
|--------|---------|-----------|-----------|
| ...    | ...     | link      | UC-001    |

## Use Case Diagrams
### UC-001: [Name]
- Flow: link
- States: link
- Sequence: link

## Clickable Prototype Links
| From Screen | Element | To Screen |
|-------------|---------|-----------|
| login.html  | [Login] button | home.html |
| ...         | ...     | ...       |

## Navigation Patterns
Summary of recurring navigation patterns (tab bar, back navigation,
modal flows, drawer menus, etc.)

## Open Questions
Design decisions and open questions for ui-ux-pro-max phase.

引き継ぎドキュメントの作成後、以下をユーザーに伝えます：

• 公式の Code to Canvas 統合機能を使って、ワイヤーフレームを Figma にエクスポートできます
• 必要なのは Dev Mode MCP Server を有効にした Figma デスクトップアプリだけです（2 ステップで設定できます）
• 興味があれば、ユーザーが「export to figma」と依頼すると、設定手順を提示できます

---

出力構成

docs/ux-flows/
├── UX-FLOWS.md                          # Master handoff document
├── use-cases.md                         # All use cases
├── diagrams/
│   ├── INDEX.md                         # Diagram index
│   ├── screen-map.md                    # Master app navigation
│   ├── uc-001-{name}/
│   │   ├── flow.md                      # Flowchart
│   │   ├── states.md                    # State diagram
│   │   └── sequence.md                  # Sequence diagram
│   └── ...
└── wireframes/
    ├── INDEX.md                         # Screen inventory
    ├── home.html
    ├── login.html
    └── ...

Figma エクスポート（任意）

このスキルでは、ワイヤーフレームを Figma にエクスポートできます。Figma MCP を自動的に確認しないでください。

案内するタイミング：フェーズ 4（引き継ぎ）の最後に、次のステップとして Figma エクスポートを任意で利用できることをユーザーに伝えてください。

ユーザーが Figma エクスポートをリクエストした場合は、次の手順に従ってください。

1. 最初に：何かを試す前に、必要な要件を伝えてください。
   • Figma デスクトップアプリで Dev Mode MCP Server を有効にする（Preferences → 「Dev Mode MCP Server」を有効にする）
   • MCP を Claude Code に追加する：claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
   • Chrome DevTools MCP（ワイヤーフレームのプレビューですでに使用）
   • 詳細は references/figma-integration.md を参照してください
2. 次に：これらの前提条件が整っているか、またはセットアップを希望するかをユーザーに確認してください
3. その後に限り：references/figma-integration.md を読み、エクスポートのワークフローに従ってください

Figma の操作を黙って試みないでください。必ず最初に要件を提示してください。