爆火的 “死了麼” APP，我也可以用 AI 一句話生成落地

作者：AI竹筍集

日期：2026年1月14日上午11:30

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

一句話生成可部署網頁應用嘅AI工具 Lovable 實測，設計師都可以輕鬆整網站

整理版摘要

呢篇文章係一個設計師睇到Boss直聘上好多設計師崗位要求識用Lovable，就去研究呢個AI工具。Lovable係一個可以一句話生成完整網頁應用嘅平台，前端、後端、數據庫一應俱全，仲可以一鍵部署。作者比較咗Lovable同Gemini 3 Pro嘅分別：Gemini係通用AI，Lovable就專門識得整網頁應用。

作者用Lovable實測整一個設計師個人網站，畀咗詳細嘅提示詞，由框架到互動細節一步步優化，仲可以匯入參考圖做排版。最後佢總結咗Lovable嘅優點，包括快速整原型、唔使寫code、自動優化手機睇法，但都有缺點，例如處理複雜邏輯會出錯、導出功能唔穩定、功能限制多。

整體結論係：Lovable適合產品經理、創業者、設計師、學生呢啲有想法但唔識寫code嘅人，可以快速將諗法變成可用嘅產品，驗證需求或者整Demo好有用。

Lovable係一個AI網頁應用生成工具，一句話就可以整出完整嘅可部署網站，唔使識寫code。
同Gemini 3 Pro相比，Lovable專注網頁應用生成，速度快而且深度整合後端服務，但通用性較低。
實測用Lovable整設計師個人網站，畀提示詞後幾分鐘就整到基礎框架，可以反覆迭代加互動效果同改設計。
Lovable嘅主要優勢係快速整原型、拖放式UI編輯、自動優化手機版面；限制係複雜邏輯易出錯、導出唔穩定、功能自訂空間細。
適合想整小工具或應用但唔識寫code嘅人，可以將諗法快速變成產品，驗證需求或做Demo。

值得記低

Prompt

生成設計師個人網站嘅完整提示詞

包括角色與風格定義（高端極簡，深色模式配螢光綠）、核心頁面規劃（首頁、作品列表、詳情頁、關於我、練習區）、功能組件需求（玻璃導航、CTA、Hover動畫、響應式）。

結構示例

內容片段

內容片段 makefile

角色與風格定義
“請為我創建一個高端、極簡風格的設計師個人作品集網站（Portfolio App）。視覺風格參考地平線風格（Minimalist & Modern），使用大面積留白、精緻的襯線體與無襯線體混排、平滑的滾動動畫。配色方案為：深色模式背景 
#0a0a0a
，主文字 
#ffffff
，輔助色使用一種亮眼的熒光綠 
#cfff04
 作為交互點綴。”
核心頁面規劃
首頁 (Landing Page): > * Hero Section: 巨大的粗體標題（My Name / Role），一個吸引人的 Slogan，以及一個可交互的 3D 元素或高質量個人形象圖。
精選作品預覽: 2-3 個核心項目的瀑布流展示，包含大圖、項目名稱、分類標籤和 Hover 放大效果。
服務領域: 簡潔的網格佈局（UI/UX, Branding, Motion）。
作品列表頁 (Work): > * 支持分類篩選（Filter）功能（如：全部、網頁設計、品牌、移動端）。
項目卡片包含：縮略圖、年份、項目簡稱。
作品詳情頁 (Project Detail): > * 頂部沉浸式大圖。
項目信息欄（角色、時間、挑戰、工具）。
長頁面佈局，支持插入多張高清展示圖、設計說明文字、最終成果展示。
關於我 (About): > * 左側個人簡介文案，右側個人照片。
工作經歷時間軸（Timeline）。
教育背景與獲獎榮譽（Grid）。
練習/日常 (Playground): > * 採用 3 列小網格，展示一些概念稿或攝影作品。
功能與組件需求
全局導航: 磨砂玻璃效果（Glassmorphism）的頂部固定導航欄。
聯繫模塊: 包含底部大尺寸的“讓我們聊聊”引導（CTA），附帶社交媒體連結（Behance, Dribbble, Instagram, Email）。
交互反饋: 所有的按鈕和卡片在 Hover 時要有平滑的位移或縮放動畫。
響應式: 必須完美適配移動端。

整理重點

Lovable 係乜嘢？一句話變出應用嘅神奇工具

最近Boss直聘上面好多設計師崗位都要求識用Lovable，作者研究完發現呢個工具可以一句話生成可部署嘅應用，前端、後端、數據庫全部搞掂。

Lovable 係個「許願池」，唔使識code，只要講人話就得

佢嘅獨家優勢有三點：速度似火箭，幾分鐘整到原型；操心似管家，同Supabase深度整合，自動搞掂用戶登錄同數據儲存；出品唔鎖死，生成嘅React、TypeScript code可以匯出到GitHub，隨時畀工程師再改。

整理重點

Lovable vs Gemini 3 Pro：全能學霸 vs 網頁搭建小能手

Gemini 3 Pro係個「全科學霸」，乜都識，寫詩解題睇圖都得；而Lovable就專注幫你整網頁應用，講人話就出到有界面有數據庫嘅完整應用。簡單講，Gemini畀答案同靈感，Lovable幫你直接將諗法變成軟件。

Gemini係聰明隊友，Lovable係實幹派

作者用Nano Banana Pro整咗張可視圖，仲話Lovable有大量template，趕時間可以直接用。

整理重點

實測：一句話整設計師個人網站

1 先用Gemini幫手出網站需要嘅提示詞，包括角色風格、核心頁面規劃、功能需求。
2 將提示詞餵畀Lovable，幾分鐘就出到基礎框架，有深色模式、螢光綠點綴，仲有磨砂玻璃導航。
3 再叫Lovable優化交互細節，例如Hero加Canvas粒子效果、作品篩選用淡入淡出動畫、詳情頁用交替排版。
4 用視覺編輯或設計模塊改細節，好似Figma咁直接編輯元素；仲可以匯入參考圖做排版。
5 最後一鍵部署，直接網頁打開就睇到；就算想改code，都可以打包下載或者喺線叫AI再改。

Lovable嘅視覺編輯入口好明顯，一鍵改設計

整理重點

優缺點全面睇：快但有限制

Lovable嘅優勢：快速整原型，3星期就整到第一個版本；AI輔助可視化編程，唔使寫code；預設手機優化排版。

但缺點都好明顯：複雜邏輯易令其他元件出錯，好似作者整網站時有圖片顯示唔到或間距bug；下載導出功能唔穩定，好浪費時間；功能限制多，冇自訂表單、冇Stripe結帳、冇後台，UI版型固定咗就好難改彈性。

複雜邏輯容易引致其他部分出錯，係主要痛點

適合產品經理、創業者、設計師、學生等有想法但唔識code嘅人。
可以快速驗證需求、整課設、做Demo，甚至整小工具。
但如果有特殊需求例如NFT圖片抓取、換裝邏輯、後台管理，Lovable就搞唔掂。

整理重點

創意啟發：由「死了麼」到「活着麼」

作者話最近有個「死了麼」APP好紅，我哋都可以用Lovable整「活着麼」、「分手了麼」、「玩了麼」呢啲應用，仲可以發佈出去，話唔定會引起共鳴。

唔好畀「我唔識寫code」呢個念頭扼殺你嘅創意

而家有呢啲工具，從諗法到可用工具可能仲快過寫PPT。作者話：「我哋嘅超能力係發現問題，而家連方案都可以好似搭積木咁簡單整出嚟。」

哈佬~大家晚上好呀~

最近見到 boss 直聘好多設計師崗位都會提到要求識用 Lovable 呢啲AI工具去做靈感創作，我當時見到呢個都呆咗，一時以為係 Lovart，跟住我去研究咗呢個工具，啊~ 原來係一句話就可以生成可以部署嘅應用程式嘅AI工具。

呢個時候，一個大疑惑充斥住我個腦，嗯？以前咁Hit嘅Gemini 3 pro都係一句話生成一個應用嘅AI工具噃，咁兩者有咩分別呢？

先俾你哋個工具網址：https://lovable.dev/

首先，Lovable係咩嚟？

啱啱打開Lovable，俾佢嘅Ui同UX驚艷到，太注重俾用戶情緒價值啦~ 成個畫面都係💗，好可愛~

品牌視覺差異化十足，每個頁面背景都係品牌💗

呢度係佢嘅官方使用教學：

https://docs.lovable.dev/introduction/getting-started#create-your-first-project

Lovable呢樣嘢真係好得意！佢就係一個「許願池」，唔使識半句 Code，只要識說人話就行。

例如，我哋對住佢噏一句：「幫我做個可以登入、可以記賬、仲可以自動計糧嘅小工具！」——叮咚！幾分鐘之後，一個可以㩒可以用嘅網頁應用就變咗出嚟，Frontend、Backend、Database齊曬，仲可以一鍵 Deploy上線。簡直就係將諗法「講」成軟件嘅神奇小工廠。

它的獨家優勢啦，簡單嚟講就三點：

01、速度快過火箭：

人哋要搞環境、寫 Code 搞幾日，佢幾分鐘就可以同我哋整到個行得鬱嘅原型，驗證諗法快到飛起。

02、照顧周到好似管家：

我哋唔使頭痛 Server、Database呢啲麻煩嘢，佢同 Supabase呢啲 Backend服務深度整合，自動幫我哋搞掂用戶登入、數據儲存呢啲底層邏輯。

03、出品唔會被鎖死：

生成嘅係正統 React、TypeScript Code，可以 Export到 GitHub，隨時可以交俾 Programmer 深度自訂唔怕俾平台「綁架」。

Product Manager 啲兄弟都High咗~ 咁咪有個諗法我直接就可以落地，成條 Product Line 一個 Lovable 就搞掂曬！

唉~ 而家佢仲未咁高級啦~

佢唔係咩取代 Programmer 嘅黑科技，而係俾我哋唔識 Code 嘅普通人裝上「整軟件」嘅翅膀——等 Product Manager、創業者、Designer 們，都可以輕鬆將腦入面嘅好點子，「講」成一個真正、用得嘅產品。

當我哋有啲咩小工具嘅需要嘅時候，唔好猶豫，去同佢「傾」一句試嚇啦！😉

Lovable VS Gemini 3 pro

咁佢同以前咁Hit嘅Gemini 3 pro到底有咩分別呢？

Gemini 3 Pro 就好似個「全科學霸」，咩都識，可以寫詩、可以解題、仲可以睇得明我哋 Send 嘅 Screenshot，係一個多才多藝嘅通用型大腦。

而 Lovable 就係一個「網頁搭建小能手」，專攻一樣嘢：同佢說人話，佢就可以啪啪聲幫你生成一個有界面、有Database嘅完整網頁應用，主打一個「快」同「專」。

簡單講，Gemini 係俾我哋答案同靈感嘅聰明隊友，Lovable 係幫我哋直接將諗法變成軟件嘅實幹派。

我用 Nano Banana Pro 生成一張可視圖，方便各位小夥伴理解：

仲有大量 Template，我哋時間比較緊嘅時候可以直接用：

Lovable實測案例

把口講不如實際做一次：

我哋身為Designer，好多時候需要整一個Designer個人設計網站，我哋先用 Gemini 幫我哋出一個設計網站需要嘅內容嘅 Prompt：

喺 Prompt嘅結果入面仲體貼咁提示我 Lovable 有強大嘅迭代功能，叫我一步一步最佳化：

所以，第一步網站框架嘅 Prompt 如下：

角色與風格定義
“請為我創建一個高端、極簡風格的設計師個人作品集網站（Portfolio App）。視覺風格參考地平線風格（Minimalist & Modern），使用大面積留白、精緻的襯線體與無襯線體混排、平滑的滾動動畫。配色方案為：深色模式背景 
#0a0a0a
，主文字 
#ffffff
，輔助色使用一種亮眼的熒光綠 
#cfff04
 作為交互點綴。”
核心頁面規劃
首頁 (Landing Page): > * Hero Section: 巨大的粗體標題（My Name / Role），一個吸引人的 Slogan，以及一個可交互的 3D 元素或高質量個人形象圖。
精選作品預覽: 2-3 個核心項目的瀑布流展示，包含大圖、項目名稱、分類標籤和 Hover 放大效果。
服務領域: 簡潔的網格佈局（UI/UX, Branding, Motion）。
作品列表頁 (Work): > * 支持分類篩選（Filter）功能（如：全部、網頁設計、品牌、移動端）。
項目卡片包含：縮略圖、年份、項目簡稱。
作品詳情頁 (Project Detail): > * 頂部沉浸式大圖。
項目信息欄（角色、時間、挑戰、工具）。
長頁面佈局，支持插入多張高清展示圖、設計說明文字、最終成果展示。
關於我 (About): > * 左側個人簡介文案，右側個人照片。
工作經歷時間軸（Timeline）。
教育背景與獲獎榮譽（Grid）。
練習/日常 (Playground): > * 採用 3 列小網格，展示一些概念稿或攝影作品。
功能與組件需求
全局導航: 磨砂玻璃效果（Glassmorphism）的頂部固定導航欄。
聯繫模塊: 包含底部大尺寸的“讓我們聊聊”引導（CTA），附帶社交媒體連結（Behance, Dribbble, Instagram, Email）。
交互反饋: 所有的按鈕和卡片在 Hover 時要有平滑的位移或縮放動畫。
響應式: 必須完美適配移動端。

將 Prompt 餵俾 Lovable ，佢好快就開始工作~

然後我哋就得到咗網站嘅基本框架：

好國際化，高級簡約，仲有啲設計感，對於0設計基礎嘅小夥伴嚟講，例如我哋嘅Product Manager，呢個完全夠同客戶示範喇~

如果內容同功能仲未完整，我哋可以繼續同Lovable提需求，等佢繼續最佳化，例如，我哋叫佢最佳化互動細節：

請完善以下頁面的具體佈局和功能：
首頁 (Home):
Hero Section: 標題“Crafting Digital Experiences”，下方一行小字簡介。背景加入一個跟隨鼠標微動的 Canvas 粒子效果或模糊的漸變光暈。
Selected Works: 採用大尺寸縱向卡片，Hover 時圖片輕微放大，並浮現項目名稱。
作品列表與篩選 (Work):
實現一個 Animated Filter。點擊標籤（UI/UX, Branding, Motion）時，作品網格能夠以淡入淡出的動畫自動重排。
作品詳情模板 (Project Case Study):
Header: 佔據全屏寬度的項目封面圖。
Meta Data: 一個乾淨的四列布局，顯示 Client, Role, Services, Year。
Content: 支持交替顯示的“文字+圖片”模塊，以及 100% 寬度的沉浸式大圖展示區。
實驗區 (Playground):
使用 Masonry (瀑布流) 佈局，展示設計師的日常練習和靈感碎片的縮略圖。
發送給lovable：

呢啲互動小動效令成個網站都變得更加有趣！

內容同功能都滿足嘅情況之下，我哋就要喺設計上發力。

Lovable好體貼咁俾咗我哋呢個入口同設計Template：

修改視覺模塊元素，我哋可以從兩個入口入，首先係輸入框入面好明顯嘅【視覺編輯】按鈕，㩒落去就可以對修改嘅模塊進行即時最佳化；

另一個係頂部編輯選單【設計】模塊，左側列表就有呢個入口，同時輸入框可以針對設計重新 Send 修改 Prompt：

我哋可以好似喺 Figma 入面咁去編輯元素：

OK喇，設計細節上我哋都改咗，如果我哋有一張好嘅參考圖，Figma Screenshot 或者 Pinterest 參考圖，我哋想令生成嘅頁面排版佈局跟返參考圖，Lovable 都一定要支援啦~

我哋嘅網站頁面最佳化得差唔多，咁樣我哋就可以發佈喇，直接網頁打開就可以瀏覽~

如果話，朋友，你仲識啲 Code 知識，咁仲好~

呢個應用唔使由零開始整，一句話生成之後，我哋仲可以打包 Download Code，或者直接喺線上 Code 入面直接修改最佳化；

「我識 Code 都唔想寫啦~」

冇問題，佢可以直接「一句話」叫 AI 直接幫你修改~

諗起當年因為公司要求Designer要識寫Code，而我跟得好吃力結果俾公司炒咗，就揑緊拳頭，我當年如果遇到而家呢個AI時代，仲使驚咩！

客觀嚟講，Lovable 實測落嚟嘅感受：

佢嘅優勢在於

01、快速構建原型

可以喺靈感爆發時迅速將諗法轉化為實際產品，例如喺短短3星期內完成Made by Ape Cards嘅第一個版本，好啱開發早期嘅MVP（最小可行產品）或者Demo。

02、AI輔助可視化編程

採用拖放式UI編輯器，我哋根本就唔需要手寫大量Code，甚至我哋都唔需要識Code，就可以上手，直接降低開發門檻。

03、預設移動設備最佳化排版

默認嘅排版設計針對移動設備進行咗最佳化，方便開發移動端應用。

但佢都有啲缺點

01、複雜邏輯問題

處理複雜邏輯嘅時候，容易搞到其他元件出錯。好似我生成嘅個人設計網站，總有一部分圖片 Load 唔到或者間距會有 Bug。

02、Download/Export功能唔穩定

Download同Export功能經常有問題，而且好難 Debug，浪費咗我唔少時間，嬲到想揼咗個Keyboard（淡定！淡定！）。

03、功能限制多

冇得自訂 Form，冇 Stripe Checkout整合，缺乏後台功能，冇得追蹤用戶或者收集數據，UI版型一固定，設計彈性好有限。

04、冇辦法滿足特定需求

對於需要支援NFT圖片自動抓取、可疊加嘅換裝邏輯（Layer System）、賀卡Export PNG檔案（含用戶自訂內容）、Stripe Checkout流程、AI生成祝福語功能以及一個後台系統（可以管理用戶、內容同紀錄）呢啲需求，Lovable冇辦法滿足。

佢適合嘅人羣

Product Manager、創業者、Designer、學生，或者任何有「想整個小工具/小應用」嘅諗法，但又被技術門檻卡住嘅人。

唔好俾「我唔識寫Code」扼殺你嘅小天才！——而家由諗法到用得嘅工具，可能仲快過寫PPT。

想驗證需求、搞個課設、整個動效Demo，定係單純嫌某個App難用想自己改……都有「講人話就出到嘢」嘅工具幫你跨過技術難關。

我哋嘅超能力係發現問題，至於將方案「變出嚟」？而家都可以好似砌積木咁簡單。

大家最近有冇見到APP【死了麼】咁Hit，我哋都可以整一個【活緊麼】APP、網頁應用，或者【分手了麼】、【玩咗麼】……仲可以發佈出去，萬一引起共鳴都Hit埋呢~（講笑咋~哈哈哈）

////// END //////

㩒個「在看」，每日收到最新資訊

哈嘍~大家晚上好呀~

最近看到 boss 直聘很多設計師崗位都會提到要求會 Lovable 等AI 工具去進行靈感創作, 我當時看到這個愣了一下, 一時以為是 Lovart , 然後我去研究了一下這個工具, 啊~ 原來是一句話生成可部署應用的AI工具。

這個時候, 一個大大的疑惑充斥着我的腦子, 嗯? 曾經那麼火的 Gemini 3 pro 也是一句話生成一個應用的AI 工具啊, 那麼兩者有什麼區別呢?

先奉上工具網址:https://lovable.dev/

首先, Lovable 是什麼?

剛打開 Lovable , 被它的 Ui 和 UX 驚豔到了, 太注重給用戶提供情緒價值了吧~ 滿眼都是 💗, 可可愛愛~

品牌視覺差異化十足, 各個頁面背景都是品牌💗

這裏是它的官方使用教程:

https://docs.lovable.dev/introduction/getting-started#create-your-first-project

Lovable 這東西也是太有意思了！它就是個“許願池”，不用懂半句代碼，只要會說人話就行。

比如，我們對着它嘟囔一句：“幫我做個能登錄、能記賬、還能自動算工資的小工具！”——叮咚！幾分鐘後，一個能點能用的網頁應用就給你變出來了，前端、後端、數據庫全齊活，還能一鍵部署上線。簡直就是把想法“說”成軟件的神奇小工廠。

它的獨家優勢嘛，簡單說就三點：

01、速度像火箭：

別人吭哧吭哧配環境、寫代碼要幾天，它幾分鐘就能給我們搓出一個能跑起來的原型，驗證想法快得飛起。

02、操心像管家：

我們不需要頭疼服務器、數據庫這些麻煩事，它和 Supabase 這類後端服務深度集成，自動幫我們搞定用戶登錄、數據存儲這些底層邏輯。

03、出品不鎖死：

生成的是正經的 React、TypeScript 代碼，可以導出到 GitHub，隨時可以交給程序員小哥深度定製，不怕被平台“綁架”。

產品經理哥們兒都嗨了~ 這豈不是有個想法我直接就能落地了, 一整個產品線一個 Lovable 都搞定了!

嗐~ 現在它還沒這麼高級啦~

它可不是什麼取代程序員的黑科技，而是給我們不會代碼的普通人裝上了“製作軟件”的翅膀——讓產品經理、創業者、設計師們，也能輕鬆把腦子裏的好點子，“說”成一個真正的、能用的產品。

在我們有個什麼小工具的需求的時候，別猶豫，去跟它“聊”一句試試看唄！😉

Lovable VS Gemini 3 pro

那麼, 它和曾經那麼火的 Gemini 3 pro 到底有啥區別呢?

Gemini 3 Pro 就像個“全科學霸”，啥都懂，能寫詩、能解題、還能看懂我們發的截圖，是個多才多藝的通用型大腦。

而 Lovable 則是個“網頁搭建小能手”，專攻一件事：跟它說人話，它就能哐哐給你生成一個帶界面、帶數據庫的完整網頁應用，主打一個“快”和“專”。

簡單說，Gemini 是給我們答案和靈感的聰明隊友，Lovable 是幫我們直接把想法變成軟件的實幹派。

我用 Nano Banana Pro 生成一張可視圖, 便於小夥伴們理解:

還有大量的模版，我們在時間比較急的時候可以直接帶入使用：

Lovable實測案例

嘴上說不如實際操作一下:

我們身為設計師，有很多情況需要做一個設計師個人設計網站，我們先用 Gemini 幫我們出一個設計網站所需要內容的提示詞：

在提示詞結果中還貼心的提示我 Lovable 有強大的迭代功能，讓我一步步優化：

所以，第一步網站框架的提示詞如下：

角色與風格定義
“請為我創建一個高端、極簡風格的設計師個人作品集網站（Portfolio App）。視覺風格參考地平線風格（Minimalist & Modern），使用大面積留白、精緻的襯線體與無襯線體混排、平滑的滾動動畫。配色方案為：深色模式背景 
#0a0a0a
，主文字 
#ffffff
，輔助色使用一種亮眼的熒光綠 
#cfff04
 作為交互點綴。”
核心頁面規劃
首頁 (Landing Page): > * Hero Section: 巨大的粗體標題（My Name / Role），一個吸引人的 Slogan，以及一個可交互的 3D 元素或高質量個人形象圖。
精選作品預覽: 2-3 個核心項目的瀑布流展示，包含大圖、項目名稱、分類標籤和 Hover 放大效果。
服務領域: 簡潔的網格佈局（UI/UX, Branding, Motion）。
作品列表頁 (Work): > * 支持分類篩選（Filter）功能（如：全部、網頁設計、品牌、移動端）。
項目卡片包含：縮略圖、年份、項目簡稱。
作品詳情頁 (Project Detail): > * 頂部沉浸式大圖。
項目信息欄（角色、時間、挑戰、工具）。
長頁面佈局，支持插入多張高清展示圖、設計說明文字、最終成果展示。
關於我 (About): > * 左側個人簡介文案，右側個人照片。
工作經歷時間軸（Timeline）。
教育背景與獲獎榮譽（Grid）。
練習/日常 (Playground): > * 採用 3 列小網格，展示一些概念稿或攝影作品。
功能與組件需求
全局導航: 磨砂玻璃效果（Glassmorphism）的頂部固定導航欄。
聯繫模塊: 包含底部大尺寸的“讓我們聊聊”引導（CTA），附帶社交媒體連結（Behance, Dribbble, Instagram, Email）。
交互反饋: 所有的按鈕和卡片在 Hover 時要有平滑的位移或縮放動畫。
響應式: 必須完美適配移動端。

把提示詞餵給 Lovable ，它很快就進入工作~

然後我們就得到了網站的基礎框架：

很國際化了，高級簡介，還挺有設計感的，對於0設計基礎的小夥伴們來說，比如我們的產品經理，這完全足夠和客戶演示了~

如果內容和功能還不完整，我們可以繼續和lovable提需求，讓它繼續優化，比如，我們讓它優化交互細節：

請完善以下頁面的具體佈局和功能：
首頁 (Home):
Hero Section: 標題“Crafting Digital Experiences”，下方一行小字簡介。背景加入一個跟隨鼠標微動的 Canvas 粒子效果或模糊的漸變光暈。
Selected Works: 採用大尺寸縱向卡片，Hover 時圖片輕微放大，並浮現項目名稱。
作品列表與篩選 (Work):
實現一個 Animated Filter。點擊標籤（UI/UX, Branding, Motion）時，作品網格能夠以淡入淡出的動畫自動重排。
作品詳情模板 (Project Case Study):
Header: 佔據全屏寬度的項目封面圖。
Meta Data: 一個乾淨的四列布局，顯示 Client, Role, Services, Year。
Content: 支持交替顯示的“文字+圖片”模塊，以及 100% 寬度的沉浸式大圖展示區。
實驗區 (Playground):
使用 Masonry (瀑布流) 佈局，展示設計師的日常練習和靈感碎片的縮略圖。
發送給lovable：

這些交互小動效讓這個網站都變得更有趣了！

內容和功能都滿足的情況下，我們就要在設計上發力了。

lovable 很貼心的給我們提供了這個入口和設計模板：

修改視覺模塊元素，我們可以從兩個入口進去，首先就是輸入框中那個明顯的【視覺編輯】按鈕，點擊就可以對修改的模塊進行實時優化；

另一個就是頂部編輯菜單【設計】模塊，左側列表就有這個入口，同時輸入框可以針對設計重新發送修改提示詞：

我們可以像在figma中一樣的去編輯元素：

OK了，設計細節上我們也更改了，如果說我們有一個優秀參考圖，Figma 截圖或 Pinterest 參考圖，我們想讓生成的頁面排版佈局按照參考圖來，lovable 也必須支持啊~

我們的網站頁面優化得差不多了，這樣我們就可以發佈了，直接網頁打開就能瀏覽~

如果說，朋友，你還懂一些代碼知識，那更好啦~

這個應用不用從0開始搭建，一句話生成之後，我們還可以打包下載代碼，或者直接在線上代碼上直接修改優化；

“我懂代碼我也不想寫啊~”

沒關係，它可以直接 “一句話” 讓 AI 給直接修改了~

想起來當年因為公司要求設計師會寫代碼，而我學起來吃力被公司pass掉就捏緊了拳頭，我當年要趕上現在這個AI時代，我還怕啥呀！

客觀來說，Lovable 實測下來的感受：

它的優勢在於

01、快速構建原型

能夠在靈感爆發時迅速將想法轉化為實際產品，例如在短短3周內完成Made by Ape Cards的第一版，非常適合開發早期的MVP（最小可行產品）或Demo。

02、AI輔助可視化編程

採用拖放式UI編輯器，我們根本就不需要手寫大量代碼，甚至我們都不需要懂代碼，就可以上手了，直接降低開發門檻。

03、預設移動設備優化排版

默認的排版設計針對移動設備進行了優化，方便開發移動端應用。

但是它也有一定劣勢

01、複雜邏輯問題

在處理複雜邏輯時，容易導致其他元件出現錯誤。像我生成的個人設計網站，總有一部分圖片加載不出來或者間距會有bug。

02、下載/導出功能不穩定

下載和導出功能經常出現問題，且很難調試，相當浪費我的時間，氣的想砸了鍵盤（淡定！淡定！）。

03、功能限制多

無法自定義表單，沒有Stripe結賬整合，缺乏後台功能，無法追蹤用戶或收集數據，UI版型一旦固定，設計彈性非常有限。

04、無法滿足特定需求

對於需要支援NFT圖片自動抓取、可疊加的換裝邏輯（Layer System）、賀卡導出PNG檔案（含用戶自定義內容）、Stripe結賬流程、AI生成祝福語功能以及一個後台系統（可管理用戶、內容與紀錄）等需求，Lovable無法滿足。

它適合的人羣

產品經理、創業者、設計師、學生，或者任何有“想做個小工具/小應用”的想法，但又被技術門檻卡住的人。

別讓“我不會寫代碼”憋死你的小天才！——現在從想法到可用的工具，可能比寫PPT還快。

想驗證需求、搞個課設、做個動效Demo，還是單純嫌某個App難用想自己改……都有“說人話就能出活”的工具幫你跨過技術坎。

我們的超能力是發現問題，至於把方案“變出來”？現在也可以像搭積木一樣簡單。

大家最近有沒有看到APP【死了麼】這麼火，我們也可以搞一個【活着麼】APP、網頁應用，或者【分手了麼】、【玩了麼】……還能發佈出去，萬一能引起共鳴也火了呢~（開玩笑啦~哈哈哈）

////// END //////

點個在看，每天收到最新資訊