iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Modern Web

Lovable:地球上最強的 AI 生成全端網站 Agentic 開發實戰系列 第 30 篇

第 30 章:從原型到正式上線的 Agentic 檢查清單

  • 分享至 

  • xImage
  •  

本章目標

讀完這一章,你會得到一套可以重複使用的 Lovable delivery checklist。無論你做的是 landing page、會員平台、AI 工具、內部營運工具,或下一個自己的產品,都可以用這套流程把 vague idea 變成可驗證、可發布、可維護的 production(正式上線)app。

全書最後要留下的不是一堆功能名稱,而是一個工作方式:

想法 -> 規劃 -> 建置 -> 驗證 -> 安全檢查 -> 發布 -> 迭代

Lovable 的強大不在於你可以用一句話生成很多畫面,而在於它能把自然語言變成 agentic full-stack workflow(工作流)。你要學會的,是如何讓這個 workflow(工作流) 每一步都有品質門檻。

為什麼需要總檢查清單

AI 生成工具最大的誘惑是速度。

速度本身不是問題。問題是你可能在沒有釐清需求、沒有驗證資料、沒有檢查權限、沒有測試 live flow 的情況下,把東西 publish 出去。

這本書從第 1 章到第 29 章其實一直在重複同一個觀念:

不要只問 Lovable 能不能做。
要問這個功能是否有規格、資料、權限、測試、安全、發布與迭代計畫。

這章把前面所有內容整理成一套可以印下來、貼在專案旁邊的檢查清單。

最後一次練習,請從前面四個台灣案例任選一個,用本章重新審查:

案例 最重要的資料風險 必做的故障演練 上線證據
營隊招生 兒童與家長資料、名額超賣 最後名額競爭、付款回傳重送 權限矩陣、對帳紀錄、通知失敗待辦
診所預約 預約個資與醫療資料越界 同時搶時段、改期、提醒失敗 無病歷資料、櫃檯權限、保存政策
小型電商 價格竄改、庫存與收件資料 重複付款、物流與發票失敗 訂單快照、庫存事件、交叉狀態看板
採購簽核 跨部門存取與自我核准 重複決策、停權、外部 API 中斷 Revision、決策事件、代理與停權證據

審查不能只勾選「已完成」。每個重要項目至少附上一項畫面、資料事件、測試結果或正式設定作為證據。

思考模型:Agentic delivery loop

Lovable 的 agentic delivery loop 有七段:

想法
規劃
建置
驗證
安全檢查
發布
迭代

每一段都有一個核心問題:

Stage Core question
Idea 你到底要解決誰的什麼問題?
Plan AI 是否先理解規格、資料與風險?
Build 這次要實作的範圍是否夠小且可驗證?
Verify 你如何證明它真的可用?
Secure 誰能看、誰能改、哪些資料不能外洩?
Publish 上線設定是否正確,live site 是否驗證?
Iterate 下一步是根據證據前進,還是只是加功能?

如果你只做 Build,就會得到快速 prototype(原型)。

如果你跑完整 loop,才會得到可以持續前進的產品。

階段 1:想法清晰度

Lovable 最佳實務官方文件

圖 30-1:完整交付循環從清楚的問題、範圍與 non-goals 開始,再逐步進入建置。

第一步不是 提示詞。第一步是釐清想法。

請先回答:

  • 這個 app 給誰用?
  • 使用者現在怎麼解決這個問題?
  • 這個 app 的第一個成功行為是什麼?
  • 這次只做哪一個流程?
  • 哪些功能明確不做?
  • 資料從哪裡來?
  • 這是 public app、member app、AI tool,還是 internal tool?

提示詞:

請在建置前協助我釐清產品想法。

想法:
請在這裡描述應用程式構想。

請回傳:
- 目標使用者。
- 主要問題。
- 第一條使用者流程。
- 涉及的核心資料。
- 第一版應包含的內容。
- 第一版明確不包含的內容。
- 最大風險。
- 一段可作為專案背景的產品規格。

好規格通常包含「不做什麼」。這能保護專案不被 AI 生成速度拖進過大範圍。

Checklist:

  • [ ] Target user 是否明確?
  • [ ] Primary problem 是否明確?
  • [ ] First user journey 是否能用 5 步以內描述?
  • [ ] V1 scope 是否小到可以驗證?
  • [ ] Non-goals 是否列出?
  • [ ] App 類型是否明確?

階段 2:規劃品質

Lovable Plan Mode 官方文件

圖 30-2:Plan Mode 用於先確認架構、步驟與風險,讓後續實作保持可控。

進 Build Mode 前,先讓 Lovable 計畫。

Plan 的品質要看:

  • 是否拆出 routes。
  • 是否拆出 data model。
  • 是否提到 auth(驗證)。
  • 是否提到 integrations。
  • 是否提到 edge cases。
  • 是否提到 verification。
  • 是否提到安全風險。
  • 是否有順序,而不是一次做完全部。

提示詞:

請在編輯程式碼前建立實作計畫。

應用情境:
請描述目前的應用程式與目標功能。

請包含:
- 路由變更。
- 使用者介面元件。
- 資料模型變更。
- 身分驗證或權限假設。
- 外部整合。
- 邊界情況。
- 安全疑慮。
- 驗證計畫。
- 建議的實作順序。

先不要寫程式碼。

Plan 不需要完美,但必須暴露風險。沒有風險的 plan 通常只是看起來漂亮。

Checklist:

  • [ ] 是否先進 Plan Mode?
  • [ ] 是否要求不要先改 code?
  • [ ] 是否看過 route plan?
  • [ ] 是否看過 data plan?
  • [ ] 是否看過 auth(驗證)/ permission assumptions?
  • [ ] 是否看過 test plan?
  • [ ] 是否刪掉不該做的 scope?

階段 3:建置範圍

Build 要小。

好的 Build slice 是:

一個明確功能
一組明確檔案或區域
一個可測結果
一組明確不碰的東西

壞的 Build Mode(建置模式)提示詞:

請建置完整的 SaaS 產品。

好的 Build Mode(建置模式)提示詞:

只實作候補名單表單的資料儲存功能。

背景:
- 產品介紹頁的使用者介面已存在。
- 表單已有 name、email、company、role、team_size 與 message 欄位。

需求:
- 請建立 leads 資料表。
- 送出時新增一筆資料。
- 顯示載入中、成功與錯誤狀態。
- 妥善處理重複的 email。

限制:
- 不要重新設計產品介紹頁。
- 不要加入登入功能。
- 不要加入付款功能。
- 不要加入管理後台。

驗證方式:
- 說明如何確認資料已成功新增。
- 列出需要重新執行的測試。

每次 Build 都要限制 collateral changes。Lovable 能改很多,不代表你應該讓它一次改很多。

Checklist:

  • [ ] 這次是否只做一個功能 slice?
  • [ ] 是否明確說不要碰哪些區域?
  • [ ] 是否要求保留既有 routes?
  • [ ] 是否避免同時做 UI(使用者介面)、database、auth(驗證)、payment、AI?
  • [ ] 是否有 acceptance criteria?
  • [ ] 是否要求 Lovable 回報改了什麼?

階段 4:資料模型

只要 app 有資料,就要先想 data model。

問自己:

  • 這些資料是 public 還是 private?
  • 誰可以 create?
  • 誰可以 read?
  • 誰可以 update?
  • 誰可以 delete?
  • 是否需要 owner_id?
  • 是否需要 status?
  • 是否需要 audit / activity log?
  • 是否需要 soft delete?
  • 是否會進 sitemap?

提示詞:

請在實作前檢查資料模型。

功能:
請描述功能。

請提出:
- 資料表。
- 欄位。
- 必填欄位。
- 關聯關係。
- 擁有者或租戶欄位。
- 狀態欄位。
- RLS 存取模式。
- 哪些資料可以公開。
- 哪些資料必須保密。
- 哪些資料不應儲存。
- 資料遷移風險。

Data model 不清楚時,不要急著做 UI(使用者介面)。UI(使用者介面)可以很快改,資料和權限一旦錯了,後面會更難修。

Checklist:

  • [ ] Tables 是否明確?
  • [ ] 每張表是否有 owner / tenant / visibility 規則?
  • [ ] Public data 是否和 private data 分清楚?
  • [ ] Status 是否有 enum 或受控值?
  • [ ] 是否避免儲存不必要敏感資料?
  • [ ] 是否知道 migration 風險?
  • [ ] 是否有 backup 或測試環境考量?

階段 5:驗證與權限

Auth(驗證) 是「你是誰」。Authorization 是「你能做什麼」。

不要混淆。

常見 pattern:

  • Anonymous can read public content。
  • Authenticated user can manage own content。
  • Team member can access team data。
  • Admin can manage settings。
  • Public can submit form but cannot read submissions。
  • Paid user can access paid feature。

提示詞:

請檢查這項功能的身分驗證與授權。

使用者類型:
- 未登入使用者。
- 已登入使用者。
- 擁有者。
- 管理員或經理。
- 付費使用者(若適用)。

針對每種使用者,請定義:
- 可以存取的路由。
- 可以讀取的資料。
- 可以建立的資料。
- 可以更新的資料。
- 可以刪除的資料。
- 應該看見的介面操作。
- 強制執行權限的後端規則。

標示目前僅由前端限制的規則。

如果某個權限只存在於 UI(使用者介面),那它不是安全規則,只是顯示規則。

Checklist:

  • [ ] 是否分清 authentication 和 authorization?
  • [ ] Anonymous 行為是否明確?
  • [ ] Authenticated user 行為是否明確?
  • [ ] Owner / admin / manager 行為是否明確?
  • [ ] UI(使用者介面)隱藏是否沒有被當成安全?
  • [ ] Backend(後端) 或 RLS(Row Level Security,列層級安全) 是否 enforce 權限?
  • [ ] Role 是否不能由普通使用者自行修改?

階段 6:第三方整合

第三方整合要問三件事:

誰擁有憑證?
誰能使用連線?
失敗時產品怎麼處理?

適用整合:

  • Paddle for payments。
  • Resend or custom emails for transactional messages。
  • Lovable AI or AI connectors。
  • Slack for team notifications。
  • Airtable / HubSpot / Notion for business data。
  • GitHub sync for code collaboration。
  • Google Search Console for SEO。

提示詞:

請在實作前檢查整合設計。

整合服務:
請填入服務名稱。

請定義:
- 支援哪一項商業工作流程。
- 需要哪些憑證或連線。
- 哪些人可以建立或管理連線。
- 需要哪些權限範圍。
- 整合失敗時應如何處理。
- 哪些資料會傳送至整合服務。
- 哪些資料會儲存在本機。
- 如何安全地測試。
- 如何中斷連線或輪替憑證。

對台灣讀者,本書金流主線是 Paddle。不要讓 AI 自動把付款流程帶向其他 provider,除非你的產品確實有不同地區與法務需求。

Checklist:

  • [ ] Integration 是否真的必要?
  • [ ] Credential 是否在 backend(後端)/ connector 中?
  • [ ] Frontend(前端) 是否沒有 secret?
  • [ ] Scopes 是否最小化?
  • [ ] Failure state 是否設計?
  • [ ] 是否有 sandbox 或 test data?
  • [ ] 是否有 disconnect / rotate plan?

階段 7:驗證

Lovable 測試與驗證工具官方文件

圖 30-3:最終驗證組合使用 browser testing、frontend tests 與 edge tests 覆蓋不同層次。

「看起來可以」不是驗證。

你需要選對測試方式:

  • Browser testing(瀏覽器測試): 驗證完整使用者流程。
  • Frontend tests(前端測試): 鎖住 UI(使用者介面)行為、表單、狀態。
  • Backend(後端) verification: 驗證 Edge Function、權限、付費、AI、webhook(事件回呼)。
  • Security scan: 檢查 RLS(Row Level Security,列層級安全)、schema、dependencies、access control。
  • Live smoke test: 發布後在 live URL 測。

提示詞:

請為這項功能建立驗證計畫。

功能:
請描述功能。

請包含:
- 瀏覽器測試案例。
- 前端測試(若有幫助)。
- 後端邏輯存在時的後端驗證案例。
- 資料檢查。
- 身分驗證與權限檢查。
- 安全檢查。
- 發布後的正式環境冒煙測試。

針對每個測試,請列出:
- 操作步驟。
- 預期結果。
- 失敗代表的問題。
- 失敗是否會阻擋發布。

不要要求 Lovable「改完順便測所有東西」。大型變更和測試最好拆成兩個 提示詞。先 build,再 verify。

Checklist:

  • [ ] 是否有 happy path?
  • [ ] 是否有 invalid input?
  • [ ] 是否有 unauthorized case?
  • [ ] 是否有 second user / non-owner case?
  • [ ] 是否有 integration failure?
  • [ ] 是否有 mobile check?
  • [ ] 是否有 live smoke test?

階段 8:安全

發布前問:

  • 有沒有 secret 在前端?
  • RLS(Row Level Security,列層級安全) 是否啟用?
  • 使用者能不能看別人的資料?
  • Edge Functions 是否驗證 session?
  • 付費與用量是否在 backend(後端)enforce?
  • Error message 是否露出 raw details?
  • Logs 是否保存不該保存的敏感資料?
  • Connector scopes 是否過大?
  • Public routes 是否暴露 private data?

提示詞:

請在發布前執行安全審查。

請著重檢查:
- 外洩的密鑰。
- 身分驗證與路由保護。
- RLS 政策。
- 擁有者或租戶之間的資料隔離。
- Edge Function 授權。
- 整合服務憑證。
- 付款或權益檢查。
- 錯誤訊息。
- 紀錄與敏感資料。
- 公開路由與私有路由的區分。

請回傳:
- 阻擋發布的重大問題。
- 高優先度修正。
- 中優先度改善。
- 發布前需要執行的測試。

Basic scan 是底線。Deep scan 適合會員、付款、AI、內部工具和處理敏感資料的 app。

Checklist:

  • [ ] Basic scan 是否跑過?
  • [ ] Critical findings 是否修正?
  • [ ] 是否需要 Deep scan?
  • [ ] Secrets 是否不在 frontend(前端)?
  • [ ] RLS(Row Level Security,列層級安全) 是否覆蓋 sensitive tables?
  • [ ] Edge Functions 是否有 auth(驗證)/ authorization?
  • [ ] Connector scopes 是否合理?
  • [ ] Error / logs 是否不洩漏敏感資訊?

階段 9:發布準備

Publish 是 release,不是存檔。

發布前確認:

  • Project(專案) access。
  • Website access。
  • Custom domain。
  • Website info。
  • Security scan。
  • SEO review, if public。
  • Auth(驗證) redirect。
  • Payment return URLs。
  • Email domain。
  • AI usage monitoring。
  • Live smoke test checklist。

提示詞:

請建立發布準備報告。

應用程式:
請描述應用程式。

請檢查:
- 專案存取權。
- 網站存取權。
- 網域。
- 網站資訊。
- 安全掃描。
- 公開網站的 SEO 審查。
- 身分驗證重新導向。
- 付款流程(若有)。
- 電子郵件流程(若有)。
- AI 使用情況(若有)。
- 外部整合。
- 正式環境冒煙測試計畫。

請回傳:
- 阻擋發布的問題。
- 發布前必須修正的問題。
- 可在發布後安全處理的項目。
- 最終發布檢查清單。

Public SaaS 和 internal tool 的 publish readiness 不同。不要用同一套標準硬套,但都要有明確 release gate。

Checklist:

  • [ ] Website access 是否正確?
  • [ ] Project(專案) access 是否正確?
  • [ ] Custom domain 是否需要?
  • [ ] Website info 是否完成?
  • [ ] Public app 是否完成 SEO review?
  • [ ] Internal app 是否 workspace(工作區)-only?
  • [ ] Auth(驗證) redirect 是否正確?
  • [ ] Third-party callback / webhook(事件回呼)是否正確?
  • [ ] Live smoke test 是否準備?

階段 10:迭代循環

上線後,不要立刻加一堆功能。

先看:

  • 使用者是否完成核心流程?
  • 哪裡出錯最多?
  • 哪個 integration 最不穩?
  • 哪個頁面最慢?
  • 哪個權限規則最容易誤用?
  • 哪個 提示詞產生最多 collateral changes?
  • 哪個功能真的值得下一版?

提示詞:

請在第一次發布後檢查這個應用程式。

請摘要:
- 正常運作的功能。
- 失敗的功能。
- 使用者看得見的問題。
- 後端或整合問題。
- 安全或存取疑慮。
- 下一步最有價值的改善。
- 目前應避免進行的變更。
- 建議的下一個迭代範圍。

Iteration 的目標不是永遠加功能,而是讓產品更可靠、更清楚、更接近使用者需求。

Checklist:

  • [ ] 是否有 live feedback?
  • [ ] 是否有 error / usage / activity evidence?
  • [ ] 是否有下一個最小 slice?
  • [ ] 是否避免一次重構太多?
  • [ ] 是否保留 stable version?
  • [ ] 是否更新 Knowledge?
  • [ ] 是否記錄 release notes?

The universal Lovable 提示詞

當你不知道怎麼開始,可以用這個提示詞:

我正在使用 Lovable 建置應用程式。

想法:
請描述應用程式。

請幫我把這份想法整理成代理式交付計畫。

請回傳:
- 產品規格。
- V1 範圍。
- 非目標。
- 路由圖。
- 資料模型。
- 身分驗證與權限模型。
- 外部整合。
- 實作順序。
- 驗證計畫。
- 安全檢查清單。
- 發布準備檢查清單。
- 第一段建置提示詞。

先不要寫程式碼。

這個提示詞的目標不是讓 Lovable 一次做完,而是讓它先成為你的 product architect。

Final project(專案)checklist

用這份 checklist 檢查任何 Lovable 專案:

  • [ ] Idea 是否清楚?
  • [ ] Target user 是否明確?
  • [ ] V1 scope 是否夠小?
  • [ ] Non-goals 是否列出?
  • [ ] Route map 是否明確?
  • [ ] Data model 是否明確?
  • [ ] Public / private data 是否分清楚?
  • [ ] Auth(驗證) model 是否明確?
  • [ ] Permission model 是否明確?
  • [ ] Integrations 是否必要?
  • [ ] Secrets 是否安全?
  • [ ] Build slice 是否小?
  • [ ] 提示詞是否有 constraints?
  • [ ] UI(使用者介面)是否已驗證?
  • [ ] Backend(後端) 是否已驗證?
  • [ ] RLS(Row Level Security,列層級安全) 是否已檢查?
  • [ ] Browser testing(瀏覽器測試) 是否完成?
  • [ ] Security scan 是否完成?
  • [ ] Critical findings 是否修正?
  • [ ] SEO review 是否需要且已完成?
  • [ ] Publish settings 是否檢查?
  • [ ] Live smoke test 是否完成?
  • [ ] Release notes 是否記錄?
  • [ ] 下一輪 iteration 是否有明確 slice?

常見錯誤

錯誤 1:把 Lovable 當成單次生成器

Lovable 更適合當 agentic delivery environment。你要和它一起 plan、build、verify、secure、publish、iterate。

錯誤 2:沒有 non-goals

沒有說不做什麼,AI 很容易幫你加太多。

錯誤 3:沒有資料權限模型

只要有資料,就要問誰能 read / write / update / delete。

錯誤 4:沒有第二個使用者測試

會員與內部工具一定要測 non-owner case。

錯誤 5:把 publish 當終點

Publish 只是 release。Live smoke test 和下一輪 iteration 才是產品工作。

錯誤 6:忽略治理

越接近公司資料、客戶資料、金流、AI 成本,越需要 workspace(工作區)governance、security scans、GitHub sync 和 audit trail。

Final words

Lovable 的價值不是讓你少想,而是讓你把想清楚的事情更快做出來。

最強的 Lovable 使用者,不是 提示詞最短的人,而是能把產品、資料、權限、測試、安全與發布標準講清楚的人。

這本書的主軸可以收斂成一句話:

使用代理式工作流程,把想法變成可以交付的全端網站。

下一個專案開始前,先回到這份 checklist。不要急著生成。先讓 Lovable 成為你的產品規格師、系統設計師、測試夥伴、安全 reviewer 和 release assistant。然後再按下 Build。

延伸閱讀

名詞解釋與延伸提問

  • Delivery loop:從想法、規劃、實作、驗證、安全、發布到迭代的交付循環。
  • Checklist:用來穩定重複流程、避免漏掉關鍵步驟的檢查清單。
  • Follow-up question:在初次回答後,用更具體情境追問 AI 的延伸問題。
  • Release gate:發布前必須通過的品質、安全或驗證門檻。

如何問延伸問題

讀完本章後,建議用自己的專案情境繼續追問 Lovable 或本書作者:

  • 「請根據我的專案,重寫本章的檢查清單。」
  • 「我的目前版本最可能在哪三個地方失敗?」
  • 「請把本章流程改成我下一次可以直接貼上的提示詞。」
  • 「如果我要在兩天內完成 V1,哪些範圍應該先刪掉?」

嗨!我是 Wolke,曾任 Google Developer Expert(GDE,2019–2023) 與 LINE API Expert。我熱衷於研究 AI Agent、n8n 自動化工作流及全端開發架構,致力於將 AI 技術轉化為實際的生產力工具。

如果你喜歡這篇文章,歡迎透過以下方式與我交流,獲取更多技術實戰內容:

📚 技術著作:《實用的 Gemini API 開發點子書》,帶你運用 Gemini App、Google AI Studio、Gemini CLI 與 Antigravity IDE,打造 AI Agent 與實用產品。

📝 技術部落格:歡迎追蹤我的 Medium,我會持續分享 Agentic Automation、架構設計與實際開發的踩坑心得。

🎤 技術講座:我持續受邀至技術社群及研討會,分享 AI Agent、自動化工作流、DevOps 與全端開發實戰。曾於 2026 年 6 月 26 日的 DevOpsDays Taipei 2026 主講「不再只是寫腳本!讓 AI 代理人成為你的 SRE 最佳夥伴」工作坊。

如果你的企業、社群或學校正在尋找相關主題講者,歡迎私訊與我聯繫、洽談講座合作!

🎁 免費送 Lovable 額度給讀者!

我每個月會開放 10 個名額,每人 50 點 Lovable 額度,讓大家實際動手打造自己的網站或 App。

參加方式:

  1. 訂閱本系列文章
  2. 分享任一篇系列文章
  3. 私訊分享截圖及你的 Lovable 帳號 Email

確認後,我會邀請你加入 Lovable workspace 並設定 50 點額度。名額有限,送完為止!


上一篇
第 29 章:簽核正式上線——Google Workspace、通知與營運治理
系列文
Lovable:地球上最強的 AI 生成全端網站 Agentic 開發實戰 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言