Lovable AI 教學

 

Lovable 是一款由 AI 驅動的 UI 設計平台，特色如下：

不需 Figma、美術背景，就能輕鬆設計頁面。

只要輸入需求指令，AI 就能幫你產出符合風格的 UI

（推薦可搭配 ChatGPT 輔助撰寫）。

自動轉出 HTML、React 等前端程式碼，馬上就可使用。

https://hackmd.io/@my-sdgs/Hy31vnoIlg

https://notesstartup.com/simple-lovable-tutorial/

簡單來說，Lovable 是一個讓你可以用「說人話」的方式來創造網站或應用程式的平台。

你完全不用會寫程式碼，只要打字或開口說話，就可以做出一個真的能用的成品。

你只要輸入一段提示詞，告訴它你想做什麼，它就能幫你把整個網站的網頁都生成出來。如果覺得結果不夠好，只要再補充幾句話，它就能馬上改成你想要的樣子，超方便的！

步驟 2：用我的「提示詞模板」打造理想網站

為了幫助你做出更棒的網站，我特別製作了一個「AI 做網站的提示詞模板」。

照著這個模板填寫，生成出來的網站成果，會比你隨意描述需求好蠻多的！

提示詞模板：

提示詞

為了幫助你製作出理想的網站，我有製作了一個AI 做網站提示詞模板，照著填，生成出來的網站成果會比隨意描述需求好很多。

你可以點擊影片下方說明欄的連結到我的網站複製提示詞模板。

一、網站主題與目標受眾：

網站主題：

　請填寫你的網站主題

　例如：一家位於台北的日式拉麵店、一個專門介紹加密貨幣的部落格、一個展示攝影作品的個人作品集

目標受眾：

　請填寫你的目標受眾

　例如：喜歡日本料理的年輕人、對投資有興趣的初學者、需要攝影服務的潛在客戶

二、網站核心功能與特色：

核心功能：

　請填寫你網站最重要的 3-5 個核心功能

　例如：線上菜單、顧客評價、最新消息發布、作品分類展示、聯絡表單、線上預約

網站風格與特色：

　請填寫你希望網站呈現的風格與特色

　例如：簡約現代、溫暖舒適、專業可信賴、充滿創意與藝術感

三、網站內容與文案：

　請提供網站的主要文案、標題或關鍵資訊

　例如：

　　首頁標題：歡迎來到［你的品牌名稱］

　　關於我們：［一段簡短的品牌介紹］

　　服務項目：［列出你的主要服務或產品］

　　聯絡方式：［你的地址、電話、Email］

四、參考網站：

請提供一個你喜歡的參考網站連結

例如：請 AI 分析這個網站的佈局、風格和功能，作為生成你網站的參考

建議你先把模板複製到自己習慣的文字編輯器 (像是 Google 文件或備忘錄)，先把你的網站需求填好，再一口氣貼到 Lovable。