---
title: "Lovable 完整介紹：設計師用 AI 蓋出完整 web app 的時代"
slug: lovable-complete-guide-for-designers
url: https://rar.design/posts/lovable-complete-guide-for-designers
published_at: 2026-05-14
modified_at: 2026-05-14
author: "設計師 Riven"
category: "AI 設計"
tags: ["Anton Osika", "AI 建構工具", "設計職涯", "Web App", "MVP", "設計師", "AI 工具", "VIBE CODING", "Lovable"]
access: public_access
---

# Lovable 完整介紹：設計師用 AI 蓋出完整 web app 的時代

> 三個月衝 1750 萬美金 ARR、被叫做這波 AI 浪潮跑最快的歐洲新創，設計師為什麼該現在就學

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-05-14

AI BUILDER · 2026 QUICK ANSWER Lovable 是一個用 AI 對話蓋完整 web app 的工具。三個月衝到 1750 萬美金 ARR，被歐洲創投圈叫做這波 AI 浪潮跑最快的歐洲新創。你描述一句話，它把含登入、資料庫、檔案上傳、Stripe 金流的完整應用生出來，再用 GitHub 同步、不綁平台。設計師第一次可以不用排隊等工程師，自己 ship 完整產品。但 credit 燒得快，prompt 寫不好會在 debug 迴圈裡蒸發——這是它真實的代價。 CHAPTER 01 · WHAT IS IT 三個月衝 1750 萬美金 ARR，歐洲新創跑得最快的那一個 Lovable 在 2025 年底冒出來，2026 年第一季炸開。三個月內 ARR 衝到 1750 萬美金，換成台幣約五億五。每週淨新增營收兩百萬美金。Day 30 retention 85%——這個數字甚至比 ChatGPT 還高。歐洲創投圈直接把它叫做這波 AI 浪潮裡跑最快的歐洲新創。 它的 CEO Anton Osika 講話有種異常的篤定。他在訪談裡丟了一句：「Lovable 是最後一個你需要的軟體。」這話聽起來像矽谷常見的吹噓，但你看完它能做到的事，會懂他為什麼敢這樣講。 它在做什麼？你打開 lovable.dev，看到一個輸入框，寫「做一個給我攝影學生用的作業平台，他們可以上傳照片、看我的批改、跟我留訊息」——它就會做出來。整套包含登入系統、資料庫、檔案上傳、訊息表單，甚至連 Stripe 金流都能直接接。背後跑的是它自家的 Lovable Cloud，資料庫用 Supabase（Postgres + Auth + Storage），hosting 用自己的 edge network。 截至 2026 年 5 月，Lovable 上做出來的應用每月被造訪超過兩億次。它已經拿到 SOC 2 Type II 跟 ISO 27001 認證，企業客戶名單裡有 Klarna、Netflix。這個 traction 在歐洲新創裡找不到第二個。 Lovable 是最後一個你需要的軟體。 — Anton Osika，Lovable 共同創辦人 CHAPTER 02 · WHY IT MATTERS 設計師被「工程師說不行」卡住的時代，正式結束 我在設計圈深耕快十年，看過設計師被「工程師說不行」這句話卡住職涯的次數多到可以寫成一本書。你有個小工具想做，PM 說沒資源；你有個提案想驗證，工程師說下個 sprint；你想做個會員區，IT 說合規問題。然後想法擱著，三個月後完全忘記。 Lovable 把這條路打通了。不是說工程師沒用了——大型系統、performance、安全性這些事情他們仍然不可取代。但是對於「我想試試這個想法可不可行」「我想做一個給自己用的小工具」「我想 ship 一個 MVP 看市場反應」這些早期階段，設計師現在第一次可以不用排隊等別人。 這個轉變的本質叫做 vibe coding——你不用語法寫程式，你用想法跟 AI 對話，AI 把你的想法翻譯成可運行的軟體（這個概念我之前在 Vibe Designing 是什麼？當設計從手工畫變成下指令 寫過完整脈絡）。Lovable 是這波運動裡跑最遠的代表，不是因為它技術最強，是因為它把「ship 一個完整產品」這件事壓縮成幾個小時的對話。 對設計師最直接的衝擊有三層。第一層，你的 portfolio 不再只是靜態截圖，可以放真實能 run 的產品。第二層，你接案不再卡在「拿到設計稿，等工程開發完才能驗收」，你可以直接交付能跑的 prototype。第三層，更狠的——你可以開始把自己的設計品味 ship 成自己的小產品，建立自己的收入來源，不再只是替別人實現他的想法。 CHAPTER 03 · HOW IT WORKS 三個模式 + 一朵雲：拆給你看 Lovable 怎麼跑 Lovable 不是一個單一的 AI 對話框。它把對話拆成三個模式，對應「想清楚 → 慢慢改 → 放手交辦」三種你跟它互動的節奏。 LOVABLE · 三個工作模式 PLAN MODE 先想清楚再動工 1 credit/則訊息，跟 AI 來回討論架構與功能流程，不寫任何 code。適合大方向確認。 CHAT MODE 一邊聊一邊改 互動式開發，每一步都要你確認，適合學習邏輯與細節打磨。新手最該用這個模式。 AGENT MODE 交給它就好 自主跨檔案修改、debug、web search 找答案，credit 用量浮動 0.5 到 1.5+。熟手用這個。 Plan Mode 像是跟工程師討論方案——你還沒準備動手，先想清楚架構。Chat Mode 是邊聊邊改，你看著它每一步動作，學會 Lovable 的邏輯。Agent Mode 是放手交辦，你描述完一個功能，它自己跨檔案修改、debug、查 web 找答案，整個過程像你交辦一個工程實習生，差別只在它不會睡覺。 三個模式都跑在 Lovable 自家的 Cloud 上。這個 Cloud 用 Supabase 當底層——資料庫是 Postgres，登入系統內建，檔案儲存有 Storage，全部一鍵啟用。你不用自己去 Supabase 開帳號、設 schema、串 API key，這些事 Lovable 全做掉。你只要描述需求，剩下的它處理。 ▲ 你打開 lovable.dev 看到的就是這個畫面：一個輸入框，讓你描述要做什麼（圖／Lovable 官方） 但更重要的是另一件事：你的程式碼可以隨時 export 到 GitHub。乾淨的 React + TypeScript + Tailwind，部署到 Vercel 或自己的伺服器都行。這代表你不會被 Lovable 綁死——如果哪天 Lovable 不見了，或它的價格政策你不能接受，你可以帶著你的程式碼走人。這是它跟 Framer 最大的差別。 另外它有 20 個以上的外部連接器：Stripe 收金流、GitHub 同步版本、Notion 拉資料、Shopify 串商店、Slack 通知。所有你已經在用的工具，幾乎都能無痛接上。2026 年 5 月 7 日它還推出了 Lovable MCP Server——別人家的 AI agent（Cursor、Claude Desktop、n8n）可以反過來控制你的 Lovable 專案。這個我在後面講「2026 重大更新」時會展開。 CHAPTER 04 · GETTING STARTED 第一個 prompt 該怎麼寫，30 個免費 credit 怎麼用 Lovable 的甜蜜點是「會描述需求、看得懂錯誤訊息的人」。你不需要會寫 React，但你要會看懂「Authentication failed」這種訊息是什麼意思。如果你是設計師，這些其實你都遇過——你已經跟工程師對接過很多次，你聽過所有的術語。你只是沒自己寫過。 起手的方法。註冊免費版（不需要信用卡），每天會給你 5 個 credit、每月上限 30 個。這個量夠你練手，做出一個簡單的小工具。不要急著付費——你應該先用免費的 30 個 credit 跟它打過架，知道它的脾氣。 Prompt 怎麼寫。最常見的錯誤是「太籠統」。你寫「做一個會員系統」，它做出來的東西十之八九不會是你要的。你應該寫成這樣—— PROMPT 對照·壞 vs 好 ❌ 籠統版 「做一個會員系統。」 結果：它隨便做一個它覺得通用的會員系統，跟你想的差很遠，光修改就要 5 個 credit。 ✓ 具體版 「做一個給攝影學生用的作業平台。學生 email 登入後看到本週作業，可以上傳 3 張照片，等老師批改。介面深色、極簡、品牌色 #d4a259。」 結果：它做出來的就接近你要的，2-3 個 credit 就能跑起來。 好的 prompt 公式是「誰用 + 做什麼 + 視覺方向 + 關鍵限制」。具體到「攝影學生」而不是「使用者」；具體到「上傳 3 張」而不是「上傳檔案」；具體到「深色、極簡、品牌色 #d4a259」而不是「漂亮」。設計師思考使用者情境的能力，在這裡是巨大的優勢。 第一週的練功路線我會建議這樣排。Day 1：用 Chat Mode 做一個給自己用的單頁工具（例如倒數計時器、記帳小程式）。Day 2：加一個資料庫，讓它能存資料。Day 3：加登入系統，學會 auth 怎麼運作。Day 4：把它 export 到 GitHub，自己 review 一下 code。Day 5–7：嘗試一個比較完整的 app，例如客戶後台或預約系統。這樣 30 個 credit 大概燒得差不多，但你會非常清楚自己是不是該升級。 CHAPTER 05 · IN PRACTICE 設計師最該優先做的四個專案 Lovable 能做的事很多，但對設計師來說，有四個應用場景特別值得優先做——因為它們直接把你既有的設計專業變成可量化的商業價值。 設計師專案優先順序 01 · 客戶後台 / Client Portal 把接案流程做成你的優勢 客戶登入後看到專案進度、檔案下載、付款連結、留言區。其他設計師還在 email 來回轉檔案的時候，你已經在賣「我合作有自己的工作流系統」這件事。 02 · 互動式提案 / Interactive Pitch 提案不再是 PDF 客戶可以即時調整你提案裡的需求（規模、頁數、時程），看到動態變化的報價。比起 PDF 提案，成交率高很多——客戶感覺自己參與決策，不是被動接受報價。 03 · 教學工具 / Teaching App 把你的知識封裝成產品 設計練習平台、配色測驗、版面分析工具。把你教過上百次的內容變成一個學生可以反覆練的工具。這類產品邊際成本接近零，可以變成你的被動收入。 04 · 內部工具 / Internal Tools 解決自己每天的痛點 案件追蹤表、報價計算機、版型素材庫、客戶資料管理。這類工具市面上有現成的 SaaS，但都不完全符合你的工作流。自己做一個 100% 對的工具，比每月付別人 30 美金強。 這四個場景的共同點是「需求清楚、流程簡單、不需要超複雜的後端邏輯」。Lovable 在這個甜蜜點上跑得最好。你不要一開始就想做 Spotify、Notion 這種需要五年才寫完的東西——Lovable 會卡在中後段、credit 燒光、結果失望離開。先從小做起，累積對工具的感覺。 我自己最常用的是內部工具——例如我把 Threads / Facebook 自動發文做成一個 dashboard，把每週要 review 的內容、廣告數據、訂閱人數整合在一頁。同樣的功能用第三方 SaaS 串會花我每月 100 美金，自己用 Lovable 做完，每月成本只剩 25 美金加上 Supabase 的 free tier。 ▲ Lovable 官方解釋：How Vibecoding Actually Works CHAPTER 06 · LIMITS 三個你一定要先知道的坑 我不想把 Lovable 賣得太漂亮。它真的很厲害，但它有三個坑，新手特別容易踩進去。 坑一：credit 在 debug 迴圈裡蒸發。Lovable 用 credit 計價，免費 30 個、Pro 25 美金 100 個。看起來夠用，但實際上你會發現——當你的 prompt 寫得不清楚，AI 做出來的東西不是你要的，你叫它修，它越修越歪，每修一次燒 0.5 到 1.5 個 credit，半小時就能燒掉 20 個。Reddit 上抱怨最多的就是這件事。解法：寫好 prompt 比省 credit 重要，每個專案開始前花 5 分鐘想清楚需求，比你後面用 50 個 credit 修划算。 坑二：Figma Import 已經被砍了。2025 年 1 月 Lovable 推出跟 Builder.io 合作的 Figma Import 功能，當時設計師圈一片歡呼——終於可以「Figma 畫好直接丟給 Lovable 變成 code」。但是這個功能在 2025 年 11 月被官方下架。現在的工作流變成「貼 Figma share link 當作 prompt 給 Lovable」「用 Builder.io 外掛轉碼後再貼進來」「上傳截圖加文字描述」三選一，沒有一個是原本那種無痛 import。如果你以為買了 Lovable 就能無痛從 Figma 接過來，要先調整這個預期。 坑三：複雜邏輯它會卡。多步驟的業務邏輯、條件式的工作流、複雜的資料轉換——這些 Lovable 處理起來會明顯吃力。簡單應用沒問題，但是真實 SaaS 等級的功能會讓你來回修很久。這個不是 Lovable 獨有的問題，所有 vibe coding 工具都有，但你心裡要先有底——它取代不了真正的工程團隊，它取代的是「沒有工程團隊就什麼都做不出來」的這個狀態。 價格上還有兩個細節值得記。Pro 從 100 credit / 月 25 美金起，可以加到 10000 credit / 月 2250 美金；Business 同樣的 credit 區間但價格翻倍，多了 SSO、不訓練資料等企業選項。Top-up credit 可保留 12 個月，月付方案的未使用 credit 滾存一個月。學生跟教師有 50% 折扣，非營利組織 20%。 CHAPTER 07 · WHAT IS NEW 2026 年的三個關鍵更新 ▲ 2026 年 4 月底，Lovable 官方 iOS / Android app 上線。從這之後你可以在咖啡廳用手機改 web app（圖／Lovable 官方） Lovable 從 2026 年初開始進入產品擴張期，有三個更新對設計師特別關鍵。 2026 年 3 月：內建 AI 圖片生成器。不用再切 Midjourney 或 DALL-E，直接在 Lovable 裡描述圖片需求，它生給你。從 2026 年 3 月開始支援透明背景，icon、illustration、UI 元件都可以一條龍。對設計師來說，這代表你不用再為了 placeholder 圖開另一個工具的訂閱。 2026 年 4 月：iOS / Android mobile app。4 月 24 日上線的官方 mobile app，讓你可以從手機改 web app。聽起來雞肋，但實際用就會發現很實用——你坐捷運、等客戶、躺床上，想到一個小修改，打開手機直接改，不用回家開電腦。我自己這幾週用下來，凌晨想到的小調整可以馬上做掉，隔天直接看效果。 2026 年 5 月：Lovable MCP Server（Research Preview）。這個是最技術的更新，但意義最深。MCP（Model Context Protocol）是 Anthropic 推的 AI 工具溝通標準。Lovable 在 5 月 7 日推出官方 MCP Server，這代表別人家的 AI 客戶端——Claude Desktop、Cursor、n8n——可以直接控制你的 Lovable 專案。建立專案、發訊息、檢查程式碼、部署 app，全部從外部 AI 完成。 講白一點：你在 Claude Desktop 裡跟 Claude 講「幫我在 Lovable 裡開一個新專案，做一個給我學生用的問答平台」，Claude 會直接動手做。Lovable 從一個「你進去用」的工具，變成一個「可以被其他 AI 呼叫」的後端服務。這個轉變對設計師的工作流意味著——你以後可以用最熟的 AI 客戶端，操作 Lovable 當你的「後端蓋手」，不用再切視窗。 MCP Server 目前只對付費用戶開放，而且是 Research Preview 階段，工具名稱跟介面可能會變。但這個方向確定了——Lovable 在往 AI 基礎設施的位置移動，不只是一個 app builder。 CHAPTER 08 · TAKEAWAYS 為什麼是現在學，不是明年 Lovable 半年後一定會比現在更厲害——這沒什麼好爭辯的。但是這個邏輯不能拿來當作「我之後再學」的理由，因為這個世代設計師真正在比的，不是「工具熟不熟」，是「mental model 對不對」。 你在現在這個時間點開始用 Lovable，你會被迫學會幾件事——怎麼描述需求（prompt engineering）、怎麼讀錯誤訊息（debug 思維）、怎麼拆解功能（系統思考）、怎麼決定什麼放前端什麼放後端（架構意識）。這些不會因為工具升級而貶值。它們會跟著你走十年。 反過來，如果你等「工具更成熟我再學」，半年後你會看到那些「現在就學」的設計師已經有了完整的 portfolio、客戶、被動收入、自己的小產品。他們不會比較聰明，他們只是早一步開始。設計圈這個位置永遠是早起的人吃到。 台灣的設計師有一個獨特的機會。我們的設計教育底子很好，但接案文化把太多人困在「畫稿—等對接—改稿」的循環裡。Lovable 把這個循環打開了——你可以自己 ship，你就不只是接案的人，你是有 leverage 的人。leverage 是這個世代設計師能不能往上走的關鍵字（HBR 130 萬筆勞動數據顯示設計師工作量下降 17%，π 型人才那篇有完整的市場觀察）。 如果你還在猶豫要學哪個 AI 工具，我之前寫過一篇 Lovable、Figma Make、Framer 三個工具的職涯路徑分析，可以對著看自己的方向。但這篇文章的核心就一句話——你今晚就可以註冊 Lovable，免費版 5 個 credit 拿來做一個給自己的小工具，明天就有東西可以看。等的人會被等過去，做的人會被記住。 等的人會被等過去，做的人會被記住。 SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 Lovable 的 prompt 模板、debug 心法、設計師專案範例，我都在訂閱方案裡持續更新。每週新案例，省你燒掉的 credit。 ✦ Lovable / Figma Make 實測 prompt 庫 ✦ 設計師專案範例與工作流 ✦ 每週 AI × 設計新知 了解訂閱方案 → FAQ · 常見問題 七個你會想問的問題 Q：完全沒寫過 code 可以用 Lovable 嗎？ 可以，但你要能看得懂錯誤訊息。「Authentication failed」「404 Not Found」這種訊息你不一定要會解，但要看得懂大意。如果你是設計師，這些其實你已經跟工程師對接過很多次，你聽過。Lovable 的甜蜜點是「會描述需求 + 看得懂錯誤訊息」的人，不一定要會寫 React。 Q：Lovable 的程式碼可以匯出嗎？會不會被綁死？ 可以隨時 export 到 GitHub，乾淨的 React + TypeScript + Tailwind，部署到 Vercel、Netlify、Cloudflare、自己的伺服器都行。沒有 vendor lock-in 是 Lovable 跟 Framer 最大的差別。即使哪天你不想用 Lovable 了，你的程式碼還是你的。 Q：免費版 30 個 credit 夠做什麼？ 做一個有 3-5 個頁面、含登入的小工具沒問題。如果你 prompt 寫得好、不在小細節迴圈，30 個 credit 可以做出一個能用的 MVP。但你要心理準備——第一個專案大概會燒掉一半 credit 在學習怎麼跟 AI 對話，這是學費。 Q：Lovable 能做手機 app 嗎？ Lovable 主要做 web app，目前不直接生 native iOS / Android。但它做出來的 web app 是 RWD（響應式），在手機瀏覽器上看起來像 app。如果你真的需要 native 體驗，可以包成 PWA（漸進式 web app）。要做 100% native，目前 Replit Agent 或 Rork.ai 比較合適。 Q：Lovable 跟 Bolt.new、v0、Cursor 怎麼選？ Lovable 是非技術人友善的全棧 vibe coding 工具。Bolt.new 給你更多技術彈性（多種框架、直接編輯程式碼），適合開發者。v0 由 Vercel 出，做 React + Tailwind 元件最強，但需要懂 React。Cursor 是 AI-assisted IDE，是工程師工具不是設計師工具。設計師大多會選 Lovable，因為它的甜蜜點剛好在「設計感重 + 後端我不想碰太深」這條線上。 Q：Lovable 真的有比 Figma Make 厲害嗎？ 不是「厲害」的問題，是「定位」的問題。Lovable 從 0 開始蓋完整 web app 含後端；Figma Make 把你已經做好的 Figma 設計檔轉成可互動的 prototype。兩個工具底層其實都用 Anthropic Claude 模型，差別在「上面包了什麼」。如果你已經住在 Figma，Figma Make 摩擦力最小；如果你要 ship 一個完整含資料庫的產品，Lovable 才是工具。 Q：Lovable 安全嗎？資料會不會被當訓練資料？ Lovable 在 2026 年初拿到 SOC 2 Type II 跟 ISO 27001 認證，企業客戶包含 Klarna、Netflix。Free 跟 Pro 方案的資料可能用於模型訓練；Business 方案有「opt out of AI data training」選項，可以關掉。如果你做的東西涉及客戶機密資料，建議升 Business（50 美金 / 月起）並開啟 opt-out。