Lovable AI中文教學：這「AI網站生成器」能製作任何網頁！

在這篇「Lovable AI 中文教學」裡，我會一步步跟你分享，怎麼用 Lovable (AI 網站生成器) 在 3 分鐘內做出一個完整網站，連網頁、表單和資料庫都能自動生成。

重點是，它真的讓「不會寫程式的人」也能做出能上線的網站。這次我親自實測，把整個流程都拆解給你看，看它到底能做到多厲害。

🎁 開始免費使用

這篇筆記是重點摘要版，建議你搭配下方的 YouTube 影片一起看，效果更好。

Lovable AI 中文教學｜這款「AI 做網站」工具太狠了，能自動製作任何網頁！

Lovable AI 是什麼？它厲害在哪？

簡單來說，Lovable 是一個讓你可以用「說人話」的方式來創造網站或應用程式的平台。

你完全不用會寫程式碼，只要打字或開口說話，就可以做出一個真的能用的成品。

你只要輸入一段提示詞，告訴它你想做什麼，它就能幫你把整個網站的網頁都生成出來。如果覺得結果不夠好，只要再補充幾句話，它就能馬上改成你想要的樣子，超方便的！

Lovable 要錢嗎？

那用 Lovable 要花錢嗎？！我們可以到官網的「Pricing」(價格) 頁面看看。

Lovable 有免費版，也有付費版。

對 AI 生成網站有興趣的話，可以先用免費版 Lovable 看看，當有需求的時候，再升級就好。

付費方案的好處就是有比免費版更多的額度，而且還能「自訂域名」，讓你的網站看起來更專業。

不過 AI 工具的價格方案變動實在是太快了，我建議你還是親自到官網看一下最準。

我的建議是：

想玩玩看 AI 生成網站：用免費版就綽綽有餘了。
想認真製作並長期經營網站：那可能就需要考慮升級到付費版。

Lovable 用法：實測用 AI 製作網站

▶️ 直接看影片 02:30 (實測用 Lovable AI 製作網站)

好，接下來就讓我們來實際操作一次吧！

步驟 1：註冊 Lovable 帳戶

首先，進到 Lovable 官網，點擊右上角的「Get Started」。

🎁 開始免費使用

你可以選擇用 Email 或其他方式註冊。

流程很簡單，註冊一下帳號，很快就能搞定！

步驟 2：用我的「提示詞模板」打造理想網站

為了幫助你做出更棒的網站，我特別製作了一個「AI 做網站的提示詞模板」。

照著這個模板填寫，生成出來的網站成果，會比你隨意描述需求好蠻多的！

提示詞模板：

提示詞

為了幫助你製作出理想的網站，我有製作了一個AI 做網站提示詞模板，照著填，生成出來的網站成果會比隨意描述需求好很多。

你可以點擊影片下方說明欄的連結到我的網站複製提示詞模板。


一、網站主題與目標受眾：
網站主題：
　請填寫你的網站主題
　例如：一家位於台北的日式拉麵店、一個專門介紹加密貨幣的部落格、一個展示攝影作品的個人作品集

目標受眾：
　請填寫你的目標受眾
　例如：喜歡日本料理的年輕人、對投資有興趣的初學者、需要攝影服務的潛在客戶


二、網站核心功能與特色：
核心功能：
　請填寫你網站最重要的 3-5 個核心功能
　例如：線上菜單、顧客評價、最新消息發布、作品分類展示、聯絡表單、線上預約

網站風格與特色：
　請填寫你希望網站呈現的風格與特色
　例如：簡約現代、溫暖舒適、專業可信賴、充滿創意與藝術感


三、網站內容與文案：
　請提供網站的主要文案、標題或關鍵資訊
　例如：
　　首頁標題：歡迎來到［你的品牌名稱］
　　關於我們：［一段簡短的品牌介紹］
　　服務項目：［列出你的主要服務或產品］
　　聯絡方式：［你的地址、電話、Email］


四、參考網站：
請提供一個你喜歡的參考網站連結
例如：請 AI 分析這個網站的佈局、風格和功能，作為生成你網站的參考

建議你先把模板複製到自己習慣的文字編輯器 (像是 Google 文件或備忘錄)，先把你的網站需求填好，再一口氣貼到 Lovable。

模板範例 (以「貓癒所」貓咪咖啡廳為例)：

網站主題與目標受眾：為愛貓人士、尋求放鬆的上班族打造的貓咪咖啡廳網站。
網站風格與特色：溫馨、可愛、簡約，使用溫暖色調。
網站內容與文案：需要有店家介紹、貓咪成員、菜單、入場須知、線上預約表單和聯絡方式。
參考網站：貼上喜歡的網站連結

每個地方只要填個一兩句重點就好，剩下的 Lovable AI 會幫你搞定！

下面是示範網站的完整提示詞：

提示詞

一、網站主題與目標受眾：
網站主題：
　一家位於台北市，提供高品質咖啡與貓咪互動的貓咪咖啡廳「貓癒所」。
目標受眾：
　喜歡貓咪的年輕人、情侶、以及需要放鬆療癒空間的上班族。
二、網站核心功能與特色：
核心功能：
　1. 可愛貓咪介紹：展示店內每一隻貓咪的照片、名字和個性。
　2. 線上預約系統：讓顧客可以預約來店時段。
　3. 餐點菜單：展示店內提供的咖啡、茶飲及點心。
　4. 消費方式說明：清楚告知入場費用及規定。
　5. 訪客須知與 Q&A：提供與貓咪互動的注意事項。
網站風格與特色：
　溫暖、療癒、可愛，使用大量貓咪的可愛照片，色調以木質調和暖色系為主。
三、網站內容與文案：
首頁標題：
　歡迎來到「貓癒所」，一個讓你被貓咪療癒的溫暖角落。
關於我們：
　「貓癒所」不僅是一家咖啡廳，更是人與貓咪建立深刻連結的橋樑。
　我們致力於提供一個舒適、乾淨的環境，讓每一位客人都能在這裡找到片刻的寧靜與快樂。
貓咪成員：
　拿鐵：店裡的撒嬌大王，最喜歡被摸下巴。
　布丁：好奇心旺盛的探險家，總在追逐雷射筆。
聯絡方式：
　地址：台北市 XX 區 XX 路 XX 號
　電話：02-1234-5678
　營業時間：週二至週日 11:00 - 21:00（週一公休）
四、參考網站：
　https://www.nekorepublic.jp/（日本一家知名的貓咪中途咖啡廳）

步驟 3：貼上 Lovable，見證奇蹟的時刻！

填好之後，我們把整段內容複製起來，貼到 Lovable 的輸入框，然後按下「送出」。

接下來，我們什麼都不用做，它就會在背景幫我們處理好一切。

大概等個 3 分鐘，網站就生成好了！

結果真的蠻厲害的，有漂亮的頁首圖片、可愛的元件、AI 自動生成的貓咪成員照片、簡約好看的菜單，甚至還有線上預約表單、常見問題、Google Maps 和頁尾，一應俱全！

網站做好了，要怎麼修改成我想要的樣子？

▶️ 直接看影片 05:21 (修改網站、網頁)

AI 生成的網站雖然很棒，但總有些細節想微調。

沒問題，Lovable 的修改功能也超直觀！

Lovable AI 做網站小技巧：指哪裡，改哪裡！

微調文字：直接點擊文字區塊就能修改，就像在用 Word 一樣。
調整間距、字體、顏色：點擊旁邊的小圖標，可以用拖拉的方式直觀地調整，非常方便。

用「對話」來進行大改造

我們來試個更酷的。假設我想把原本的兩隻貓咪改成三隻，怎麼做？

很簡單，一樣點擊編輯圖標，選取想改的區域，然後直接在對話框輸入：「我想要改成三隻可愛的貓咪」。

送出後，AI 就會立刻幫你變出來，是不是很神奇！

超強大！讓 AI 幫你建立資料庫

▶️ 直接看影片 06:40 (建立資料庫)

還記得網站上有個「線上預約表單」嗎？

一開始，就算訪客填了表單，我們其實也收不到任何資訊，因為沒有地方儲存。

這在以前需要懂一些後端程式碼才能做到，但用 Lovable，你只要一句話！

我們選取那個表單，然後告訴它：「請設置資料庫來儲存預約資訊」。

接著它會引導你啟用 Lovable Cloud（免費版就能用），按幾下「允許」之後，它就真的幫你把資料庫建立好了！

之後只要有人預約，我們就能在後台的 Database 清楚看到所有資訊，這功能真的太強大了！

連接你自己的域名 (DNS 設定)

▶️ 直接看影片 08:19 (連結自訂域名)

現在網站的網址是 Lovable 給的一長串子域名，沒什麼辨識度。

所以，我們要把它換成自己註冊的專屬域名，這樣才有屬於自己的感覺！

自訂域名是 Lovable 付費版功能喔！

為了這次教學，我就自己掏錢升級了一下。

如果你不熟悉 DNS 的概念，可以看這篇筆記進一步了解。

在 Namecheap 設定 DNS

註冊域名的平台很多，我自己是習慣用 Namecheap，因為它很便宜，操作也順手。

設定的原理都一樣，只是介面不同。

還沒有自己的域名的話，可以點下面的按鈕，在 Namecheap 註冊一個域名。

🎁 取得優惠

不清楚域名註冊流程的話，可以參考下面的教學影片。

以下是在 Lovable 後台新增 DNS 紀錄的流程：

▶️ 直接看影片 09:45 (設定 DNS)

在 Lovable 後台新增域名：到「Domains」→ 「Connect Domain」，輸入你在 Namecheap 買好的域名。
選擇手動設定：我個人習慣手動設定，所以選擇「Go to our manual setup」。
複製 A Record：Lovable 會給你兩組 A Record 的紀錄，包含「Host」和「Value」。
到 Namecheap 後台貼上：登入 Namecheap，找到你的域名管理頁面，進入「Advanced DNS」，把剛剛那兩組 A Record 分別新增進去。基本上就是複製貼上，很簡單！

等待生效：回到 Lovable 按下完成。DNS 紀錄更新通常需要等幾個小時才會在全球生效。當你看到後台那個閃爍的黑點消失時，就代表成功了！

現在，全世界的任何人只要在瀏覽器輸入你自訂的域名，就可以順利連上我們用 AI 做的超酷網站啦！

Lovable AI 中文教學的結語

這次的分享差不多到這邊。這篇文章主要是想帶你看看 Lovable 這款 AI 工具有多簡單、多強大。希望對你有幫助！