【Vibe Coding】免費版 Lovable 教學｜Open Lovable 使用指南：免付費 AI 克隆網站、React 網頁生成與修改全攻略

想試試 Lovable，卻還在猶豫要不要付費？現在有了 Open Lovable，等於直接解鎖「免費版 Lovable」！這款開源工具由 Firecrawl 團隊打造，支援 AI 一鍵克隆網站、即時修改 React 元件，還能自動安裝依賴並提供即時預覽。

只要輸入一句自然語言指令，你就能把一個網站快速轉換成 React 專案，甚至立刻進行修改。透過雲端沙箱（E2B）與 Firecrawl 抓取，Open Lovable 讓「網站克隆」與「即時編輯」不再只是工程師的專利。本文將帶你從安裝到實作完整體驗，並整理常見問題與踩坑筆記，幫助你快速掌握這款 免付費的 AI 網頁開發神器。

還不知道 Lovable 如何使用？參考以下教學文章：

【Vibe Coding 教學】用 Lovable 把你的 Prompt 變成完整可交付專案（附 GitHub＋自動部署）

你不是只能用 AI 寫一段 code，現在連整個專案都能幫你生好、上線還同步 GitHub！這篇示範如何用 Lovable，把一段 prompt 變成完整 App：自動生成 UI、README、GitHub 同步、還能一鍵發佈網站。適合交作業、交作品、交 side project，用想法直接交付成果。

AI郵報Vicky Tsai

Open Lovable 是什麼？

Open Lovable 可以被視為 AI 開發助手工具箱：

• 自然語言指令：你可以下達「新增按鈕」或「修改背景色」等需求，AI 就會自動完成程式修改。
• E2B 雲端沙箱：在隔離環境中執行 React 專案，不影響本地環境。
• Firecrawl 網站抓取：直接提供網址，系統能將網頁結構轉換成 React 元件。

對開發者來說，它是快速打造最小可行產品（Minimum Viable Product, MVP）的利器；對設計師、產品經理來說，這是降低門檻的捷徑，讓非工程人員也能「玩」網站

安裝與環境設定（Step-by-Step）

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～

Step 1｜Clone 專案並安裝依賴

打開終端機（Terminal）並且輸入：

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
npm install

Step 2｜建立 .env.local

複製 .env.example 為 .env.local，填入以下金鑰：

E2B_API_KEY=你的E2B金鑰
FIRECRAWL_API_KEY=你的Firecrawl金鑰

# 至少擇一
OPENAI_API_KEY=你的OpenAI金鑰
ANTHROPIC_API_KEY=你的Anthropic金鑰
GEMINI_API_KEY=你的Gemini金鑰
GROQ_API_KEY=你的Groq金鑰

• E2B 金鑰取得方式：https://e2b.dev

• Firecrawl金鑰取得方式：https://firecrawl.dev

Step 3｜啟動本機伺服器

npm run dev
# 預設 http://localhost:3000

Step 4｜克隆網站

1. 打開本機 UI，預設 http://localhost:3000
2. 輸入目標網站連結
3. 系統會自動：
   • 用 Firecrawl 抓結構
   • 在 E2B 沙箱生成程式碼
   • 安裝所需套件、重啟 Vite server
4. 頁面右側 iframe 即時預覽

Step 5｜導出程式碼

滿意後可要求系統打包 zip，或直接將程式碼推送至 Vercel / Netlify / Railway 等平台。

實作案例：從 URL 到 React 專案

假設你輸入一個行銷型 Landing Page 網址，Open Lovable 的流程大致如下：

1. 抓取：Firecrawl 擷取網站結構（HTML 標籤、樣式、文案）。
2. 轉譯：系統將其轉化為 React 元件（通常會有 Header.jsx、Footer.jsx、HeroSection.jsx 等）。
3. 微調：你可以直接下指令，例如：「把 CTA 按鈕改成圓角、加上漸層動畫」，AI 會自動找到相關檔案進行精準修改。
4. 即時預覽：變化立即呈現在 iframe 頁面。
5. 導出：最後把專案存成 zip，回到本地或雲端平台繼續擴充。

這個流程對於需要快速製作 MVP、活動頁面、設計稿驗證 的情境特別實用。

成功案例與踩坑筆記

Open Lovable 的「網站克隆」並非萬能，不同網站的複製體驗差異很大。以下整理常見情境與問題：

好複製的情境

• 靜態 Landing Page
  • 大多數企業行銷頁面、個人作品集網站，通常結構清晰、技術棧簡單。
  • Firecrawl 能夠完整抓取 HTML + CSS，轉換成 React 元件幾乎零問題。
• 文案導向型網站
  • 部落格文章、單頁展示型網站，因為內容以文字為主，轉換後僅需微調樣式即可。
• 基礎 UI 元件
  • Header、Footer、按鈕、卡片區塊，都能被精準生成，後續只需調整設計細節。

需要額外處理的情境

• 大量動態載入的網站
  • 例如 SPA（Single Page Application）、使用 heavy JavaScript 的站點。
  • Firecrawl 抓取時可能只拿到「空殼 HTML」，需要手動補充 API 資料來源。
• 登入後內容
  • 社群平台、會員系統頁面需要登入才能看到完整內容，Firecrawl 抓不到。
  • 解法：僅能複製公開區域，再用假資料或 mock API 補足。
• 設計過於複雜的前端框架
  • 如果網站用了專有 UI Framework（例如內嵌在 Webflow 或特殊 Canvas 技術），轉換後排版可能走樣。
• SEO 與動態資料
  • 克隆後的 React 頁面本身沒有原站 SEO 設定與動態內容，需要額外配置 Next.js SSR 或接資料 API。

常見問題（FAQ）

Q1：為什麼有些網站克隆後是空白頁？
A：通常是 SPA 動態載入問題。建議先嘗試克隆「公開靜態頁」，再自行補充 API 或 mock data。

Q2：我需要多少金鑰才能跑起來？
A：最少需要 E2B + Firecrawl，再搭配一個 LLM 金鑰（OpenAI、Anthropic、Gemini、Groq 任一即可）。

Q3：可以用來複製商業網站嗎？
A：技術上可以，但法律上需遵守原網站版權與授權規範。建議用於學習、原型製作、UI/UX 驗證。

Q4：克隆後程式碼可擴充嗎？
A：可以。輸出的專案結構是標準 React / Next.js，可自由加功能或接 API。

總結

Open Lovable 代表了一種 AI 驅動網頁開發的新方式：

• 透過自然語言，你可以瞬間生成並修改 React 專案；
• 透過網站克隆，你能在幾秒鐘內把靜態頁面「搬進」開發環境，成為你的起點；
• 雖然動態網站與登入系統仍有侷限，但作為 學習工具 與 MVP 快速驗證，它的潛力巨大。

對初學者來說，這是一個「可見即可學」的平台；對進階開發者，它則是一個強力的輔助工具，能把原型開發週期縮短到前所未有的程度。

想讓 AI 成為你團隊的一員？