# Lovable UI 教學：從設計到前端實作

> 本篇教學將教你如何使用 [Lovable](https://lovable.dev/) 設計出高質感的 UI，並將其轉換為可執行的前端程式碼（HTML / React），搭配 GitHub、Vercel 等工具，讓設計快速上線展示。

## 什麼是 Lovable

**Lovable** 是一款由 AI 驅動的 UI 設計平台，特色如下：
- 不需 Figma、美術背景，就能輕鬆設計頁面。
- 只要輸入需求指令，AI 就能幫你產出符合風格的 UI
<br>（推薦可搭配 ChatGPT 輔助撰寫）。
- 自動轉出 HTML、React 等前端程式碼，馬上就可使用。

## 使用流程簡介

### ① 建立新專案

1. 註冊 / 登入 [Lovable](https://lovable.dev/)
2. 點選「New Project」
3. 輸入你想製作的網站類型或功能（例如：「Impact Copilot網站」）
4. AI 會生成一組介面草圖，確認沒問題後即可進行編輯或導出。

---

### ② 編輯與微調

- 產出草圖後點選元件後可以修改文字、顏色、尺寸等。
- 可加入圖片、按鈕、表單、導覽列等常見 UI 元素。
- 若想維持設計一致性，建議可以參考 Lovable 提供的風格設定或範例專案。

---

### ③ 指令輸入教學

在使用 Lovable 生成 UI 前，我們需要透過輸入「指令」來告訴 AI 要產出什麼樣的畫面或功能。這些指令的輸入位置在畫面左側。


**請將指令輸入在左側對話欄位：**

- 左側的輸入區是 Lovable 的 AI 操作介面。
- 你可以輸入想要產生的畫面說明，例如：

Create a homepage for an ESG reporting platform with a hero section, CTA button, and three feature blocks.

- 建議使用英文，中文也可以 (推薦可以透過ChatGPT產出指令 會更完整~~)

---

### ④ 路由選單導覽

當我們將 Lovable 上建立好 UI 後，可以透過右上角的下拉選單切換不同頁面。

**什麼是路由選單？**

這是「開發者導覽工具」，可快速切換網站中的路由（routes），例如：

- `/`：首頁
- `/experience-sharing`：經驗分享
- `/q-and-a`：常見問答
- `/admin`：後台管理（需登入）
- `/account-settings`：帳號設定
- `/search`：搜尋頁面
- `/dashboard`：個人儀表板
- `/company-dashboard`：公司儀表板
- `/login-redirect`：登入後跳轉頁

---

### ⑤ 匯出程式碼

- 全部編輯完成後，點擊右上角「Export Code」
- 可選擇：
- **HTML + CSS**
- **React（使用 Vite 架構）**
- 點擊後即可下載完整專案，內含所有圖片與樣式，並匯入至 GitHub。

## *額外補充

### 版本回復教學

Lovable 會自動幫你紀錄每次修改，包括 AI 回覆、使用者操作、檔案上傳等。若需要**回復到某個舊版本**，可透過版本紀錄頁面操作。

<img src="https://hackmd.io/_uploads/HJmEvvfIlg.png" alt="螢幕擷取畫面" width="60%">

### 版本紀錄畫面說明

- 分類如下：
- **Bookmarked**：你標記的版本
- **Unpublished**：未發布版本
- **依時間分類**：所有操作紀錄依日期顯示

---

### 要如何回復到舊版本？

1. 找到想回復的紀錄行（例如 `Update index.html`）
2. 按下去後會有 `Restore` 按鈕，點選即可。
3. 畫面即會回復到當時的設計狀態，可方便 Demo，用完後再切換回來！
<br/>(重要的版本可以標記起來方便切換)