Lovable 係一個由 AI 驅動嘅編碼代理，可以幫你用自然語言建立全端應用程式：前端、後端、資料庫同部署，全部一站式搞掂。有咗 Logto 支援，你而家可以好輕鬆咁加上安全登入、用戶管理同認證流程。
由一般用途代理到針對任務嘅 copilots，開發者正目睹住軟件創作模式嘅根本改變。但喺眾多代理類型入面，有一種係最令人興奮同進展最快：編碼代理（coding agents）。
好似 Lovable、Cursor、Windsurf 同 Replit 呢啲工具，已經搶盡新聞頭條，因為佢哋可以即時將自然語言變成真正可行嘅軟件。唔使預設、唔使重複模板，淨係會有實質結果。
今日，有個新詞語登場：Vibe Coding。
由 Lovable 首創，vibe coding 係一種同 AI 對話就可以造 app 嘅新方式。喺呢篇文章，我哋會拆解 vibe coding 究竟代表咩意思，深入探討 Lovable 作為頂尖編碼代理嘅運作模式，並示範點樣用幾分鐘時間建立包括 註冊、登入、用戶同身份管理 嘅全端應用程式。
Lovable 係一個 以對話為本嘅開發平台，你嘅諗法可以直接變成可運行嘅代碼、版面，甚至係已經上線嘅 app。你唔需要寫傳統嘅代碼 ：只需要描述你想要咩：
「我想要一個有兩個圖表同側邊欄嘅簡單儀表板。」
AI 會好快幫你產生即時預覽同可以編輯嘅源代碼。
Lovable 底層採用現代框架如 React 同 Tailwind，亦容許你匯出項目、自行部署，又或者即時上線。
以下根據 Lovable 平台九大核心功能，詳細列出：
| # | 功能 | 說明 | 價值 |
|---|---|---|---|
| 1 | 用自然語言推動全端 app | 用簡單英文描述你想要咩，即時產生包括前端、後端、資料庫同認證功能嘅應用程式。 | 大幅縮短開發時間，毋須理會重複模板設置。 |
| 2 | AI 編碼智能同除錯功能 | 內置助手可以自動補全代碼、修正錯誤，仲可以透過聊天協助導航文件、日誌同 API。 | 提升生產力，令冇專業基礎嘅開發者更快上手。 |
| 3 | 真正擁有代碼及 GitHub 同步 | 輸出適用於生產環境嘅代碼（React、Node 等），並雙向與 GitHub 同步。 | 保證代碼完全屬於自己，杜絕供應商綁定。 |
| 4 | 後端整合 | 原生支援 Supabase、Stripe 同其他後端服務。 | 毋須寫模板代碼就可以輕鬆連接資料庫、儲存空間、付款、認證等。 |
| 5 | 視覺編輯及草圖生成代碼 | 上傳手繪界面/Figma 截圖等，即時生成 UI 代碼，支援視覺編輯模式。 | 設計師或非技術人士亦可直接設計 UI，彈性極高。 |
| 6 | 部署同自訂域名 | 內建部署流程，支援自訂域名。 | 一站式發佈應用，無需煩惱多個服務切換。 |
| 7 | 協作及即時同步 | 團隊成員可即時協作、實時睇到更改、管理版本歷史。 | 方便 pair programming、審查流程同團隊運作。 |
| 8 | 安全性掃描 | 發佈時自動做安全檢查，特別係用 Supabase 時。 | 上線前識別漏洞，提升用戶信心。 |
| 9 | 學習生態同模版 | 提供教學、提示資料庫、預設範本同學習資源。 | 降低學習難度，加快新手入門速度。 |
Lovable 挑戰咗傳統開發流程入面啲根深蒂固觀念：
而家，Lovable 提供咗一個新環境，自然語言成為最主要嘅用戶體驗，唔止用嚟寫代碼，仲可以建立成個產品。
帶嚟嘅影響好大：
即使冇專業開發背景，Lovable 都解放咗你嘅創意自由。只要你知道想做咩，照 vibe code，就可以突破常見障礙，將構思變成跑得郁嘅 app。
Lovable 示範咗「編碼」唔一定用打字。可以用提問、對話式編輯，根據意圖反覆修改。
開放更多包容性協作空間，特別適合同小團隊或一人項目。
當你唔洗切換工具、唔洗開頭打模板代碼，就可以快啲疊代測試、更有創造空間。
就算老手開發者，都會享受到少咗 context 切換同回饋周期極速之利。
好似 GitHub Copilot 之於 VS Code，Lovable 亦係為新一代代理驅動、prompt 原生應用而設——結構、邏輯及用戶流程唔再硬編死，而係動態定義。
首先只要用一句 prompt：「Create a photo gallery app」，AI 就會幫你生成一個簡潔靚仔嘅網站。
跟住我再叫 Lovable 用 Logto 做認證。Lovable 雖然同 Supabase 係緊密拍檔，但 Supabase 唔係專業 CIAM 解決方案，所以我揀咗 Logto —— 一個開源同專業嘅 CIAM 產品。
根據教學，我只要提供：
因為係 React 單頁 app，唔使 app secret。AI 會自動安裝最新版 Logto React SDK，同時建立所需認證元件，自動處理晒成套流程。
攞 endpoint 嘅步驟好簡單，只需去 Logto Cloud 建立新 React app，喺應用詳情頁複製相關 endpoint，貼入 Lovable，Lovable 會自動 update 代碼同設定檔。
你仲需要填 app 嘅 Redirect URI 同 Post-Sign-out URL。
重點：因為 Lovable 開發模式係雲端，所以唔可以直接用 http://localhost:3000/callback 做 redirect URI，一定要用你 Lovable 項目嘅 live URL，記得要喺 Logto Cloud 控制台 update。
步驟：
Redirect URIs：
https://preview--snap-show-gallery-time.lovable.app/callback
Post Sign-out Redirect URIs：
https://preview--snap-show-gallery-time.lovable.app/
簡簡單單傾幾句，反覆 prompt 幾下，你就有咗個受保護嘅網站——得已登入用戶先睇到內容。
請注意，因為呢類編碼代理預覽模式通常用 iframe，所以你喺預覽點擊係唔會彈出登入頁面。
你 click 「Sign in」之後，會打開 Logto 登入頁，可以完整測試認證流程 —— Logto 預設用 email + password 做登入方式。完成 email 驗證過程後，可以去 Logto 控制台睇下用戶係咪登記咗。
你見到用戶已經出現喺 Logto Cloud 控制台，證明認證流程成功運作，安全將用戶註冊入你個 app。
而家你個 app 已經完整可用，仲可以直接喺 Logto Cloud 控制台管理用戶。
呢度只係最簡單示範。Logto 而家密鑼緊鼓開發緊 MCP 伺服器，將來可以直接喺你嘅 IDE 操作 Logto 控制台同管理 API——完全唔使離開開發環境。屆時你可以：
AI 同 Logto 硬淨基建合體之後，整合認證再都唔係咩複雜工序。