零安裝做出第一個網站:Lovable 實戰

上一課看完 2026 的工具地圖,你可能還是有個疙瘩:「我連終端機都沒開過,真的做得出網站?」很多人卡在這裡不是能力問題,是環境問題——光是裝 Node.js、設定編輯器、看到滿螢幕英文錯誤,熱情就先燒完了。所以這堂課我們刻意繞開所有安裝步驟:打開瀏覽器、登入 Lovable、30 分鐘內做出一個有公開網址、可以直接傳給朋友的網站。先贏一次,建立手感,後面的課才走得下去。

這堂課適合誰適合:想在最短時間做出第一個網站、還不想碰終端機和程式碼的人。需要基礎:零程式基礎 OK,但要會基本電腦操作(打字、開瀏覽器、註冊帳號)。前置課:第 1 課(建議先看工具地圖,知道 Lovable 在生態系裡的位置)。本課程屬進階應用專區。

這堂學什麼

看懂 Lovable 這類「瀏覽器建站工具」的完整流程:描述 → 生成 → 預覽 → 迭代 → 發佈
一套可以背起來的結構化 prompt 公式:目的 + 受眾 + 頁面 + 風格
迭代對話的三個原則,讓 AI 改設計一次到位、不亂動其他地方
免費額度的計費邏輯與省點策略,不要做到一半沒額度
把成品分享出去的三條路,以及跟 Bolt.new、v0 的差異對照

觀念:整個流程長什麼樣

先把地圖放在腦子裡,等一下實戰每一步你都知道自己在哪:

Lovable 零安裝建站流程:從一句話到上線網址

圖:Lovable 官網首頁(2026 年 7 月實況),來源:lovable.dev

重點是步驟 3 和 4 的循環:看預覽 → 下指令 → 再看預覽。你不是「寫一份完美需求書然後等結果」,而是像跟設計師坐在同一張桌子前,邊看邊講「這裡再大一點」「那個顏色換掉」。這個節奏就是 vibe coding 的核心,之後第 3 課換到 Claude Code、第 5 課講需求描述術,用的都是同一套心法。

那為什麼選 Lovable 而不是 Bolt 或 v0?三套都是瀏覽器工具,但定位不同:

三大瀏覽器建站工具對照(2026 年中)

一句話總結:Lovable 是三者中最「不像在寫程式」的,對話介面 + 即時預覽 + 一鍵發佈,零基礎摩擦力最小;Bolt.new 直接把編輯器攤在你面前,適合想順便看懂程式碼的人;v0 出身 Vercel,強在生漂亮的 React UI 元件,但要做「完整多頁網站」得多繞幾步。本課用 Lovable 示範,公式和心法三套通用。

觀念:需求怎麼描述,決定第一版的品質

丟「幫我做個網站」給 AI,它只能給你一個平均值:紫色漸層、玻璃卡片、英文假字,標準的「AI 味」模板。要跳出平均值,需求要包含四個要素:

結構化 Prompt 公式:目的 + 受眾 + 頁面 + 風格

目的:網站要達成的那一件事。是讓人詢價?報名?還是認識你?整個版面的優先順序由它決定。
受眾:給誰看。受眾決定語氣、資訊排序、甚至按鈕該寫「立即諮詢」還是「聊聊你的想法」。
頁面:明確列出要哪幾頁、每頁放什麼。不列,你就只會拿到一頁式 landing page。
風格:用具體形容詞 + 顏色描述。「好看」沒有資訊量,「米白底、大量留白、深綠 accent」才有。

手把手實戰:30 分鐘做出攝影工作室官網

我們用一個具體情境練習:幫朋友的家庭攝影工作室做官網。你可以直接照抄,也可以換成自己的題目(個人簡歷、社團介紹、小店菜單都行),公式不變。

註冊登入

打開 lovable.dev,用 Google 帳號登入即可,免費版不用綁信用卡。進去後就是一個對話框,長得像 ChatGPT,差別是右邊多了一塊預覽區。

先在記事本寫好需求,再一次貼上

不要在對話框裡即興發揮——每則訊息都吃額度,先寫好再貼最省。照四要素公式,把下面這段貼進去:

幫我做一個家庭攝影工作室的官網。
目的:讓看到作品的客人願意填表單詢價。
受眾:30–45 歲、想拍全家福的爸媽,重視溫馨感和價格透明。
頁面:首頁(hero 大圖+服務簡介+精選作品+顧客好評)、
作品集(相簿網格)、方案與價格(三個方案卡片)、
關於我(攝影師故事)、聯絡(表單:姓名/信箱/想拍的日期/留言)。
風格:溫暖極簡,米白背景、大量留白、深綠色 accent、
圓角卡片、標題用襯線感字體。
全站繁體中文,文案幫我先寫好台灣口語的版本。

注意最後一行:不特別講,Lovable 很常給你英文假字(lorem ipsum),之後還要多花額度改回來。

等生成,看預覽

1–2 分鐘後右側出現網站。先別急著挑毛病,把每一頁點過一遍,用預覽區上方的裝置切換鈕看一下手機版——台灣的訪客七成以上用手機開網頁,手機版破版比桌機版嚴重得多。

迭代:一次改一件事

把想改的地方列成清單,然後「一則訊息只講一件事」。例如:

首頁 hero 的標題改成「把全家最自然的樣子,拍成一輩子的紀念」,
副標刪掉,按鈕文字改成「看看方案」。其他地方都不要動。

改完看預覽,確認 OK 再下一條。結尾那句「其他地方都不要動」不是廢話,是在幫 AI 畫邊界,大幅降低它順手重排整頁的機率。

Publish 發佈

右上角 Publish 按鈕,確認後幾十秒內拿到 你的專案名.lovable.app 公開網址。打開無痕視窗貼上網址驗證一次——能開,代表這是真的公開網站,不是只有你登入才看得到的預覽。把連結傳給一個朋友,恭喜,你的第一個網站上線了。

迭代的功夫:爛 prompt vs 好 prompt

第一版永遠只是草稿,真正的差距在改版指令的品質:

迭代指令怎麼下:爛 prompt vs 好 prompt

三個原則:一次一件事(好驗收、改壞了好回滾)、指名位置(哪一頁、哪一區、哪個元件)、給驗收標準(數字、範例、具體描述)。另外有個免費技巧:改之前先「純提問」,例如「如果我想讓價格頁更有說服力,你會建議怎麼改?先不要動手」。提問通常不扣或只扣極少額度,等它講的方向你認可了再說「就照第 2 點做」,比直接讓它亂改省得多。

免費額度:規則先搞懂,不要做到一半斷糧

Lovable 免費額度怎麼用才不會卡關

免費版每天 5 credits,午夜(UTC,大約台灣早上 8 點)重置,當天沒用完不會累積。而且從 2025 年 7 月起改成按動作複雜度扣點:小樣式修改約 0.5、加個登入功能約 1.2、重生成一整頁約 2.0。換算下來,照本課的節奏(一次貼完整需求 + 每次改一件小事),一天額度大約夠你「生成初版 + 迭代三四輪」,剛好是健康的練習量。真的不夠,Pro 方案約 US$25/月(價格以官網為準);但我建議這門課期間先撐免費版——額度有限反而逼你把需求想清楚再出手,這個習慣到第 5 課會變成你的核心武器。

常見坑

坑 1:預覽突然白畫面 / 出現紅色錯誤 迭代到一半,預覽區整個空白,或跳出類似這樣的錯誤:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

這是 AI 改壞了程式碼(通常是把某個資料來源改掉,但用到它的地方沒跟著改)。解法:Lovable 偵測到錯誤時會出現 Try to fix 之類的修復按鈕,先按它,大多數情況一次就好;沒好,就把錯誤訊息全文貼進對話框叫它修。切記不要自己連按好幾次重新生成——燒額度又容易越修越亂。

坑 2:額度用完,對話框叫不動 畫面出現「You've run out of credits」或輸入框直接鎖住。免費版不能加購,只能等隔天重置。預防勝於治療:動手前把需求在記事本寫好、改版前先列清單排優先順序,把每天 5 點花在刀口上。真的天天卡,再考慮升級。

坑 3:叫它改 A,結果 B 和 C 也被動了 最常見的災難:你只要求改按鈕顏色,它順手把整個版面重排。兩層解法:事前,每次指令結尾加「其他地方都不要動」;事後,Lovable 每次修改都會存版本,在對話紀錄找到還沒壞掉的那一版按 Restore,回滾後把指令講得更窄再來一次。回滾本身不太花額度,比在壞掉的版本上救火便宜。

坑 4:網站上的圖片不能商用 Lovable 生成時塞的是佔位圖(常見來源是 Unsplash 之類的圖庫)。個人練習沒事,但如果這個網站要正式商用,請把圖換成你自己擁有授權的照片:對話框直接上傳圖片檔,跟它說「首頁 hero 背景換成我上傳的這張」。版權是紅線,別讓 AI 幫你踩。

分享出去:你的網站現在是真的了

免費版就能做到前兩條:公開網址直接傳人、開 remix 讓別人拿去改。第三條路——綁自己的網域、把程式碼同步到 GitHub 變成自己的資產——就是這門課接下來的主線。Lovable 很好,但你的網站住在別人家;等你想加更複雜的功能、想完全掌控程式碼、想不被平台額度綁住,就需要下一階段的工具。

作業

用四要素公式做一個「你自己的題目」的網站(不要照抄攝影工作室),至少三頁,發佈拿到 lovable.app 網址。
記錄你迭代了幾輪、每輪下了什麼指令,標出哪一條指令效果最好、哪一條讓 AI 改歪了。這份紀錄第 5 課會用到。
挑戰題:故意下一個模糊指令(例如「弄好看一點」),觀察 AI 改了哪些你沒要它動的地方,體感一下為什麼邊界很重要。

下一課預告

你現在有一個活的網站,但它有天花板:程式碼在 Lovable 手上、每天額度有限、複雜功能開始力不從心。下一課我們升級裝備——在自己的電腦上安裝 Claude Code,把終端機的恐懼一次拆掉,做一個真正屬於你、程式碼在你硬碟裡的個人品牌網站。這是從「會用工具」到「擁有作品」的關鍵一步。