> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 建立旅遊規劃網頁應用程式

> 逐步示範如何使用 superun 建立一個由 AI 驅動的旅遊規劃 Web App.

## 1. 建立專案基礎

每個 superun 專案的基礎都是一段清楚的提示.以下我們會建立一個由 AI 驅動的旅遊規劃工具.

**範例提示**

> 建立一個 AI 旅遊規劃 Web App,具備以下功能:\
> • 包含首頁,行程儀表板,以及行程細節頁.\
> • 可輸入目的地,日期,預算與旅遊偏好.\
> • AI 產生的行程建議,包含飯店,活動與餐廳推薦.\
> • 使用者帳號與已儲存行程,後端由 Supabase 支援.\
> • 乾淨,支援桌機與手機的響應式介面.

當 superun 產生出初版專案後:

* 檢查導覽流程（首頁 → 儀表板 → 行程細節）.
* 確認每個頁面大致符合你在提示中的意圖.
* 如果有區塊缺少,語氣不對,可以回頭微調提示.

> ℹ️ **小技巧**\
> 在提示中明確說明要先從 UI 開始.越早把導覽結構,頁面類型與目標使用者講清楚,superun 產生的結果就越接近你想要的產品.

***

## 2. 精煉問題:把想法變成產品藍圖

送出初始提示後,superun 會問你一小串追問問題,\
用來把你的想法轉成更精確的產品藍圖.

你可能會看到像這樣的問題:

* **有哪些產品的體驗是你想參考的?**\
  例如:
  * Linear（乾淨,快速的儀表板）
  * Notion（直覺,結構清楚的工作空間）
  * Airbnb（視覺友善的訂房流程）

* **你的產品在市場上的獨特之處是什麼?**\
  可能的選項:
  * AI 驅動的規劃或推薦
  * 即時監控或提醒
  * 完整的分析與報表體驗
  * 與使用者既有工具的深度整合

* **這個初版（MVP）應該包含哪些功能?**\
  對 AI 旅遊規劃工具來說,你可以選擇:
  * 儀表板 + 行程列表 + 分析
  * 儀表板 + 多行程總覽 + 篩選器
  * 儀表板 + 協作工具 + 通知

你的回答會影響:

* UI 的語氣與風格
* superun 要幫你生成的核心頁面與模組
* 會建立哪些資料模型與後端結構
* 產品中哪些地方會使用 AI 與自動化

> ℹ️ **為什麼這很重要**\
> 把這一步當成一次快速的產品訪談.回答得越具體,誠實,superun 的輸出就越貼近你心中的產品.

***

## 3. 使用設計選項（Design Options）選擇方向

在你決定最終版面之前,superun 會先幫你探索多種視覺方向.

完成提示與精煉問題後:

1. superun 會為你的 App 產生 **四個設計選項**.
2. 每個選項都會有 **預覽圖片**,呈現整體版面與風格.
3. 打開每張預覽,比較字體,留白,層級與資訊佈局.
4. **選擇一個分支** 作為後續的主要設計方向.
5. 若之後更新了提示,也可以重新產生新的設計選項.

你可以利用不同分支測試同一個產品的不同氣氛:

* 極簡,以生產力為主的介面
* 親切,偏消費者風格的介面
* 大膽,強調行銷的介面
* 精簡,以儀表板為主的介面

> ℹ️ **小技巧**\
> 在探索不同分支時,盡量保持提示內容大致相同,這樣你比較的是「視覺與版面」,而不是完全不同的一組功能.

***

## 4. 設計與編輯介面（Editable Design 與 Boxify）

superun 採用循序漸進的設計流程,有點像蓋房子.

**先搭好骨架**

* superun 會先鋪好主結構:
  * 首頁 Hero 區塊,價值主張,行動呼籲（CTA）
  * 行程搜尋與篩選
  * 已儲存行程的儀表板
  * 行程細節檢視頁
  * 帳號或設定頁

**再加上第一層細節**

* superun 會填入基本元件:
  * 卡片,按鈕,表單,導覽列
  * 行程,目的地,偏好的假資料
  * 一致的留白與版面規則

**最後微調細節**

* 調整字體,顏色,間距與圖片.
* 修改文案,讓語氣符合你的品牌（例如「旅遊教練」vs「商務行程管理」）.

當你準備好微調特定區塊時,可以切換到 **Editable Design**:

* 頁面會在 superun 內變成可互動的畫布.
* 你可以點選標題,段落,區塊與卡片,直接編輯內容或結構.

接著使用 **Boxify** 進行精準的 AI 編修:

1. 在想要修改的區域畫出一個框（例如 Hero 區,行程卡片網格）.
2. 輸入提示,例如:
   * 「把這個 Hero 改成更高級,旅遊社風格.」
   * 「把這些卡片改成不同預算的 3 天行程範例.」
3. superun 只會更新框選範圍,其餘區塊保持不變.

> ℹ️ **最佳實務**\
> 把 Editable Design + Boxify 當成「精修工具」,一次只調一個區塊,而不是每次都重寫整段提示.

***

## 5. 功能清單（Feature List）

在背景中,superun 會讀取你的提示與精煉問題的回答,在 **建構（Build）** 裡產生一份針對這個 App 的 **功能清單**.

以 AI 旅遊規劃工具為例,功能清單可能包含:

* ✅ 即時行程搜尋與篩選
* ✅ AI 產生的行程建議（飯店,活動,餐廳）
* ✅ 已儲存行程與最愛清單
* ✅ 使用者登入與個人檔案
* ✅ 行程分析（預算分配,時間配置等）
* ✅ 提醒通知或 Email Hooks
* ✅ 未來串接訂房或行事曆服務的整合掛鉤

superun 會根據這份清單:

* 建立對應的 **UI 模組**（行程卡片,時間軸,分析區塊）.
* 定義初始 **資料庫結構**（使用者,行程,目的地,AI 建議…等資料表）.
* 配置基本 **後端 API** 與服務綁定.
* 決定 **AI 呼叫** 的位置與結果如何呈現.

> ℹ️ **小技巧**\
> 如果覺得功能清單太重或太輕,可以直接跟 superun 說:\
> 「做一個只包含行程搜尋 + AI 行程 + 儲存行程的 MVP 就好」,\
> 或「幫我加上付費方案,團隊工作空間與協作功能,做成 Pro 版」.

***

## 6. 使用 Supabase 建立後端與登入

當 UI 與功能清單都差不多時,就可以連接後端了.

1. 建立 **Supabase** 帳號並開一個新專案.
2. 在 superun 中使用 **Supabase 整合** 連結你的專案.
3. superun 會根據功能清單幫你產生 SQL 資料表,例如:
   * `profiles`:儲存使用者資訊與偏好設定
   * `trips`:與每位使用者綁定的行程資料
   * 選用的 `destinations`,`ai_suggestions`,`favorites` 等表

superun 也可以幫你設定基本的認證流程:

* 註冊,登入,登出
* 重設密碼
* 只允許登入使用者存取儀表板與行程頁面

> ℹ️ **安全提示**\
> 在 Supabase 中啟用資料列層級安全（Row-Level Security, RLS）,確保使用者只能看到自己的行程.superun 可以產生合理的預設策略,之後你也可以再細調.

***

## 7. 使用 superun AI 加入智能規劃

這個 App 的核心價值在於 AI 產生的旅遊行程.

加入 AI 功能的步驟:

1. 在帳號後台取得 **superun API 金鑰**.
2. 將金鑰設定為專案環境變數,或透過 AI 設定面板綁定.
3. superun 會把這個金鑰掛到功能清單中定義好的 AI 流程上.

常見的 AI 流程:

* **建立行程**
  * 輸入:目的地,日期,興趣,預算.
  * 輸出:含天數,時間,活動與備註的結構化行程.

* **優化既有行程**
  * 例如:
    * 「把這趟旅程改成更適合親子.」
    * 「強調美食體驗.」
    * 「縮短成 3 天週末行程.」

* **摘要與分享**
  * 產生適合 Email,訊息或內部備忘錄使用的短版摘要.

為了讓結果更穩定,可以要求使用結構化回傳:

* 讓 superun 以 JSON Schema 呼叫模型,回傳包含 `day`,`time`,`location`,`description` 等欄位的資料.
* superun 接著可以把這些資料直接寫入 Supabase 資料表.

> ℹ️ **測試建議**\
> 先從簡單的情境開始,例如鄰近城市的 2 天行程.確認結構與欄位 OK 之後,再擴展到更長天數與複雜需求.

***

## 8. 使用 Stripe 建立付費方案

如果你想讓旅遊規劃工具變現,可以加上訂閱或付費級別.

1. 建立 **Stripe** 帳號.
2. 建立一個產品,例如:「superun Travel Planner Pro – US\$12/月」.
3. 在 superun 中設定 Stripe 凭證與價格 ID.
4. 把 App 中的升級區塊或定價頁面接到 Stripe Checkout.
5. 將特定功能（例如不限次數的 AI 行程,團隊空間）只開放給付費使用者.

你也可以啟用 Stripe 內建的使用者工具:

* 訂閱管理用的 Customer Portal
* 收據與發票 Email
* 測試模式,用來安全測試交易流程

> ℹ️ **小技巧**\
> 先在 Stripe 的測試模式下,使用官方提供的測試卡號反覆驗證流程,再切換到正式環境.

***

## 9. 測試與除錯

開發過程中出錯是正常的,superun 的目標是讓你更快排除問題.

* 當建置失敗時,可以使用 **「Auto Fix」**,讓 superun 讀取錯誤並提供導引修復.
* 後端若有錯誤,檢查 **Supabase 日誌**,確認資料表,策略與環境變數與 superun 設定一致.
* 若是部署問題,查看主機服務（例如 Netlify,Vercel）的日誌,把關鍵錯誤訊息貼回 superun 要求協助.

你也可以:

* 端到端測試核心流程:註冊 → 建立行程 → 產生行程 → 儲存與編輯.
* 請同事或朋友實際操作,回報任何不順手或不清楚的步驟.

> ℹ️ **回復建議**\
> 如果某次修改導致 App 大壞掉,可以回到較穩定的舊版本.利用 superun 的版本歷史與還原功能,在安全的前提下持續迭代.

***

## 10. 部署你的應用程式

當你對體驗感到滿意,就可以把 App 推向真實使用者.

你有兩條主要路徑:

1. **直接由 superun 部署**
   * 使用 superun 的部署選項,掛在預設網域上.
   * 適合快速測試,展示或內部評估.

2. **透過主機服務部署（例如 Netlify 或 Vercel）**
   * 將 GitHub 儲存庫連接到主機服務.
   * 設定建置指令與環境變數（Supabase 金鑰,AI 金鑰,Stripe 金鑰）.
   * 設定自訂網域並更新 DNS.

正式公開前,請再檢查:

* Favicon 與 App 名稱.
* Meta 標籤與 Open Graph（OG）圖片,確保分享連結看起來專業.
* 若要收費或處理個人資料,確認隱私權,條款與聯絡方式.

> ℹ️ **上線檢查清單**\
> 至少要確定有一個完整流程是順暢的:從進入首頁,建立帳號,產生行程,用 AI 微調,再把行程儲存下來.當這個流程感覺自然流暢,你就可以放心把這個由 superun 驅動的旅遊規劃 App 分享給世界.