AIさんに三年間欲しかったモノを作ってもらうことにした

# プロジェクト概要: AI自動要約付きパーソナル・ナレッジ・ベース構築

## 1. 目的
「検索したけど何を検索したか忘れる」「ブックマークが多すぎて管理できない」「タイトルだけでは内容がわからない」という問題を解決するため、ユーザーが検索し、訪問したWebページの「要点」をAIが自動的に抽出し、かわいいデザインで整理・保管するアプリを構築する。

## 2. コア機能要件 (MVP)

このアプリは、ユーザーの「記憶の拡張」として機能し、以下のワークフローを自動化する。

### 2.1. インプット・プロセス (データの収集)

1.  **検索キーワードの自動記録:**
    *   ユーザーがブラウザ（例: Chrome）で行った検索クエリ（キーワード）を自動的にキャプチャし、このアプリにデータベース化する。
2.  **訪問URLの自動キャプチャ:**
    *   検索結果からユーザーがクリックした（または訪問した）すべてのWebページのURLを自動的に記録する。

### 2.2. プロセス・エンジン (AIによる処理)

1.  **AI自動要約:**
    *   記録されたURLにバックグラウンドでアクセスし、ページの全文をスクレイピングする。
    *   AI（例: GPT-4oやClaude 3.5 Sonnet）を使用して、そのページの内容を簡潔な要点（ bullet points 3〜5つ程度）にまとめる。
2.  **自動メタデータ付与:**
    *   AIに、ページの内容に基づいて、関連する「かわいい」タグ（例:「🐈ねこ」「🌸おはな」「📝おべんきょう」など）を自動生成させる。

### 2.3. アウトプット・プロセス (ユーザーインターフェース)

1.  **要約カード表示:**
    *   各訪問ページは、1つの「かわいいカード」として表示される。
    *   カードには以下の情報を含める。
        *   日付（かわいいフォントで）
        *   検索キーワード（強調表示）
        *   ページのタイトル（訪問時のもの）
        *   **AIによる要約（核心となる要点）**
        *   ページのサムネイル（あれば）または、かわいい代替画像
        *   自動生成されたタグ
2.  **タイムライン表示と検索:**
    *   カードは時系列（新しい順）に並べられる。
    *   ユーザーが自分の「記憶」からキーワード検索（アプリ内の全文検索）や、タグでのフィルタリングができるようにする。

## 3. デザイン・要件 (UI/UX) - 最重要

「かわいい」という感覚を最優先する。添付画像 `image_0.png` の世界観を尊重し、それをアプリの全体像に展開する。

### 3.1. ビジュアルスタイル

*   **スタイル:** `image_0.png` のような、手描き風、水彩画風、またはパステル調の、優しく、温かみのあるイラストレーションスタイル。
*   **モチーフ:** `image_0.png` の白鳥、柳の枝、水面を、アプリのヘッダー、背景、アイコンなどに採用する。
*   **カラーパレット:** 添付画像から抽出する。
    *   ソフトブルー（空と水面）
    *   淡いミントグリーン（柳の葉、前景の水）
    *   白（白鳥、テキストの視認性確保）
    *   柔らかいピンク（白鳥のチーク）
    *   暖かく、彩度を抑えたパステルカラーで統一する。
*   **キャラクター性:** 白鳥（または他の森の動物たち）をアプリのナビゲーターやマスコットとして登場させる（例: 検索中や要約中にアニメーションさせる）。

### 3.2. コンポーネント設計

*   **テキスト:** `image_0.png` のテキスト「なんのはなししていすが」のような、手書き風のフォントを多用する（ただし、要約本文などは視認性を考慮して柔らかいゴシック体にする）。
*   **カードデザイン:** 
    *   角を丸くする。
    *   `image_0.png` の水面のグラデーションや、柳の葉のデザインをカードの境界線や背景に微妙に取り入れる。
    *   カード自体を、例えば小さな本や、葉っぱの形にするなどのアイデアも検討する。
*   **アイコン:** 検索アイコン、タグアイコン、設定アイコンなどは、すべて手描き風にする。

## 4. 技術スタック（推奨）

Cursorに判断を任せるが、以下の構成を提案する。

*   **フロントエンド:** React (または Next.js)、かわいいUIライブラリ（例: Chakra UIをベースにかわいくカスタムするか、完全にCSSで独自に作成）。
*   **バックエンド:** Node.js (Express)。
*   **データベース:** タイムライン検索に適したもの（例: PostgreSQL + pgvector (embedding検索のため)、またはMongoDB）。
*   **AI:** OpenAI API (GPT-4o) または Anthropic API (Claude 3.5 Sonnet)（要約用）。
*   **ブラウザ拡張機能 (必須):** Chrome Extensionを別途作成し、検索クエリとURLをこのアプリのAPIに送信する。

## 5. 実装フェーズの指示

1.  **フェーズ1:** 最初に、ブラウザ拡張機能（ダミーデータ送信用）と、アプリの「かわいい」ダッシュボードUI（`image_0.png` に基づくデザイン）のプロトタイプを作成してください。AI要約機能の実装は、UIが確定してからにします。
2.  **フェーズ2:** UIが確定したら、OpenAI/Anthropic APIを統合し、受信したURLから要点を生成して保存するロジックを実装してください。
3.  **フェーズ3:** アプリ内検索、タグフィルタリング機能を追加し、全体の「かわいさ」をさらにブラッシュアップしてください。

まずは、この構成案に基づいて、プロジェクトの初期設定とUIプロトタイプの作成から始めてください。