十分鐘 AI 應用－AI 幫你做網頁、遊戲、小工具？！超強的 Lovable AI

還在使用複雜的程式碼建構網頁、製作遊戲或小工具嗎？還在為了調整網頁Banner 或空格大小花了整個下午的時間與程式碼搏鬥嗎？現在有個超強的 AI 工具 Lovable 讓你直接用聊天的方式完成這些複雜的工作。

「Vibe Coding」是由 OpenAI 前共同創辦人 Andrej Karpathy 提出的概念，透過自然語言與 AI 對話，協助使用者快速生成程式碼、降低技術門檻，讓無程式背景者也能輕鬆開發產品。

Lovable AI 就是一款專為非技術使用者設計的實用工具，讓沒有程式背景或網頁開發經驗的使用者，在短時間內完成從網站建構到遊戲、小工具設計等各類開發任務，只需要動動手、與 AI 聊聊天，Lovable AI 就能幫你一「指」搞定！

什麼是 Lovable AI？

來自瑞典的 Lovable AI 是一款無程式碼（No-Code）AI 開發工具，使用者只需用文字描述想法、送出指令，AI 便會自動生成程式碼，並快速建構出完整網頁或應用程式。此外，Lovable AI也支援資料庫整合、API串接與雲端部署服務，即使完全沒有程式基礎的使用者，也能輕鬆打造出可直接上線運行的網站。

目前 Lovable 提供四種價格方案：Free、Pro、Business 及 Enterprise，按照使用量與功能需求採訂閱計費，免費帳號每天可獲得 5 次 Credits（包含Message 與 Edit Credits），足以滿足小型專案的開發需求。

• Credit：可理解為 Lovable AI 的「使用次數或運算額度」，建立或修改專案時都會消耗 Credits。
• 免費版適合初學者或想體驗功能的使用者，Pro 與 Business 針對需要團隊協作或更高客製需求的用戶，而 Enterprise 提供大型企業級別的專屬整合與安全控管方案。

接下來，本文將帶你實際操作 Lovable AI，示範三個不同的應用範例，如果你也對「AI 幫你做網站」這件事感興趣，那就繼續看下去吧！

Lovable AI 註冊教學

在開始使用 Lovable AI 前，需要前往 Lovable 官方網站 建立個人帳號。

進入 Lovable 官網後，點擊右上角的「Get Started」，即可選擇透過 Google、Github 或其他方式進行登入。

登入後的整體操作體驗跟大家熟悉的 ChatGPT 操作畫面非常相似——你只需在對話框中輸入指令（Prompt），AI 就會根據內容自動開始生成網站或應用程式。

如果想看看其他使用者的創作靈感，可以將畫面往下滑動，可以在「From the Community」看到展示來自全球開發者的作品集，點選 「Preview」 按鈕即可立即瀏覽。

帳號建立完成後，我們就可以正式開始啦！

本篇教學將以免費方案作為示範，將帶你一步步體驗三個實作範例，文中也會附上可直接複製的 Prompt 指令，讓你輕鬆上手、快速生成屬於自己的作品。

首先，我們來示範如何用 Lovable AI 建立一個品牌形象網站。

只要輸入幾句提示詞（Prompt），說明網站風格與內容，Lovable AI 便會在幾分鐘內自動生成可運行的網站。

以下是我實際使用的範例文字，讀者可以依實際需求自由調整。

1. Prompt 範例

【網站主題與目標受眾】

請幫我製作一個「位於台北的義式冰淇淋店」的品牌網站，目標受眾是喜歡美食與高質感體驗、熱愛甜點的年輕族群。

【主要功能】

網站需包含以下功能區：

• 品牌故事 —— 介紹品牌理念、原料來源與職人精神
• 產品介紹與價格 —— 展示不同口味的冰淇淋、每日限量商品
• 線上訂購服務 —— 提供簡易訂購流程與付款入口
• 顧客評價 —— 呈現真實的顧客回饋
• 聯絡資訊與地圖定位 —— 包含地址、營業時間、Google Map連結

同時在網站上方建立導覽列，包含「首頁、品牌故事、產品介紹、訂購服務、顧客評價、聯絡我們」等選項。

【設計風格】

整體呈現「高級簡約」風格，結合義式清新與現代感，展現出「清新、健康、有活力」的品牌形象。

• 色調：主色：白色，輔色：藍色（可搭配柔和奶油色系）
• 字體簡約，整體排版乾淨明亮

【文案語氣】

文案風格自然親切，但仍保有專業職人精神，用詞應能傳遞「手工製作」「天然原料」「慢享受」等品牌價值。

【其他要求】

• 首頁要有明顯的CTA（Call to Action）按鈕，例如「馬上選購」或「探索口味」
• 每個功能區（例如：品牌故事／產品介紹／評價），請生成範例文字與對應圖片，圖片包含：店內空間氛圍、冰淇淋產品照等
• 網站需支援手機與平板裝置自動排版，確保不同螢幕尺寸皆能良好瀏覽

2. 生成結果

送出指令後，等待約3-5分鐘，Lovable AI會在對話窗內回覆「您的網站已打造完成！」

點擊紅圈處按鈕即可在新分頁預覽成果；按右上角的「Publish」則可直接發布網站。

3. 細節展示

Lovable AI 生成的網站風格乾淨簡約，上方自動建立導覽列，能清楚連結至各個功能分頁，包括品牌故事、產品介紹、線上訂購、顧客評價與聯絡資訊等。

不僅內容豐富完整，幾乎完美實現指令中的所有需求，甚至還自動補上Prompt 中未提及的「雙球折扣」等細節，讓網站體驗更貼近真實情境。

Lovable AI 還自動生成「Instagram 分享」與「Facebook 分享」按鈕，點擊後即可導向社群平台首頁，後續編輯更可以導向社群的指定頁面，設計感與互動性兼具。

4. 網站微調

若要調整字體大小、顏色、或版面，可點選對話窗左下角的 「Visual edits」 按鈕 (按下後會顯示為藍色)，即可直接在畫面上編輯，也可透過文字指令請 AI 幫忙修改。

不過要特別注意——免費用戶的每日額度有限，每次對話都會消耗 Credits，建議一次描述清楚需求以節省額度。

5. 專案管理

修改完成後，回到主畫面就能看到自己建立過的所有作品，方便使用者日後重新編輯或部署。

Lovable AI 除了可以建立網站外，也能幫你打造互動性十足的小遊戲。你可以自訂遊戲主題、規則與計分方式，讓休閒娛樂變得更有創意、更個人化！

同樣只需輸入提示詞（Prompt），描述你想要的遊戲內容與風格，AI 就會自動生成。

1. Prompt 範例

【遊戲主題】

製作一款「甜點記憶挑戰」遊戲，玩家需在限時內找出所有相同的卡牌配對。

遊戲風格明亮、溫暖可愛，主題為甜點與糖果，適合手機與電腦遊玩。

【遊戲規則】

• 畫面上共有 12 張卡牌（6 對），背面圖案一致。
• 玩家點擊卡牌可翻面顯示圖案（例如： 、、、、、）
• 第一張翻開後保持顯示，等待第二張翻開；第二張翻開後，兩張卡牌都保持顯示約 1 秒，讓玩家看清楚圖案後再覆蓋回去
• 若兩張卡牌圖案相同 → 配對成功並保持翻開；若不同 → 約 1 秒後自動覆蓋回去
• 遊戲有 60 秒倒數計時，時間結束前若未完成全部配對，顯示「時間到！」與目前得分
• 分數即時更新，每成功配對一組 +10 分，完成所有配對時自動停止計時，並顯示「恭喜完成！」與總得分

【主要功能】

• 首頁：顯示遊戲標題「甜點記憶大挑戰  」與 CTA 按鈕「開始遊戲」
• 遊戲頁面：
  • 12 張隨機排列的卡牌
  • 上方顯示「倒數計時」與「分數」
  • 翻牌動畫流暢
  • 配對成功時卡牌閃爍或亮起
• 結算頁面：
  • 顯示「恭喜完成！」或「時間到！」
  • 顯示總得分
  • 提供「再玩一次」按鈕

【設計風格】

• 色調：棕色 + 奶油白
• 整體風格：卡通風格、可愛明亮
• 字體：圓潤、清晰、童趣感
• 卡牌背面：糖霜或圓點圖案
• 介面簡潔，焦點集中於卡牌與計分區

【文案語氣】

輕鬆活潑，能夠鼓勵玩家參與遊戲，例如：「你準備好接受甜點記憶大挑戰了嗎？」、「恭喜完成！你真是個甜點記憶大師！」

【其他要求】

• 首頁須有明顯的CTA（Call to Action）按鈕，例如：「開始遊戲」
• 網站需支援手機與平板裝置自動排版，確保不同螢幕尺寸皆能良好瀏覽
• 若須生成圖片，請包含：童趣可愛的卡牌、清楚可見的遊戲按鈕、明亮背景
• 卡牌圖案以 emoji 或簡單插圖呈現，不需生成複雜圖片

2. 生成結果

送出指令後，Lovable AI 會自動生成可立即遊玩的遊戲版本。

使用者也能在對話框中依照前述教學，輸入指令以微調遊戲難度、時間限制或圖片風格， 讓 AI 快速協助完成遊戲版本的迭代與優化。

3. 資料庫設定

若想進一步加入排行榜、使用者登入或分數紀錄等功能，只需輸入指令

請設置資料庫來儲存遊戲成績

Lovable AI 會引導使用者啟用 Lovable Cloud（免費版可用），並自動整合資料庫功能，無需撰寫複雜程式碼，即可完成後端建置。

（一）輸入指令後，按下「Allow」授權 Lovable AI 連接至 Lovable Cloud。

（二）資料庫建立完成後，Lovable AI 會更新遊戲，新增成績儲存與排行榜功能。返回生成完成的網頁後，重新整理頁面，再次開始遊戲並提交結果。

（三）點擊下圖右上角紅圈處的「Cloud」圖示，進入後選擇 「Database」，即可在「Game Score」中查看剛剛送出的遊戲成績。

同樣的方法也可應用於〈實作一〉中的「訂購服務」功能，讓表單資料自動連接至資料庫，以儲存每筆訂購紀錄。

除了遊戲以外，Lovable AI 也能協助使用者打造專屬的互動小工具，這類應用非常適合內容創作者、心理測驗網站或品牌活動頁面使用，能以輕鬆的方式提升互動性與參與度。

接下來，我們來看看如何使用 Lovable AI 製作一款「線上塔羅占卜」工具。

1. Prompt 範例

【工具主題】

請幫我製作一個讓使用者可以線上抽塔羅牌、查看占卜結果的小工具，希望提供輕鬆、有趣、視覺化的占卜體驗，適合想要尋求內心平靜，或者迷信的使用者。

【主要功能】

• 首頁會介紹塔羅占卜特色，提供「開始占卜」按鈕，點擊後出現洗牌動畫與22張大阿爾克那塔羅牌
• 請使用者選擇3張卡牌，各自代表：過去、現在、未來。
• 使用者每次選擇卡牌之後，卡片都要轉成正面，且同一張卡片只能選一次。
• 翻開卡牌後，顯示卡牌名稱、象徵意義（正位／逆位）與簡短解讀
• 顯示「重新占卜」按鈕可再次抽牌

【設計風格】

• 整體風格神秘、優雅，帶有星空與魔法氛圍
• 色調：主色：深紫色，輔色：金色（可搭配藍色或黑色作為點綴）
• 字體可用細襯線字體或手寫風格
• 背景畫面可使用星空、月亮、魔法陣等元素

【文案語氣】

文案自然溫柔、帶點神祕與療癒感，例如：「讓宇宙給你今天的指引」、「翻開屬於你的塔羅訊息」

【其他要求】

• 首頁要有明顯的CTA（Call to Action）按鈕，例如：「開始占卜」或「立即抽牌」
• 網站需支援手機與平板裝置自動排版，確保不同螢幕尺寸皆能良好瀏覽
• 若須生成圖片，請包含塔羅牌卡面、星空背景、金色裝飾元素

2. 生成結果

送出指令後，Lovable AI 會在短時間內自動生成互動式塔羅占卜工具，包含洗牌動畫、抽牌流程與結果解讀畫面，後續也能夠透過對話微調介面、文字、主題或卡牌呈現方式。

Lovable AI 不僅能生成靜態網站，也能自動建構具備高度互動性與豐富視覺效果的小型應用程式，這讓內容創作者、品牌行銷人員或產品開發者，能以更低門檻，快速打造出具體可用的互動體驗。

結語

看完這三個實作案例後，是不是也想立刻動手試試看呢？無論是品牌網站、互動遊戲還是個人小工具，Lovable AI 都能在幾分鐘內幫你從想法實踐到成品，現在就前往 Lovable 官方網站，讓 AI 幫你打造第一個專屬作品吧！