透過 AI 無程式碼快速架設全端會員網站：Lovable 實作指南

近年來 AI 帶動了 Vibe Coding 的崛起——你只需用自然語言描述想法，AI 便會自動生成並組裝程式碼。這對於「沒有完整前後端經驗」或「不想自己搭環境、處理資料庫」的人而言，是一條極有效率的開發路徑。

在這股潮流中，出現一個非常方便的平台 Lovable ，你像和 ChatGPT 對話一樣輸入需求，它就能：

• 產生前端頁面
  （支援 RWD 與基本互動）
• 串接後端服務
  （常見搭配 Supabase 做資料庫與 Auth）

並且一鍵直接佈署網站，免去 CI/CD 與伺服器設定的麻煩。

今天這篇文章，我會示範用 Lovable 從快速建立一個具會員登入、表單提交、訂單管理的全端網站，帶你一步步完成需求描述、資料庫建置、權限設定，到最後的上線與自有網域綁定。

準備工作

1. GitHub 帳號：https://github.com/
   （建議用它登入 Lovable，之後程式碼也會推到你的 Repo）
2. Lovable 帳號：https://lovable.dev/
3. Supabase 帳號：https://supabase.com/
   （Lovable 常用的後端方案，可用 GitHub 一鍵登入，或在 Lovable 建專案時跟著流程註冊）

先把 GitHub、Supabase 都註冊好，Lovable 建資料庫與部署會更順。

實作流程總覽

Step 1｜第一次 Prompt：用自然語言描述需求

在 Lovable 的 Prompt 區輸入（示例）：

我想做一個類似以上連結的客製化旅遊網站
https://profoundlifetw.com/
網站提供的服務是幫助客戶製作客製化旅遊行程
首頁說明客製化旅遊的優點、實際案例(旅遊行程)
分頁有客製化旅遊表單，讓客戶可以填寫表單，
確認旅遊地點、出發及回程日期、是否有特殊需求、
想去的景點、是否想製作精美旅遊小卡等
送出表單後管理者可以收到通知，並且管理者有後台可以查看客戶表單
客戶可以登入查看已經送出的表單

撰寫提示重點：

• 說明網站用途、首頁要放什麼
• 指出分頁與功能
• 其他功能，如訂單管理
• 提供網站網址，讓Lovable 參考風格

記得點擊右上方 GitHub、Supabase 按鈕完成授權。

Lovable 初次回覆時，會說明它預計使用的技術、頁面結構，也可能提醒你連結 Supabase。

Step 2｜連接 Supabase 並建立資料庫

完成 Supabase 專案後，Lovable 會提示執行串接prompt：

Please connect my supabase project `travel-website`

執行串接後，可到 Supabase 後台查看專案： Supabase後台

初期可能還沒有資料表（Tables），沒關係，後面我們會用 Prompt 請 Lovable 幫你建立。

Step 3｜生成網站並預覽

資料庫連好後，請 Lovable 開始建站。等待數十秒～數分鐘（看複雜度）即可。

完成後：

• 右側可直接 Preview
• 點 Publish > Preview 開啟預覽網址
• 預設就有 RWD、按鈕 hover 效果，整體風格也蠻協調

Step 4｜補齊分頁與表單功能

初版常見問題：
某些按鈕點了會跳 404。

再次下 Prompt：

網站的「立即開始規劃」及「客製化旅遊」按鈕會跳到 404 頁面，
請製作一個表單讓客戶填寫旅遊需求。
另外旅遊案例卡片，點擊後可以開啟完整旅遊行程頁面。

再次 Preview 即可看到需求表單分頁。

但此時表單送出、會員註冊資料通常尚未真正寫入資料庫，因為 Table 還沒建。

Step 5｜建立資料表

下 Prompt 要求 Lovable 建表：

目前已經有建立會員 table 及表單行程 table 了嗎？
如果還未建立就建立相應 table。
另外註冊會員需檢視是否已註冊、
會員登入後，會員登入會變更為登出，並且出現「查看訂單」選項，
可以看已經送出的旅遊表單。

撰寫提示重點：

• 請它建立 users、orders 等資料表
• 註冊時要檢查重複
• 會員登入後可看到自己的訂單
• 管理員則能看到全部訂單

送出 Prompt 並確認 migration，Supabase 後台就會出現新表格：

Step 6｜細節微調與權限管理

預覽網頁並檢查需調整處，繼續用 Prompt 調整 UX / 權限邏輯：

調整使用者登入後，首頁導覽列不要再顯示「會員登入」按鈕，改為「我的訂單」。
會員分為管理者與一般會員，註冊即為一般會員，後台可將使用者改為管理者。
若為管理者，導覽列增加「管理訂單」按鈕，可查看所有訂單並更改訂單狀態。
首頁移除「客製化旅遊」按鈕，改用「開始規劃」、「立即開始規劃」兩個按鈕，並導到正確路徑。

為了控管權限，Lovable 建立了 user_roles Table。我們可以在 Supabase 直接下 SQL指定用戶為管理者：

-- 將特定用戶設為管理者 (替換 'user-email@example.com' 為實際 email)
INSERT INTO public.user_roles (user_id, role)
SELECT id, 'admin'::app_role
FROM auth.users
WHERE email = 'user-email@example.com'
ON CONFLICT (user_id, role) DO NOTHING;

成功後，用管理者帳號登入，就會看到「管理訂單」選項：

Step 7｜Code Mode 進階調整

若只是改字、改年份、換圖片，可以直接改碼：

1. 右上角切換到 Code Mode；
2. 找到檔案（例如 src/pages/index.tsx）；
3. 修改後按 Save，Lovable 會自動重新建置。

不想寫程式也沒關係，一切都可以用 Prompt 請 AI 幫你改。

Step 8｜一鍵佈署，綁定網域

確認無誤後，按右上角 Publish：

Lovable 會給你一個預設網址：

之後若要使用自有網域（如 GoDaddy 購買），把網域 CNAME 指到 Lovable 提供的域名即可完成綁定。

成品展示

• 客製化旅遊網站
  （包含 會員登入／填寫需求表單／訂單管理 功能）
• Demo 網站：

>> 客製化旅遊網站<<

Lovable 定價與限制

• 免費版：每日 5 次 Prompt，上限每月約 30 次；頁面會有 Lovable 浮水印。
• 付費版：USD $25 / 月，每月 100 次 Prompt，移除浮水印。

建議：專案需要大量 prompt 可先買一個月，調整完再停掉也行。

常見問題／踩雷筆記

後續優化方向

SEO：

• 在 Code Mode 加上 <meta>、Open Graph、JSON-LD schema
• 針對文章／案例頁做關鍵字與結構化資料

追蹤分析：

• 嵌入 Google Analytics / Google Tag Manager
• 事件追蹤（表單送出、註冊成功等）

自有網域設定：

• Lovable Settings → Domain 輸入網域，取得 DNS 記錄
• 到 GoDaddy（或其他註冊商）新增 CNAME／A 記錄
• 回 Lovable 驗證，成功後即可使用品牌網域。

Email / 通知：

• 表單送出寄信通知管理者
• 使用 Supabase Functions、Resend、SendGrid 等第三方服務

結語

這次示範利用 Lovable + Supabase，在不到一小時內就完成：

• 會員登入註冊
• 客製化旅遊需求表單
• 訂單管理（一般會員 vs 管理者）
• 一鍵部署

對於想快速驗證想法、建立 MVP 或是希望用「自然語言」就能開發網站的人來說，Lovable 是一個非常方便的工具。當然，如果你熟悉網站架構與程式碼，就能更精準地告訴 AI 要改什麼——例如 SEO 優化、GA 追蹤碼、資料庫安全性等，也能直接進 Code Mode 進行微調。

希望這篇實作指南能幫助你快速上手，也歡迎把成品、遇到的問題留言分享，一起交流！ 🙌