ss-flow

このワークフローを開始する前に、セッションごとに1回だけ更新の事前確認を実行してください。

UXフローデザイナー

レジストリ優先のアーティファクト境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求されたアーティファクト ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み込んでください。レジストリのあるプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

使用しないケース

• 単一ページを実装する場合 → フローが確定してから /ss-page を使用します
• 各ステップの文言を作成する場合 → 構成が確定してから /ss-copy を使用します
• 製品全体の情報アーキテクチャを設計する場合 — まず1つのフローに範囲を絞ります
• 高精細なモックアップを作成する場合 — これはフローマップを作成するものであり、ピクセル単位で正確なデザインではありません

ユーザーフローを設計します：$0 説明：$ARGUMENTS

手順

1. デザインシステムのリファレンスを読みます：

   • コンポーネント一覧は CLAUDE.md
   • レイアウトパターン（セクション13～14、19～20）は DESIGN-LANGUAGE.md
   • 利用可能な構成要素は components/patterns/

2. 以下のUX原則を適用します：

情報アーキテクチャ

• 段階的な情報開示：各ステップで必要な情報だけを表示します。複雑さは論理的な詳細画面の奥に隠します。
• 認知負荷：ユーザーの判断を中心に情報をまとめます。グルーピングは、普遍的な項目数ではなく、解決済みの文法とコンテンツ密度に基づいて決定します。
• ヒックの法則：製品本来のタスク用語を維持しながら、画面ごとの選択肢を最小限に抑えます。

ナビゲーションパターン

• ハブ＆スポーク：ダッシュボード → 詳細ページ → ダッシュボードに戻る（モバイルアプリのデフォルト）
• リニアフロー：ステップ1 → ステップ2 → ステップ3（フォーム、オンボーディング、チェックアウト向け）
• ナビゲーション：解決済みのサーフェスアダプターを使用します。BottomNav はモバイルで利用できるパターンの1つにすぎません。

画面フローのルール

• すべてのフローに明確な開始地点と明確な終了地点を設けます
• 主要機能には、製品とプラットフォームに適したステップ数でアクセスできるようにします。普遍的なタップ数を一律に適用しないでください。
• （ルート画面を除き）戻るナビゲーションを常に利用できるようにします
• エラー状態には復旧経路（再試行、前の画面に戻る、サポートへの問い合わせ）を用意します
• 読み込み中の状態にはスケルトン画面を使用します（カード内でスピナーは使用しません）

ページ構成（DESIGN-LANGUAGE.mdより）

• 選択された出力文法の情報階層に従います。関連のない製品に Hero → KPI Grid → Details → Lists のテンプレートを一律に適用しないでください。
• タスクに応じて、各画面で主要な問いを1つに答えられるようにします。
• ファーストビュー：最も重要な指標またはアクション
• 4種類のセクションを使用します：Full Card（A）、Grid（B）、Carousel（C）、Hero（D）

3. 出力形式：

   • 画面間のつながりを示すASCII形式のフロー図
   • 各画面の目的と主要コンポーネントを記載した画面一覧
   • 各画面のエッジケース（空の状態、エラー、読み込み中）
   • アーティファクトのアダプターと文法によって選択されたプリミティブを使用したスキャフォールド済みページ

4. /ss-page の規約に従って、実際のページファイルを生成します。