Lovable — AI 全端應用程式生成器 是做什麼的？
概述
Lovable (lovable.dev) 可透過瀏覽器中的聊天提示生成並編輯網頁應用程式。專案使用 Tailwind CSS 和 shadcn/ui；自 2026 年 5 月起建立的應用程式使用 TanStack Start（伺服器渲染），較舊的則使用 React + Vite。後端方面，您可以選擇 Lovable Cloud（內建資料庫、身份驗證、儲存、即時功能與函式，基於 Supabase 的開源堆疊）或您自己的 Supabase 專案。程式碼可透過兩種方式與 GitHub 同步，應用程式則發佈至 lovable URL 或自訂網域。無需安裝任何軟體，也沒有 CLI；代理程式會協助撰寫優質提示、審查輸出結果，並在已同步的儲存庫上進行協作。
操作說明
1. 在第一次提示前先規劃
回答四個問題：這是什麼、誰會使用它、為什麼使用、以及關鍵動作是什麼。逐區塊描述應用程式，使用真實文案而非佔位符。Lovable 的建議：一整頁的提示會產生雜訊，逐區塊的提示則能提供清晰信號。指定一個設計方向（「簡約」、「高級」、「活潑」）來引導字體排版和間距。
2. 選擇後端
- 新專案：Lovable Cloud（預設）或 Supabase，在首次啟用後端時選擇。
- 已連接 Supabase 的現有專案可以繼續運作。目前無法從 Supabase 遷移到 Cloud，也無法一鍵從 Cloud 移至您自己的 Supabase 專案，因此請及早決定。
3. 在模式中工作
Lovable 有「代理模式」（建構和更改內容）和「聊天模式」（討論、規劃，不進行編輯）。規劃模式每則訊息消耗 1 個點數；一般編輯根據複雜度大約消耗 0.5 到 1.7 個點數。在提示中加入「在開始建構之前，請先問我任何你需要的問題」以獲得釐清問題。將持久的規則（如技術堆疊、命名慣例、語氣）放入專案或工作區知識庫，以便在對話之間保持不變。
4. 審查安全性
產生的資料表應啟用資料列層級安全性（Row Level Security）。請閱讀每一條政策，執行內建的安全性掃描，並在發佈前使用兩個不同的使用者帳號進行測試。
5. 同步並擁有程式碼
從專案設定中連接 GitHub。同步是雙向的，一次只針對一個分支（除非切換，否則為預設分支）；新分支從活動分支開始。您只能將 Lovable 專案匯出到 GitHub，無法匯入現有儲存庫，且 Lovable 無法編輯超過 10 MB 的檔案。中斷連接會保留兩個副本，但重新連接會建立一個新的儲存庫。
6. 方案
提供免費版、Pro 版、Business 版和 Enterprise 版；定價是基於點數而非座位數。免費版包含每日 5 個建置點數（每月最多 30 個）以及少量的 Cloud 點數。請參考 lovable.dev/pricing 查看最新價格。
範例
範例 1：附有推薦功能的等候名單應用程式
需求：「使用 Lovable 建立一個 SaaS 等候名單：包含計數器的註冊表單、推薦連結、排行榜和一個管理員頁面。」
要貼入的提示：
建立一個名為 "Parcelly" 的等候名單網站，這是一個專為 Etsy 賣家設計的運送標籤工具。
區塊：英雄區塊（"10 秒內列印標籤"），包含一個電子郵件表單和即時註冊計數器；
一個顯示前 10 名推薦者的排行榜；一個需要電子郵件登入的 /admin 頁面，
列出所有註冊者並可匯出 CSV。
每位註冊者都會獲得一個唯一的推薦連結 (?ref=code)，
推薦人可因此獲得積分。
風格：簡約、深色模式。使用 Lovable Cloud 處理資料和身份驗證。
在開始建構之前，請先問我任何你需要的問題。
結果：Lovable 會詢問有關邀請電子郵件的問題，然後建立頁面、一個 signups 資料表及相關政策，並提供一個預覽 URL。一個可供與生成的政策進行比對的合理資料表與政策集：
create table public.signups (
id uuid primary key default gen_random_uuid(),
email text not null unique,
referral_code text not null unique default encode(gen_random_bytes(6), 'hex'),
referred_by uuid references public.signups(id),
created_at timestamptz not null default now()
);
alter table public.signups enable row level security;
create policy "anyone can join" on public.signups for insert to anon with check (true);
-- 讀取所有行必須限制為管理員，例如透過 user_roles 資料表
範例 2：迭代並同步到 GitHub
需求：「新增一個隨時間變化的註冊人數圖表，然後將程式碼放進我的儲存庫，這樣我就可以在 Cursor 中繼續開發。」
聊天提示：「在 /admin 頁面中，使用現有資料新增一個每日註冊人數的折線圖；當沒有註冊資料時顯示空狀態。」然後：專案設定，GitHub，連接，選擇帳戶並建立儲存庫。之後：
git clone [email protected]:parcelly-dev/parcelly-waitlist.git
cd parcelly-waitlist && npm install && npm run dev
推送到已同步分支的內容會出現在 Lovable 中；請將本機編輯保留在該分支上（或在專案設定中切換分支）。
指導原則
- 將所有核心功能放在第一個提示中，然後每次後續對話只更改一件事，以便版本歷史記錄保持有用；為可運作的版本加上書籤。
- 不要將 API 金鑰貼入聊天對話；請使用密碼/整合對話方塊。伺服器端金鑰應放在後端函式中，絕不能放在客戶端程式碼中。
- 絕不要盲目信任生成的 RLS：對於公開表單，
insert ... with check (true)政策是可行的，但select政策則不行。 - 點數用於建置、託管和 AI 功能，且不可退款；對於問題，建議優先使用聊天/規劃模式。
- 不適合原生行動應用程式、高度自訂的後端或複雜的現有 monorepo：請改為在儲存庫中使用編碼代理程式。