在这篇「Lovable AI 中文教学」里，我会一步步跟你分享，怎么用Lovable (AI 网站生成器) 在3 分钟内做出一个完整网站，连网页、表单和资料库都能自动生成。
重点是，它真的让「不会写程式的人」也能做出能上线的网站。这次我亲自实测，把整个流程都拆解给你看，看它到底能做到多厉害。
Lovable AI 是什么？它厉害在哪？
简单来说，Lovable 是一个让你可以用「说人话」的方式来创造网站或应用程式的平台。
你完全不用会写程式码，只要打字或开口说话，就可以做出一个真的能用的成品。
你只要输入一段提示词，告诉它你想做什么，它就能帮你把整个网站的网页都生成出来。如果觉得结果不够好，只要再补充几句话，它就能马上改成你想要的样子，超方便的！
Lovable 要钱吗？
那用Lovable 要花钱吗？ ！我们可以到官网的「Pricing」(价格) 页面看看。
官网免费注册：https://lovable.dev/?via=myregister
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 和页尾，一应俱全！
网站做好了，要怎么修改成我想要的样子？
AI 生成的网站虽然很棒，但总有些细节想微调。
没问题，Lovable 的修改功能也超直观！
Lovable AI 做网站小技巧：指哪里，改哪里！
- 微调文字：直接点击文字区块就能修改，就像在用Word 一样。
- 调整间距、字体、颜色：点击旁边的小图标，可以用拖拉的方式直观地调整，非常方便。
用「对话」来进行大改造
我们来试个更酷的。假设我想把原本的两只猫咪改成三只，怎么做？
很简单，一样点击编辑图标，选取想改的区域，然后直接在对话框输入：「我想要改成三只可爱的猫咪」。
送出后，AI 就会立刻帮你变出来，是不是很神奇！
超强大！让AI 帮你建立资料库
还记得网站上有个「线上预约表单」吗？
一开始，就算访客填了表单，我们其实也收不到任何资讯，因为没有地方储存。
这在以前需要懂一些后端程式码才能做到，但用Lovable，你只要一句话！
我们选取那个表单，然后告诉它：「请设置资料库来储存预约资讯」。
接着它会引导你启用Lovable Cloud（免费版就能用），按几下「允许」之后，它就真的帮你把资料库建立好了！
之后只要有人预约，我们就能在后台的Database 清楚看到所有资讯，这功能真的太强大了！
连接你自己的域名(DNS 设定)
现在网站的网址是Lovable 给的一长串子域名，没什么辨识度。
所以，我们要把它换成自己注册的专属域名，这样才有属于自己的感觉！
自订域名是Lovable 付费版功能喔！
为了这次教学，我就自己掏钱升级了一下。
在Namecheap 设定DNS
注册域名的平台很多，我自己是习惯用Namecheap，因为它很便宜，操作也顺手。
设定的原理都一样，只是介面不同。
还没有自己的域名的话，可以点下面的按钮，在Namecheap注册一个域名。
不清楚域名注册流程的话，可以参考下面的教学影片。
以下是在Lovable后台新增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 工具有多简单、多强大。希望对你有帮助！
