ux-specification

UX 仕様

製品要件を、コーディングエージェントが実装できる具体的なフロー、画面、インタラクションに落とし込みます。

これが必要な理由

製品の見た目や動作を定義し、製品要件と実装の間のギャップを埋めます。

入力要件

このスキルでは、次のものが必要です。

• PRD（prd-generationから取得したもの、またはユーザーが提供したもの）
• 既存のスケッチ、ワイヤーフレーム、参考資料（任意）
• デザインの好みや制約（任意）

ワークフロー

ステップ 1：PRD を取り込む

PRD から次の内容を抽出します。

• ユーザーストーリー（特に必須要件）
• 機能と受け入れ条件
• ターゲットユーザーの特性
• 技術的な制約

ステップ 2：ユーザーフローを作成する

中核となる各ユーザーストーリーについて、フローを定義します。

回答する質問：

• ユーザーはどこから開始しますか？
• 想定どおりに進む場合のフローは何ですか？
• 判断が必要なポイントはどこですか？
• ユーザーは最終的にどこに到達しますか？
• どのような問題が起こり得ますか？

ステップ 3：画面を定義する

フロー内の各画面について、次の内容を定義します。

• 目的は何ですか？
• どのコンポーネントが必要ですか？
• どのデータを表示しますか？
• どのような操作ができますか？
• どのような状態がありますか？

ステップ 4：インタラクションを指定する

重要なインタラクションについて、次の内容を定義します。

• 何が操作のトリガーになりますか？
• ユーザーにどのようなフィードバックが返されますか？
• 画面上で何が変化しますか？
• どのくらい時間がかかりますか？

ステップ 5：不足点を明確にする

必要に応じて、的を絞った質問をします。

• 「モーダルにしますか、それとも新しいページにしますか？」
• 「リストが空の場合はどうなりますか？」
• 「読み込み中であることをユーザーはどうやって把握しますか？」
• 「サイドバー、タブ、単一ページなど、特定のレイアウトの希望はありますか？」

出力形式

Write ツールを使って、ユーザーに提示すると同時に出力を design/06-ux-spec.md に自動保存します。

# UX Spec: [Project Name]

## Overview
[Brief summary of the product and primary user goal]

---

## Information Architecture

### Navigation Structure

[App Name] ├── [Primary Nav Item 1] │ ├── [Sub-item] │ └── [Sub-item] ├── [Primary Nav Item 2] └── [Primary Nav Item 3]

### Key User Paths
1. **[Path Name]:** [Start] → [Step] → [Step] → [End]
2. **[Path Name]:** [Start] → [Step] → [End]

---

## User Flows

### Flow 1: [Flow Name]
**Trigger:** [What initiates this flow]
**User goal:** [What they're trying to accomplish]

[Start State] ↓ [Action/Decision] ↓ [Screen/State] ──→ [Alternative path if applicable] ↓ [End State]

**Steps:**
1. User [action]
2. System [response]
3. User [action]
4. System [response]
5. User reaches [end state]

**Error paths:**
- If [condition]: [what happens]
- If [condition]: [what happens]

### Flow 2: [Flow Name]
[Same structure]

---

## Screens

### Screen: [Screen Name]
**URL/Route:** `/path`
**Purpose:** [What the user accomplishes here]
**Entry points:** [How users get here]

#### Layout

┌─────────────────────────────────┐ │ [Header/Nav] │ ├─────────────────────────────────┤ │ │ │ [Main Content Area] │ │ │ │ [Component] [Component] │ │ │ ├─────────────────────────────────┤ │ [Footer/Actions] │ └─────────────────────────────────┘

#### Components
| Component | Description | Behavior |
|-----------|-------------|----------|
| [Name] | [What it displays] | [How it behaves] |
| [Name] | [What it displays] | [How it behaves] |

#### States
| State | Appearance | Trigger |
|-------|------------|---------|
| Default | [Description] | Initial load |
| Loading | [Description] | Data fetching |
| Empty | [Description] | No data exists |
| Error | [Description] | Request failed |
| Success | [Description] | Action completed |

#### Actions
| Action | Trigger | Result |
|--------|---------|--------|
| [Action] | [Click/tap/etc.] | [What happens] |
| [Action] | [Trigger] | [Result] |

### Screen: [Screen Name]
[Same structure]

---

## Components

### Component: [Component Name]
**Used in:** [List of screens]
**Purpose:** [What it does]

#### Props/Inputs
| Prop | Type | Description |
|------|------|-------------|
| [name] | [type] | [what it controls] |

#### Variants
- **[Variant 1]:** [Description]
- **[Variant 2]:** [Description]

#### States
- Default: [Description]
- Hover: [Description]
- Active: [Description]
- Disabled: [Description]

### Component: [Component Name]
[Same structure]

---

## Interactions

### Interaction: [Name]
**Trigger:** [User action]
**Response:** [System behavior]
**Duration:** [Instant / 200ms / async]
**Feedback:** [What user sees/feels]

### Interaction: [Name]
[Same structure]

---

## Responsive Behavior
**Breakpoints:**
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

**Key adaptations:**
- [Component/layout]: [How it changes]
- [Component/layout]: [How it changes]

---

## Design Notes
[Optional — any specific visual direction, references, or constraints]

- **Style:** [Minimal / Dense / Playful / etc.]
- **Reference:** [Any inspiration or similar products]
- **Constraints:** [Accessibility, brand, etc.]

適用ガイドライン

小規模プロジェクト（画面 1～3 枚）：

• 情報アーキテクチャは省略します
• フローと画面をまとめます
• コンポーネントのセクションは最小限にします
• レスポンシブ動作は省略します

中規模プロジェクト（画面 4～8 枚）：

• 上記のとおり、全体の構成を記載します
• エッジケースではなく、中核となるフローに重点を置きます

大規模プロジェクト（画面 10 枚以上）：

• 画面ごとの詳細を追加します
• コンポーネントのすべてのバリエーションを記録します
• エッジケースのフローを含めます
• デザインノートのセクションを追加します

記述ガイドライン

• ASCII レイアウトで十分です — 複雑にしすぎず、構造を示すだけにします
• 状態は重要です — 読み込み中、空、エラーの状態を示すことで、エージェントが推測する必要をなくします
• トリガーを具体的にします — 「クリック」「ホバー」「フォーカス」の違いは重要です
• 一貫した命名にします — 画面間で同じコンポーネント名を使用します

引き継ぎ

UX 仕様を提示した後、次のように確認します。

「/prompt-exportで prompts.md を生成しますか？それとも、先に画面を調整しますか？」

注： ファイルは design/06-ux-spec.md に自動保存されます。このファイルは開発プロンプトに使用されます。