某天我偶然發現 Lovable 這個寶藏網站,玩了一下才發現他竟然是 AI Vibe Coding。
讓我最驚喜的地方就是「快」,我隨便講幾句話,沒想到短短幾分就建好網頁,速度出乎我預料之外。
不過沒玩還好,玩了就有點上癮了,一直想拿來做些什麼。
Lovable 是什麼?
Lovable 是一個可以只靠文字,就幫你建立網頁或其他應用程式的AI Vibe Coding 網站。
特別在於:你不需要知道網站要怎麼做,只要把你的想法寫出來告訴他,它就會幫你做出網頁。
對想要嘗試建立個人網頁、作品集這種方式真的很友善。
以前自己要手刻網頁,或是用其他現成的系統,而且等到從頭摸到尾都不知道花了多少時間。
現在不用先想得很完整,直接就可以開始了,先讓它產生第一版,有個框架,再慢慢修成自己想要的就好。
嘗試一:私人圖書館
第一次使用 Lovable,我想建立一個可以記錄自己讀過什麼書,就像圖書館那樣。
這裡面可以列出我讀過的書,包含書封、作者、書名和年份。
我當時輸入了一行簡單的英文:
“create an online library museum which list all of my books, including book cover, author, title, year.“
大約過了三分鐘,我就得到了一個初步完成的網頁:
https://chapter-chest-gallery.lovable.app
出來的效果、介面和雖然偏陽春,但功能已經有我要的樣子了,光靠幾句話就能產生網頁,我覺得已經很厲害了。
如果你有一個概念,不知道如何下手,現在你可以實驗看看,很快就能先看到成果,這也是我覺得 Vibe Coding 最棒最實用的地方,你可以先把想法丟出來,馬上就能大概看到你要的樣子。
最方便之處
我覺得 Lovable 最方便的地方,是它讓「做網站」這件事變得比較沒有壓力。
很多時候我們只是有一個小想法,例如想整理書單、分享歌單、做作品集、記錄學習進度,但如果要自己從頭開始做,可能還沒開始就先放棄了。
Lovable 讓我覺得比較像是先有一張草稿,然後我再慢慢調整,這種方式真的容易很多。
而且它做完的每一步,都可以在網頁中直接預覽。我可以一邊看成果,一邊告訴它哪裡要改,整個過程很直覺。
嘗試二:歌單分享
因為第一個私人讀書館的嘗試,引起了我的興趣,我又去建了另一個分享音樂歌單的網頁。
一開始只是想單純分享平常聽的歌,簡單放歌曲資訊和喜歡的歌詞就好。
後來隔幾天,我又想到如果之後想自己新增或修改內容,就需要有一個地方來保存這些歌曲資料,所以我要求能有地方放這些資料,讓我自己能修改或刪除。
這部分也是透過輸入我的需求來讓它幫我實現這個功能。
這時候我才發現,原來 Lovable 是搭配 Supabase 資料庫來使用,甚至還能請他幫我產生聯絡表單,將這些資訊存到裡面去。
除了分享歌單之外,我覺得 Lovable 也很適合拿來做:個人頁、作品集、靈感收藏、記帳、學習紀錄、旅遊清單、等等。
我自己覺得它很適合拿來做一些「我一直有個想法,但一直都懶得開始」的小網站。只要先把想法打出來,它就能幫你生出第一版。
免費版額度
Lovable 讓我覺得很讚的另一個原因,是免費版就可以開始使用,但是相對就有限額。
它們是以 Credit 來計算。免費版一天最高可以使用 5 個 credits,一個月最多能用 30 個 credits。
Credit 就是使用額度的意思,但它不是每打一段話就固定扣 1 點,而是會依照你提出的要求來計算。
例如你只是請它改個文字,可能就花0.5 Credit;但如果你請它新增一整個頁面、加入比較完整的功能,可能就會花比較多 Credit。
所以我會建議一開始使用 Lovable 的時候,可以先把需求想清楚一點,也可以選擇Plan模式,讓他跟你討論完再執行。
大致上需求可以按這幾個方向輸入:
- 你想做什麼網站
- 需要哪些頁面
- 希望網站有什麼功能
- 喜歡什麼樣的風格
這樣比較不容易浪費額度,也能讓它一次產生比較接近你想要的版本。
儲存資料
如果只是單純放文字和圖片的靜態網站,Lovable 已經很夠用了。
但如果你想讓網站可以儲存資料,這時可以搭配 Lovable支援的Supabase 使用, 簡單來說就是一個放你的文件和資料的地方。
像我做歌單分享網站時,就希望之後可以自己新增歌曲、修改歌曲資訊、放連結,這時候就需要有地方保存這些內容。
所以直接在上面輸入 開啟 Supabase,並且依照我的需求記錄資料。因為我的歌曲資料都是公開分享,沒什麼秘密,所以直接用它提供的雲端功能就很方便。
更讓我驚喜的是,過程中,它還會主動問我需不需要登入功能,以及要不要設定成只有管理員可以編輯資料,看來基本資安有幫我把關。
我回答好之後,它就建立好了登入功能,還預設串好 Google 登入。只要告訴它我的信箱,它就能幫我設定管理員權限。
這種體驗真的很神奇,很多原本聽起來很複雜的功能,變成只要用文字溝通,就能一步一步做出來,感覺再難的東西,只要有心都能實現了。
心得
我自己使用 Lovable 的感覺是:它很適合把腦中的小想法快速做成網站。
不管是私人圖書館、音樂分享頁,還是其他類型的網站,只要先用幾句話描述需求,它就能很快產生,雖然一開始不一定完美,但至少你已經有一個可以看的東西,再慢慢來修改就好。
Lovable 也提供免費網址可以發布,這點我覺得非常方便,因為也省下了部署網站的時間,不用跑到很多不同地方設定,你只要在同一個地方完成就好。
對我來說,它最大的優點不是功能看起來多厲害,而是踏出第一步這件事,變得很簡單。先從一個小想法開始,做出第一版,再慢慢調整、增加內容和維護。
如果你也想建立個人網站、作品集,或只是想把生活中的興趣整理成一個網站,我覺得 Lovable 是一個很值得嘗試的工具,若你想做的是功能複雜的,還是要有專業技術的基礎下會比較好。
如果這篇 Lovable 使用心得對你有幫助,也歡迎分享給其他有興趣的朋友!