AI 原生开放教材

外观

VibeFast 文档官方文档·英文原文 ↗原件 ↓仓库 ↗

實戰案例：用 vibefast.app 做一個 SaaS 產品 ​

English · 繁中 · Español · 日本語 · Português (BR)

作者： Danko Peng（@dankopeng）
更新： 2026 年 3 月
閱讀時間： 約 10 分鐘

假設：你買了 vibefast.app，想做一個 SaaS ​

這篇不是介紹 vibefast.app 有什麼功能——那在 quickstart 文件裡都有。

這篇是展示一個真實的流程：從有一個 SaaS 想法，到用 vibefast.app 把它跑起來，整個過程是什麼樣子。

用的例子是：一個幫 solopreneur 追蹤客戶發票的 SaaS——InvoiceTrack。功能很簡單：建立發票、記錄付款狀態、到期自動提醒。

第一步：clone 之後先跑起來 ​

買了 vibefast.app 之後，你會拿到 private repo 的 collaborator 邀請。接受邀請，clone 下來：

bash
git clone https://github.com/vibefast-app/vibefast.git invoicetrack
cd invoicetrack
npm install

按照 quickstart 文件跑 setup，幾分鐘後你有一個完整跑起來的 app，包含登入、付款流程、admin 後台——但都是 vibefast.app 的預設內容。

在這個基礎上開始改，比從零開始快十倍。

第二步：寫需求分析書 ​

在動任何 code 之前，先讓 AI 幫你整理需求（上一篇工作計劃篇有說過這個流程）：

我想用 vibefast.app 做一個幫 solopreneur 管理發票的 SaaS，
叫 InvoiceTrack。

核心功能（MVP）：
1. 用戶可以建立客戶資料（公司名、聯絡人、email）
2. 可以對客戶建立發票（項目、金額、到期日）
3. 記錄發票狀態（草稿、已發送、已付款、逾期）
4. 到期前 3 天自動發提醒 email
5. Dashboard 顯示未收款總額

技術基礎：vibefast.app（已有 Auth、Stripe、Resend 整合）
這個版本不做：發票 PDF 匯出、多幣別、子帳號

第三步：設計資料庫結構 ​

需求清楚之後，讓 AI 設計資料表：

先不要動手。

基於這個需求，幫我設計 D1 的資料表結構：
- clients（客戶）
- invoices（發票）
- invoice_items（發票項目）

每個資料表需要哪些欄位？表之間的關係是什麼？

AI 會給你一份 schema，你逐條確認，不清楚的問清楚，不喜歡的改掉，滿意之後再請 AI 生成 SQL 建立資料表。

第四步：一個功能一個功能做 ​

確認了資料結構，開始按 Layer 1 → Layer 2 → Layer 3 的順序做：

Layer 1 — 地基

□ 建立 clients、invoices、invoice_items 資料表
□ 確認 vibefast.app 的 auth 可以保護所有新的路由

Layer 2 — 核心功能

□ 客戶管理（新增、編輯、列表）
□ 發票建立（選客戶、加項目、設到期日）
□ 發票狀態更新
□ Dashboard 顯示未收款總額
□ 到期提醒 email（用 Cron Trigger 定時跑）

Layer 3 — 完善

□ 發票頁面設計優化
□ Email 樣板美化
□ 搜尋和篩選功能

每做一個功能，都是「先討論 → Plan 模式確認 → 實作 → 本地測試 → commit」的循環。

第五步：修改品牌 ​

vibefast.app 的預設 UI 是你的起點，不是終點。改成 InvoiceTrack 的品牌：

告訴 AI：

幫我把 vibefast.app 預設的品牌換成 InvoiceTrack。
包含：
- 網站標題和 meta title
- Logo 文字（先用文字，之後再換圖片）
- 主色調從橙色改成藍色（blue-600）
- 首頁的 hero 文字

品牌修改通常一個小時內搞定。

第六步：設定 Stripe 收費 ​

InvoiceTrack 的定價：每月 $9，最多管理 50 張發票。

vibefast.app 已經整合了 Stripe，你只需要：

  1. 在 Stripe Dashboard 建立一個 $9/月的訂閱商品
  2. 把 Stripe Price ID 更新到環境變數
  3. 告訴 AI「幫我修改訂閱邏輯，讓未付費用戶最多只能建立 3 張發票，引導他們升級」

付款流程本身不需要重寫，vibefast.app 的 Stripe 整合直接可用。

從想法到第一個用戶：時間表 ​

這個案例從 clone 到有第一個付費用戶，實際用了多久？

第 1 天：clone、setup、熟悉專案結構
第 2-3 天：資料庫設計、Layer 1 地基
第 4-7 天：Layer 2 核心功能
第 8-9 天：品牌修改、Stripe 設定
第 10 天：測試、修 bug、部署
第 11 天：上線，開始推廣

十一天從零到上線。不是因為我很厲害，而是因為 vibefast.app 把 auth、付款、部署這些最花時間的事都做好了，讓我可以把所有精力放在 InvoiceTrack 的核心功能上。

關鍵心得 ​

不要一次做太多。 發票 PDF 匯出、多幣別支援——這些都很好，但都不是第一版需要的。先做能解決核心問題的最小版本，上線，有用戶回饋之後再迭代。

auth 和付款是最難做的部分。 如果沒有 vibefast.app，光是把這兩個做好可能要兩三週。有了模板，這兩個直接跳過，直接做產品核心。

每天 commit。 每天結束工作前 commit 一次，哪怕只是做了一小部分。這讓你有回頭的餘地，也讓你清楚每天的進度。

Danko Peng
X · YouTube · Threads

👉 回到教程首頁

想直接上手完整的 Cloudflare 全棧模板？
👉 vibefast.app — 早鳥 $99，2026 年 8 月 1 日漲至 $199。