跳轉到主要內容

​
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 分享給世界。