【案例教學分享】我用兩天開發了一個 AI 星盤 SAAS 系統：從零到一的 Vibe Coding 實戰指南

前言

身為一個對星座有興趣的開發者，有時候也喜歡聽聽唐老師的星盤解度，就會想，如果能夠有一集的內容完全是針對我的星盤來解析的，該有多好。隨著生成式 AI 的爆發，我總是會想：如果能將星盤與大語言模型（LLM）的深度分析能力結合，不就是最適合的一個星盤解析工具？不會只是固定的一宮怎麼樣二宮怎麼樣，而是能結合你的哪顆星在一宮、哪顆星在哪個星座，所以對你產生了怎麼樣的成果，這樣一個量身定做的解析報告。

於是，我給了自己一個挑戰：用兩天的週末時間，利用 AI 和 Cursor/Antigravity 獨立開發並上線一個完整的線上星盤 SaaS 系統——Aistrology。

在這兩天裡，我幾乎把敏捷開發與現代無伺服器（Serverless）架構的優勢發揮到了極限。但我必須說，過程絕對沒有你想像的困難，這是我自從開始引入AI開發之後不斷讚嘆的事！從技術框架的選擇、精確的星曆表計算、AI Prompt 如何下、到金流與自動化的串接，這篇文章將毫無保留地分享我如何一步步在 48 小時內將這個想法落地。不論你是想尋找下一個 Side Project 的靈感，還是想了解如何快速驗證 SaaS 想法，希望這份 10 步驟實戰指南能對你有所啟發！

步驟一：定義 MVP 產品核心與功能目標

在動手寫程式之前，我花了第一個小時和 ChatGPT 討論，並且明確定義產品的 MVP（最小可行性產品）核心功能。

思考目前市面上的痛點可能是：傳統占星網站給的資訊有限，並且是用資料庫形式也就是如果都是1宮有木星，就自行閱覽同樣的說法內容，而直接使用 AI 詢問 ChatGPT，當然也是大家現在越來越懂使用的工具，但其實他無法幫你計算星盤，因為他並沒有內建星曆數據的計算功能，所以除非（這是個小撇步ＸＤ，直接告訴大家了）你直接將一般占星網站的星盤貼過去給他，他也是可以幫你分析。但至於分析的角度、面向，就要看你多會問了。但我想要的是，一個直接知道要提供你所有你可能想要知道的分析內容有哪些的報告，大家都很懶，懶得自己複製貼上、懶得自己想要問什麼，直接告訴我不是最好嗎！

因此，Aistrology 的核心定位非常明確：「能夠精確產生生日的星盤，並且結合 AI 深度解析星盤與流年，自動產生分析報告。」 由於我同時有想要把這個專案發展成小型Saas的可能行，因此必須規劃付費流程。商業模式採用「免費生成基本星盤，付費解鎖萬字 AI 深度分析與流年報告」的 Freemium 模式，確保能快速積累用戶，同時驗證市場的付費意願。

步驟二：技術框架選擇——極速開發的黃金組合

定義好你要做的產品功能後，最重要的就是選擇開發框架，包括程式開發語言（前端、後端）、資料庫、部署平台、程式語言框架、甚至是你的css UI框架。

使用框架的好處是，幫你省下許多時間，他們都是已經花了大量時間開發出開發者在使用時會同時需要的程式內容，但有些會有相容、或慣用的問題。

因此，最好的方式就是詢問ChatGPT或是Gemini ，告訴他你想要開發的產品功能之後。提出例如

請提供這個專案建議的技術框架選項，我希望優先考慮簡潔/省成本/省時（可自行替換），並且幫我分析優缺點

對我來說已經大概知道自己的目的，要在兩天之內搞定前端、後端、資料庫、AI 串接和金流，技術框架的選擇盡量簡單、省事，所以我可以很快的選擇了以下我近期開發專案很喜歡的黃金組合：

前端框架：Next.js 14 。Next.js 的 React Server Components (RSC) 非常適合用來做 SEO 優化，而 API Routes 則能讓我們直接在同一個專案裡寫後端 API，省去維護獨立後端伺服器的麻煩。
樣式與 UI：Tailwind CSS 搭配 Shadcn/ui。這能讓我用極快的速度搭建出具備現代感。
後端與資料庫：Supabase。Supabase 提供了強大的 PostgreSQL 資料庫、雲端部署好的註冊即用優勢、和 Vercel 可以很友善的整合，可以讓我們省去了大半後端安全機制的開發時間。

步驟三：資料庫架構設計與 Supabase 整合

資料庫設計原則在MVP上一向都是簡潔且具備擴充性就沒錯。在 Supabase 中，我設計了四張核心資料表：users（使用者基本資料）、birth_profiles（儲存使用者的出生時間與出生地經緯度）、reports（儲存生成的星盤數據與 AI 報告內容）、以及 orders（訂單與付款狀態）。

這個部分老實說，現在也不太需要從零自己設計了，大致也是詢問 AI 請他先規劃一個版本讓你確認，如果你覺得有問題的地方就可以提出來跟他討論。例如你有可能想要讓 report 跟 orders 結合，像是一個order就一定包含一個report 是一對一的關係，又或者你覺得，有可能一張訂單有可能在某個版本生成的報告有問題，因此有必要重新生成，變成一對多的關係。這些你就需要一邊討論一邊思考，哪一種情境更像是你想要提供給User的。

如果你都沒有太多概念，大可以直接先接受他給的版本，或是詢問

我想要先以最簡易的方式設計，那這個設計有什麼缺點，或需要考慮的地方？

步驟四：規劃技術Library和主要邏輯

對我來說這個步驟最有趣也最具挑戰性，通常我會和步驟2~3一起和 ChatGPT 討論，並且同時詢問他

這個專案中，技術最複雜的是哪一部分？

對於現在這個專案案例上來說，首先讓使用者輸入生日和地點之後，我們必須要先產生一個準確的星盤資料，也就是出生當下各種行星位置的精確度數，這對於後續分析是唯一基準。之後就可以將這些資料一起交給 AI API，利用LLM來去針對各個行星、宮位、相位等資料做像是性格、特質等分析產出。

在討論之後，AI 推薦我的是傳統的 Swiss Ephemeris ，我在討論之下認識到我需要一個星曆及天文計算相關的 library來協助我計算日期＋時區產生所有行星位置，而 LLM 的 API 我想要採用 Gemini ，因此我可以掌握這個專案需要的有

星曆 Library
計算後產生出的星盤圖表（也會需要協助產生圖表chart）
同時初步的免費分析和付費購買的完整報告需要串接AI API(Gemini API)
初步產生星盤和分析後，為了不想要重複浪費 AI 資源，我請他幫我設計 local storage 機制來做一個暫存
因為想要銷售分析報告，一定需要購物車功能和金流串接（這邊我選擇常用的統一金流）
訂單和詳細的報告、使用者資訊我都設計存入 Supabase

步驟五：打造好看的網頁介面 UI/UX

接著要開始來產生真實的 UI 介面了，這部分取決於你對設計、風格的想法和要求程度。你可以直接讓 AI 幫你設計、也可以詳細要求他所有風格、色調、元件的樣式。

對我來說就是請他幫我設計「神秘感」與「專業感」的風格，產出之後針對不太滿意的地方調整了一下。色調大致選擇暗色、有一點霓虹感的主題，搭配半透明的玻璃擬態卡片。倒是風格library 直接指定了要使用 Tailwind CSS ，這是現代很常用的 css 框架，以及指定了 shadcn/ui 樣式元件Library，這是我覺得好看又具有現代感的現成元件組合。

除了整體網頁的樣式之外，有個地方的UI重點是星盤的產出，這邊我請 AI 想辦法設計出一個好看，而且能同時顯示1~12宮、標示行星、和標示出各個星座的綜合星盤。

他幫我規劃的方式是利用 SVG 搭配動態計算，手繪出一個精美的動態互動星盤。當行星度數被計算出來後，SVG 會動態繪製出黃道圓盤、十二星座的扇區分配、各個行星在星盤上的精準坐標點。這部分如果真的要用以前的開發方式，會是一個很大的工程，所以你就知道我有多享受和AI一起開發。

步驟六：初步的星盤產出和 AI 占星分析與 Prompt 工程

好，通常在這一步，步驟五跟六會是一起的，我就是直接請 AI 開始幫我實作首頁以及第二頁也就是星盤頁，這一頁會包含星盤以及初步解析。

這邊，順利的話，你會直接看到兩個頁面以及可操做的表單和功能。但我在這邊就遇到一個狀況，就是 AI 試著使用 Swiss Ephemeris（瑞士星曆表）時，發生了一些編譯問題，而產生不相容的狀況。所以中間換了幾套不同的library 包括 WebAssembly、astronomy-engine等等，有時是本地測試可以但是部署到雲端時因環境不相容，有時是測試出來的星盤結果不符合我想要的準確度而作罷，前後試了幾組最後，使用了將官方標準 C 語言瑞士星曆完整編譯為 WebAssembly 的 sweph-wasm 成功順利的達成我要的結果，除了可以順利通過編譯並部署到 Vercel 上去，也成功達成我要的行星位置精準度。

至於我怎麼測試精準度呢，就是找一個我覺得目前市面上我最常使用認可度較高的一個網站，用他計算出的位置度數來驗證我們測出來的度數。而這件事情你也可以請 AI 幫你依照這個驗證結果來反推出正確的計算過程。

有了精確的天文坐標後，下一步就是發揮 AI 的強大分析能力。

一般來說要請 AI 生成內容，大家應該很熟悉，我們必須要設計所謂的 Prompt 提示詞，讓我們能夠得到更符合的結果。所以不能只是把經緯度丟給 AI，但這部分同樣的可以請 AI 也就是Antigravity 或是 Cursor直接幫我們設計。但記得在他設計一版之後，你一定要針對分析結果再次審核或是務必進行 Code review 再次檢查他設計的 Prompt 內容。

這邊簡單說明一下，在呼叫 LLM 的 API 時，並不會直接把星曆library 算出來的所有資料直接丟給AI，而是會先在後端將計算好的天體數據「預翻譯」為占星學語言，或是想成重要的摘要，通常會包在一個json裡面，例如：{行星: "月亮", 星座: "天蠍座", 宮位: "第八宮", 相位: ["與金星呈120度", "與土星呈90度"]}。接著，Prompt 會嚴格限制 AI 的輸出結構，要求它以你想要的占星師的口吻，分章節（如性格本質、情感模式、職業天賦、流年運勢）輸出 Markdown 格式的解析報告，並且嚴格要求他不能自行腦補或亂寫避免幻象的情形。

步驟七：建立流暢的付費牆與金流串接

在我的計畫中，這是一個可以收費的 SaaS 系統，因此收費機制是必不可少的。我採用我自己常用的台灣統一金流服務。在告知AI要串接這個金流時，你需要想一下你希望的購物流程步驟有幾步奏，對我來說也是越少越好。所以我設定了

在免費的分析下方加上加購的產品，例如年度運勢報告、愛情分析報告等
點選購買之後就會進入一個購物車同時也是結帳頁面
接著點選付款就會進入金流公司的付款頁
最後回到我們的購買成功頁面。

這些流程如果你也不熟悉，你也大可以跟 AI 直接說以下摘要即可。

我想要在免費分析下方點選要購買的報告類型，直接進入購買頁面，我需要記錄使用者的Email, 姓名（這些你可以自己更換）。並且幫我串接綠界/藍新/統一金流，接著跳回付款成功頁。

至於這邊金流公司會怎麼將更新的付款狀態告知我們的系統呢，一般來說他會用兩種方式，一種是隨著頁面從金流公司頁面回到我們網站時，夾帶的參數資料，另一個就是從後端，金流公司會用背景通知的方式，將付款狀態更新到我們指定給他的某的api route。

這部分我盡量簡化技術的細節，你只要記得要求 AI 以下方式，就可以避免在本機測試無法使用後端通知而得不到即時資訊的問題。實際需求你可以依照你的實際狀況決定。

我想要同時記錄從金流公司返回我們網站時夾帶的post資訊，用來更新我們的付款狀態。

一旦使用者付款成功，金流公司會立刻通知我們的系統。此時，系統會自動在資料庫中將該筆報告的狀態標記為 paid，觸發後端的 AI 大模型開始進行深度計算與報告生成，並在進入付款成功頁面時顯示『查看星盤分析報告』按鈕，讓使用者可以直接點擊查看他的專屬報告。

步驟八：自動化 Email通知與其他行銷追蹤

除了可以在付款成功頁中看到報告連結按鈕，我也希望能夠發送完成的報告給使用者，因此我開始串接Email服務。我選擇了 Resend 搭配 React Email，這讓我可以用寫 React 組件的方式，快速設計出極具質感的電子郵件模版。

至於這邊要怎麼串接呢，你一樣可以要求AI 幫你

在付費報告分析完成時，串接 Resend 服務，寄送通知信件給使用者。

當使用者註冊或付費成功時，Resend 會自動發送一封設計精美的報告完成信。此外，現在任何的雲端服務或是SAAS 服務都應該要串接基本的使用行為追蹤碼來分析你的使用者使用行為，因此我也請 Gemini 幫我快速的串接了 Google Analytics 4 (GA4)，從輸入資料、觀看免費星盤、到點擊付費按鈕的每一個事件都加入事件追蹤碼。

步驟九：快速部署到 Vercel 上線

當網站功能差不多完成後，接下來就是把專案正式部署上線。因為我這次使用的是 Next.js，所以我直接選擇了 Vercel。它幾乎是目前 Next.js 專案最簡單的部署方式。流程其實非常簡單：

首先先把專案 push 到 GitHub。接著登入 Vercel，直接匯入 GitHub Repo。Vercel 會自動偵測這是一個 Next.js 專案，幫你完成 build 與部署設定。

之後只需要補上環境變數，像是：

Supabase API Key
Gemini API Key
金流金鑰
網站網址等設定

重新部署之後，網站就能正式上線。

而且之後每次 push 新版本到 GitHub，Vercel 都會自動重新部署，不需要自己手動更新伺服器。這也是我現在很喜歡 Serverless 開發流程的原因。你可以把更多時間放在產品本身，而不是花很多時間維護主機環境。

步驟十：網站正式上線

正式上線包含串接正式的網域，我就直接在Vercel上串接了我原有的網址 doris-school.com 只是接上了 aistrology這個子網域 subdomain。有了 aistrology.doris-school.com 我就可以用來在社群網路上發布、放到廣告中或是分享給朋友。

當然，廣告投放、行銷又是另一門學問了。我這裡就先介紹到這。

結語：Indie Hacker 的實踐啟示

回顧這個開發的兩天，老實說實際開發時間也才幾個小時，比較多的是來回使用測試，並優化更好的使用體驗的過程。但這樣的開發時間依然非常極速，我深刻體會到：在今天這個 AI 工具與無伺服器架構無比成熟的時代，「從想法到落地」的距離已經被縮短到了極限。 兩天開發一個完整的 SaaS 並不是天方夜譚，關鍵在於：

聚焦 MVP：不做冗餘功能，只解決核心痛點。
善用現成服務：Auth 交給 Supabase，部署交給Vercel，郵件交給 Resend，不要重複造輪子。
數據驅動：儘早上線，讓真實的用戶數據來指導你的下一個功能。
善用 AI : 好好利用 Cursor, Antigravity, Codex等AI開發工具，所以問題都在開始前先仔細詢問優缺點和建議

希望這篇文章能點燃你動手實作的熱情。如果你也有一個藏在筆記本深處的想法，別再猶豫，挑選一個週末，真的動手把它做出來吧！也許你的下一個 SaaS 奇蹟，就在下一個 48 小時誕生。

也希望你能與我們分享。

如果你很想知道系統開發中的更多細節，包含完整實作的操作畫面和流程。

像是：

怎麼和 AI 討論產品架構
怎麼拆解功能流程
怎麼讓 Cursor 幫你真正參與開發
怎麼快速完成前端、資料庫、登入、金流與部署
遇到程式出錯error, build error怎麼辦

歡迎來上我這一堂非常精實的 8 小時 Vibe Coding 系統實戰課程，裡面會帶你從頭到尾完成一個可以立即上線的購物網站。

這不是傳統那種從語法開始教起的程式課，而是更偏向：「如何利用 AI，真正把產品做出來。」

即使你不是本科系、不是專業工程師，現在其實也很有機會把自己的想法快速落地。

因為我認為，未來最重要的能力，可能已經不只是「會不會寫程式」。

而是：

你能不能把想法轉化成產品。
能不能善用 AI 幫你放大自己的執行力。