用 Lovable 從零做一個耳機收藏追蹤 App

上一篇認識了 Lovable 是什麼，這篇直接動手——我用它從一句話開始，做一個耳機收藏追蹤 App。會挑這個題目，是因為我自己手上耳機不少（N5005 那段折騰還記憶猶新），一直想有個地方好好記錄。整個過程、包含中途的修改，我都截圖下來了。

第一步：把需求講清楚

Lovable 的成果好不好，很大一部分取決於你第一句話講得夠不夠具體。我沒有只丟「做一個耳機 App」，而是把欄位和風格都交代清楚：

做一個「耳機收藏追蹤」web app。可以新增耳機（欄位：品牌、型號、類型[入耳/耳罩/真無線]、價格、購入日期、個人評分 1-5、心得筆記、照片網址）。首頁用卡片網格顯示所有耳機，可依品牌或評分篩選/排序。整體走簡潔深色風格。

重點是把「資料有哪些欄位」「畫面怎麼呈現」「什麼風格」三件事一次說明白。需求越具體，它越不用猜。

第二步：讓它生成

送出後，Lovable 開始動工。它會先整理需求與介面要點，接著一個檔案一個檔案地寫，右邊預覽同步長出來。

等待的時間不長。回過神來，一個叫「Headphone Haven」的專案已經成形，成品 App 取名「我的耳機收藏 / Sound Vault」。

它在對話區也很貼心地總結了做了什麼：

完成：深色玻璃質感的耳機收藏追蹤器，含新增、篩選（品牌/評分）、排序、搜尋與卡片網格，資料儲存在瀏覽器本機。

第一次生成就把我要的功能幾乎全給了：頂部標題與「新增耳機」按鈕、搜尋框、品牌與評分的篩選下拉、排序選單，下面是空的卡片網格等著我填東西。風格正是我要的深色玻璃擬態，完全不用我再喬版面。

小提醒：這個版本的資料是存在「瀏覽器本機」（localStorage），換裝置或清快取就不見。要做成真正多人、跨裝置的 App，需要再接後端（例如 Supabase）——這點我會在第三篇談。

第三步：放一副耳機進去

實際新增一筆來看看。我放了手上的 Sony WH-1000XM5，填好價格與評分，卡片立刻長出來，頂部的統計也跟著更新（總值、平均評分）。

到這裡，其實已經是一個堪用的 App 了。但既然有 AI 搭檔，當然要試試「再叫它改一下」有多順。

第四步：對話式迭代

我接著丟了第二個需求，想讓資訊更一目了然：

在每張卡片加上星等顯示評分，並在頂部加一個統計列：總數量、總花費、平均評分。

不用自己碰任何程式碼，講完這句、等一下，它就改好了：卡片評分變成亮眼的星等，頂部多了一排獨立的統計卡片——收藏副數、總花費、平均評分一字排開。

這種「看著成品、想到什麼就講什麼、它接著改」的節奏，是 Lovable 最爽的地方。傳統上這每一個小調整都是一輪「改碼→存檔→重整→看結果」，現在變成一句話的事。

從一句話到一個 App，花了多久？

含我邊看邊想下一步要改什麼，整個過程大概十幾分鐘，就有了一個有質感、能新增、能篩選排序、還有統計儀表板的耳機收藏 App。如果用傳統方式自己刻，光是把深色版面和卡片網格調順就不只這個時間。

它生成的每一步，介面下方還會主動列出建議的下一步（像是「加入價格區間篩選」「加上總花費趨勢」「支援資料匯出」），等於連「接下來可以做什麼」都幫你想好了，照著點就能一路長大。

下一篇是這個系列的收尾——用了一輪之後，我對 Lovable 的真實心得：它的優缺點、適合誰、跟其他工具怎麼選，以及一個我自己很在意的問題：如果想做的是原生 App（例如用 Flutter），Lovable 接得上嗎？