Lovable、Figma Make、Framer 完整比較：設計師 2026 該學哪個 AI 建構工具？
2026年5月14日 下午 1:52
AI 設計AI DESIGN TOOLS · 2026
QUICK ANSWER
Lovable、Figma Make、Framer 是 2026 年設計師最該知道的三種 AI 建構工具。Lovable 走全棧 vibe coding，從 prompt 直接做出含資料庫與登入的完整 web app；Figma Make 把 Figma 設計檔變成互動式 prototype 或 app，留在 Figma 生態裡迭代；Framer 是設計優先的網站發布平台，AI 是助攻不是主體。三者方向不同，選錯只是繞遠路，不是浪費。
CHAPTER 01 · WHAT IS HAPPENING
這場仗，其實是在搶設計師接下來十年要站在哪
過去一年，「vibe coding」這個詞從矽谷的開發者圈一路滲透到設計圈（這個概念我之前在 Vibe Designing 是什麼？當設計從手工畫變成下指令 寫過完整脈絡）。意思是你不再用語法寫程式，而是用想法跟 AI 對話，AI 把你的想法翻譯成可運行的軟體。這聽起來像是工程師的事情，但真正洗版設計社群的不是 Cursor 或 Claude Code，而是 Lovable、Figma Make 和 Framer。
原因不複雜。設計師長年卡在「畫出來」跟「能用」之間的那個落差——畫了三十張高擬真畫面，丟給工程師，工程師寫成五十個元件，回來跟原稿總是長得不太一樣。這三個工具的共同野心，是把「畫出來」跟「能用」壓縮成同一個動作。但壓縮的方法各不相同，這就是這篇要拆給你看的東西。
講白一點：選哪個，比較像是在選你未來十年要站在哪一條設計師路徑上。是要做產品、做網站，還是做工具。
「畫出來」跟「能用」之間的那條縫，這三個工具都在試著縫合，只是用不同的針法。
CHAPTER 02 · LOVABLE
Lovable：全棧 vibe coding 的標竿
Lovable 在 2025 年底到 2026 年初炸開，三個月內 ARR 衝到 1750 萬美金，被歐洲創投圈稱作這一波 AI 浪潮裡跑得最快的歐洲新創。它的 CEO Anton Osika 講話有種異常的篤定：「Lovable 是最後一個你需要的軟體。」這話狂，但你看完它能做到的事，會懂他為什麼敢這樣說。
你打開 lovable.dev，看到一個輸入框，寫「做一個客戶後台，用戶登入後可以上傳檔案、看自己的訂單、跟我留訊息」——它就會做出來。整套包含登入系統、資料庫、檔案上傳、訊息表單，甚至連 Stripe 金流都能直接接。背後跑的是它自家做的 Lovable Cloud，資料庫用 Supabase，hosting 用自己的 edge network，整套 stack 都在 Lovable 裡。
最讓設計師有感的是 Agent Mode——你描述完一個功能，Agent 會自己跨檔案修改、debug、查 web 找答案，整個過程跟你交辦一個工程實習生差不多，差別只在它不會睡覺。Chat Mode 則像是在跟工程師討論方案，先講清楚再動工。
LOVABLE · 三個工作模式
PLAN MODE
先想清楚再動工
1 credit/則訊息，跟 AI 來回討論架構與流程，不寫任何 code。
CHAT MODE
一邊聊一邊改
互動式開發，每一步都要你確認，適合學習與細節打磨。
AGENT MODE
交給它就好
自主跨檔案修改、debug、web search，credit 用量浮動，0.5 到 1.5+。
價格方案是 Lovable 最常被罵的地方，但其實邏輯不複雜。免費版每天 5 個 credit、上限每月 30，夠你練手；Pro 從 100 credit/月起 25 美金，可加到 10000 credit/月 2250 美金；Business 同樣的 credit 區間但價格翻倍，多了 SSO、不訓練資料等安全選項。所有付費方案都可以另外 top-up，credit 滾存一個月。
真實感是這樣：寫一個簡單的 landing page 大概 2 個 credit，做一個完整 MVP 從頭到尾可能燒掉 150–300。Reddit 上抱怨最多的是 prompt 寫不好、來回 debug、credit 在迴圈裡蒸發。但這個跟你訓練狗一樣，學會了就不痛了。
CHAPTER 03 · FIGMA MAKE
Figma Make：把設計檔變 app，不離開 Figma 生態
Figma 在 2025 年 5 月 Config 大會一次端出五個產品線：Sites、Make、Buzz、Draw、Grid。其中 Figma Make 是直接對著 Lovable、Bolt、v0 開砲的那一個。它的定位很清楚——你已經在 Figma 裡做完了高擬真設計，現在不用再丟給工程師，直接餵給 Make，prompt 一句「把這個音樂播放器做成可以點 play 然後 CD 會轉的互動版本」，它就生出可運行的 React + Tailwind 程式碼。
關鍵在於 Figma Make 跑的是 Anthropic 的 Claude 3.7 Sonnet 模型（Figma 公告會持續加上其他模型）。所以說 Lovable 跟 Figma Make 底層其實長得很像，差別在「上面包了什麼」。Lovable 包了 Cloud + Agent；Figma Make 包了你的設計檔、元件庫、設計系統。
▲ Figma 官方教學：Intro to Figma Make
這個包法的威力，要設計師用過才會懂。當你的設計系統已經在 Figma 裡——variables、component variants、auto layout、breakpoints——Make 都看得到、認得出來。它不是猜你想要什麼樣的按鈕，是直接用你已經定好的按鈕。這對於做產品設計的人來說，等於把 design-to-code handoff 那一段工程師最常砍你色票、改你 spacing 的痛點，整個拆掉。最近 Figma Make 還加入 Custom Skills，可以把你的設計品味寫成 markdown 餵給它，這個是另一個層級的護城河——讓 AI 做出來的東西「像你」。
限制也很明顯。第一，Make 目前只做網頁，手機 app 設計師暫時看戲；第二，beta 階段對「記住前一個決定」這件事還不夠穩，有時候你做完第三輪修改，會發現它把第一輪的決定推翻掉了；第三，價錢綁在 Figma 整體訂閱裡——Make 沒有單獨買的選項，你要嘛 Full Seat 16 美金/月（年付）、要嘛 Organization 55 美金/月。
另外從 2026 年 3 月起，Figma 開始嚴格執行 AI credit 配額——Full Seat 大概有 500–4250 credit/月（看方案），超過就要等下個月，或加買「shared AI credit pool」（每月 120–240 美金 5000–10000 credit），或走 pay-as-you-go 每 credit 0.03 美金。重度使用 Make 的人這個成本要提前算。
CHAPTER 04 · FRAMER
Framer：視覺優先，AI 是助攻不是主菜
Framer 比另外兩個都老。它從原型工具一路演進成完整的網站發布平台，2025 年下半年加上 Wireframer（AI 生 wireframe layout）跟 Workshop（AI 寫 custom component code）兩個 AI 功能。但 Framer 的本性不是 AI 工具——是設計優先的 canvas，AI 是上面額外給的助攻。
這個差別超關鍵。在 Lovable 你跟 AI 對話來「描述」app；在 Figma Make 你給設計檔給 AI 來「轉換」成 app；在 Framer 你拖拉視覺元件，AI 只是在你需要時跳出來幫你生 layout 或寫 component。三個工具的 AI 介入深度，從深到淺。
Framer 真正的賣點不是 AI，是這四件事：第一是動畫——scroll trigger、hover、page transition 都用視覺工具拉得出來，不寫 JavaScript；第二是 CMS——blog、case study、team page 內建管理介面；第三是 hosting——99.99% uptime SLA、全球 CDN、AVIF 自動轉檔、預讀取下一頁；第四是 Figma 互通——一鍵把 Figma 設計拉進來變成可發布頁面。
三工具的 AI 介入深度光譜
FRAMER
AI 是助攻
視覺操作為主，AI 在你召喚時才出現
FIGMA MAKE
AI 是轉換器
把你已經做完的設計檔翻譯成可運行的 code
LOVABLE
AI 是建造者
從 0 開始，AI 主導整個 stack 的生成
價格方案 2025 年 10 月重組過，現在五階：Free（1 個 CMS collection、framer.app subdomain）、Basic 10 美金/月（年付，30 頁、自訂網域）、Pro 30 美金/月（150 頁、10 個 CMS、staging、analytics）、Scale 100 美金/月（300+ 頁、premium CDN）、Enterprise 客製。Wireframer 跟 Workshop 從 Free 開始就能用，這點 Framer 算佛心。
最常被罵的不是價格本身，是 Basic 跳 Pro 那個斷崖——Basic 只給 1 個 CMS collection，blog 跟 case study 一加就被逼著升 Pro。額外 editor 在 Pro/Scale 是 40 美金/月，多語系一個 20–25 美金/月，這些零碎加起來會讓帳單長得跟原本以為的不一樣。
CHAPTER 05 · CROSS COMPARISON
放在同一張桌上比，差異會跳出來
我把四個維度——用途、AI 介入、輸出物、學習曲線、價格起點——攤成一張對照。設計師看這種表會比看十段文字快。
維度
LOVABLE
FIGMA MAKE
FRAMER
主要產出
完整 web app（含資料庫、auth）
互動式 prototype、簡單 web app
完整網站（landing、portfolio）
AI 模型
多模型（Claude 為主）
Claude 3.7 Sonnet（持續擴）
自家 Wireframer / Workshop + 外接 OpenAI / Anthropic plugin
後端能力
完整（Supabase / Lovable Cloud）
弱（前端為主，第三方 DB 整合中）
無（純前端 + CMS）
學習曲線
中（需練 prompt 與 debug）
低（Figma 用戶幾乎無痛）
中（canvas 操作邏輯需熟悉）
付費起點
25 USD/月（Pro）
15–16 USD/月（Full Seat）
10 USD/月（Basic）
最像哪一類人
想做 MVP 的 indie hacker、PM、SaaS 創辦人
已經住在 Figma 的產品設計師
獨立設計師、agency、portfolio 至上的人
有一個常見誤解我特別想拆穿：「Lovable 跟 Framer 是替代品」。不是。歐洲開發圈這半年最常看到的工作流是 Framer 做 landing page、Lovable 做 app 後端，前者抓眼球、後者跑業務邏輯，兩個串成一個完整產品。把它們當對手是浪費。
CHAPTER 06 · WHICH ONE FOR YOU
設計師應該學哪個？三條路徑給你選
我帶設計師看這三個工具，最後都會落在同一個問題：你接下來十年想做什麼樣的設計師？這不是雞湯，是真實的職涯叉路。
三條設計師職涯路徑
路徑 A · 產品設計師
想把產品從頭做到尾
學 Lovable。願意花時間搞清楚 Supabase、Stripe、auth 是什麼，你會變成那個少數能獨立 ship 完整產品的設計師。市場上稀缺。
路徑 B · 互動 / 體驗設計師
想留在 Figma 但能交付互動
學 Figma Make。你不需要學新工具的 UI，所有設計檔、設計系統、變數都在那。團隊內溝通成本最低。
路徑 C · 視覺 / 品牌設計師
想用視覺說服世界
學 Framer。你的設計力是核心競爭力，AI 只是讓你出貨快一倍。動畫、CMS、SEO 都在裡面，從 portfolio 到 client work 都吃得開。
那種「三個都學一點」的策略，我會勸你緩一緩。每個工具背後的 mental model 差很多——Lovable 你要學 prompt engineering 跟 debug 思維；Figma Make 你要強化你的設計系統紀律；Framer 你要把 motion 跟 hierarchy 練到比同行銳利。淺嚐三個工具的人，最後反而沒辦法做出比 ChatGPT 更好的東西。
我自己的偏好是 Framer 加 Lovable 雙修。Framer 拿來做品牌型內容跟 portfolio，Lovable 拿來做工具型產品。Figma 設計檔的東西，我大多直接在 Figma Make 裡轉成互動原型給合作夥伴看，不獨立發布。但這是我的選擇，你不用照抄。
CHAPTER 07 · TAKEAWAYS
設計師的天花板，被掀開了
在設計圈深耕快十年，我看過設計師被「工程師說不行」這句話卡住職涯的次數，多到可以寫成一本書。Lovable、Figma Make、Framer 這三個工具同時出現在 2025–2026 年，本質上是把這句話的權重砍掉一半。
不是說工程師沒用了——他們在大型系統、performance、安全性這些事情上仍然不可取代。但是對於「我想試試這個想法可不可行」「我想做一個小工具給自己用」「我想 ship 一個 MVP 看市場反應」這些早期階段，設計師現在第一次可以不用排隊等別人。
這個轉變對台灣的設計師特別重要。我們的設計教育很強，但接案文化把太多人困在「畫稿—等對接—改稿」的循環裡。當你可以自己 ship 出可運作的東西，你就不只是接案的人，你是有 leverage 的人。leverage 是這個世代設計師能不能往上走的關鍵字（HBR 130 萬筆勞動數據顯示設計師工作量下降 17%，π 型人才那篇有完整的市場觀察）。
選哪個工具，最終是選你願意對自己的職涯下哪一種注。三個工具都跑得很快，半年後功能會再翻一輪。但是 mental model 不會變——產品思維、設計系統思維、視覺思維，這三條路會持續存在。你選的不是工具，是身份。
你選的不是工具，是身份。
FAQ · 常見問題
六個你會想問的問題
Q：完全沒寫過 code，可以直接用 Lovable 嗎？
可以，但你要做心理準備。Lovable 的甜蜜點是「會描述需求、看得懂錯誤訊息的人」。你不需要會寫 React，但你要會看懂「Authentication failed」這種訊息是什麼意思。建議先用免費版練手 30 個 credit，做一個給自己用的小工具，跟它打過幾次架之後再決定要不要付費升級。
Q：Figma Make 跟 Lovable 都是 Claude 模型，為什麼結果差很多？
關鍵在「上下文」。Figma Make 拿到的上下文是你完整的設計檔——layers、variables、component 變體。Lovable 拿到的是你的 prompt 文字。同樣的模型給不同上下文，結果當然不同。這也說明為什麼設計師在 Figma Make 用得順手——你的設計檔本身就是最好的 prompt。
Q：Framer 的 AI 真的不如 Lovable、Figma Make 嗎？
不是「不如」，是「定位不同」。Framer 從來就不打算用 AI 取代設計師——它的 AI 是設計師的助攻工具，幫你跳過空白畫布的恐懼。Wireframer 給你一個結構起點，Workshop 幫你寫客製 component code，但所有美學決策還是你自己做。如果你要的是「我講一句話就生成漂亮網站」，Framer 不是這條路；如果你要的是「我有設計品味，但討厭從零開始」，Framer 是這條路。
Q：三個工具的程式碼可以匯出嗎？
Lovable 可以隨時 export 到 GitHub，乾淨的 React + TypeScript + Tailwind，部署到 Vercel 或自己的伺服器都行——這也是它最大的賣點之一，沒有 vendor lock-in。Figma Make 生成的程式碼也可以複製出來，但目前還是設計檔為主、code 為輔的工具。Framer 是三個裡面唯一綁定平台的——你的網站必須掛在 Framer hosting 上，沒有 export 成獨立 HTML/CSS 的選項。
Q：付費方案哪個 CP 值最高？
看用途。Framer Basic 10 美金/月做 portfolio 跟 landing page 是甜蜜點；Lovable Pro 25 美金/月 100 credit 適合每個月做一個小 MVP；Figma Make 沒有單獨方案，但如果你本來就有 Figma Full Seat（16 美金/月），等於免費送你 Make 功能，這個算盤打起來最划算。重度使用 Figma Make 要注意 AI credit 配額從 2026 年 3 月開始嚴格執行。
Q：學會這些工具，設計師會被淘汰嗎？
反過來說——不學的設計師會被淘汰。AI 工具不是來取代設計師的，它取代的是「不會用 AI 工具的設計師」。學會這些工具之後，你的工作不會變少，但你能交付的東西會變多、變快、變深。設計師的價值會從「執行畫面」往「定義體驗、建立判斷力、做 taste 決策」這邊轉移。這個轉移本來就在發生，AI 工具只是加速器。