今日主題

想做個可以娛樂自己，又能提升動機來看這些每天大量大量釋出的 AI 影片，所以毫無意外選了Netflix 來當模板假裝一下。

為什麼想做

• 雖然都是 Vibe Coding 做個網站，但一樣想測試不同工具間上手程度
• 練習怎麼把需求講的更精準 (或其實不同工具是要說的更模糊)，
• 這個網站做出來自己也會覺得有趣，不會是靜態網站，1.0 完成後可以繼續擴充跟持續升級的一個專案

思考如何做

• 工具選擇：這次選了之前看過的 Emergent https://app.emergent.sh/chat
• 基本流程：
  • 拆解需求：
    flowchart TD
    A[Idea 發想] --> B[GPT 討論規格]
    B --> C[產出 PRD]
    C --> D[提交：Emergent，假內容 Demo]
    D --> E[YouTube API 取得]
    E --> F[匯入正式內容測試]
    F --> G[關鍵功能及 UI 調整]
    G --> H[Emergent push GitHub]
    H --> I[從 Vercel 部署]
    

## PRD

1. 平台核心概念

定位：一個「知識型娛樂平台」，專門追蹤 AI 趨勢與工具，讓使用者像刷劇一樣瀏覽、收藏、分類內容。

內容來源：YT

互動機制：像 Netflix 一樣，可以「喜歡 👍 / 不喜歡 👎」，幫助推薦系統更懂你。

2. 內容分類（像 Netflix 的「片單」）

你可以設計幾個大分類，方便用戶「掃」：

AI 趨勢：最新技術走向、模型突破、產業觀察。

自動化工具：N8n、Zapier、Make、AI Agent 案例。

新創產品館：新上線的 AI 工具 / App（類似 Product Hunt 精選）。

投資與市場：AI 相關新創募資、公司動態。

應用案例：行銷、醫療、教育、設計…各領域 AI 落地的故事。

（還可以有「初學者專區」、「專家專區」分級，避免資訊過載。）

3. 功能設計

個人化推薦：根據「喜歡/不喜歡」紀錄，調整推薦列表。

我的清單：收藏想看的內容。

每日精選：像 Netflix 的「Top 10」，每天推送最熱門的 AI 新聞/產品。

深度專題：把一個主題整理成「系列」，像一個 mini-course。

搜尋 + 篩選：支援標籤（例如「LLM」「Agent」「AutoML」）。

4. 技術構想

前端：用 Next.js 或 Emergent.sh，快速做出 Netflix-like UI。

內容來源：RSS Feed + API（Product Hunt, Hacker News, Medium, Arxiv）。

推薦引擎：先用簡單的「標籤匹配 + 使用者評分」，之後可以再上 ML 模型。

後端：Supabase（存使用者紀錄、收藏、喜好），或 Firebase。

5. 類似 Netflix 的互動

進入首頁 → 「今日推薦」

點選影片/文章卡片 → 頁面提供「摘要（AI 自動生成）」

看完 → 出現「喜歡 👍 / 不喜歡 👎」互動

系統學習 → 下次推薦更準

• 工具選擇：Emergent、Vercel

成果校驗

針對關鍵的必要功能&調整幾次UI後，以及確定編碼轉換沒有問題後的界面大概如此。

收藏清單

今日總結

我做了什麼

• 點子確認
• YouTube API 申請
• 串接授權
• (這次連視覺風格定義都省下來了)

AI 幫了我什麼

• 網站框架整理、視覺風格文字定義、寫程式、資料庫、部署網站
• 從0到執行到看見可行性，這次花1.5小時

Emergent 讓我覺得很方便的地方

• 界面應用性上很直覺方便， 連 push Github 這句話都省下來了，直接做在下方的 button，懶人福音
  
• 對話框縮放比預期中體感更好，AI回覆通常很長，有時候光想找到特定對話就滑到手酸

遇到的挑戰

• Emergent 在一些基本設定上，這次專案沒完成，以最基本的search bar功能來說沒成功，但模型是Claude 4.0 Sonnet，不解阿~
• 因為基本 search bar 沒成功，決定先 push GitHub, 之後 cursor 接著做，但就沒很方便
• 最意外的是，從 Vercel 部署失敗了XD 第一次遇到這狀況，值得來研究哪裡設定錯誤或出問題
• 最大障礙應該是如果要做大型專案，免費版不夠，這次類 Netflix 網站，覺得並沒有到太複雜，但整體使用了約 50credit，每月也只有 10credit免費，最基本方案擇要 20美/月

下一步
在PRD給定的規格內，沒有一次到位，之後就是挑實用性功能先增加；下次在 Emergent 預計試不給任何 PRD 細節規格， 一句話暴力給需求，觀察看看 credits 消耗速度跟成品差異。