經過前四天的學習，我們已經建立好了AI開發環境（.cursorrules）、掌握了結構化Prompt（CRISP框架），並學會了高效率的Ping-Pong乒乓協作流。

今天，我們將正式進入Phase2的實戰準備，確定接下來25天要一起從0到1打造的實體專案，並示範如何利用AI快速收斂需求、生成PRD（產品需求文件）與系統架構圖。

1.鐵人賽實戰專案確定：《VibePulseAI技能診斷與學習儀表板》
為了全面涵蓋前端UI/UX、動態互動、後端API、資料庫與AI第三方串接，我們選擇的實戰主題為：

VibePulse（AI學習與技能進度追蹤平台）
一個專為軟體工程師與自主學習者設計的Dashbaord應用。使用者可以輸入學習目標或上傳Code /筆記，系統透過AI自動分析技能缺口、生成學習Roadmap，並提供可視覺化的進度追蹤與每日打卡功能。

核心功能模組：
技能地圖與Roadmap（前端與動態視覺化）：視覺化節點圖與進度條。

AI技能診斷（LLM串接）：輸入學習筆記，由AI評估熟練度並給予建議。

學習歷程管理（CRUD與資料庫）：PostgreSQL+ORM紀錄每日學習日誌與打卡狀態。個人化Dashboard（統計與數據）：即時計算學習連續天數（Streak）與完成率。

第一步：請AI幫你寫產品需求文件(PRD)
在動手寫第一行Code之前，我們先邀請AI扮演資深產品經理（SeniorPM），將模糊的概念收斂成嚴謹的PRD。

引導PM Prompt範例：

你是一位資深的Web產品經理。我想打造一個名為"VibePulse"的AI學習與技能進度追蹤儀表板。

請幫我撰寫一份簡潔且結構化的PRD（產品需求文件），包含：
1.產品核心價值與TargetAudience
2.MVP(MinimumViableProduct)核心功能模組清單
3.使用者流程(UserJourney)
4.技術棧建議(TechStack)

請使用繁體中文撰寫，並以Markdown格式輸出。

AI生成的PRD核心摘錄：

VibePulse-產品需求文件(PRD)

1.產品定位
VibePulse是一款結合AI分析的自主學習量化平台，幫助開發者將抽象的學習過程轉化為可視覺化的技能地圖與成長數據。

2.MVP核心功能清單
F1.技能地圖管理：新增/編輯學習主題（例如：React,TypeScript,Docker），並設定預期完成日期。
F2.AI診斷對話框：貼上學習筆記或程式碼，AI自動解析知識點並更新技能掌握度（0-100%）。
F3.學習日誌打卡：每日紀錄學習時數與心得，同步計算個人連續打卡天數（Streak）。
F4.視覺化Dashboard：整合圖表展示總時數、技能雷達圖與近期動態。

3.技術棧選擇
Frontend:Next.js14+(AppRouter),TypeScript,TailwindCSS,ShadcnUI
State/Data:ReactQuery,Zustand
Backend:Next.jsRouteHandlers,PrismaORM
Database:PostgreSQL(Supabase/Neon)
AIIntegration:OpenAIAPI/ClaudeAPI(VercelAISDK)

第二步：讓AI繪製Mermaid系統架構圖與ERD
明確了PRD後，我們可以直接請AI輸出可視覺化的Mermaid.js圖表，幫助我們釐清系統架構與資料庫模型。

生成Mermaid架構圖Prompt：

根據剛才產出的 PRD，請幫我畫出：
1.系統模組架構圖(Mermaid flowchart)
2.資料庫ERD模型圖(Mermaid erDiagram)，包含User, Skill, Log, Assessment四個主要Table。

AI產出的系統架構圖：

flowchart TD
    User([使用者]) -->|瀏覽與操作| Frontend[Next.js App Router 前端 UI]
    Frontend -->|API 請求| API[Next.js Route Handlers]
    API -->|資料讀寫| DB[(PostgreSQL + Prisma)]
    API -->|評估請求| AIService[OpenAI / Claude API]
    AIService -->|回傳結構化 JSON| API

AI產出的ERD資料庫模型：

erDiagram
    USER ||--o{ SKILL : owns
    USER ||--o{ LOG : records
    SKILL ||--o{ ASSESSMENT : has
    
    USER {
        string id PK
        string email
        string name
        datetime createdAt
    }
    SKILL {
        string id PK
        string userId FK
        string title
        int proficiency
        string category
    }
    LOG {
        string id PK
        string userId FK
        int minutesSpent
        string content
        datetime loggedAt
    }
    ASSESSMENT {
        string id PK
        string skillId FK
        int score
        string feedback
        datetime createdAt
    }

4.今日實作小結與成果存檔
今天我們展示了VibeCoding在專案初期規劃階段的巨大威力：

確定專案：確定了未來25天的實戰主題《VibePulse》。

獲得PRD：只花2分鐘就拿到包含邊界與規格的需求文件。

獲得架構圖：有了Mermaid圖表，前後端與資料庫的關聯一目瞭然。

我們將這些內容存檔於專案的docs/PRD.md與docs/architecture.md中。從明天開始，這兩份文件將成為我們輸入給Cursor的核心Context(@docs/PRD.md)！