product-inspiration

产品灵感技能

Codex 兼容性

在 Codex 中运行此技能时，请在操作前转换仅限 Claude Code 的原语：AskUserQuestion -> chat/request_user_input，TodoWrite -> update_plan，Task/TaskCreate/TeamCreate/SendMessage -> 在可用且允许时使用 spawn_agent/send_input/wait_agent，EnterPlanMode/ExitPlanMode -> 简洁的聊天计划并明确征求批准。 将 Read/Write/Edit/Bash/WebSearch/WebFetch 对应到 Codex 的文件/终端/网络工具；除非任务明确针对 Claude Code，否则将 ~/.claude/... 路径映射到 ~/.agents/... 或 ~/.codex/...。

Cursor 兼容性

在 Cursor Agent 中运行此技能时，请在操作前转换仅限 Claude Code 的原语：AskUserQuestion -> AskQuestion；TodoWrite -> Cursor TodoWrite 或等效的清单；Task/TaskCreate/TeamCreate/SendMessage/多 Agent 工作流 -> 在允许时使用 Cursor Task（子 Agent）、并行 Tasks 或 run_in_background（TeamCreate/SendMessage 可能没有完全对应的功能）；EnterPlanMode/ExitPlanMode -> 计划模式（SwitchMode / CreatePlan）并明确征求用户批准。 将 Read/Write/Edit/StrReplace/Bash/网络/搜索/MCP 对应到 Cursor Composer 或 Agent 的等效功能。写作 mcp__server__tool 的 MCP 名称通常映射到 call_mcp_tool，并使用已配置的服务标识符。除非任务明确针对 Claude Code，否则将 ~/.claude/... 映射到 ~/.cursor/skills/、.cursor/skills/ 和 .cursor/rules/。

在产品开发过程中，基于对顶级应用的研究，提供功能/UI 灵感的技能。

快速开始

1. 明确用户想要实现的功能/UI
2. 使用 WebSearch + Tavily 调研顶级应用
3. 提供 5 种灵感方案，并附上线框图
4. 在 _trials/ 文件夹中实现所有方案
5. 生成附有屏幕截图的对比报告
6. 查看实际效果后，选择最佳方案
7. 将选定方案提升到 src/，并清理不需要的内容

例: "ダッシュボード画面のインスピレーションが欲しい"
→ Linear, Vercel, Stripe 等を調査
→ 5パターン提示
→ 全パターン実装 (_trials/)
→ 比較して選択
→ 勝者を src/ に昇格

---

理念

“看过实际效果后再决定”

线框图无法传达所有细微之处。实际实现所有方案，比较可运行的 UI 后再选择最佳方案，这样才能更有把握地做出决定。

---

工作流概览

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 → 勝者昇格 + クリーンアップ

---

阶段 1：澄清（明确需求）

根据用户的需求了解以下内容（不明确时提问）：

项目	示例
想要实现的功能/UI	“用户设置页面”“搜索筛选器”“仪表板”
产品背景	“SaaS 管理后台”“电商网站”“社交应用”
目标平台	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画面"

---

阶段 2：研究（全面调研）🔴 CRITICAL

此阶段最为重要。充分并并行使用多种搜索工具/Agent。

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 个应用。

---

阶段 3：呈现（提供灵感）

根据调研结果，提供大约 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)                          │
└─────────────────────────────────────────────┘

---

阶段 4：快速预览（确认实现范围）

呈现 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"
}

---

阶段 5：全部实现（实现所有方案）🔴 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
![Preview](./screenshots/preview.png)

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 项目： 使用 /electron 技能拍摄屏幕截图并操作 UI。

将拍摄的屏幕截图保存到 _trials/pattern-N/screenshots/preview.png。

5.6 エラーハンドリング

実装失敗時：

1. _trials/pattern-N/ERROR.md にエラー内容を記録
2. ユーザーに確認：続行 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 1](./pattern-1-linear/screenshots/preview.png)

### Pattern 2: Notion Modal
![Pattern 2](./pattern-2-notion/screenshots/preview.png)

### Pattern 3: Stripe Tabs
![Pattern 3](./pattern-3-stripe/screenshots/preview.png)

## 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 ハイブリッド選択時

ユーザーが「ハイブリッド」を選んだ場合：

1. どのパターンからどの要素を使うか確認
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 が生成された