摘要
影片主講者 Sarahi（綽號 Peachy）以「vibe coding」（讓 AI 主導編碼）為核心，嘗試用 V0（Vzero）等工具快速構建一個名為 StudioInspo 的網站——一個專注於工作室佈景與 A-roll（主鏡頭）拍攝靈感的 Pinterest 類平台。她分享從 UI 設計、版本迭代、資料庫設計、第三方整合到部署的完整過程、遭遇的問題與學到的實務教訓，並談到用 Claude Code 及 Cursor 在本地開發修復問題的經驗。
重點整理
- 什麼是 vibe coding：以 AI 工具（如 V0、Replit、Lovable）用自然語言指示 AI 完成大量開發工作，而非只是代碼自動補完。優點是速度與創意實作門檻低；缺點是當進入真實後端、整合與安全需求時，AI 工具會遇到侷限。
- 專案概況：目標是做一個 Pinterest 式的站台（studioinspo.com）展示工作室照片、標籤、相關圖片面板與上傳管理介面。前期 UI 多次 fork 與迭代，最終達成可互動的界面與彈出視窗、無限滾動與標籤篩選等功能。
- 版本控制與 Fork 概念：V0 會在每次 prompt 時產生新版本（fork）。隨著對話長度（context window）變長會導致 AI 混亂，須適時 fork 回到穩定版本以獲得乾淨上下文。
- 後端與資料庫：使用 Supabase 作為資料庫與儲存（bucket）。設計 schema：photo table（url、title、youtube link、tags、set_id、view/download counters 等），並把實際檔案放在 bucket。對於同一 set 的多張照片，用 set_id 串聯以便在「相關圖片」顯示同套圖。
- 搜尋與壓縮策略：搜尋功能採第三方（如 Algolia）以達到語意/同義詞/容錯；圖片壓縮則選擇簡單本地方式避免引入多餘大型依賴（例如不必要的 sharp 套件）。
- 遇到的主要問題：包含 V0 的環境變數管理與第三方整合錯誤、版本回滾失效、上傳功能與 view/download 計數錯亂、以及最終的驗證/身分驗證漏洞（需改用 Supabase 的 auth）。
- Claude Code 與 Cursor 的角色：在 V0 無法解決的問題上，作者轉到本地開發環境（下載專案、使用 Cursor 作為 IDE）並引入 Claude Code（在終端運行的 AI 助手）。Claude Code 能理解整個專案結構、生成或修正較複雜的程式，快速找出並修正連線或環境變數問題，是她認為目前最能「落地」的 AI 工具。
- 實作時間線與成果：總共花費約 3 週完成從概念到部署（前兩週主要 vibe coding，之後整合、除錯與上傳內容），最後部署到 Vercel 並完成 SEO / analytics 準備。
實用技巧與心得
- 在向 AI 指示前，先與 AI 討論並規劃（讓 AI 詢問澄清問題），能避免走錯方向。
- 遇到 context window 太長或 AI 開始亂出錯時，透過 fork 回到較早穩定版本再開新 chat。
- 優先選擇簡單方案（尤其是影像壓縮等），複雜需求（如語意搜尋）再交由成熟第三方服務處理。
- 不要完全信任 vibe coding 平台做安全/身分驗證，應使用成熟服務（如 Supabase Auth）來處理敏感功能。
- 把專案同步到 GitHub 並懂得在本地 IDE（如 Cursor）運行，能更有效除錯與部署；Claude Code 非常適合在終端協助理解整個專案並生成複雜修正。
結論
vibe coding 確實降低了非工程背景創作者把點子變為可視化原型的門檻，能快速做出 UI 與功能草案，但當專案進入實際後端整合、第三方服務與安全性需求時，單靠這類平台通常不夠，需要開發者介入、使用成熟工具與服務、以及在本地環境做更細緻的除錯。Sarahi 的實作證明了「可以用 AI 做出真實可用的產品」，但同時也暴露了這類方法的極限與必要的人工監督。
最後補充：影片同時有贊助商介紹（Squarespace）與作者個人如何用 Squarespace 維運其課程與作品集的分享。
沒有留言:
張貼留言