Lovable 教學：從零做出第一個可用的網頁應用

這篇是給第一次用 Lovable 的人看的。目標不是把所有功能都列一遍，而是帶著做完一個真正能用的小應用，並且在過程中建立正確的工作習慣。

會用到的例子是一個簡單的待辦清單：有登入、能新增與完成項目、資料會保存。範圍夠小，能在一個下午完成；也夠完整，涵蓋了真實應用會遇到的每一類問題。

開始之前：先想清楚再打字

Lovable 依照 Credit 計費，每次執行都會消耗額度，不論結果好壞。這代表一件事：花三十秒把需求想清楚，通常比連續送出三次模糊的指令更省。

這是整篇教學裡最重要的一句話。後面所有技巧都是它的延伸。

第一步：描述整體，而不是細節

第一個指令的目標是拿到一個能跑的骨架，不是完成品。

比較好的寫法會包含三件事：應用是做什麼的、有哪些主要畫面、資料長什麼樣子。例如：

做一個待辦清單應用。使用者可以註冊登入，登入後看到自己的待辦項目列表，可以新增項目、標記完成、刪除項目。每個項目有標題、建立時間、完成狀態。

這樣的描述有明確的邊界。相對地，「做一個待辦 app」會讓工具自行補上大量假設，而那些假設有一半你之後都要改掉，每改一次都要花 Credit。

第二步：一次只改一件事

拿到骨架之後，接下來的每一步都應該小。

不要一次說「加上分類、加上截止日期、改成深色主題」。分成三次做，每次確認結果再繼續。

理由很實際：如果三件事一起做，其中一件出錯，你很難判斷是哪一段出了問題，往往只能整段重來。分開做的話，錯誤會立刻對應到剛剛那一步。

第三步：描述問題，不要描述解法

這是新手最常見的浪費來源。

當畫面不對時，很多人會寫「把那個 div 的 margin 改成 16px」。但你通常不知道實際的結構長怎樣，這種猜測式的指令很容易讓事情更糟。

比較有效的方式是描述現象與期望：

待辦項目之間沒有間隔，看起來擠在一起。希望每個項目之間有明顯的留白。

讓工具自己決定怎麼做到。它看得到完整的程式碼，你看不到。

第四步：資料的部分要說清楚

需要保存資料的時候，把規則明確講出來，包括邊界情況：

待辦項目要存進資料庫。每個使用者只能看到自己的項目。刪除項目時直接刪掉，不需要保留紀錄。標題不能是空的。

最後那句「標題不能是空的」看起來瑣碎，但這類規則如果不講，之後幾乎一定要回頭補，而回頭補比一開始講清楚貴。

第五步：發布前先自己走一遍

在按下發布之前，把最常見的流程實際操作一次：註冊、登入、新增、完成、刪除、登出、再登入。

特別要試的是「不正常」的操作：空白的標題、很長的標題、重複點擊送出鍵。這些是最容易被略過、也最容易在真實使用者手上出問題的地方。

節省 Credit 的實用習慣

整理成四點：

先想再送。 三十秒的思考通常抵得上一到兩次執行。

切小。 一次一件事，錯誤會早點浮現。

描述現象，不要指定做法。 你的猜測很可能不準。

規則一次講完。 邊界情況先講，比事後補便宜。

如果經常撞到額度上限，先檢查這四點。多數人的消耗量問題出在習慣，而不是專案本身太大。

接下來可以往哪走

做完第一個應用之後，通常會遇到三種岔路。

想讓它真的上線營運、需要處理網域與資料庫維運，那要準備的東西會比工具本身多。

想讓它變得更精緻，通常會發現時間開始花在調整既有程式碼上，這時候有 AI 輔助的編輯器會比生成工具更順手。

想做下一個原型，那就重複這個流程。Lovable 最划算的使用情境，其實就是快速驗證一個想法值不值得繼續投入。

從免費方案開始就好

免費方案每月的 Credit 額度足以完成這篇教學裡的整個專案。先做完一輪，再決定要不要付費。

真正要回答的問題不是「這個工具好不好」，而是「這種工作方式適不適合我」。這個問題只有動手做過才知道。