Lovable AI 教學｜從原型到正式網站的開發與發布驗收

Lovable AI 可以用中文需求建立、修改並發布網站，也能加入資料庫、登入與應用功能。它可以用來做 MVP、原型與正式網站；是否能正式營運，要看資料權限、付款、用量及維護是否通過驗收。本文保留五步工作流，從第一個前台練習，走到公開網址與資料交接。

先記住三件事：Free 可以發布到 lovable.app，自訂網域與完整程式碼 ZIP 下載有付費條件；建置與線上服務會使用工作區共享額度，但各種贈額有用途限制；預覽能操作，不等於資料、金流與退場都已完成。想先分辨工具類型，可從AI 網站工具與上線流程總覽開始。

開始前：帳號、方案與費用怎麼算

依官方快速入門，可用 Email、Google、GitHub 或 Apple 建立帳號，並取得 Free 個人工作區；可以直接用中文寫需求。方案按工作區額度計費，不按成員席次或專案數計費；同一工作區的成員與專案會共用額度，不能把每位成員都當成另有一份配額。

來源：方案、級距與資格表、額度與用量、公開定價及 FAQ。價格不是台灣帳戶最終含稅報價（2026-11-05 核對）。

Free 的每日 5 點不累積，達到當月 30 點後，要等下個曆月重新發放。每日重置時間 00:00 UTC 相當於台灣上午 8 點。一般方案文件列 Pro／Business 的每日建置贈額沒有月上限，但定價 FAQ 另註部分地區方案仍有每月 30 點上限；購買前要看自己所選方案，不能保證所有付費帳戶都沒有月上限。Cloud、AI 與 connector 月贈額屬可調整的暫時提供。Enterprise 依合約，不直接套用此表。

同樣用一年比較：Pro 100 點級距若連續月繳，US$25 × 12＝US$300；年繳列 US$250，差 US$50，年費除以十二約 US$20.83／月。這只是方案訂閱的同期間算術，不包含加值、超出贈額的運作成本、網域、外部服務、匯差或銀行費，也不是可以月付 US$20.83。

額度是一個餘額，贈額卻不能隨意互換

官方仍使用一個 credit balance。用途限定贈額會先扣，用完才動用可支付該用途的一般額度；Usage details 的 Build credits 與 Run credits 是用量報表分類，不是兩個獨立錢包。建置用量、Cloud、應用內 AI，以及由 Lovable 代計的連接服務，都可能消耗一般額度。

例如：Cloud 月贈額與一般額度都耗盡時，即使還有當日 5 點建置贈額，資料庫也可能暫停，因為建置贈額不能支付 Cloud。反過來，有 Cloud 贈額也不表示可以繼續要求 AI 改程式。不要把「帳戶還顯示額度」當成每種服務都可用。

先分清原型與正式網站

原型驗證的是畫面與流程；正式網站還要能處理真資料、權限、錯誤、支出及故障。Lovable 官方定位涵蓋完整應用與網站開發，不能說它永遠只能做無法上線的原型。第一次練習可以不用登入或資料庫，等主要流程確認後再逐項加入。

步驟 1：用一個可驗收的小任務開始

先選一個真實任務，例如台灣服務品牌的介紹與詢價。把受眾、頁面、事實資料、手機版與成功條件寫清楚；原型先使用明確標示的假資料，不上傳客戶個資、金鑰或未授權素材。下面是編輯示例，沒有宣稱本篇已建立或測試這個網站。按「複製範本」後，把括號內容換成自己的資料。

請用繁體中文建立［品牌名稱］的服務介紹與詢價網站前台原型。
對象：［主要客群］；目標：讓訪客理解服務並找到詢價入口。
內容：首頁、服務介紹、常見問題與詢價頁，使用我提供的真實文案；缺少的資訊列出來，不捏造價格、案例或評價。
本輪不建立登入、資料庫、真金流或對外發信。詢價資料用明確標示的假資料，送出結果寫「前台示意，尚未送出」。
手機與桌機都要能操作，保留表單標籤、鍵盤焦點、必填與格式錯誤提示。
完成後列出頁面、已做與未接通的功能，以及需要我確認的項目；不要把畫面成功當成資料已保存。

第一版完成後，自己點導覽、表單與手機選單，記下哪些只是示意。要加入真詢價資料保存時，再寫清楚保存位置、誰能看、何時刪除及失敗如何提示。更多頁面句型可看AI 網站 Prompt 範本。

完成確認：每個需求都有可觀察的成功條件，假資料與未串接項目已標示，沒有把示意送出寫成真的收到詢價。

步驟 2：選對模式，逐段修改與存版本

Chat 優惠期限需要特別看：11 月 5 日讀取的Chat 文件與用量文件，仍把臨時計價與每日對話贈額的適用期限寫到 2026 年 10 月 31 日。該日期已過，本文不據此保證今天仍有免費對話，也不自行推定已改成某個新單價。使用前看帳戶當下顯示，並從回覆的 More options → Credits used 核對實際消耗。

Chat 的「不改程式」也不代表連接的 Slack、Notion 等外部工具只能唯讀。官方說明，外部建立、發送或修改動作可在取得同意後執行；若曾設定 Always allow，可能不再逐次詢問。第一次練習先不要接正式帳戶，把要做的事與允許修改的範圍說清楚。

來源：Plan 模式與研究計費、Chat 的專案與連接工具邊界、Build 用量（2026-11-05 核對）。

一次只改一件事，改完在右側預覽實際操作，再切換 Desktop、Tablet、Mobile。History 會保存版本，穩定版可加 Bookmark。版本還原文件明確說明：還原會回復程式碼並重新部署對應的 Edge Functions，不會回復資料庫資料，也不會撤回之後已執行的資料變更。舊到無法還原的版本可能只能預覽，不能把所有歷史都當成永久可還原的備份。

完成確認：主要流程在桌機與手機能走通，錯誤有提示；穩定版本已記錄，且知道程式還原與資料還原是兩回事。

步驟 3：加入資料、登入與付款前，先查權限

需要保存資料、檔案或登入時，可使用內建後端 Cloud，或依專案條件連接自己的 Supabase。Cloud 文件列出資料庫、驗證、儲存、即時更新與函式，並說明 Enable Cloud 等多項工具權限預設為 Always allow。開始處理資料前，建議到 Account settings → Preferences → Agent permissions，確認啟用後端、改資料庫與改資料的權限，必要時改為 Ask each time。

後端啟用時會決定資料區域，啟用後不能改動；Business／Enterprise 的工作區預設可能優先於個人設定。若要先確認區域，把 Enable Cloud 設為 Ask each time 後再檢查建立畫面，不能把 Asia Pacific 直接當成資料位於台灣。這是購前設定建議，本文沒有替你變更帳戶。

預覽與正式網站不等於兩份資料。預覽文件說明，預覽與已發布應用共用後端和資料；在預覽刪資料，也可能影響正式使用。先在隔離的測試專案用假資料測試，再加入真資料。正式環境的測試紀錄要可辨識，不要任意清空資料表。

台灣商家收款：先看資格，再測整段結果

內建付款文件列 Paddle 與 Stripe，需 Pro 以上及適用管理角色；數位商品、軟體與訂閱是主要情境。實體商品可另接 Shopify，或在符合資格時使用 Stripe，但庫存與物流仍要另處理。台灣商家先核營業主體、支援國家、商品類型、退款、物流及電子發票，不因選單有服務名稱就認定自己一定能申請。

內建付款的預覽是 test mode，只接受測試卡；發布網站是 live mode，需服務商驗證與正式啟用。這是付款的環境分離，不代表整個應用資料庫都隔離。依自己的產品測成功、拒絕、取消、退款與回傳通知，核對訂單、會員權限及通知是否一致，不能只看付款成功畫面。

來源：付款資格、test／live 與啟用條件。本文未申請服務或送出真實交易（2026-11-05 核對）。

完成確認：資料可讀回，兩帳戶隔離已測，付款在測試模式有完整成功與失敗紀錄；尚不能測的台灣服務資格已由負責人確認，不拿介面截圖代替核准。

步驟 4：發布、網域與搜尋設定

1. 按 Publish，確認 lovable.app 網址與 Who can view your site? 受眾；品牌公開頁與私人內部工具的權限不同。
2. 讀 Quick scan 結果並處理重大問題。預設有發現不一定擋發布，但企業政策可要求核准或阻擋；掃描通過也不是完整人工安全驗收。
3. 確認後發布，從無痕視窗開正式網址。日後修改仍需 Publish → Publish changes，預覽更新不表示訪客已看到新版本。
4. 付費方案要連自訂網域時，依 Domains 畫面處理既有網域與 DNS。手動設定照自己的畫面複製 A／TXT，確認沒有破壞原有郵件或其他服務；等狀態 Live，再檢查 HTTPS、主網域及轉址。

來源：發布、版本快照與安全政策、網域與 DNS 文件（2026-11-05 核對）。

SEO 入口與爬蟲驗收也要跟著改

現行入口是 More → Analytics → SEO & AI。依Lovable SEO 與 AI 搜尋文件，掃描在各方案包含，Try to fix 等修正會產生正常用量。公開後再 Scan again，核對正式網址的標題、描述、社群圖片、canonical、robots 與 sitemap；不能只看預覽裡的設定值。文件也說新專案不一定已有 sitemap，不能假設發布就全備妥。

只有可公開索引的網站才有搜尋機會；限制存取的網站與工作區品牌網址等情況要按文件核對。非 Enterprise 新專案自 2026 年 5 月 13 日起、Enterprise 自 6 月 22 日起，採 TanStack Start 伺服器渲染；較早的 React＋Vite 專案，則對已驗證爬蟲提供預先渲染。一般連結檢查器可能看到不同結果，可用 Google Search Console 網址檢查與社群預覽工具核對。

可以讀到內容、送出 sitemap 或掃描變綠，不保證排名、流量或 AI 引用。以正式站逐頁資料與後續 GSC 表現判斷，重要事實、限制與答案仍要寫在讀者看得到的正文。

完成確認：公開網址已顯示最新內容，手機、連結與真實功能能操作；網域 Live，SEO 檢查是公開版，受眾與索引政策符合目的。

步驟 5：安排用量監控、備份與交付

首頁能開，不代表後端仍正常

依低餘額與復原文件，可支付 Cloud 的月贈額及一般額度耗盡時，資料庫、登入與儲存等內建後端會暫停；應用 AI 額度耗盡也會失敗。公開頁面仍可繼續顯示，所以維護不能只查首頁有沒有開。資料雖保留，後端暫停期間卻無法存取或匯出。

付費方案的工作區 owner／admin 可在 Usage limits & alerts 設警示或阻擋。低餘額警示只通知；會 Pause Cloud 的限額可能讓正式功能停止。加值不會自動解除已觸發的用量限額，因為限額算的是已花用量；先查是餘額不足還是限額阻擋，依權限處理後，再到 More → Database 確認是否需要 Wake up。不要為了測試把正式站的餘額刻意耗盡。

來源：警示、阻擋與解除條件。自動加值是支出設定，先由負責帳務的人確認門檻與預算（2026-11-05 核對）。

程式、資料庫與檔案要分開交付

官方資料庫匯出目前要求資料庫在運作中，資料庫使用空間最多 15 GB，輸出檔最多 5 GB，每 24 小時可申請一次。匯出檔也會存在該專案 Storage，刪掉後端會連同它一起失去；要先下載到別處並驗證可還原。超出限制時按官方支援流程處理，不把匯出按鈕當作無條件全量備份。

來源：程式版本還原、資料庫備份、匯出與搬離、程式碼下載資格（2026-11-05 核對）。

搬到其他主機時還要看專案技術：舊 React＋Vite 可產生靜態檔，新 TanStack Start 也會跑伺服器端程式，不能一律丟到只能放靜態 HTML 的空間。依官方託管與移轉說明，後端、驗證、儲存、AI 與連接服務需逐一保留、重新設定或替換。接手者先在新環境測過，再安排網域切換。

完成確認：維護與帳務負責人、限額行為、備份來源及版本已寫清楚；接手者能讀取程式、資料庫及檔案，知道怎麼恢復服務，也知道哪些服務必須重建。

交付前，用這張表留下實際結果

以下是驗收紀錄的欄位建議，不是本篇的實測成績。每項填正式網址或版本、測試身分、預期與實際結果、時間及負責人；未通過的項目先修正，再決定是否公開。

哪些情況要再評估，以及怎麼和秒站比較

需要自訂資料流程或應用功能、願意安排開發與維護人力，可以評估 Lovable；主要經營品牌資訊、文章、課程或商品，則把內容管理、台灣交易需求與代管責任一起比較。Lovable 也能建官網或內容後台，但要實際確認怎麼建、誰維護，不能概括成它只能做原型或沒有 CMS。

秒站的方案與加購以公開方案頁為準；可取回範圍見資料打包與引用媒體教學。整體分工可看AI 工具與架站平台的責任分工。比較的是同一需求與期間的成本、權限及交付，不是「原型」和「正式」標籤。需要承接前端時，先看Vibe 畫布與兩種編輯工具的適用做法。

需要比較其他開發工具，可接著看Bolt.new 的費用與營運檢查、Replit AI 的部署與用量；希望自己在程式庫工作，再看AI 程式代理工具比較。若要試秒站，先用4 小時免費試用測日常任務，記下希望保留的內容，向客服確認當下可用的移轉方式。