繁體中文（台灣）
使用 Lovable AI 和 Logto 快速打造你的 app 並處理登入流程的 Vibe 寫程式方式
Lovable 是一個以 AI 為核心的程式開發代理，協助你用自然語言打造全端應用程式：前端、後端、資料庫與部署，全部都在同一個平台完成。現在有了對 Logto 的支援，你也能輕鬆加入安全登入、使用者管理與驗證流程。
Guamian
Product & Design
Product & Design
Lovable 是一個以 AI 為核心的程式開發代理，協助你用自然語言打造全端應用程式：前端、後端、資料庫與部署，全部都在同一個平台完成。現在有了對 Logto 的支援，你也能輕鬆加入安全登入、使用者管理與驗證流程。
從通用代理到專為任務設計的 copilots，開發者正親身經歷軟體創作方式的根本變革。但在各類型代理中，有一個領域特別吸睛又發展飛快：程式寫作代理。
像是 Lovable、Cursor、Windsurf 和 Replit 等工具，都以即時將自然語言轉化為真正可運作的軟體而成為話題焦點。免設定、零樣板，直接產生純粹成果。
今天，一個新詞悄然登場：Vibe Coding（氛圍寫程式）。
由 Lovable 首創，vibe coding 是一種透過與 AI 對話來打造 app 的全新方式。本文將帶你深入剖析 vibe coding 的真義，探索 Lovable 作為頂尖程式代理的運作方式，並實際演示如何在幾分鐘內搭建一個全端 app——包含註冊、登入、使用者與身分管理。
Lovable 是一個以聊天為主的開發平台，你的點子會直接變成可運作的程式碼、版型，甚至受託運作的 app。你不用寫傳統程式碼，只要描述你的需求：
「我需要一個簡單的儀表板，有兩個圖表和一個側邊欄。」
然後 AI 通常只需數秒就能產生即時預覽和可編輯的原始碼。
在背後，Lovable 採用現代框架像是 React 和 Tailwind，並允許你匯出專案、自行託管或立刻發布。
下表為 Lovable 平台 9 大核心功能的詳細說明：
| # | 功能 | 描述 | 價值 |
|---|---|---|---|
| 1 | 自然語言全端 app 產生 | 用簡單英文描述想法，立刻產生前端、後端、資料庫與驗證流程的可用 app。 | 大幅降低開發時間，消除樣板設定的門檻。 |
| 2 | AI 智能寫碼與除錯 | 內建助手自動補全、修復 bug，並透過對話協助導覽檔案、紀錄和 API。 | 提升生產力，讓非專業開發者也能快速上手。 |
| 3 | 程式碼真正所有權與 GitHub 同步 | 輸出上線等級程式碼（React、Node 等），並雙向同步 GitHub。 | 保障你真正擁有程式碼，避免平台綁定風險。 |
| 4 | 後端服務整合 | 原生支援 Supabase、Stripe 等後端服務。 | 連結資料庫、儲存、金流、驗證都不用寫樣板碼。 |
| 5 | 視覺化編輯與草稿稿碼轉換 | 上傳手繪、螢幕截圖或 Figma 輸出檔，即可產生真正的 UI 程式碼，並支援視覺化編輯模式。 | 讓設計師及非工程師能直接打造 UI。 |
| 6 | 部署與自訂網域 | 內建部署管線，支援主機託管與自訂網域設定。 | 釋出 app 無縫，無需切換多個服務。 |
| 7 | 協作與即時同步 | 團隊成員可即時協作、馬上看到修改，並管理版本歷史。 | 支援雙人程式設計、審核流程和團隊友善作業環境。 |
| 8 | 安全性掃描 | 發布時自動進行安全性檢查（特別是使用 Supabase 時）。 | 上線前揪出漏洞，提升用戶信任。 |
| 9 | 學習生態系與範本 | 提供教學、提示庫、預建範本及學習資源。 | 降低學習曲線，提升開發者引導。 |
Lovable 挑戰了多數開發流程中根深柢固的假設：
反之，Lovable 提供一個自然語言做為主要 UX 的工作環境，不僅用於寫程式，更能打造完整產品。
它對以下方面帶來巨大改變：
對沒有專業軟體開發背景的人，Lovable 開啟了創意自由的全新境界。只要你知道要做什麼，你就能用 vibe coding 將想法化成實體 app，不再卡關於傳統障礙。
Lovable 正在證明「寫程式」不一定要打字，可以靠 prompt、對話編輯，以及意圖循環迭代。
這讓小團隊或個人專案能有更包容、彈性的協作空間。
當你可不切換工具、不寫樣板碼就能建構、測試與調整，你就能加速創意試驗和快速修正。
即使是有經驗的開發者，也受惠於降低的情境切換和更快的回饋循環。
就像 GitHub Copilot 融入 VS Code 那樣，Lovable 之於新世代的 agent 驅動、prompt 原生 app 極其合理——邏輯架構、流程不再硬寫死，而是動態定義。
首先，只要用「建立一個相簿 app」當作 prompt 就能立刻產生設計良好、簡潔的網站。
接著我請 Lovable 加入 Logto 做為認證。雖然 Lovable 似乎和 Supabase 有深度整合，但 Supabase 並非專業 CIAM 解決方案，因此我選擇了 Logto——一款開源且專業的 CIAM 產品。
依照教學指示，我只需提供：
由於這是 React 單頁應用，不會需要 app secret。AI 全自動完成所有程序——自動安裝最新版 Logto React SDK 並建立驗證元件。
要取得 endpoint，只要前往 Logto Cloud，建立新的 React app，app 資訊頁上就會顯示需要的 endpoint，把這些資訊填回 Lovable 即可。Lovable 會自動幫你更新程式碼與 config 檔案。
你還需要輸入 app 的 Redirect URI 和 Post-Sign-out URL。
這裡有個重點：由於 Lovable 的開發環境託管在雲端，你不能使用像 http://localhost:3000/callback 這種 redirect URI。請使用你的 Lovable 專案 live URL，並到 Logto Cloud 主控台修改。
步驟：
Redirect URIs：
https://preview--snap-show-gallery-time.lovable.app/callback
Post Sign-out Redirect URIs：
https://preview--snap-show-gallery-time.lovable.app/
幾輪對話提問與反覆調整後，你現在會得到一個受保護的網站——只有登入用戶才能夠檢視內容。
請注意，這類程式碼代理的預覽模式裡會用到 iframe，所以點擊預覽時無法觸發登入頁。
點選「Sign in」後，會開啟 Logto 登入頁。你可以完整測試驗證流程，預設是用電子郵件 + 密碼登入。通過郵件認證後，回到 Logto Console 就能查到用戶資料。
如你所見，在 Logto Cloud Console 已經出現你的使用者——代表整個驗證流程順利完成，用戶安全地被你 app 註冊。
現在你已經擁有一套完整功能且整合登入流程的 app，並能透過 Logto Cloud Console 直接管理用戶。
這只是一個基礎示例。Logto 正在開發MCP 伺服器，將直接運行於你本地 IDE，讓你能與 Logto Console 以及 管理 API 互動——完全不必離開開發環境！藉由這套新工具，你將能：
當 AI 力量與 Logto 經驗豐厚的基礎建設結合，驗證整合將不再複雜。