第一個應用程式
官方 Quick start 的目標是:大約十分鐘,從第一則提示詞走到可分享的網址。不必安裝任何東西。
第一則提示詞怎麼寫
在儀表板中央的提示框描述你要的網站。第一版先不要登入、不要資料庫,少一件會出錯的事,之後再用一則提示詞加上去。
可以改寫官方咖啡廳範例:
幫「小蕨咖啡」做一個社區咖啡廳網站。
要有溫暖的主視覺(標題+照片)、可依分類篩選的菜單(咖啡、早餐、午餐、甜點)、營業時間,以及地址與「如何找到我們」的短文。
全部使用逼真的範例內容。風格舒適、歡迎上門。手機也好用。
目前不要登入,也不要資料庫。
最後一行很重要。第一版只做畫面與互動,資料先寫死在頁面上,你才能專心看版面與文案。
看第一版出現
送出後 Lovable 會開專案並開始建置。完成後進入編輯器:左對話、右預覽。先在預覽裡點過菜單篩選、捲過各區塊,確認它真的能用,再開始改。
之後每一次變更都會存成版本。改壞了可以還原,不會永久弄丟。
一次改一件事
不要寫「把網站變好看」。改成可檢查的一項:
畫面風格不對,直接講感覺也可以:
改完就在預覽檢查。小的文字或按鈕,用預覽工具列選取該元素再說,或直接在頁上改文案。
發布
右上角按 Publish。Lovable 會給一個 lovable.app 網址,可改名稱後再確認。免費方案也能發布。
最常讓新手愣住的一點:公開網站是快照。之後在預覽裡改的內容,要再按 Publish → Publish changes 才會出現在公開網址。
整圈就是:描述、檢查、發布。再複雜的產品也是這個迴圈重複做。
官方示範影片
這支官方短片示範如何開新專案、寫第一則提示詞,並看到顧客回饋 App 的預覽。對應上面「送出提示詞 → 看第一版」這一步。
來源:Lovable
想一次把介面、提示詞與 Cloud 走完,看官方入門總覽(約 17 分鐘):
來源:Lovable