Product Inspiration Skill
プロダクト開発時の機能/UIインスピレーションを、トップティアアプリのリサーチに基づいて提供するスキル。
Quick Start
- •ユーザーが実装したい機能/UIを特定
- •WebSearch + Tavily でトップティアアプリを調査
- •5パターンのインスピレーションをワイヤーフレーム付きで提示
- •全パターンを
_trials/フォルダに実装 - •スクリーンショット付きで比較レポート生成
- •実物を見てから最良のパターンを選択
- •選択したパターンを
src/に昇格、不要なものをクリーンアップ
例: "ダッシュボード画面のインスピレーションが欲しい" → Linear, Vercel, Stripe 等を調査 → 5パターン提示 → 全パターン実装 (_trials/) → 比較して選択 → 勝者を src/ に昇格
Philosophy
「実物を見てから決める」
ワイヤーフレームだけでは伝わらないニュアンスがある。全パターンを実際に実装し、動作するUIを見比べてから最良を選ぶことで、より確信を持った意思決定ができる。
Workflow Overview
Phase 1: Clarification → ユーザー要望の理解 Phase 2: Research → トップティアアプリの徹底調査 Phase 3: Present → 5パターンのインスピレーション提示(ワイヤーフレーム付き) Phase 4: Quick Preview → 実装スコープの確認 Phase 5: Implement All → _trials/ に全パターン実装 Phase 6: Compare → 比較レポート生成(スクリーンショット付き) Phase 7: Select → 実物を見て最良を選択 Phase 8: Finalize → 勝者昇格 + クリーンアップ
Phase 1: Clarification(要望の明確化)
ユーザーの要望から以下を把握する(不明なら質問):
| 項目 | 例 |
|---|---|
| 実装したい機能/UI | 「ユーザー設定画面」「検索フィルター」「ダッシュボード」 |
| プロダクトのコンテキスト | 「SaaSの管理画面」「ECサイト」「SNSアプリ」 |
| ターゲットプラットフォーム | Web / Mobile / Desktop |
| 既存の技術スタック | Next.js + Tailwind, React Native等 |
| 参考にしたい具体的なアプリ(あれば) | Notion, Linear, Figma等 |
AskUserQuestionで確認する場合の例:
question: "どんな機能/UIのインスピレーションが必要ですか?" options: - label: "Settings / Preferences画面" - label: "Dashboard / Analytics画面" - label: "List / Table表示" - label: "Form / Input画面"
Phase 2: Research(徹底リサーチ)🔴 CRITICAL
このフェーズが最重要。複数の検索ツール/エージェントを並列でフル活用する。
2.1 利用するツール
| ツール | 用途 | 優先度 |
|---|---|---|
| WebSearch | 最新のUI/UXトレンド検索 | 🔴 必須 |
| mcp__tavily__tavily_search | 深掘り検索、技術記事 | 🔴 必須 |
| Task (deep-research-agent) | 包括的な複数ソース調査 | 🟡 推奨 |
| WebFetch | 特定URLの詳細取得 | 必要に応じて |
2.2 検索クエリテンプレート
一般検索: - "[feature] UI design patterns 2024" - "[feature] UX best practices" - "best [feature] design examples" - "[app名] [feature] how it works" トップティアアプリ調査: - "Notion [feature] design" - "Linear [feature] implementation" - "Figma [feature] UX" - "Stripe [feature] dashboard" - "Vercel [feature] UI" 日本語検索: - "[機能] UI デザイン 事例" - "[機能] UX パターン"
2.3 トップティアアプリリスト
参照: references/top-tier-apps.md
カテゴリ別のトップティアアプリリストを参照し、対象機能に関連するアプリを調査。
2.4 調査項目
各パターンについて以下を記録:
- •アプリ名・URL
- •スクリーンショット/参照リンク
- •レイアウト構造(ヘッダー/サイドバー/メインコンテンツ等)
- •インタラクションパターン(クリック、ホバー、トランジション)
- •差別化ポイント(このアプリならではの工夫)
- •技術的実装のヒント
最低5つ以上のアプリを調査すること。
Phase 3: Present(インスピレーション提示)
調査結果から5パターン前後のインスピレーションを提示。
3.1 提示フォーマット
各パターンは以下の構造で提示:
## Pattern [N]: [パターン名] - [参考アプリ名] ### 概要 [1-2文でパターンの特徴を説明] ### 参考アプリ - **アプリ**: [アプリ名] - **URL**: [参考URL] - **特徴**: [このアプリの工夫ポイント] ### ワイヤーフレーム [ASCII/Unicode ワイヤーフレーム] ### 設計ポイント - [ポイント1] - [ポイント2] - [ポイント3] ### 実装の複雑さ ⭐⭐⭐☆☆ (3/5) - [簡潔な理由]
3.2 ワイヤーフレーム記法
参照: references/wireframe-guide.md
基本構造例:
┌─────────────────────────────────────────────┐ │ Header / Navigation │ ├──────────┬──────────────────────────────────┤ │ │ │ │ Sidebar │ Main Content │ │ │ │ │ [nav] │ ┌────────────────────────────┐ │ │ [nav] │ │ Card / Component │ │ │ [nav] │ └────────────────────────────┘ │ │ │ │ ├──────────┴──────────────────────────────────┤ │ Footer (optional) │ └─────────────────────────────────────────────┘
Phase 4: Quick Preview(実装スコープ確認)
5パターン提示後、どのパターンを実装するか確認。
4.1 目的
- •全パターン実装は時間がかかるため、スコープを絞る機会を提供
- •ただし最低2パターンは必須(比較のため)
4.2 AskUserQuestion
AskUserQuestion({
questions: [{
question: "どのパターンを実装しますか?(実物を見比べて最終決定できます)",
header: "Implementation Scope",
options: [
{ label: "全パターン実装 (推奨)", description: "5パターン全て実装して比較" },
{ label: "Top 3 を実装", description: "複雑さのバランスが良い上位3つ" },
{ label: "自分で選ぶ", description: "実装するパターンを指定" }
],
multiSelect: false
}]
})
4.3 マニフェストファイル作成
実装開始時に _trials/.manifest.json を作成:
{
"session_id": "pi_[timestamp]",
"feature": "[機能名]",
"patterns_to_implement": ["pattern-1", "pattern-2", "pattern-3"],
"started_at": "[ISO timestamp]",
"status": "implementing"
}
Phase 5: Implement All(全パターン実装)🔴 CRITICAL
5.1 フォルダ構造
project/ ├── src/ # 既存ソース ├── _trials/ # 試作フォルダ(一時的) │ ├── .manifest.json # セッション状態 │ ├── pattern-1-[name]/ │ │ ├── PATTERN.md # パターンメタデータ │ │ ├── components/ # 実装コード │ │ │ └── [Feature]/ │ │ │ ├── index.tsx │ │ │ └── styles.css │ │ └── screenshots/ │ │ └── preview.png │ ├── pattern-2-[name]/ │ │ └── ... │ └── COMPARISON.md # 比較レポート(Phase 6で生成) └── plan.md # 最終プラン(Phase 8で生成)
5.2 PATTERN.md テンプレート
各パターンフォルダに作成:
--- pattern_id: [N] name: "[パターン名]" source_app: "[参考アプリ名]" complexity: [N]/5 implemented_at: "[ISO timestamp]" --- ## Overview [パターンの概要] ## Key Features - [特徴1] - [特徴2] - [特徴3] ## Files Created - components/[Feature]/index.tsx - components/[Feature]/styles.css ## Implementation Notes [実装時の注意点やカスタマイズ内容] ## Screenshot 
5.3 実装ルール
| ルール | 詳細 |
|---|---|
| 完全動作 | インタラクションも含めて動作する状態で実装 |
| 既存スタック準拠 | プロジェクトの技術スタック(Tailwind, shadcn/ui等)に合わせる |
| 最小限の依存 | 新規依存関係は必要最小限に |
| コードスタイル | プロジェクトの既存パターンに従う |
5.4 進捗報告
各パターン実装後に報告:
✅ Pattern 1 (Linear Sidebar) - 実装完了 Files: 3 | Lines: 147 Screenshot: _trials/pattern-1-linear/screenshots/preview.png 🔄 Pattern 2 (Notion Modal) - 実装中... ⏳ Pattern 3 (Stripe Tabs) - 待機中
5.5 スクリーンショット取得
Electronプロジェクトの場合:
mcp__electron__take_screenshot({
// パターンのコンポーネントが表示されている状態で撮影
})
撮影したスクリーンショットは _trials/pattern-N/screenshots/preview.png に保存。
5.6 エラーハンドリング
実装失敗時:
- •
_trials/pattern-N/ERROR.mdにエラー内容を記録 - •ユーザーに確認:続行 or 中止
Phase 6: Compare(比較レポート生成)
6.1 COMPARISON.md 生成
_trials/COMPARISON.md を作成:
# Pattern Comparison Report Generated: [timestamp] Feature: [機能名] ## Summary Table | Aspect | Pattern 1 | Pattern 2 | Pattern 3 | |--------|-----------|-----------|-----------| | Name | Linear Sidebar | Notion Modal | Stripe Tabs | | Complexity | ⭐⭐⭐☆☆ | ⭐⭐⭐⭐☆ | ⭐⭐☆☆☆ | | Lines of Code | ~150 | ~250 | ~100 | | New Dependencies | 0 | 1 | 0 | | Accessibility | Good | Excellent | Good | | Mobile Ready | Partial | Yes | Yes | | Keyboard Navigation | Full | Full | Partial | ## Screenshots ### Pattern 1: Linear Sidebar  ### Pattern 2: Notion Modal  ### Pattern 3: Stripe Tabs  ## Detailed Analysis ### Pattern 1: Linear Sidebar **Pros:** - コンパクトで場所を取らない - キーボードナビゲーション完備 - 実装がシンプル **Cons:** - 設定項目が多い場合はスクロールが必要 - モバイル対応に追加作業が必要 ### Pattern 2: Notion Modal [同様に Pros/Cons を記載] ### Pattern 3: Stripe Tabs [同様に Pros/Cons を記載] ## Recommendation **総合評価**: Pattern [N] ([名前]) を推奨 **理由**: - [理由1] - [理由2]
6.2 比較表示
比較レポートの内容をユーザーに表示。スクリーンショットがある場合は並べて見せる。
Phase 7: Select(最終選択)
7.1 AskUserQuestion
AskUserQuestion({
questions: [{
question: "全パターンを確認しました。どのパターンを採用しますか?",
header: "Final Selection",
options: [
{ label: "Pattern 1: Linear Sidebar", description: "コンパクト、キーボード重視" },
{ label: "Pattern 2: Notion Modal", description: "フルページ、a11y優秀" },
{ label: "Pattern 3: Stripe Tabs", description: "シンプル、実装最軽量" },
{ label: "ハイブリッド", description: "複数パターンの要素を組み合わせ" }
],
multiSelect: false
}]
})
7.2 ハイブリッド選択時
ユーザーが「ハイブリッド」を選んだ場合:
- •どのパターンからどの要素を使うか確認
- •マージした実装プランを作成
Phase 8: Finalize(最終化)
8.1 勝者の昇格
選択されたパターンを src/ に移動:
# 例: pattern-2 が選ばれた場合 cp -r _trials/pattern-2-notion/components/Settings src/components/
8.2 不要パターンのアーカイブ
mkdir -p _trials/_archived mv _trials/pattern-1-* _trials/_archived/ mv _trials/pattern-3-* _trials/_archived/
8.3 クリーンアップ確認
AskUserQuestion({
questions: [{
question: "不採用のパターンは _trials/_archived/ に移動しました。どうしますか?",
header: "Cleanup",
options: [
{ label: "参考用に保持", description: "後で比較したい場合に便利" },
{ label: "今すぐ削除", description: "ディスク容量を節約" },
{ label: "7日後に自動削除", description: "しばらく様子を見る" }
],
multiSelect: false
}]
})
8.4 plan.md 生成
プロジェクトルートに最終 plan.md を作成:
# Implementation Plan: [機能名] > Generated by product-inspiration skill (Try All, Pick Best workflow) ## Selected Pattern **Pattern [N]: [名前]** - [参考アプリ名] [パターンの概要] ## Files Promoted - src/components/[Feature]/index.tsx (from _trials/pattern-N) - src/components/[Feature]/styles.css ## Post-Selection Tasks - [ ] インポートパスの調整 - [ ] 既存コンポーネントとの統合 - [ ] テストの追加 - [ ] ドキュメント更新 ## Comparison Summary | Pattern | Status | |---------|--------| | Pattern 1 | Archived | | Pattern 2 | **Selected** | | Pattern 3 | Archived | ## References - [参考URL1] - [参考URL2]
8.5 マニフェスト更新
{
"session_id": "pi_[timestamp]",
"feature": "[機能名]",
"patterns_to_implement": ["pattern-1", "pattern-2", "pattern-3"],
"started_at": "[ISO timestamp]",
"completed_at": "[ISO timestamp]",
"status": "completed",
"selected_pattern": "pattern-2",
"archived_patterns": ["pattern-1", "pattern-3"]
}
Quality Checklist
最終確認項目:
リサーチ
- • 最低5つのトップティアアプリを調査した
- • WebSearch + Tavily を両方使用した
- • 最新情報(2024-2025)を優先した
インスピレーション提示
- • 5パターン前後を提示した
- • 各パターンにワイヤーフレームがある
- • 参考アプリとURLが明記されている
実装
- • 選択されたパターンが
_trials/に実装された - • 各パターンにスクリーンショットがある
- • 各パターンに PATTERN.md がある
比較
- • COMPARISON.md が生成された
- • 比較テーブルに全パターンが含まれている
最終化
- • 勝者が
src/に昇格された - • 不採用パターンがアーカイブされた
- • plan.md が生成された
Language
- •ユーザーが日本語 → 日本語で出力
- •ユーザーが英語 → 英語で出力
- •コード、技術用語は英語のまま
Reference Files
- •トップティアアプリリスト:
references/top-tier-apps.md - •ワイヤーフレームガイド:
references/wireframe-guide.md
Success Criteria
このスキルの実行が成功した時:
- • 最低5つのトップティアアプリを調査した
- • 5パターン前後のインスピレーションをワイヤーフレーム付きで提示した
- • 選択されたパターンが全て
_trials/に実装された - • スクリーンショット付き比較レポートが生成された
- • ユーザーが実物を見て最良のパターンを選択した
- • 勝者が
src/に昇格され、plan.md が生成された