- Free plan includes 30 credits per month
- Collaborate in real time with multiplayer editing and AI assistance
- Fully managed hosting, domains, SEO, and updates in one platform
我實際喺兩者上都做咗真實建置。Lovable 整體上係為建 web 應用程式嘅團隊而勝出嘅選擇。Figma Make 就係對已經身處 Figma 生態系統、想由概念更快走到原型嘅設計師嚟講最啱用。
繼續閱讀前最重要要理解嘅一點
Figma Make 並唔係一個獨立嘅應用程式建構工具。 佢係 Figma 入面嘅一個功能，可透過同 Figma Design、FigJam 同 Slides 相同嘅導覽列存取。要使用佢，你需要一個 Figma 帳戶。免費 Starter 計劃提供有限存取（每日 150 AI credits，每月 500）。超出呢個範圍就需要每人每月 $16 嘅 Professional seat 或更高級別。
快速摘要
Figma Make係一層建基於全球最受歡迎設計平台之上嘅 AI 層，旨在令 Figma 設計師更高效，並更快由概念走到互動原型。 Lovable 係一個獨立專家：描述一個網頁應用程式，就可以得到一個完全部署好嘅全棧產品，附帶即時資料庫、驗證同付款處理。兩者有重疊，但受眾唔同，而正確選擇取決於你嘅起點。
| 功能 | Figma Make | Lovable |
|---|---|---|
| 起始價格 | 包含於 Figma Professional（$16/full seat/month）內 | $25/month（不限用戶） |
| 免費試用／計劃 | 有（Starter 每日 150 AI credits，每月 500） | 有（每日 5 credits，每月上限 30） |
| 使用嘅 AI 模型 | 預設、Claude Sonnet 4.6、Gemini 3 Flash、Gemini 3.1 Pro（可選） | OpenAI、Google Gemini、Anthropic 嘅混合 |
| 獨立工具 | 否（位於 Figma 之內；需要 Figma 帳戶） | 有（無需預先平台） |
| 無代碼建構工具 | 部分（以提示為先；亦有內嵌視覺編輯同程式碼存取） | 有（無需技術知識） |
| 預建範本 | Figma Community 圖庫（對設計師嚟講非常豐富） | 有（社群專案 + Business+ 設計範本） |
| 自訂程式碼匯出 | 有（GitHub 整合；下載；Make 內置程式碼編輯器） | 有（GitHub 同步，完整程式碼擁有權） |
| 網頁應用程式支援 | 有（React + Tailwind；配備 Supabase 嘅全棧） | 有（React/TypeScript/Tailwind） |
| API 整合 | GitHub、Supabase、Google Analytics、自訂程式碼注入 | 80+ 個已驗證整合；原生 Supabase 同 Stripe |
| 付款處理 | 無原生付款整合 | 有（原生 Stripe：結帳、訂閱、webhooks） |
| 部署選項 | figma.site 子域名；設定中可用自訂網域 | lovable.app、自訂網域、GitHub 同步 |
| 即時協作 | 有（Figma 跨所有產品嘅 multiplayer） | 有（無限協作者、multiplayer 工作空間） |
| 版本控制 | 自動版本管理（Version 1、2、3…）；可喺聊天中回滾 | 內置回滾 + GitHub 同步 |
| 程式碼擁有權 | 有（GitHub 整合；下載為 ZIP） | 有（完全擁有權，GitHub 同步） |
1. 價格同計劃比較
Lovable 的不限團隊費率勝過 Figma Make 的按席位模式，適合任何尚未為 Figma 付費的團隊
| 功能 | Figma Make | Lovable |
|---|---|---|
| 免費方案 | Starter：150 個 AI 點數/日、500/月（有限；無不限次生成） | Free：5 個每日點數、30/月上限 |
| 入門方案 | Professional：$16/完整席位/月（+ 3,000 個 AI 點數/月） | Pro：$25/月（無限用戶） |
| 中階方案 | Organization：$55/完整席位/月（+ 3,500 個 AI 點數/月） | Business：$50/月（無限用戶） |
| 團隊席位類型 | Professional 上的完整席位（$16）、Dev 席位（$12）、Collab 席位（$3） | 單一方案涵蓋所有用戶 |
| Enterprise | $90/完整席位/月（+ 4,250 個 AI 點數/月） | Custom |
| 年度折扣 | 是（Organization 和 Enterprise 按年計費） | 是 |
Figma Make
Figma Make 的定價無法與 Figma 的定價分開；它們是同一個訂閱。實際上，這代表：
費用完全取決於你的團隊從哪裡開始：
已經在使用 Figma？ Make 無需額外費用。AI 點數（Professional 上為 3,000/月，Organization 上為 3,500/月）會在 Figma 的 AI 功能之間共用，但完整席位已經付費。
未使用 Figma？ 你是在購買全球領先的設計平台，只為使用一個功能。單一 Professional 完整席位為 $16/月，或五人共 $80/月。這會讓你獲得 Figma Design、FigJam、Slides、Buzz、Sites、Draw 和 Make：一套完整的設計工具，大多數應用程式建構工具用戶並不需要。
在你決定前，這個點數系統值得了解：
- Starter（免費）：每日 150 個 AI 點數、每月 500 個。足以評估；不足以持續建構。
- 點數會共用：在所有 Figma AI 功能之間共用，不只限於 Make。圖片編輯、Design AI 工具和 Make 都會從同一個點數池中扣減。
- 中途提示：如果你一直積極建構，可能會出現「檢查你的 AI 點數餘額」通知；請相應安排。
席位類型很重要。 Figma Make 需要完整席位。Dev 席位（$12/月）和 Collab 席位（$3/月）不包括完整的 Make 存取權。如果只有部分團隊成員需要用 Make 進行建構，你可以混合使用席位類型，但每一位會用 Make 建構的人都需要 $16/月或以上的完整席位。Lovable
Lovable 的模式在結構上比任何按席位計費系統都更簡單：一個訂閱、無限用戶、一個價格。
- 免費 ($0): 每日 5 點數，每月上限 30 點。足以探索介面並測試一次建置；不足以支援持續的正式生產開發。
- Pro ($25/month): 一個訂閱提供無限用戶。包括點數結轉至下一個計費週期、自訂網域、移除已發佈應用程式上的徽章、按需加購點數，以及多人工作區（Lovable 2.0）。持有有效學術電郵的學生可享高達 50% 折扣。
- Business ($50/month): Pro 的所有功能，外加 SSO（適用於使用 Google Workspace、Okta 或類似身分提供者的團隊）、角色型存取控制、安全中心儀表板，以及優先支援。仍然涵蓋無限用戶。
- Enterprise: 為專屬支援、進階合規文件、自訂基礎設施，以及 SLA 保證提供自訂定價。
沒有按席位計算，沒有建構者和檢視者之分，亦沒有會隨著團隊增長而分配不均的點數池。一個兩人創辦團隊和一個四十人產品組織在 Pro 上都支付同樣的 $25/month。
當新成員加入並需要存取權時，他們可直接加入工作區，無需購買新席位、無需計費管理員批准，也無需追蹤人數。
年度計費會為付費計劃提供折扣。如果團隊在下一次重置前用盡每月配額，亦可在週期中途按需購買點數。
勝出摘要： 誠實的答案取決於情境。對於已經使用 Figma Professional 的設計師來說，Figma Make 基本上是免費的：以零額外成本將它加入現有工作流程。對於未使用 Figma 的團隊，選擇 Make 意味著至少要支付 $16/seat/month，5 人時升至 $80/month，而 Lovable 的固定價格則為 $25/month。對於任何六人或以上且尚未訂閱 Figma 的團隊，Lovable 明顯更便宜，而且沒有設計平台的額外負擔。
2. AI 能力 & 功能比較
Figma Make 的模型選擇器、生態系統嵌入，以及自我修復程式碼，令它在此類別中脫穎而出
| 功能 | Figma Make | Lovable |
|---|---|---|
| 使用的 AI 模型 | Claude Sonnet 4.6、Gemini 3 Flash、Gemini 3.1 Pro，或 Default（可按每個提示選擇） | OpenAI、Google Gemini、Anthropic 的混合 |
| 模型選擇 | 有（每次提示前選擇模型） | 沒有（單一模型，不能由用戶選擇） |
| 自然語言處理 | 優秀（對開發者和設計師都友好；生成前會解釋推理） | 強（全程使用簡單英文；無需技術知識） |
| 程式碼生成質素 | 優秀（Radix UI、MUI、Recharts、Tailwind CSS v4、Lucide icons；專業技術棧） | 優秀（React/TypeScript/Tailwind；可用於生產環境） |
| 建置前透明度 | 有（AI 會即時解釋其計劃、技術棧選擇，以及元件決策） | 是（生成前有結構化建構計劃；會標示缺失的依賴） |
| 自我修復代碼 | 是（偵測警告；提供「幫我修復」；診斷根本原因） | 是（一鍵「嘗試修復」錯誤） |
| Figma 生態系統嵌入 | 是（將 Make 連結貼入 Figma Design、FigJam 或 Slides；即時原型會在畫布上播放） | 否（獨立工具） |
| 指點即編 | 是（點擊元素；會出現格式工具列；將提示範圍限定於所選元素） | 是（Visual Edits；點擊任何元素即可調整） |
| 設計系統整合 | 是（存取 Figma 元件庫；嵌入現有設計系統工作流程） | 否（獨立於設計檔案） |
| 後端整合 | Supabase（透過提示設定驗證、資料庫、儲存） | Supabase（原生、深度整合） |
| 上下文透明度 | 是（AI 會指出 Recharts、Tailwind v4 的選擇；註明缺失套件；推理過程可見） | 是（生成前會回傳建構計劃） |
| 程式碼編輯器存取 | 是（Make 內有完整 VS Code 風格編輯器；檔案樹；package.json 可編輯） | 是（Dev Mode，瀏覽器內編輯器） |
| 工作階段中繼資料 | 是（可見「Worked with 8 files」；使用統計：credits、commands、time） | 沒有以同等詳盡程度公開 |
Figma Make
Figma Make 最具特色的 AI 功能，是本系列中其他平台都沒有提供的一項：你可在每次提示前選擇模型。
選擇器位於聊天面板底部。有四個選項：
- 預設：Figma 建議的速度與能力平衡
- Claude Sonnet 4.6：形容為「平衡且高效」，對任何使用 Anthropic 模型的人都很熟悉
- Gemini 3 Flash：「快速且迭代」：適合需要快速回饋的快速視覺變更
- Gemini 3.1 Pro：「深度且具創意」：適用於複雜版面與細緻生成
生成前的透明度。 當我提交 NexaHost 分析儀表板提示時，Figma Make 在寫下一行程式碼前先說明了其方法。
自我修復程式碼。 當輸出包含超過十個警告時，系統提供「幫我修復。」AI 診斷出問題：圖表資料中的重複鍵值導致鍵值衝突及動畫問題。它為每個資料點指派唯一識別碼，並停用了互相衝突的圖表動畫。這個修正精準而到位。
Figma 生態系統嵌入。 複製一個 Figma Make 連結，貼到任何 Figma Design 檔案、FigJam 白板或 Slides 簡報中，即時互動原型便會直接在該畫布上播放。
元件質素。 NexaHost 儀表板使用了：@mui/material, @radix-ui 元件, lucide-react 作為圖示, @emotion 作為樣式, 以及 recharts 用於資料視覺化。這正是資深前端工程師會使用的，而不是一個簡化的腳手架。
Lovable
Lovable 的 AI 專精一件事，並將它做到徹底：從純英文提示詞生成及部署完整堆疊 web 應用程式，無需任何前置條件。
一個提示詞即可生成完整堆疊。 在 InvoicePro 的建立過程中，一個提示詞在 10 分鐘內就產生了以下所有內容，全部建好、連接好，並已上線：
- 一個 Supabase 資料庫，包含三個相關資料表（clients、invoices、time_entries）及正確的外鍵關係
- 包括電郵/密碼及 Google OAuth 的驗證
- 一個 Stripe 整合，具備三個定價層級、結帳連結及 webhook 處理
- 一個面向客戶的入口網站，具備正確的按用戶資料範圍劃分
- 一個部署於 lovable.app 的 URL
無需選擇模型。無需決定框架。無需審核警告。
預先建構規劃。 在撰寫程式碼之前，Lovable 會回傳一個結構化計劃，列出每項功能、技術選擇，以及缺失的依賴項（例如 Supabase 連線需求）。這樣在 AI 確定採用某個架構之前，便提供了一個審閱時機，類似 Figma Make 的透明推理步驟，但應用於完整堆疊。
80+ 原生整合。 Stripe、Supabase、OpenAI、Resend、PostHog、Cloudinary、Twilio 等，可透過 Connectors 側邊欄連接，無需貼上 API 金鑰，也無需撰寫樣板程式碼。Figma Make 的原生整合清單涵蓋 GitHub、Supabase 和 Google Analytics：三項整合對比八十多項。Lovable 2.0 功能：
- 開發模式: VS Code 風格的瀏覽器內程式碼編輯器，直接編輯元件
- 視覺化編輯: 點擊任何元素即可在 CSS 層級調整文字、顏色、內邊距或間距
- 主題: 全域設計 token 面板（顏色、字型、邊框半徑），只需一個設定即可套用全站變更
- 多人協作工作區: 多名團隊成員可同時協作
- AI 連接器: 通往 AI 服務、向量資料庫與工作流程 API 的預建路徑
勝出摘要： Figma Make 在 AI 能力方面勝出，特別適合想要模型層級控制的設計師及開發團隊。每個提示詞都可選擇 Claude Sonnet 4.6、Gemini Flash 或 Gemini Pro（而且當某次迭代未如理想時，還可升級至更強大的模型），這是一項在這個比較系列中沒有其他平台提供的真正能力。
3. 應用程式生成速度 & 品質比較
Figma Make 在前端方面更快；Lovable 提供更完整的產品
| 功能 | Figma Make | Lovable |
|---|---|---|
| 首次結果所需時間 | 少於 2 分鐘（複雜的多頁儀表板） | 少於 10 分鐘（完整已部署全端應用程式） |
| 構建內容 | 附模擬資料的前端儀表板；基礎版本沒有後端 | 全端應用程式（驗證、資料庫架構、Stripe 付款、客戶入口網站） |
| 視覺設計質素 | 卓越（專業元件堆疊；貼合情境的真實資料） | 高（精緻的 SaaS 級 UI） |
| 程式碼結構 | Radix UI、MUI、Recharts、Tailwind v4；元件分離得宜 | React/TypeScript/Tailwind；具型別元件；有結構的資料夾 |
| 資料真實度 | AI 生成的真實活動動態內容 | 標準佔位符模式，結構準確 |
| 後端完整度 | 基礎版本中未包含（Supabase 另行加入） | 從首個版本起已完整具備（驗證、DB、Stripe 已串接） |
| 程式碼警告狀態 | 生成後警告可能仍會存在；通常需要手動修正 | 輸出大致乾淨；可一鍵修正 |
| 生產就緒度 | 中等（前端很出色，需設定後端） | 中至高（已部署全端，建議檢查 RLS） |
Figma Make：NexaHost SaaS 分析儀表板
我提交了一個提示詞：為一家名為 NexaHost 的虛構託管公司製作完整的 SaaS 分析儀表板，包含深色側邊欄、KPI 卡片、流量圖表，以及最近活動動態。速度： 從按下提交到完全渲染並可互動，少於 2 分鐘。這包括 AI 的推理階段、完整程式碼生成，以及畫布渲染。就輸出的複雜程度而言，這是這個比較系列中最快的生成時間。
質素：儀表板包含的內容：
- 一個深色側邊欄，帶有 NexaHost 品牌、「Analytics Dashboard」副標題，以及五個導覽連結（Overview、Servers、Traffic、Billing、Settings），其中 Overview 立即以藍色高亮
- 一個頂部列，設有可正常運作的搜尋欄，以及「Sarah Chen / Admin」用戶檔案、通知鈴鐺和頭像
- 四個 KPI 卡片：Uptime（99.98%）、Active Servers（47）、Monthly Bandwidth（2.4 TB）、Open Tickets（8），每個都有相對上月的趨勢指標
- 一個 30-Day Traffic Trends 圖表，以功能完整的 Recharts 面積視覺化方式呈現，帶有從 May 11 到 June 5 的實際日期標籤，y 軸標籤以 20k 間隔顯示，數據處於 40k-80k 帶寬範圍
- 一個 MRR by Plan 柱狀圖和伺服器狀態分佈視覺化
- 一個 Recent Activity 動態消息流，包含符合情境且真實的主機託管事件：web-prod-03 的伺服器部署成功、db-master-01 的 CPU 使用率達 87% 的高 CPU 警告、api.nexahost.com 的 SSL 憑證到期警示、收到付款通知，以及已排程的維護時段，全部都符合該領域，沒有任何泛泛而談的內容
這個動態消息流細節值得細看。Figma Make 並不只是填入預留文字。它理解上下文是主機託管儀表板，並生成了真實的營運事件，這是主機託管營運團隊實際上會看到的。
這種內容生成中的上下文智能確實令人印象深刻，並為 AI 生成的假資料應該如何呈現樹立了基準。
警告問題。 在生成後，出現了超過十個警告。「Fix for me」將數量減少到三個，之後的編輯又把它推回到九個，然後再次超過十個。儀表板在整個過程中仍然持續正常渲染和運作。不過，對於計劃將生成的程式碼投入生產的團隊來說，一個每次迭代都會自我產生新警告的程式碼庫，在正式採用前值得再做進一步測試。Lovable: InvoicePro 建置
我提交了一個提示詞，打造一個客戶入口網站和發票 App，涵蓋多租戶儀表板、時間追蹤、附 PDF 輸出的發票、Stripe 付款，以及由 Supabase 支援的客戶入口網站。
速度： Lovable 在撰寫任何程式碼之前先返回了一份建置計劃，標示出 Supabase 連線需求，並在連線後開始。主要里程碑：
- 第 4 分鐘: 首頁已上線，包含主視覺文案和六張功能卡片
- 定價區塊: Starter ($9/month)、Professional ($29/month, “Most Popular”)、Enterprise ($79/month)
- 少於 10 分鐘: 已在 lovable.app 上部署，Supabase 驗證、資料庫表格和 Stripe 結帳全部已接好
品質：InvoicePro 包含：
- 具有三個相關表格（clients、invoices、time_entries）的 Supabase 資料庫，外鍵關係正確，沒有手動編寫 SQL
- 驗證：email/password 和 Google OAuth，已設定並接好
- Stripe 整合：三個定價層級、結帳連結、帳單入口網站路由、訂閱同步、處理付款事件的 webhook
- 一個面向客戶的入口網站，每個用戶都有正確的資料範圍
- 乾淨的 React/TypeScript/Tailwind，搭配有型別的資料陣列、具名元件檔案，以及合乎邏輯的資料夾結構
- 在 10 分鐘內於可分享的 URL 上完成部署
當缺少的 Supabase 環境變數導致預覽空白時，系統顯示了一段純文字錯誤說明，並附有 “Try to fix” 按鈕。只需一鍵即可解決。
勝出概覽：
速度： Figma Make 勝出：少於 2 分鐘，相比 Lovable 的 10 分鐘。對需要快速迭代前端設計的團隊來說，這個差距是真實存在的。
輸出質素： Figma Make 的 NexaHost 儀表板在視覺上是這個比較系列中最令人印象深刻的前端。符合情境的活動動態、專業的元件堆疊，以及可運作的圖表實作，代表了出色的 AI 生成前端作品。
完整性： Lovable 勝出。InvoicePro 是一個完整部署的產品，具備驗證、真實資料庫和付款處理。NexaHost 則是一個驚豔的前端，但需要額外的 Supabase 設定才能成為真正的應用程式。對於今天就需要一個可運作產品的讀者而言，Lovable 10 分鐘內完成且所有功能都已接好的輸出，比 2 分鐘的漂亮原型更有價值。
4. 易用性比較：哪個平台更容易使用？
Lovable 毋須任何前置平台，亦毋須設計背景；Figma Make 回饋先前的 Figma 經驗
| 功能 | Figma Make | Lovable |
|---|---|---|
| 帳戶設定 | 現有 Figma 帳戶會直接沿用（最快）；新用戶首先需要一個 Figma 帳戶 | 容易（電郵或社交登入；簡短的入門問卷） |
| 需要先前工具 | 是（Figma 帳戶；熟悉 Figma 介面會大有幫助） | 否（獨立使用；無需前置條件） |
| 儀表板導覽 | 對現有 Figma 使用者而言容易；對新用戶而言，先要熟悉 Figma 介面則為中等難度 | 容易（以提示詞為先；專案檢視和 Recents 在側邊欄） |
| 首次建立應用程式 | 如果你熟悉 Figma，會非常快；如果不熟悉，則會增加 Figma 的入門開銷 | 容易（可接受完整提示詞；後端的 Supabase 連接有指引） |
| 需要提示詞工程 | 低（使用簡單英文即可；技術性表述屬可選，但可改善結果） | 低（整個流程都可用簡單英文） |
| 自訂：聊天式 | 是（在訊息輸入框描述更改） | 是（功能完整的提示詞式編輯） |
| 自訂：視覺內聯 | 是（Point and Edit：點擊元素；格式工具列會顯示在元素上方） | 是（Visual Edits：點擊元素即可在預覽中調整） |
| 自訂：程式碼層級 | 是（完整程式碼編輯器，附檔案樹；可編輯 package.json；可設定私人 npm 套件） | 是（Dev Mode；瀏覽器內 VS Code 風格編輯器） |
| 匯出／部署 | 容易（發佈到 figma.site；設定中有 GitHub；可下載為 ZIP） | 容易（一鍵發佈到 lovable.app 或同步至 GitHub） |
| 學習曲線 | 對 Figma 使用者而言低；對必須同時學習 Figma 與 Make 的新用戶而言為中等 | 低 |
註冊及帳戶建立
Figma Make 的 入門流程會因你從哪裡開始而有兩種非常不同的體驗：
- 現有 Figma 使用者：前往 figma.com，在建立帳戶前輸入提示詞，使用 Google 或電郵登入，幾秒內便會進入 Make。提示詞會自動帶入。
- 新 Figma 使用者：首先會接觸到一個完整的設計平台，包含多個產品（Design、FigJam、Slides、Buzz、Sites、Draw、Make）。前往 Make 並理解它相對於其他工具的作用，會增加實際的導覽時間。
Lovable 的 註冊流程經由一個簡短的角色問卷。儀表板會即時載入，無需先理解其他平台。
註冊時包含 GitHub 作為驗證選項，與 Google 和 Apple 並列。Lovable 亦會記住你上次使用的方法，這對回訪用戶而言是個細心的小細節。
使用者介面與儀表板
Figma Make 的 工作區分成兩個主要區域。左側面板處理對話：底部是提示，上方是 AI 回應與推理，版本歷史則以可捲動的標示卡片呈現。右側區域是輸出渲染的即時畫布。
畫布工具列提供三個值得了解的檢視：
- 預覽模式 （眼睛圖示）：即時互動原型
- 程式碼模式 （尖括號圖示）：左側是完整檔案總管，右側是程式碼編輯器
- 合併版面：兩者同時顯示
在它們之間切換是即時的，並不會中斷生成。在程式碼檢視中，完整專案結構會顯示出來：App.tsx、所有 component 檔案、package.json，以及設定檔，而且每個檔案都可直接編輯。
在聊天面板底部：新增提示的按鈕、模型選擇器下拉選單、AI 設定的閃光圖示，以及 Build/Default 模式切換。這些控制項就是你大部分工作流程決策發生的地方。
Lovable 的 儀表板會打開成溫暖的藍到粉紅漸層，並帶有個人化問候語。提示框寫著「叫 Lovable 建立一個 web app，內容是…」，旁邊有 Build 模式切換和 Connectors 橫幅。
左側側欄顯示 Home、Search、Resources 和 Connectors，後面接著專案檢視和 Recents 區塊。對於非技術使用者而言，這個儀表板更容易立即理解。
Point and Edit 系統
Figma Make 的 Point and Edit 內嵌編輯是其最強的可用性功能。當 NexaHost 儀表板渲染完成後，我點擊了「30 天流量趨勢」標題。兩件事同時發生：
- h3 標籤識別符會出現在聊天輸入中，將我的下一個提示範圍限定到那個精確元素
- 一個豐富的格式工具列直接出現在畫布中的該元素上方：字體家族、大小、粗體、斜體、對齊，以及其他控制項
我可以在聊天中用純英文描述變更，或是完全不寫提示，直接透過工具列操作該元素。這種混合方式比那些把每次變更都交由 AI 處理的工具更實用，尤其是小修正：修正打字錯誤或更改價格，不需要等待 AI 解讀提示。
第一代教學覆蓋層會分四個步驟帶你走過 Point and Edit，並在剛剛好的時刻出現：在你的第一次輸出渲染之後，也就是你真正需要資訊的時候。Lovable 嘅 Visual Edits 亦同樣運作：喺預覽中點擊任何元素即可調整文字、顏色、內距或間距，但唔會有同步格式工具列。
Lovable 嘅視覺編輯器所作嘅變更會透過直接 CSS 編輯處理，而 Figma Make 嘅工具列就增加咗毋須輸入文字即可即時格式化嘅選項。
整體易用性評估
坦白講，分野係：
- 已經喺 Figma 入面？ Make 係較易行嘅路徑。冇轉換成本，冇新儀表板，輸出會同設計檔案一齊出現喺 Recents，而且 Figma 嘅多人協作會自動延伸到 Make 專案。
- 唔用 Figma？ Lovable 會更易用。唔需要決定座位類型，唔需要監察 credit 餘額，亦唔需要平台上手負擔。只要描述一個應用程式，就會部署。
勝出摘要： 對於未有既有 Figma 工作流程嘅團隊，Lovable 喺易用性上勝出。對於 Figma 原生團隊，易用性方程式就會逆轉：Make 可喺佢哋已經熟悉嘅環境內使用，而 Lovable 則代表要額外上手一個平台。決定因素係你團隊而家身處邊個環境。
5. 私隱同安全比較：邊個平台更安全？
Figma 擁有本比較系列中最全面嘅合規組合；但喺發佈方面存在一個關鍵私隱風險
| 功能 | Figma Make | Lovable |
|---|---|---|
| SOC 2 Type II | 是（每年由獨立核數師審核） | 是（Type 1 同 Type 2） |
| ISO 27001 | 是（已通過 ISO/IEC 27001:2022 認證） | 是（ISO 27001:2022） |
| ISO 27017 | 是（雲端安全控制） | 未確認 |
| ISO 27018 | 是（雲端私隱保護） | 未確認 |
| ISO 27701 | 是（私隱資訊管理） | 未確認 |
| FedRAMP Moderate | 是（美國政府級雲端合規） | 未確認 |
| GDPR | 是（EU Cloud Code of Conduct；可提供 DPA） | 是（完全符合 GDPR） |
| CCPA | 是 | 未確認 |
| TISAX | 是（歐洲汽車行業安全） | 未確認 |
| C5 | 是（德國政府支持嘅雲端標準） | 未確認 |
| 私隱模式 | 是（Teams 同 Organization 計劃；可用 SSO） | 未有公開文件記載 |
| 程式碼擁有權 | 是（GitHub；可下載為 ZIP） | 是（GitHub 同步） |
| 社群發佈風險 | 是（如果唔取消勾選 “Show chat history”，聊天記錄會預設曝光） | 冇社群發佈功能 |
Figma Make
Figma 的合規組合係本比較系列中最全面嘅：
- SOC 2 Type II: 每年一次的獨立審核，確認安全控制持續有效
- SOC 3: 面向公眾的 SOC 2 結果報告
- ISO 27001:2022: 資訊安全管理國際標準
- ISO 27017: 雲端專用安全控制
- ISO 27018: 在雲端保護可識別個人身份的資訊
- ISO 27701: 私隱資訊管理系統認證
- FedRAMP Moderate: 美國政府級雲端合規，聯邦機構採用所需的認證級別
- GDPR: 遵循 EU Cloud Code of Conduct；可提供 Data Processing Addendum
- CCPA: 加州消費者私隱法合規
- TISAX: 歐洲汽車工業資訊安全標準
- C5: 德國聯邦資訊安全辦公室為受監管及公營部門客戶提供的認證
對於受監管行業（金融服務、醫療保健、政府、汽車）的企業團隊而言，這種認證廣度意味著 Figma 已經完成合規工作。位於 compliance.figma.com 的 Trust Center 公開列出所有認證。
每位讀者在發佈前都必須知道的一項關鍵私隱風險。 Figma Make Publish 面板包含一個「顯示聊天記錄」核取方塊，預設為已勾選。如果你在未取消勾選的情況下發佈到 Figma Community，任何瀏覽你 Community 列表的人都可以看到你完整的提示對話：每一次迭代、每一個被否決的方向、以及你指定的每個細節。
對於個人學習專案而言，這無傷大雅。對於客戶工作、專有產品規格，或任何商業敏感的建置而言，這是一項重大的資料外洩風險。發佈流程中並沒有明確警告這一點，而且很容易被忽略。
Lovable
Lovable 持有三項經獨立審核的認證。每一項都值得從實際角度理解：
- SOC 2 Type 1 和 Type 2: Type 1 確認安全控制的設計適當。Type 2 確認這些控制在持續的審核期間內有效運作。同時持有兩者，意味著評估涵蓋了實際營運表現，而不只是設計意圖。
- ISO 27001:2022：資訊保安管理系統的國際標準，涵蓋雲端環境及供應商關係。2022 版特別反映了有關雲端服務的更新要求。
- 全面 GDPR 合規：已確認為平台預設設定，而非取決於部署配置。位於歐盟的團隊無需評估自我託管即可涵蓋。
程式碼擁有權始終明確：GitHub 同步可隨時乾淨退出，無需提取專有格式。
勝出摘要： Figma 擁有更全面的合規文件：ISO 27017、ISO 27018、ISO 27701、FedRAMP Moderate、CCPA、TISAX 及 C5，均超出 Lovable 公開確認的範圍。對於受監管行業的企業採購，Figma 的信任中心是更強的資源。權衡之處在於：社群發佈私隱風險（聊天記錄預設已公開）是一個真實的營運顧慮，而 Lovable 沒有這個問題。在發佈任何非個人 Figma Make 專案前，請確認「Show chat history」設定已關閉。
6. 平台整合及部署選項比較
Lovable 的 80+ 個整合（包括原生 Stripe）明顯勝出；Figma Make 缺乏付款處理
| 功能 | Figma Make | Lovable |
|---|---|---|
| 原生託管 | 是（figma.site；設定中的自訂網域） | 是（lovable.app） |
| 自訂網域支援 | 是（透過 Domains 設定） | 是（Pro plan 及以上） |
| GitHub 整合 | 是（連接 repo；推送生成的程式碼） | 是（完整同步、分支管理 |
| Vercel/Netlify 整合 | 否（先推送到 GitHub，然後另行連接） | 是（透過 GitHub 同步） |
| 資料庫選項 | Supabase（透過整合提示；需要作為第二步驟設置） | Supabase（原生、深入、從首次構建起自動化） |
| 付款處理 | 沒有原生付款整合 | 是（原生 Stripe：checkout、subscriptions、webhooks、billing portal） |
| 驗證 | Supabase Auth（電郵/密碼、magic links、Google、透過 Supabase 整合的 GitHub） | Supabase Auth、Google OAuth（從首次構建起） |
| 分析 | Google Analytics（設定中的 G-XXXXXXXX 欄位；無需外掛） | PostHog、Mixpanel、Google Analytics（於 80+ 目錄中） |
| 自訂程式碼注入 | 是（開始/結束於 <head> 及 <body>；接受任何 script 標籤） | 並非直接的設定欄位 |
| AI/API 整合 | 可設定自訂 API 端點；可透過「配置你的程式碼」對話框使用私有 npm 套件 | 80+ 個已驗證整合；AI Connectors 面板 |
| 社群發佈 | 是（Figma Community；原型可被發現；聊天記錄預設可見） | 沒有社群發佈功能 |
| 嵌入於設計檔案 | 是（將 Make 連結貼到任何 Figma 畫布；即時原型可內嵌播放） | 否 |
| SEO 中繼描述 | 由 AI 根據輸出內容自動產生 | 不是自動產生 |
| 開發者主控台 | 有（canvas 內的 JavaScript console；無需獨立 DevTools 視窗） | 未內置 |
Figma Make
Figma Make 的整合策略本來就刻意保持極簡。三個主要連接，加上備用出口：
Supabase。 加入真正的後端需要第二次提示，並非自動完成。你描述你需要甚麼（「加入 Supabase Auth」或「建立一個用於追蹤訂單的資料庫」），AI 就會把它接上。
GitHub。 連接一個儲存庫，並透過設定面板推送生成的程式碼。這可實現正確的版本控制、CI pipeline 整合，以及交接給開發團隊。送到 GitHub 的程式碼與生成時相同，都是面向正式環境的技術棧：Radix UI 元件、Recharts、Tailwind v4、帶型別的元件檔案。
Google Analytics。 一般設定中的單一欄位可接受 G-XXXXXXXX 追蹤 ID。無需注入 script 標籤，也無需安裝外掛。你已發布的應用程式只靠設定就能取得 GA4 分析。
自訂程式碼注入。 一般設定中的四個欄位涵蓋標準 HTML 注入點：開頭、結尾、開頭、結尾。任何有效的 script 或 HTML 標籤都可在此使用：Hotjar、Mixpanel、自訂字體、tag manager 腳本，以及任何透過標籤載入的外部服務。對於原生清單之外的整合，這就是備用出口。
「設定你的程式碼」對話框。 套件管理員設定可列出私有 npm 套件及額外的公開函式庫。需要特定內部依賴項的開發者可以在這裡加入，這是本系列中任何面向消費者的 AI builder 都沒有提供的功能。
Figma Make 沒有甚麼。 沒有 Stripe 整合。沒有任何形式的付款處理。要建立一個會收錢的 Figma Make 專案，需要透過自訂程式碼注入欄位另外設定 Stripe，或在 GitHub 匯出後手動加入。對於正在打造需要結帳流程的消費者產品的團隊來說，這個缺口很大。
目前還沒有 Vercel 或 Netlify 整合。 Figma Make 的部署方案目前是 figma.site 或 GitHub。如果你的工作流程涉及部署到 Vercel、Netlify、Render 或 Cloudflare Pages，這些平台目前都沒有一鍵整合。你需要先推送到 GitHub，然後再將該儲存庫連接到你偏好的主機供應商，作為另一個步驟。
Lovable
Lovable 的整合策略以覆蓋優先：80+ 個已驗證整合，覆蓋最常見的生產要求，無需撰寫程式碼。
Stripe (native, automatic). 在 InvoicePro 上只需一個提示：已生成三個定價層級，具備正確的結帳連結、帳單入口路由，以及用於訂閱狀態的 Supabase 同步。付款事件的 Webhook 處理器（訂閱已建立、付款失敗、訂閱已取消）在未有提示下亦已包含。整個 Stripe 整合在 10-minute 標記前已接好並投入運作。Figma Make 沒有對應能力。
Supabase (native, automatic). Lovable 會在第一次建置時就建立資料庫結構，而不是作為第二步。資料表會以正確的欄位類型及外鍵關係生成。驗證流程（email/password、Google OAuth、magic links）會自動接好。RLS 政策骨架亦會包含在內（儘管正確設定仍需要手動驗證，如第 5 節所述）。
80+ 目錄。 涵蓋電郵（Resend、SendGrid、Mailgun）、分析（PostHog、Mixpanel、Google Analytics）、檔案儲存（Cloudinary、經由 Supabase 的 AWS S3）、通訊（Twilio、WhatsApp Business API）、AI 服務（OpenAI、Anthropic、Cohere）等。每一項都可透過 Connectors 側邊欄連接，無需任何配置步驟，亦無需管理 API key。
AI Connectors (Lovable 2.0). 通往向量資料庫、AI 工作流程編排服務及 embedding APIs 的預建路徑，將目錄擴展至標準 REST 整合之外，適合打造 AI 驅動功能的團隊。
部署。 一鍵發佈至 lovable.app，並自動提供 DNS 及 SSL。對於已有託管基礎設施的團隊，可同步 GitHub 至 Vercel 或 Netlify。自訂網域在 Pro 及以上方案可連接，無需手動管理憑證。
對於超出 80+ 目錄的服務，Supabase Edge Functions 允許自訂基於 JavaScript 的伺服器邏輯，這是針對確實需要撰寫程式碼的客製化整合需求的實用逃生門。
勝出概覽： Lovable 在整合方面以明顯優勢勝出。Figma Make 缺乏任何原生付款處理，是最顯著的差距。對於任何收取收入的網頁應用程式（SaaS 產品、市場平台、訂閱服務），Lovable 的原生 Stripe 整合可在第一次建置中交付端到端付款邏輯，而 Figma Make 則需要另外自行建置。
Figma Make 對比 Lovable：最終結論
Lovable 更適合創辦人、產品團隊，以及任何正在建構網頁應用程式而又並非已經長期活在 Figma 裏面的人。Figma Make 更適合想在自己已熟悉的生態系統內更快製作原型的設計師。
| 類別 | 贏家 | 原因（簡述） |
|---|---|---|
| 定價與方案 | Lovable | $25/month for unlimited users; Figma Make requires $16/seat minimum for full access, rising to $80/month for 5 people not already on Figma |
| AI 功能 &功能 | Figma Make | 本系列中唯一提供模型選擇器（Claude、Gemini Flash、Gemini Pro）的平台；生態系統嵌入；自我修復程式碼；具情境豐富的生成 |
| App 生成速度 &質素 | Lovable | 少於 10 分鐘即可完成全端已部署應用程式；Figma Make 在前端方面更快（2 min），但需要作為第二步設定 Supabase 以使用真實資料 |
| 易用性 | Lovable | 無需先決平台；沒有 Figma 入門上手成本；對非 Figma 團隊而言，沒有生態系統切換成本 |
| 私隱與安全 | Figma Make | 本系列中最全面的合規組合（SOC 2、FedRAMP、ISO 27017/18/27701、TISAX、C5）；但社群發佈預設會公開聊天記錄：發佈前請將其關閉 |
| 整合 &部署 | Lovable | 80+ 個原生整合，包括 Stripe payments；Figma Make 沒有付款處理，並需要另外設定 Supabase 作為後端 |
如下情況請選擇 Lovable： 你是創辦人、產品經理，或需要在本週內交付一個具備驗證、資料庫和 Stripe payments 正常運作的已部署網頁應用程式的初創團隊。尤其當你的團隊本身未在 Figma 上，而且你需要一個可同時供技術與非技術團隊成員使用、而且沒有任何設計工具額外負擔的平台。如下情況請選擇 Figma Make： 你是已經在 Figma 上的設計師，或以設計為主導的團隊，想更快將原型轉化為真實互動，透過嵌入 Figma 檔案中的即時原型與持份者驗證想法，並從概念到原型都留在同一平台內。尤其適合你在設計評審期間需要於 FigJam 呈現互動式示範。
