跳轉到主要內容

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